assembling-components_skill

Overview

This skill assembles outputs from AI Design Components skills into unified, production-ready component systems with validated token integration, correct import chains, and framework-specific scaffolding. It acts as the capstone that wires theming, layout, dashboard, data-viz, and feedback pieces into working React/Next.js, Python, or Rust projects. The skill provides token validation, barrel export generation, and build configuration so generated code is deployable and maintainable.

How this skill works

The skill inspects generated component files, CSS token usage, and import graphs to detect missing tokens, hardcoded values, and broken entry points. It runs validation scripts (token checks, import checks) and produces scaffolding for the selected framework, inserting ThemeProvider, ToastProvider, and correct token import order. Finally it creates barrel exports, fixes import aliases, and outputs a checklist and build-ready project structure.

When to use it

• After completing a design skill chain (theming → layouts → dashboards → data-viz → feedback) to produce an integrated app
• When generating new project scaffolding for React/Vite, Next.js, FastAPI/Flask, or Rust/Axum
• To validate CSS uses design tokens and remove hardcoded values before delivery
• When imports are broken, entry points are missing, or barrel exports are absent
• Preparing generated code for CI/CD, type-checking, and production deployment

Best practices

• Import token definitions first (tokens.css → globals.css → component styles) in the app entry
• Run token validation in CI with json output for automated checks (validate\_tokens.py --json)
• Keep ThemeProvider at root and persist user theme to localStorage with data-theme attribute
• Generate barrel exports for each component folder to simplify imports and tree-shaking
• Fix all token errors before assembly; treat radius/shadow/z-index as warnings to improve consistency

Example use cases

• Assemble a Vite + React dashboard from separate theming, layout, and chart skills into a runnable demo
• Create a Next.js app with server and client boundaries, wired theme provider, and chart components
• Generate a FastAPI backend scaffold paired with a React frontend, ensuring tokens and imports resolve
• Validate and fix CSS token usage across components before handing to frontend engineers
• Produce Rust/Axum API scaffolding and wire UI components to backend endpoints for a full-stack demo