Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

ss-component (StyleSeed Component Generator)

Generates new React UI components that strictly follow StyleSeed's design-token, typography, and accessibility conventions.

Design & UIIntermediate★ 926⑂ 85AI score 7/10Last updated: Aug 26, 2026

What it does

  • Resolves the .styleseed registry first (project.json, artifacts/index.json, per-artifact bundle and manifest) instead of falling back to legacy global rules.
  • Reads design tokens from css/theme.css and css/recipes.css, plus components/ui/button.tsx as the reference pattern.
  • Enforces code conventions: function declarations, data-slot attribute, cn() for class merging, React.ComponentProps<> prop types, CVA for variants, semantic color tokens only (no inline hex).
  • Applies a typography scale (leading/tracking per display, heading, body, caption), logical properties (ms-*/me-*), and size-* shorthand.
  • Bakes in accessibility: 44x44 minimum touch target, aria-* passthrough, focus-visible:ring-2, prefers-reduced-motion handling.
  • Files primitives under src/components/ui/ and composed patterns under src/components/patterns/.

Who it's for

  • Frontend developers on a StyleSeed (or shadcn/ui-style Tailwind v4) codebase.
  • Design-system owners who want zero style/a11y drift when many people add components.
  • Teams that prefer enforcing token rules at generation time rather than in code review.

Examples

  1. /ss-component alert-banner "inline notice banner with a dismiss button" → src/components/ui/alert-banner.tsx with token colors, focus ring, and 44px touch target.
  2. /ss-component stat-card "card showing a metric value and delta" → component using ss-pattern-surface and the typography scale.
  3. Ask for a badge with variants → CVA-based variant structure with className override support.

Note: the skill explicitly excludes non-StyleSeed projects (no components/ui/, no Tailwind v4), editing existing components, and full-page scaffolding.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/bitjaru/styleseed/HEAD/engine/.claude/skills/ss-component/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the engine/.claude/skills/ss-component folder from the GitHub repo bitjaru/styleseed into my ~/.claude/skills/ss-component/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/bitjaru/styleseed.git && mkdir -p ~/.claude/skills && cp -r styleseed/engine/.claude/skills/ss-component ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/bitjaru/styleseed.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r styleseed/engine/.claude/skills/ss-component ~/.claude/skills/
  5. Start Claude Code inside your StyleSeed project (it expects .styleseed/ and a Tailwind v4 setup).
  6. Invoke it as /ss-component component-name "description" to generate the file.
  7. For team-wide use, copy it into the project's .claude/skills/ and commit it instead of your home directory.
View source on GitHub ↗License: MIT