assembling-components Skill: Wire UI Parts Into One Project

What is the assembling-components skill?

assembling-components is one of 76 skills in the ancoleman/ai-design-components library. Its SKILL.md calls it the capstone: run it after the theming, layout, dashboard, data visualization or feedback skills to turn their loose files into a working project.

It is library aware. The skill knows which files each sibling produces, such as tokens.css from theming and Dashboard.tsx from dashboards, and which CSS variables each one relies on, so it can check the whole chain end to end.

The assembly workflow

1. Validate: run validate_tokens.py on the generated CSS and fix violations before anything else.
2. Choose a framework: Vite with React, Next.js 14 or 15, FastAPI, Flask, Axum or Actix Web, using the skill's decision lists.
3. Scaffold: create the project structure, the entry point and the configuration files.
4. Wire imports: set the import order, add providers and write barrel exports.
5. Configure the build with vite.config, tsconfig and package.json.
6. Run final validation with a build, a type check and lint, then document setup in a README.

What changes in your agent's output

• Hardcoded colors, spacing and font sizes are flagged and swapped for variables such as var(--color-primary) and var(--spacing-md).
• Entry files import tokens.css first and globals.css second, so every component inherits the token values.
• Each component folder gets a barrel export, and a theme provider sits at the root with a data-theme switch.
• Delivery goes through a checklist covering the build, types, imports and reduced motion support.

Who assembling-components is for

Best for

• Projects built from several skills in the same library, where the pieces need one tidy hand-off.
• Teams that want a script to fail on stray hex colors and pixel values.
• Starting a Vite or Next.js dashboard, or a FastAPI, Flask or Axum back end, from a ready scaffold.

Not for

• Designing from nothing. It assembles outputs of sibling skills and does not pick a visual direction. For broader front end work, see frontend UI engineering.
• Projects with their own token names. The checks use this library's conventions, so another system needs the rules adapted.
• Stacks outside React, Next.js, FastAPI, Flask and Rust. Those are the templates it ships.

Use it with UiChemy

assembling-components ends with a working React or Next.js project. To get an AI build into WordPress, UiChemy AI to WordPress imports it, and Composer edits the result inside Elementor or Gutenberg. Click Get Started on uichemy.com.

For ready made parts before you assemble, shadcn UI MCP and Story UI MCP are two component sources to compare, and dark mode design goes deeper on the theme side.

How to install assembling-components Skill: Wire UI Parts Into One Project

git clone https://github.com/ancoleman/ai-design-components.git

1. Clone the repository

   Run git clone https://github.com/ancoleman/ai-design-components.git, then cd ai-design-components. The skill lives in the skills/assembling-components folder.

2. Run the installer

   The README recommends ./install.sh, an interactive menu for skills, the skillchain and plugins. ./install.sh plugins list shows the plugin groups on offer.

3. Or use plugin commands

   In Claude Code, claude plugin marketplace add ancoleman/ai-design-components adds the marketplace and claude plugin install <plugin>@ai-design-components installs one group. Use the plugins list to find the group that holds this skill.

4. Add the skills it assembles

   The skill chain names theming-components, designing-layouts, creating-dashboards, visualizing-data and providing-feedback as the sources of the files it wires together.

Check that it loaded

Ask the agent to assemble a dashboard project from generated components. It should run validate_tokens.py first, report any hardcoded values, scaffold the project and finish with a build and type check.

Read the official instructions on GitHub

Key features

• Token validation scriptscripts/validate_tokens.py scans a folder of CSS for hardcoded values. Colors, spacing of 4px and up, and font sizes count as errors. Border radius, shadows and z-index of 100 and up count as warnings.
• Strict and JSON modesThe --strict flag with --fix-suggestions names the variable to use in place of each violation, and --json gives output for CI. The scripts run directly without being loaded into context.
• Skill chain mapA table lists what each sibling skill outputs and which tokens it needs, from tokens.css and theme-provider.tsx to Toast, Spinner and EmptyState components.
• Framework decision listsShort criteria compare Vite with React against Next.js 14 or 15, FastAPI against Flask, and Axum against Actix Web.
• Project scaffoldinggenerate_scaffold.py and templates for React, Python and Rust create the entry point, index.html, vite.config.ts and a tsconfig.json with an @ alias to src.
• Ordered importsThe entry point loads tokens.css before globals.css, and check_imports.py looks for missing modules and broken import chains.
• Barrel exportsgenerate_exports.py writes an index file for each component directory, so features import from one path.
• Theme provider wiringA ThemeProvider supports light, dark and system modes, sets a data-theme attribute on the root element and stores the choice in localStorage.
• Integration checklistBefore delivery it confirms the token file, import order, no hardcoded values, a working theme toggle, reduced motion support, a clean build, passing types and resolving imports.
• Four example dashboardsThe skill folder carries example write-ups for React, Next.js, FastAPI and Rust Axum dashboards, plus reference notes for each template.

Frequently asked questions