/assembling-components

name: assembling-components
description: Assembles component outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, proper import chains, and framework-specific scaffolding. Use as the capstone skill after running theming, layout, dashboard, data-viz, or feedback skills to wire components into working React/Next.js, Python, or Rust projects.

Assembling Components

Purpose

This skill transforms the outputs of AI Design Components skills into production-ready applications. It provides library-specific context for our token system, component patterns, and skill chain workflow - knowledge that generic assembly patterns cannot provide. The skill validates token integration, generates proper scaffolding, and wires components together correctly.

When to Use

Activate this skill when:

• Completing a skill chain workflow (theming → layout → dashboards → data-viz → feedback)
• Generating new project scaffolding for React/Vite, Next.js, FastAPI, Flask, or Rust/Axum
• Validating that all generated CSS uses design tokens (not hardcoded values)
• Creating barrel exports and wiring component imports correctly
• Assembling components from multiple skills into a unified application
• Debugging integration issues (missing entry points, broken imports, theme not switching)
• Preparing generated code for production deployment

Skill Chain Context

This skill understands the output of every AI Design Components skill:

┌──────────────────┐     ┌──────────────────┐     ┌──────────────────┐
│ theming-         │────▶│ designing-       │────▶│ creating-        │
│ components       │     │ layouts          │     │ dashboards       │
└──────────────────┘     └──────────────────┘     └──────────────────┘
        │                        │                        │
        ▼                        ▼                        ▼
    tokens.css               Layout.tsx             Dashboard.tsx
    theme-provider.tsx       Header.tsx             KPICard.tsx
        │                        │                        │
        └────────────────────────┴────────────────────────┘
                                 │
                                 ▼
                    ┌──────────────────────┐
                    │ visualizing-data     │
                    │ providing-feedback   │
                    └──────────────────────┘
                                 │
                                 ▼
                         DonutChart.tsx
                         Toast.tsx, Spinner.tsx
                                 │
                                 ▼
                    ┌──────────────────────┐
                    │ ASSEMBLING-          │
                    │ COMPONENTS           │
                    │ (THIS SKILL)         │
                    └──────────────────────┘
                                 │
                                 ▼
                       WORKING COMPONENT SYSTEM

Expected Outputs by Skill

| Skill | Primary Outputs | Token Dependencies | |-------|-----------------|-------------------| | `theming-components` | tokens.css, theme-provider.tsx | Foundation | | `designing-layouts` | Layout.tsx, Header.tsx, Sidebar.tsx | --spacing-*, --color-border-* | | `creating-dashboards` | Dashboard.tsx, KPICard.tsx | All layout + chart tokens | | `visualizing-data` | Chart components, legends | --chart-color-*, --font-size-* | | `building-forms` | Form inputs, validation | --spacing-*, --radius-*, --color-error | | `building-tables` | Table, pagination | --color-*, --spacing-* | | `providing-feedback` | Toast, Spinner, EmptyState | --color-success/error/warning |

Token Validation

Run Validation Script (Token-Free Execution)

# Basic validation
python scripts/validate_tokens.py src/styles

# Strict mode with fix suggestions
python scripts/validate_tokens.py src --strict --fix-suggestions

# JSON output for CI/CD
python scripts/validate_tokens.py src --json

Our Token Naming Conventions

/* Colors - semantic naming */
--color-primary: #FA582D;          /* Brand primary */
--color-success: #00CC66;          /* Positive states */
--color-warning: #FFCB06;          /* Caution states */
--color-error: #C84727;            /* Error states */
--color-info: #00C0E8;             /* Informational */

--color-bg-primary: #FFFFFF;       /* Main background */
--color-bg-secondary: #F8FAFC;     /* Elevated surfaces */
--color-text-primary: #1E293B;     /* Body text */
--color-text-secondary: #64748B;   /* Muted text */

/* Spacing - 4px base unit */
--spacing-xs: 0.25rem;   /* 4px */
--spacing-sm: 0.5rem;    /* 8px */
--spacing-md: 1rem;      /* 16px */
--spacing-lg: 1.5rem;    /* 24px */
--spacing-xl: 2rem;      /* 32px */

/* Typography */
--font-size-xs: 0.75rem;   /* 12px */
--font-size-sm: 0.875rem;  /* 14px */
--font-size-base: 1rem;    /* 16px */
--font-size-lg: 1.125rem;  /* 18px */

/* Component sizes */
--icon-size-sm: 1rem;      /* 16px */
--icon-size-md: 1.5rem;    /* 24px */
--radius-sm: 4px;
--radius-md: 8px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.05);

Validation Rules

| Must Use Tokens (Errors) | Example Fix | |--------------------------|-------------| | Colors | `#FA582D` → `var(--color-primary)` | | Spacing (≥4px) | `16px` → `var(--spacing-md)` | | Font sizes | `14px` → `var(--font-size-sm)` |

| Should Use Tokens (Warnings) | Example Fix | |------------------------------|-------------| | Border radius | `8px` → `var(--radius-md)` | | Shadows | `0 4px...` → `var(--shadow-md)` | | Z-index (≥100) | `1000` → `var(--z-dropdown)` |

Framework Selection

React/TypeScript

**Choose Vite + React when:**

• Building single-page applications
• Lightweight, fast development builds
• Maximum control over configuration
• No server-side rendering needed

**Choose Next.js 14/15 when:**

• Need server-side rendering or static generation
• Building full-stack with API routes
• SEO is important