sd — design system spec v1.0.2

Machine-readable spec for reproducing an editorial slide-deck design system and its product UI variant in any Next.js project. Audience: LLM coding agents. Read order: OVERVIEW → STACK → INSTALL → RULES → MOTION → ANTIPATTERNS → PRODUCT-UI (variant for dashboards / admin tools), then copy files.

Install as an agent skill / rules file

cd your-project-root

# 1. Auto-detect: writes AGENTS.md + files for any agent dir already present
curl -fsSL https://sd.michelvalles.com/install.sh | bash

# 2. All supported agents at once
curl -fsSL https://sd.michelvalles.com/install.sh | bash -s -- --all

# 3. Pick specific agents
curl -fsSL https://sd.michelvalles.com/install.sh | bash -s -- --agents=claude,cursor,codex,gemini

Supported agents and where the installer writes their rules file:

  claude    → .claude/skills/sd-design/SKILL.md  +  CLAUDE.md
  codex     → AGENTS.md                          (OpenAI Codex CLI / agents.md standard)
  cursor    → .cursor/rules/sd-design.mdc        +  .cursorrules (legacy)
  windsurf  → .windsurf/rules/sd-design.md       +  .windsurfrules (legacy)
  copilot   → .github/copilot-instructions.md    (GitHub Copilot)
  gemini    → GEMINI.md                          (Gemini CLI)
  aider     → CONVENTIONS.md                     (Aider)
  continue  → .continuerules                     (Continue)
  kiro      → .kiro/steering/sd-design.md        (Kiro)
  universal → AGENTS.md                          (always written; agents.md fallback)

After install, every agent receives the same instructions and fetches asset files on demand from this host. Full detail in AGENTS-SUPPORTED.md.

Manual usage (without the skill)

fetch the docs in order, then copy each file to the matching path in your project:

  https://sd.michelvalles.com/OVERVIEW.md
  https://sd.michelvalles.com/STACK.md
  https://sd.michelvalles.com/INSTALL.md
  https://sd.michelvalles.com/RULES.md
  https://sd.michelvalles.com/MOTION.md
  https://sd.michelvalles.com/ANTIPATTERNS.md

  https://sd.michelvalles.com/files/globals.css       -> app/globals.css
  https://sd.michelvalles.com/files/layout.tsx        -> app/layout.tsx
  https://sd.michelvalles.com/files/page.example.tsx  -> app/page.tsx
  https://sd.michelvalles.com/files/tsconfig.json     -> tsconfig.json
  https://sd.michelvalles.com/files/postcss.config.mjs -> postcss.config.mjs
  https://sd.michelvalles.com/files/next.config.ts    -> next.config.ts

  https://sd.michelvalles.com/components/utils.ts     -> lib/utils.ts
  https://sd.michelvalles.com/components/format.ts    -> lib/format.ts
  ... (see INSTALL.md for the full path mapping)

  https://sd.michelvalles.com/logos/flat101.svg       -> public/logos/flat101.svg
  https://sd.michelvalles.com/logos/indra.png         -> public/logos/indra.png

Docs

files/

components/

templates/

logos/