Skill

/ss-component

Generate a new UI component following the StyleSeed design conventions

One skill from styleseed.

shell

$ npx -y skills add bitjaru/styleseed --skill ss-component --agent claude-code

Installs just this skill. Get the whole plugin for auto-invocation.

How it fires

How this skill gets triggered: by you, by Claude, or both.

Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/ss-component

Context preview

The summary Claude sees to decide when to auto-load this skill.

Generate a new UI component following the StyleSeed design conventions

Stats

Stars819

Forks73

LanguageTypeScript

LicenseMIT

Ships with styleseed

SKILL.md

ss-component.SKILL.md

---
name: ss-component
description: Generate a new UI component following the StyleSeed design conventions
argument-hint: "[component-name] [description]"
allowed-tools: Read, Write, Edit, Grep, Glob, Bash
---

# 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.md` for component conventions
   - Read `css/theme.css` for available design tokens
   - 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