ui-design_skill

Overview

This skill defines a contract-first static UI methodology using TypeScript interfaces, compound components, and Tailwind CSS. It prioritizes Server Components by default and provides patterns for building reusable, accessible component libraries. Use it to move from approved wireframes to a typed, composable UI implementation.

How this skill works

Start by defining TypeScript interfaces that represent the component contract. Implement each part as a Server Component and compose complex widgets using the compound component pattern (Root + subcomponents). Style with mobile-first Tailwind utilities and extend Radix, Shadcn, or other primitives where needed.

When to use it

• After wireframes are approved and layout is finalized
• When implementing new UI components or component libraries
• When you want strong type safety for component APIs
• When building Server Components by default and only opting into client behavior when needed
• When you need composable, testable, and accessible UI building blocks

Best practices

• Define and export TypeScript interfaces first; keep types separate from implementation
• Prefer Server Components unless you need event handlers, browser APIs, or React hooks
• Favor composition (compound components) over prop explosion
• Use discriminated unions and const assertions for variant typing
• Style mobile-first with Tailwind and reference design tokens not raw colors
• Ensure accessibility and export types/utilities to aid testing

Example use cases

• Create a Card compound component with CardHeader, CardTitle, CardContent, and CardFooter
• Implement a FeatureGrid that adapts from 1 to 3 columns across breakpoints
• Extend Shadcn Button into a LoadingButton that keeps types from the original component
• Wrap Radix Dialog primitives to create an accessible Modal component
• Design a chat UI using AI Elements primitives with typed message props