StyleSeed ships 14 slash commands (skills) for Claude Code and Cursor. They cover the whole UI workflow: set up a project, generate UI, apply motion, then review and audit it.

Heads up: older docs referred to /ui-* and /ux-* commands. Those were renamed — every skill now uses the /ss- prefix (e.g. /ss-page, not /ui-page). If a /ss-* command doesn't appear, see Installing the skills at the bottom.

After installing (see Getting Started), type / in Claude Code and you'll see all 14. Each lives in .claude/skills/<name>/SKILL.md.

Generates a complete mobile page with TopBar, sections, and BottomNav, following the information pyramid and section-type rules.

/ss-page Dashboard main dashboard with revenue, orders, and charts
/ss-page Settings app settings with profile, notifications, and theme

Produces: a full .tsx file with PageShell, TopBar, PageContent, and BottomNav. Spacing, padding, and structure rules are pre-applied.

Creates a component following conventions: data-slot attribute, cn() for className merging, CVA for variants, proper TypeScript typing.

/ss-component PriceTag a price display with large number and small unit
/ss-component StatusIndicator a colored dot + text status display

Composes existing primitives into a higher-level pattern.

/ss-pattern grid-2col KPI card grid with 4 metrics
/ss-pattern chart-section area chart with period toggle and bottom stats

Designs the navigation structure and step sequence for a multi-step flow.

/ss-flow checkout multi-step checkout
/ss-flow onboarding first-run setup

Writes button labels, error messages, empty states, and toasts in a casual-but-polite voice.

/ss-copy empty-state no orders yet
/ss-copy error payment failed

Adds the loading / success / error / empty states a component is missing.

/ss-feedback src/app/Checkout.tsx

Applies a StyleSeed motion to an element — either one of the 5 personality seeds (spring / silk / snap / float / pulse ×ばつ entrance / exit / hover / press / layout) or a keyword move from the motion library (toggle-flip, reveal-blur, tilt-3d, glow-pulse, confetti-pop, ...).

/ss-motion spring hover src/components/Button.tsx # seed + context
/ss-motion toggle-flip # a keyword move
/ss-motion "make this card tilt in 3D on hover" # plain language

Every motion comes from one source of truth, so the same keyword produces the same feel across every page. Preview and copy them at the live Motion Keywords gallery.

Audits a component or page against the 69 design rules and reports violations with fixes.

/ss-review src/app/Dashboard.tsx

Checks color (grayscale + single accent, no pure black), typography (2:1 number-unit ratio, tracking), layout (space-y-6, mx-6/px-6, section types), forbidden patterns, and interaction rules.

A fast pass for the most common violations — seconds, not a full review.

/ss-lint src/app/Dashboard.tsx

Audits for accessibility issues and auto-fixes what it safely can.

/ss-a11y src/components/patterns/stat-card.tsx

Checks touch targets (×ばつ44px), focus rings, WCAG-AA contrast, screen-reader attributes, prefers-reduced-motion, image alt text, and label associations.

Evaluates a screen against Nielsen's 10 usability heuristics and modern mobile UX best practices.

/ss-audit src/app/Dashboard.tsx

View, search, add, or update design tokens. Edits both the JSON source and the CSS implementation.

/ss-tokens list color
/ss-tokens update brand #3B82F6

Interactive wizard that configures StyleSeed for your project — copies the engine, picks a skin, wires up theme.css, and verifies the skills are installed. Start here for a new project.

/ss-setup

Analyzes what's outdated in your project and pulls the latest StyleSeed engine (new rules, components, seeds) safely.

/ss-update

The slash commands only appear once the skill folders are in your project's .claude/skills/ directory. The easiest path:

# 1. Get StyleSeed
git clone https://github.com/bitjaru/styleseed.git /tmp/styleseed
# 2. Copy the skills into your project (run from your project root)
mkdir -p .claude/skills
cp -r /tmp/styleseed/engine/.claude/skills/* .claude/skills/
# 3. Copy the design language reference (optional but recommended)
cp /tmp/styleseed/engine/DESIGN-LANGUAGE.md .claude/DESIGN-LANGUAGE.md

Then restart Claude Code (or reload the window) and type / — the 14 /ss-* commands will be listed. Run /ss-setup to finish wiring up the engine and a skin.

Troubleshooting — "the command doesn't exist":

1. Confirm the folders exist: ls .claude/skills/ should show ss-page, ss-component, etc.
2. Make sure you're using the /ss- prefix (not the old /ui- / /ux- names).
3. Restart Claude Code after copying the files — skills are loaded at startup.