# Assembling Components

Assembles component outputs from AI Design Components skills into unified...

- Repository: https://github.com/ancoleman/ai-design-components (526 stars)
- Category: Design
- License: MIT
- Last updated: 2025-12-11
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add ancoleman/ai-design-components --skill assembling-components -g -a claude-code -y`
Codex: `npx skills add ancoleman/ai-design-components --skill assembling-components -g -a codex -y`
Cursor: `npx skills add ancoleman/ai-design-components --skill assembling-components -g -a cursor -y`
Gemini CLI: `npx skills add ancoleman/ai-design-components --skill assembling-components -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add ancoleman/ai-design-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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:

The rest: https://github.com/ancoleman/ai-design-components/blob/HEAD/skills/assembling-components/SKILL.md