Ss Component Agent Skill

UI Component Generator

When NOT to use

• For full-page scaffolding → use /ss-page
• For composed multi-component patterns → use /ss-pattern
• For tweaking an existing component — just edit the file directly
• For non-StyleSeed projects (no components/ui/ directory or no Tailwind v4)

Generate a new component: $0

Description: $ARGUMENTS

Instructions

• First, read the compiled design method:
• Read .styleseed/effective-rules.md and .styleseed/manifest.json; resolve if stale
• Read css/theme.css for available design tokens
• Read css/recipes.css for morphology variables and helper classes
• Read components/ui/button.tsx as a reference pattern

• Follow these conventions strictly:
• Use function declaration (not const)
• Add data-slot="component-name" attribute
• Use cn() from @/components/ui/utils for all className merging
• Use React.ComponentProps<> for prop typing
• Always support className prop for overrides
• Use CVA (class-variance-authority) if the component has variants
• Use semantic color tokens (bg-card, text-foreground) — never inline hex

• Design token usage:
• Colors: text-foreground, bg-card, text-brand, text-muted-foreground, border-border
• Pattern surfaces: ss-pattern-surface; insets/controls/icons use the matching ss-* class
• Primitives use the project token scale; do not hardcode one radius or shadow personality
• Spacing follows one repeatable selected-recipe rhythm
• Motion: duration-[var(--duration-fast)], ease-[var(--ease-default)]

• Typography rules:
• Display (36-48px): leading-none tracking-[-0.02em]
• Heading (18-24px): leading-snug tracking-[-0.01em]
• Body (14-17px): leading-normal (default tracking)
• Caption uppercase (10-13px): tracking-[0.05em]
• Use size-* shorthand instead of w-* h-*
• Use ms-*/me-* instead of ml-*/mr-* (logical properties)

• Accessibility requirements:
• Minimum touch target: 44x44px (min-h-11 min-w-11)
• Support aria-* attributes passthrough
• Use focus-visible:ring-2 focus-visible:ring-ring for keyboard focus
• Respect prefers-reduced-motion for animations

• Export the component as a named export (not default)

• Place the file in the appropriate directory:
• Primitive/reusable → src/components/ui/
• Composed pattern → src/components/patterns/