Ss Component
- 225 installs
- 868 repo stars
- Updated August 3, 2026
- bitjaru/styleseed
ss-component is a Claude Code skill that generates a new UI component following StyleSeed design conventions.
About
ss-component is a StyleSeed skill that generates a new React UI component matching the design system's conventions. A developer uses it when building on a StyleSeed project to scaffold a primitive or pattern that follows the token, typography, and accessibility rules. It reads the theme and reference components first, then writes a component using function declarations, cn() class merging, CVA variants, and semantic color tokens.
- Generates a new UI component following StyleSeed conventions
- Enforces data-slot, cn() merging, CVA variants, and semantic tokens
- Bakes in 44x44px touch targets and reduced-motion support
Ss Component by the numbers
- 225 all-time installs (skills.sh)
- Ranked #905 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
ss-component capabilities & compatibility
- Capabilities
- component generator · design system scaffold · ui generation
- Use cases
- frontend · ui design
What ss-component says it does
Generate a new UI component following the StyleSeed design conventions
Use CVA (`class-variance-authority`) if the component has variants
Minimum touch target: 44x44px (`min-h-11 min-w-11`)
npx skills add https://github.com/bitjaru/styleseed --skill ss-componentAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 225 |
|---|---|
| repo stars | ★ 868 |
| Last updated | August 3, 2026 |
| Repository | bitjaru/styleseed ↗ |
What it does
Generate a new React UI component that follows StyleSeed tokens, typography, and a11y rules.
Who is it for?
Scaffolding a new React component that obeys StyleSeed tokens, typography, and accessibility rules
Skip if: Full-page scaffolding (use ss-page), composed patterns (use ss-pattern), or non-StyleSeed projects without Tailwind v4
When should I use this skill?
You need a new UI primitive or component on a StyleSeed project
What you get
A new React component file that follows StyleSeed conventions and semantic tokens
- A new React UI component file placed in components/ui or components/patterns
By the numbers
- Requires 44x44px minimum touch targets
Files
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
1. First, read the design system seed for context:
- Read
CLAUDE.mdfor component conventions - Read
css/theme.cssfor available design tokens - Read
components/ui/button.tsxas a reference pattern
2. Follow these conventions strictly:
- Use
functiondeclaration (notconst) - Add
data-slot="component-name"attribute - Use
cn()from@/components/ui/utilsfor all className merging - Use
React.ComponentProps<>for prop typing - Always support
classNameprop 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 - Shadows:
shadow-[var(--shadow-card)],shadow-[var(--shadow-elevated)] - Radius:
rounded-md,rounded-lg,rounded-2xl - Spacing: multiples of 6px (
p-1.5,p-3,p-6) - 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 ofw-* h-* - Use
ms-*/me-*instead ofml-*/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-ringfor keyboard focus - Respect
prefers-reduced-motionfor 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/
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kFAQ
What conventions does ss-component enforce?
Function declarations, a data-slot attribute, cn() for className merging, React.ComponentProps typing, CVA for variants, and semantic color tokens instead of inline hex.
Does it work outside StyleSeed projects?
No. It is not meant for projects without a components/ui directory or Tailwind v4.