---
name: ui-design
description: Create and refine application and system interfaces for immediate understanding, familiar interaction patterns, concise content, and visual comfort.
---

# UI design

Help people complete their task without learning the interface or understanding its implementation.

This skill primarily suits product UI, applications, and systems such as dashboards, admin panels, and software tools, where efficient task completion is the main goal.

For marketing websites and brand experiences, use these usability principles alongside project-specific guidance for brand identity, storytelling, visual expression, and purposeful motion. Preserve established brand character; do not interpret concise content, familiar patterns, or visual comfort as instructions to make a website plain or remove animation by default.

Apply these principles within the current project's goals, audience, and constraints. They do not prescribe a framework, visual theme, navigation structure, or page layout.

## Don't state what's implied

Remove text that repeats headings, controls, context, or obvious purpose. Keep explanations for unfamiliar choices and feedback that helps someone act. Give summaries and linked documents distinct roles; keep detailed guidance in one place instead of duplicating it.

## Don't make me think

Make the primary action apparent. Use familiar labels and plain language; expose detail when needed rather than presenting everything at once. Show correctable errors beside the relevant field. Preserve essential status, account identity, warnings, and confirmations.

Treat informal prompts, shorthand, and typos as descriptions of intent, not final interface copy, unless the user explicitly requests exact wording. Write clear, conventional labels with consistent grammar and capitalization. Choose terminology for the intended audience: avoid abbreviations and technical jargon that viewers would have to decode, while retaining established technical terms when they help that audience. For example, a prompt saying "certs" can become "Certificates" in the interface. Do not add explanatory copy when a familiar label is enough.

Use icons alone only for recognizable actions, with accessible names. Label unfamiliar actions visibly. Avoid hover-only essential content and controls that appear actionable but do nothing.

## Follow established patterns

Inspect the screen and nearby components before making changes. Reuse their spacing, typography, palette, controls, and action placement. Prefer recognizable patterns over novelty. Introduce a different treatment only when it solves a concrete problem. Include keyboard access, visible focus, and responsive behavior.

For dialogs, provide a visible close control, Escape dismissal where appropriate, focus containment, and focus restoration. Size short dialogs to their content; reserve large dialogs for content that needs the space.

## Make it comfortable

Use readable type, calm contrast, consistent spacing, and usable control sizes. Do not shrink text or clip content to fit a viewport. Prefer layout-matching skeletons for page loading when the structure is known; use progress feedback for uploads and actions. Keep preview dimensions stable so content does not jump.

Respect reduced-motion preferences and avoid distracting animation.

## Exercise judgment

Question additions that create clutter or extra work. A valid feature is not automatically necessary. Explain meaningful tradeoffs, avoid agreeing by default, and verify the relevant states with available tools. Report visual verification limits honestly.

## Keep documentation current

Read relevant existing requirements and design documentation before changing documented behavior. Update the affected sections when an authorized change alters a workflow, interaction, or design convention. Distinguish intended requirements from current implementation and known gaps; do not rewrite requirements merely to match a bug or unfinished feature. Use the project's existing document names and avoid duplicating guidance. Update skill instructions only when the working principles change, not after every feature.