Skill987 repo starsupdated 6d ago

ss-component

The ss-component skill generates new UI components following StyleSeed design conventions, including proper TypeScript typing, Tailwind styling with semantic tokens, accessibility standards, and CVA variant support. Use this when building individual reusable components for a StyleSeed project that has a `components/ui/` directory and Tailwind v4, rather than for full pages or multi-component patterns.

View source Repository: styleseed

Install in Claude Code

Copy

git clone --depth 1 https://github.com/bitjaru/styleseed /tmp/ss-component && cp -r /tmp/ss-component/skills/ss-component ~/.claude/skills/ss-component

Then start a new Claude Code session; the skill loads automatically.

Definition

SKILL.md

# UI Component Generator
## Registry-first artifact boundary

When `.styleseed/project.json` and `.styleseed/artifacts/index.json` exist, resolve the requested artifact ID first, then read only `.styleseed/bundles/<artifact-id>.md` and `.styleseed/manifests/<artifact-id>.json`. Never fall back to the global legacy bundle for a registry project. Legacy projects may use `.styleseed/effective-rules.md` only when no registry exists.

## 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

1. 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

2. 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

3. 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)]`

4. 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)

5. 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

6. Export the component as a named export (not default)

7. Place the file in the appropriate directory:
   - Primitive/reusable → `src/components/ui/`
   - Composed pattern → `src/components/patterns/`