StyleSeed ships with 10 slash commands (skills) for Claude Code: 6 for UI generation and 4 for UX auditing.

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

/ui-page Dashboard main dashboard with revenue, orders, and charts
/ui-page Settings app settings with profile, notifications, and theme
/ui-page OrderDetail order detail page showing status, items, and tracking

What it produces: A full .tsx file with PageShell, TopBar, PageContent (with appropriate section types), and BottomNav. All spacing, padding, and structure rules are pre-applied.

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

/ui-component PriceTag a price display with large number and small unit
/ui-component StatusIndicator a colored dot + text status display
/ui-component MetricRow a horizontal row with label, value, and trend

What it produces: A component file with proper exports, variant support, accessibility attributes, and design token usage.

Creates a higher-level pattern by composing existing primitives. Follows the 4 section type rules.

/ui-pattern grid-2col KPI card grid with 4 metrics
/ui-pattern list-section recent orders list with status badges
/ui-pattern chart-section area chart with period toggle and bottom stats

What it produces: A composed pattern using existing StatCard, SectionCard, ListItem, ChartCard, etc. Handles spacing, dividers, and responsive rules.

Audits an existing component or page against all 69 design rules. Reports violations and suggests fixes.

/ui-review src/app/Dashboard.tsx
/ui-review src/components/patterns/my-card.tsx

What it checks:

• Color compliance (5-level grayscale, no #000, accent usage)
• Typography (2:1 number-unit ratio, uppercase labels, tracking)
• Layout (space-y-6, mx-6/px-6, card padding, section types)
• Forbidden patterns (content outside cards, dividers between sections, CTA in cards)
• Interaction rules (static cards, proper transition values)

View, search, add, or update design tokens in the system.

/ui-tokens list color # List all color tokens
/ui-tokens list typography # List all type scale tokens
/ui-tokens list spacing # List spacing tokens
/ui-tokens add color semantic # Add a new semantic color
/ui-tokens update brand #3B82F6 # Change brand color to blue

What it does: Reads from tokens/*.json and css/theme.css. When modifying, updates both the JSON source and the CSS implementation.

Audits a component or page for accessibility issues and auto-fixes what it can.

/ui-a11y src/components/patterns/stat-card.tsx
/ui-a11y src/app/Dashboard.tsx

What it checks:

• Touch targets (44x44px minimum)
• Focus ring (focus-visible:ring-2)
• Color contrast (WCAG AA)
• Screen reader attributes (aria-label, role, sr-only)
• Motion reduction (prefers-reduced-motion)
• Image alt text
• Form label associations

These skills are based on established UX principles: Nielsen's 10 Heuristics, Fitts's Law, Hick's Law, and general usability patterns.

Evaluates a page or flow against Jakob Nielsen's 10 usability heuristics.

/ux-heuristics src/app/Dashboard.tsx
/ux-heuristics src/app/Checkout.tsx

What it evaluates:

Analyzes interactive element sizes and distances for ease of targeting.

/ux-fitts src/app/Dashboard.tsx

What it checks:

• Button/link sizes (minimum 44x44px touch target)
• Distance between related actions (closer = easier)
• CTA prominence (primary action should be largest)
• Edge/corner placement (edges are easier to hit on mobile)

Evaluates decision complexity and choice overload.

/ux-hick src/app/Settings.tsx

What it checks:

• Number of choices per screen (fewer = faster decisions)
• Navigation depth vs breadth
• Option grouping and categorization
• Progressive disclosure usage

Evaluates a multi-step flow for friction, drop-off risk, and clarity.

/ux-flow src/app/onboarding/
/ux-flow src/app/checkout/

What it checks:

• Step count and progress indication
• Cognitive load per step
• Required vs optional fields
• Back navigation and state preservation
• Error recovery at each step

All skills produce structured output:

## [Skill Name] Report
### Summary
Brief overview of findings.
### Issues Found
1. **[Severity]** Description of issue
 - Location: `file:line`
 - Fix: Suggested solution
### Passed Checks
- Check 1
- Check 2
### Recommendations
- Optional improvement 1
- Optional improvement 2

Severity levels: Critical (must fix), Warning (should fix), Info (nice to have).

Skills are registered automatically when StyleSeed's CLAUDE.md is in your project root. Claude Code reads the skill definitions and makes the slash commands available.

If skills are not appearing, verify:

1. CLAUDE.md is in the project root
2. The .claude/ directory contains skill configurations
3. Claude Code has been restarted after adding the files