Developer Tools

CLI, MCP & API

StyleKit ships with three integration surfaces: local CLI, MCP server, and HTTP APIs. The product flow now focuses on two paths: website replication and frontend generation.

Path A

Reference URL → Extract → Generate

Use /api/style-extract to parse style evidence from a real website, then import/apply in Create Style and generate code in /generate.

/api/style-extract/create-style/generate

Path B

Preset Style → Template → Generate

Choose a built-in style from /styles, pick template + output format in /generate, edit content, then download ZIP.

/styles/generate

HTTP API

Full REST API reference with 36+ endpoints, examples, and interactive testing

Quick Start

Use CLI commands to inspect styles, validate code, and generate recommendations in your local workflow.

# Show all commands
npx stylekit help

# List available styles
npx stylekit styles

# Show lint rules for one style
npx stylekit rules neo-brutalist

Lint Command

Lint existing code against a target style and get actionable replacements.

# Lint a button file against Neo-Brutalist rules
npx stylekit lint ./src/Button.tsx --style neo-brutalist

# Lint a card file against Glassmorphism rules
npx stylekit lint ./components/Card.tsx --style glassmorphism

Output Example:

Linting: ./src/Button.tsx
Style: neo-brutalist

[FAIL] 2 forbidden classes found
[WARN] 4 required classes missing

Issues:
  [x] "rounded-lg" - Neo-Brutalist uses sharp corners only
  [x] "shadow-md" - Use hard offset shadows

Suggested Fixes:
  - Replace "rounded-lg" with "rounded-none"
  - Replace "shadow-md" with "shadow-[4px_4px_0_#000]"

Smart Recommendation

Generate recommendations with audience, mood, and accessibility context.

# Basic recommendation
npx stylekit recommend "SaaS dashboard"

# Context-aware recommendation
npx stylekit smart "e-commerce store" --audience consumer --mood playful

# Enterprise + accessibility context
npx stylekit smart "B2B SaaS" --audience enterprise --mood professional --a11y

# Compare two styles for one product
npx stylekit compare neo-brutalist glassmorphism "creative portfolio"

All Commands

stylekit help

Show help and usage examples.

stylekit styles

List all available styles.

stylekit rules <style>

Show lint rules for a style.

stylekit lint <file> --style <style>

Lint a file against style rules.

stylekit recommend <query>

Get a quick style recommendation.

stylekit smart <query> [options]

Get context-aware recommendations with scoring.

stylekit compare <s1> <s2> <query>

Compare two styles for one product.

stylekit search <query>

Search the style knowledge base.