ui-designer_skill

Overview

This skill designs user interfaces as a combination of information architecture, interaction patterns, and visual tone, then translates those decisions into implementable specs. It focuses on clear goals, component responsibilities, states, and tokens so engineers can implement without guesswork. Use it to turn product intent into precise screen and component blueprints.

How this skill works

I start by clarifying the screen goal, primary user, primary action, and edge cases. Then I lay out a prioritized information architecture, propose components with props and states, define tokens and style rules, and specify all edge states and next actions for implementation. The output is a practical spec that includes success criteria and steps for prototyping or handoff.

When to use it

• Designing a new screen or flow where goal and primary action must be clarified
• Creating or expanding a component or design system element
• Specifying visual hierarchy and spacing for consistent layouts
• Documenting loading, error, empty, and permission states for implementers
• Translating product requirements into actionable design specs

Best practices

• Start with a one-line success criterion for the screen and validate it with stakeholders
• Prioritize content: show primary action and data first, defer secondary items via progressive disclosure
• Componentize repeated patterns and expose clear props and states for each component
• Define tokens for color, spacing, and typography to avoid magic numbers
• Document all edge states (loading, empty, error, disabled, no-permission) explicitly

Example use cases

• Design a dashboard screen with prioritized widgets and drilldown interactions
• Specify a reusable list component with item props, selected/disabled/loading states
• Create a modal pattern with focus management, actions, and accessibility notes
• Draft a small design system subset: badges, buttons, and spacing tokens for implementation
• Turn product mockups into developer-ready specs including tokens and edge-state behavior