Skip to content

Getting Started

Jump to bottom
bitjaru edited this page Jun 8, 2026 · 3 revisions

Getting Started

This guide assumes no prior StyleSeed knowledge. If you can open a terminal and run Claude Code, you can finish this in a few minutes.

Prerequisites

  • Node.js 18+ and npm (or pnpm/yarn)
  • A React project — or a willingness to start one
  • Claude Code or Cursor installed

The easy path (recommended)

You don't have to memorize any copy commands. Install the skills once, then let the setup wizard do the rest.

# 1. Download StyleSeed somewhere on your machine
git clone https://github.com/bitjaru/styleseed.git /tmp/styleseed

# 2. From YOUR project's root folder, copy in the skills
cd /path/to/your-project
mkdir -p .claude/skills
cp -r /tmp/styleseed/engine/.claude/skills/* .claude/skills/

Now restart Claude Code (skills load at startup), open your project, and run:

/ss-setup

/ss-setup is interactive — it walks you through copying the engine files, picking a brand skin, and wiring up theme.css. When it finishes you're ready to generate UI.

If /ss-setup doesn't appear after restarting, see Troubleshooting below.

The manual path

Prefer to do it yourself? Copy the engine pieces into your project. Note the source folder is engine/ (older docs said seed/ — that's outdated).

git clone https://github.com/bitjaru/styleseed.git /tmp/styleseed
cd /path/to/your-project

# Scaffold config (vite, tsconfig, postcss, index.html) — only for a fresh project
cp -r /tmp/styleseed/engine/scaffold/* ./

# Styles, components, and the design reference
mkdir -p src/styles src/components
cp -r /tmp/styleseed/engine/css/*        src/styles/
cp -r /tmp/styleseed/engine/components/* src/components/
cp /tmp/styleseed/engine/DESIGN-LANGUAGE.md ./.claude/DESIGN-LANGUAGE.md
cp /tmp/styleseed/engine/CLAUDE.md          ./CLAUDE.md

# Install dependencies
npm install

Then pick a skin (see Token Customization) and you're set.

Project Structure

After setup, your project looks like this:

src/
  styles/
    fonts.css          # Font imports (Inter + optional Pretendard)
    theme.css          # CSS custom properties + @theme inline
    base.css           # Base element styles
    index.css          # Entry point
  components/
    ui/                # 32 primitive components (shadcn-style)
    patterns/          # composed pattern components
  app/                 # your pages

Tech Stack

Layer Technology
Framework React 18 + TypeScript
Build Vite 6 + @tailwindcss/vite
Styling Tailwind CSS v4 (CSS-first, no config file)
Components Radix UI primitives
Variants class-variance-authority + clsx + tailwind-merge
Icons Lucide React
Motion Framer Motion (via the motion seeds)
Optional Recharts, react-hook-form

First Customization: Change the Brand Color

Open src/styles/theme.css and change the --brand variable:

:root {
  --brand: #721FE5;  /* Change to your brand color */
}

This single change propagates to icon badges, progress bars, toggles, active navigation, and every other accent element.

Variable Purpose Default
--brand Brand accent #721FE5
--primary Buttons, links #030213
--destructive Error/danger #D4183D
--success Success states #6B9B7A
--warning Warning states #D97706
--info Information #3B82F6

Using with Claude Code

Once the skills are installed (above) and CLAUDE.md + DESIGN-LANGUAGE.md are in place, Claude Code references the design rules automatically and the 14 /ss-* slash commands become available:

/ss-page Dashboard      # Scaffold a full page
/ss-component PriceTag   # Generate a component
/ss-motion toggle-flip   # Apply a named motion
/ss-review src/App.tsx   # Review for compliance

See Claude Code Skills for all 14.

Troubleshooting

The /ss-* commands don't show up:

  1. Confirm the skill folders exist: ls .claude/skills/ should list ss-page, ss-component, ss-motion, etc.
  2. Use the /ss- prefix — the old /ui-* and /ux-* names no longer exist.
  3. Restart Claude Code after copying the files. Skills are loaded at startup, so a running session won't pick them up.

/ss-setup says it can't find the engine:

  • Make sure /tmp/styleseed (or wherever you cloned it) still exists, or re-clone. The wizard reads from your StyleSeed clone.

Next Steps

Clone this wiki locally