setup-design-system

Design System Workflow

Initialize or extend the project's design system with properly accessible, consistent UI components using Tailwind CSS and shadcn/ui.

Step 0: Verify Feature Branch

Ensure we are on a feature branch based on the latest main:

git fetch origin main

If on main, create a new feature branch:

git checkout -b feature/design-system origin/main

If already on a feature branch, rebase onto latest origin/main:

git status --porcelain

If the working tree is dirty, stash before rebasing:

git stash push -m "setup-design-system: stash before rebase"
git rebase origin/main
git stash pop

If the working tree is clean, rebase directly:

git rebase origin/main

Step 1: Assess Current State

Check if a design system already exists:

• Look for packages/ui/ directory structure
• Check for shadcn/ui configuration (components.json)
• Check Tailwind configuration (src/index.css for @theme directives in v4, or tailwind.config.* for v3)
• Identify existing components and their patterns
• Check for design tokens (colors, spacing, typography definitions)

Ask the user:

• Initializing a new design system or extending the existing one?
• If extending: what components or patterns are needed?
• Any brand guidelines, color palette, or Figma designs to reference?
• Dark mode support needed?

Step 2: Product Council Design Review (for initialization or major changes)

If initializing the design system or making significant structural changes, activate a Product Council subset:

Model Selection: See the Model Selection section in README.md for mapping agent model specs to Task tool parameters.

Design Lead (Lead) — consult: ui-design

• Brand Identity: Color palette, typography, visual language
• Component Hierarchy: Primitives vs composed components
• Design Tokens: Token architecture (colors, spacing, typography, shadows)
• Recommendations: Design system structure and principles