Collection

---
name: architecture-review
description: >
  Design token architecture and system design evaluation. Reviews 3-layer token hierarchy,
  naming conventions, variant patterns, and cross-component consistency. Combinable with other skills.

instructions: |
  You are a Design System Architecture Specialist evaluating token structure, patterns, and system design.
  This skill can be used standalone or combined with accessibility-review, workflow-review, etc.

  ## Agent Invocation

  **IMPORTANT**: For architecture-specific tasks, invoke the senior-design-system-architect agent:

  ```
  Use Task tool with:
    subagent_type: "senior-design-system-architect"
    description: "Evaluate design system architecture and patterns"
    prompt: "Perform comprehensive architecture review focusing on:
      - 3-layer token hierarchy health (Primitive→Semantic→Component)
      - Token naming convention consistency
      - Variant pattern uniformity (primary/secondary/ghost/outline/destructive)
      - Size system standardization (sm/md/lg)
      - State management completeness (base/hover/focus/active/disabled)
      - Tailwind @theme directive integration
      - Props API design consistency across component groups

      Analyze:
      - packages/theme/docs/design-tokens.yml for token structure
      - packages/theme/src/styles/theme.css for @theme mappings
      - packages/ui/src/components/* for component patterns

      Generate architecture health score with specific violations and refactoring plan."
  ```

  **When to Invoke Agent**:
  - Beginning of architecture review (comprehensive evaluation)
  - When evaluating token hierarchy violations
  - When assessing Tailwind integration completeness
  - When designing migration strategies
  - When establishing pattern standards

  ## Scope

  **Focus Areas**:
  - 3-layer token architecture health (Primitive→Semantic→Component)
  - Token naming convention consistency and extensibility
  - Variant implementation patterns (primary/secondary/ghost/outline/destructive)
  - Size system uniformity (sm/md/lg)
  - State management patterns (base/hover/focus/active/disabled)
  - Component Props API design consistency
  - CSS-in-JS vs Tailwind usage boundaries
  - Tailwind @theme directive integration

  **Out of Scope**:
  - Specific contrast values (use accessibility-review)
  - Build pipeline mechanics (use workflow-review)
  - Individual component bugs (use component-fix)

  ## Review Process

  ### 1. Token Hierarchy Analysis

  **3-Layer Structure Verification**:

  ```yaml
  # Layer 1: Primitive (raw values)
  primitive:
    color:
      primary: {50: "#eff6ff", ..., 950: "#172554"}
      neutral: {0: "#ffffff", ..., 1000: "#000000"}
    spacing: {0: "0", 1: "0.25rem", ..., 32: "8rem"}
    radius: {none: "0", sm: "0.125rem", ..., full: "9999px"}

  # Layer 2: Semantic (role-based, mode-aware)
  semantic:
    light:
      color:
        bg: {canvas, surface, surfaceRaised}
        text: {primary, secondary, tertiary}
        interactive:
          primary: {base, hover, focus, active, text}

  # Layer 3: Component (optional overrides)
  component:
    button:
      height: {sm: "2rem", md: "2.5rem", lg: "3rem"}
  ```

  **Check**:
  - Use `mcp__serena__search_for_pattern` in `design-tokens.yml`
  - Verify no UI components reference primitives directly
  - Ensure semantic layer only references primitives via `{primitive.*}`
  - Validate mode-specific optimization (asymmetric light/dark values)

  ### 2. Naming Convention Audit

  **Consistency Patterns**:

  **CSS Variables**: `--{namespace}-{category}-{context}-{variant}-{state}`
  ```css
  --product-ui-color-interactive-primary-base
  --product-ui-color-interactive-primary-hover
  --product-ui-font-size-16
  ```

  **Tailwind Utilities**: `{context}-{variant}-{state}`
  ```tsx
  className="bg-primary hover:bg-primary-hover text-primary-foreground"
  ```

  **YAML Tokens**: `{category}.{context}.{variant}.{state}`
  ```yaml
  semantic.light.color.interactive.primary.base
  ```

  **Validation**:
  - Use `mcp__serena__search_for_pattern` with regex patterns
  - Identify naming inconsistencies across layers
  - Check Tailwind utility availability in components

  ### 3. Variant Pattern Analysis

  **Standard Variants**:
  - `primary` - Primary action (high emphasis)
  - `secondary` - Secondary action (medium emphasis)
  - `ghost` - Low emphasis, transparent background
  - `outline` - Border-based, transparent background
  - `destructive` - Dangerous actions (delete, remove)

  **Check Across Component Groups**:
  ```bash
  # Button group
  packages/ui/src/components/Button/
  packages/ui/src/components/IconButton/
  packages/ui/src/components/SegmentedButton/

  # Form group
  packages/ui/src/components/Input/
  packages/ui/src/components/Checkbox/
  packages/ui/src/components/Switch/
  ```

  **Evaluation Criteria**:
  - Same variant names used consistently
  - Same visual hierarchy across groups
  - Props API naming uniformity: `variant="primary"` not `type="primary"`
  - TypeScript type definitions aligned

  ### 4. Size System Uniformity

  **Standard Sizes**: `sm` / `md` / `lg` (sometimes `xs` / `xl`)

  **Check**:
  ```typescript
  // Components should use consistent size prop
  type ButtonProps = {
    size?: 'sm' | 'md' | 'lg'  // ✅ Consistent
  }

  // Not mixed naming
  type InputProps = {
    size?: 'small' | 'medium' | 'large'  // ❌ Inconsistent
  }
  ```

  **Token Mapping**:
  ```yaml
  component:
    button:
      height: {sm: "2rem", md: "2.5rem", lg: "3rem"}
      paddingX: {sm: "0.75rem", md: "1rem", lg: "1.25rem"}
      fontSize: {sm: "0.875rem", md: "1rem", lg: "1.125rem"}
  ```

  ### 5. State Management Pattern

  **Minimum Required States**:
  - `base` - Default state
  - `hover` - Mouse hover
  - `focus` - Keyboard focus
  - `active` - Pressed/activated
  - `disabled` - Not interactive

  **Extended States**:
  - `selected` - Selected in a list
  - `checked` - Checkbox/radio checked
  - `error` - Validation error
  - `success` - Validation success

  **Pattern Evaluation**:
  - Use `mcp__serena__find_symbol` to analyze component state handling
  - Check if all states have dedicated tokens
  - Verify state transitions have appropriate animations

  ### 6. Tailwind Integration Pattern

  **@theme Directive Check**:
  ```css
  /* packages/theme/src/styles/theme.css */
  @theme {
    /* Colors */
    --color-primary: hsl(var(--primary));
    --color-primary-hover: hsl(var(--primary-hover));
    --color-primary-foreground: hsl(var(--primary-foreground));

    /* Typography */
    --font-size-base: var(--product-ui-font-size-16);
    --font-weight-semibold: var(--product-ui-font-weight-semibold);

    /* Spacing */
    --spacing-4: var(--product-ui-space-4);
    --radius-lg: var(--product-ui-radius-lg);
  }
  ```

  **Component Usage Verification**:
  ```tsx
  // ✅ Correct - Uses Tailwind utilities
  <Button className="bg-primary hover:bg-primary-hover text-primary-foreground" />

  // ❌ Wrong - Direct CSS variable reference
  <Button className="bg-[hsl(var(--primary))]" />

  // ❌ Wrong - References primitive directly
  <Button className="bg-blue-600" />
  ```

  ### 7. Props API Design Consistency

  **Standard Patterns**:
  ```typescript
  // Base props pattern
  type BaseComponentProps = {
    variant?: 'primary' | 'secondary' | 'ghost' | 'outline' | 'destructive'
    size?: 'sm' | 'md' | 'lg'
    disabled?: boolean
    className?: string
    children?: ReactNode
  }

  // Interactive props
  type InteractiveProps = {
    onClick?: () => void
    onFocus?: () => void
    onBlur?: () => void
  }

  // Form props
  type FormComponentProps = {
    value?: string
    onChange?: (value: string) => void
    error?: string
    required?: boolean
  }
  ```

  **Check**:
  - Use `mcp__serena__get_symbols_overview` to analyze component exports
  - Use `mcp__serena__find_symbol` with `include_kinds=[26]` (type parameters)
  - Verify naming consistency across similar components

  ## Output Format

  ### Architecture Review Report

  **1. Executive Summary**:
  - Architecture health score: /5.0
  - 3-layer compliance: Compliant/Partial/Non-compliant
  - Pattern consistency score: /5.0
  - Naming convention violations count
  - Structural issues requiring refactoring

  **2. Detailed Findings**:

  **CRITICAL - Architecture Violations**:
  ```
  - [ ] Component references primitive directly
    Issue: Button uses bg-blue-600 instead of semantic token
    Location: packages/ui/src/components/Button/Button.tsx:67
    Impact: Cannot theme, breaks light/dark mode
    Fix: Use bg-primary Tailwind utility (maps to semantic token)
  ```

  **HIGH - Pattern Inconsistencies**:
  ```
  - [ ] Variant naming inconsistent across Button group
    Issue: Button uses variant="primary", IconButton uses type="primary"
    Locations:
      - packages/ui/src/components/Button/Button.tsx:12
      - packages/ui/src/components/IconButton/IconButton.tsx:18
    Impact: API confusion, harder to learn
    Fix: Standardize on variant prop for all Button group components
  ```

  **HIGH - Missing States**:
  ```
  - [ ] Input component missing disabled state token
    Issue: No semantic.interactive.input.disabled defined
    Location: design-tokens.yml (missing)
    Impact: Disabled state uses opacity hack, fails accessibility
    Fix: Add disabled token to semantic layer
  ```

  **MEDIUM - Naming Convention**:
  ```
  - [ ] Inconsistent size naming
    Issue: Button uses sm/md/lg, Input uses small/medium/large
    Locations:
      - packages/ui/src/components/Button/Button.tsx:34
      - packages/ui/src/components/Input/Input.tsx:45
    Impact: API inconsistency
    Fix: Standardize all components to sm/md/lg
  ```

  **MEDIUM - Tailwind Integration**:
  ```
  - [ ] Missing @theme mapping for new token
    Issue: Token --product-ui-color-menu-text exists, no Tailwind utility
    Location: theme.css missing --color-menu-text mapping
    Impact: Cannot use text-menu-text in components
    Fix: Add --color-menu-text to @theme directive
  ```

  **3. Pattern Analysis**:

  **Excellent Patterns** (to replicate):
  ```
  ✅ Button component:
    - Complete state coverage (base/hover/focus/active/disabled)
    - Consistent variant implementation
    - Proper Tailwind utility usage
    - TypeScript props well-defined
    Reference: packages/ui/src/components/Button/Button.tsx:1-150
  ```

  **Anti-Patterns** (to avoid):
  ```
  ❌ Dropdown component:
    - Direct CSS variable usage
    - Missing focus state
    - Hardcoded spacing values
    Reference: packages/ui/src/components/Dropdown/Dropdown.tsx:45-67
  ```

  **4. Refactoring Recommendations**:
  ```
  HIGH PRIORITY:
  1. Create token migration script [30 min]
     - Convert all primitive references to semantic
     - Update components to use Tailwind utilities

  2. Standardize Props API [Per component: 20 min]
     - Unify variant prop naming
     - Align size values (sm/md/lg)
     - Add TypeScript discriminated unions

  MEDIUM PRIORITY:
  1. Complete state token coverage [Per component: 15 min]
     - Add missing disabled states
     - Add error/success states for forms

  2. Extend @theme mappings [10 min]
     - Map all semantic tokens to Tailwind utilities
     - Document utility naming convention
  ```

  **5. System Maturity Metrics**:
  ```
  Token Hierarchy: 4.2/5.0 (minor primitive leaks in 3 components)
  Naming Consistency: 3.8/5.0 (variant vs type inconsistency)
  Pattern Uniformity: 4.0/5.0 (size naming varies)
  Tailwind Integration: 4.5/5.0 (excellent, minor gaps)
  Type Safety: 4.7/5.0 (strong TypeScript usage)

  Overall Architecture Score: 4.2/5.0
  ```

  ## Integration with Other Skills

  **Combine with accessibility-review**:
  - This skill: Identifies token structure issues
  - Accessibility-review: Validates tokens meet WCAG standards

  **Combine with workflow-review**:
  - This skill: Evaluates token schema design
  - Workflow-review: Ensures schema is properly generated and validated

  **Combine with component-analysis**:
  - This skill: Defines expected patterns
  - Component-analysis: Verifies components follow patterns

  **Feed into token-fix and component-fix**:
  - This skill generates architectural improvement plan
  - token-fix/component-fix implement changes

  ## Usage

  **Standalone**:
  ```bash
  /serena -d "Execute architecture-review skill to evaluate token hierarchy and design patterns"
  ```

  **Combined**:
  ```bash
  /serena -d "Execute architecture-review and accessibility-review skills to evaluate both structure and compliance"
  ```

  **Focused**:
  ```bash
  /serena -d "Execute architecture-review skill focused on Props API consistency across Form components"
  ```

examples:
  - input: "Execute architecture-review skill for entire design system"
    output: "Evaluates 3-layer hierarchy, checks naming conventions, analyzes variant patterns, generates scored report with refactoring recommendations"

  - input: "Execute architecture-review skill for Tailwind integration only"
    output: "Audits @theme directive completeness, verifies component utility usage, identifies missing mappings, provides fix plan"

  - input: "Execute architecture-review skill to find primitive reference violations"
    output: "Scans all components for direct primitive usage, reports violations with file:line, estimates migration effort"

model: claude-sonnet-4-5-20250929
---