scaffold-design-system

Scaffold Design System

Bootstrap design system infrastructure for a project. Detects existing design patterns or creates new ones.

Usage

/scaffold-design-system                    — Auto-detect and scaffold (interactive)
/scaffold-design-system detect             — Detect existing design system, document in CLAUDE.md
/scaffold-design-system untitled-ui        — Scaffold Untitled UI conventions
/scaffold-design-system shadcn             — Scaffold shadcn/ui conventions

Process

Phase 1: Discovery

Scan the project to understand what design infrastructure already exists.

1.1 — Theme/Token files:

find . -type f \( -name "theme.css" -o -name "tokens.*" -o -name "design-tokens.*" -o -name "globals.css" -o -name "variables.css" \) -not -path "*/node_modules/*" 2>/dev/null

1.2 — Component library:

# Check for base/ui component directories
find . -type d \( -name "base" -o -name "ui" -o -name "primitives" -o -name "atoms" \) -path "*/components/*" -not -path "*/node_modules/*" 2>/dev/null
# Count component files in those directories
find . -path "*/components/base/*" -o -path "*/components/ui/*" | grep -E "\.(tsx|jsx|vue)$" | wc -l

1.3 — Icon library from package.json:

grep -E "untitledui|lucide|heroicons|phosphor|tabler|ionicons|feather" package.json 2>/dev/null

1.4 — CSS framework:

grep -E "tailwindcss|@tailwindcss|styled-components|emotion|vanilla-extract|css-modules" package.json 2>/dev/null

1.5 — Existing color patterns in components:

# Count raw vs semantic color usage
echo "Raw Tailwind colors:"
grep -rn "text-gray-\|bg-gray-\|border-gray-\|text-blue-\|bg-blue-" --include="*.tsx" --include="*.jsx" . | grep -v node_modules | wc -l

echo "Semantic tokens:"
grep -rn "text-primary\|text-secondary\|text-tertiary\|bg-primary\|bg-secondary\|fg-primary" --include="*.tsx" --include="*.jsx" . | grep -v node_modules | wc -l

1.6 — Accessibility library:

grep -E "react-aria|radix-ui|headlessui|ariakit" package.json 2>/dev/null