ux-ui-component_skill

Overview

This skill creates precise UI/UX specifications for interface components. It produces component descriptions, states, interactions, and variant definitions that designers and engineers can implement. The outputs are organized for documentation and handoff to development.

How this skill works

I analyze a component name, purpose, and context to generate a structured spec. The spec includes visual states, interaction rules, accessibility notes, and variants with usage guidance. Outputs are formatted for placement under docs/ui/components/ so they integrate with documentation pipelines.

When to use it

• Creating a new reusable UI component before implementation
• Documenting existing components to reduce implementation ambiguity
• Defining interaction and visual states for QA and testing
• Preparing handoff materials for frontend engineers and designers
• Standardizing component libraries across teams

Best practices

• Provide component intent and primary use cases up front
• Include example content, edge cases, and required props or tokens
• Specify accessible focus and keyboard behaviors explicitly
• Define clear visual states (default, hover, active, disabled, loading) and transition details
• Version specs when variants or behavior change to keep history traceable

Example use cases

• Button component spec with color variants, sizes, and disabled/loading behaviors
• Form input spec covering placeholder, validation states, and error messaging interactions
• Card component with media, title, description, and action variants for responsive breakpoints
• Navigation item spec including focus, hover, active states, and keyboard navigation patterns
• Toast/notification spec describing timing, interactions, and stacking behavior