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/
```

ss-component

NPX Install

Tags

SKILL.md Content

UI Component Generator

When NOT to use

Instructions