skills.rest
masermediagroup-stack
masermediagroup-stackCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

assembling-components

Assembles generated UI components into scaffolded React, Next.js, FastAPI, or Rust projects with token validation.

1|Updated Feb 24, 2026
Search Tags:#react#fastapi#scaffolding#design tokens#nextjs#css validation#component assembly
One-click install
npx skills add https://github.com/masermediagroup-stack/maser-media --skill assembling-components-masermediagroup-stack
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: assembling-components
Source: https://github.com/masermediagroup-stack/maser-media/tree/main/.cursor/skills/community/ai-design-components/skills/assembling-components
Command: npx skills add https://github.com/masermediagroup-stack/maser-media --skill assembling-components-masermediagroup-stack

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve? After generating components with theming, layout, dashboard, data-viz, and feedback skills, teams still face the manual work of wiring imports, enforcing design token usage, and scaffolding a runnable project. This Skill validates token compliance, generates project scaffolding, and wires components into a working application. ## Core Features & Use Cases - Token Validation: Runs validate_tokens.py to detect hardcoded colors, spacing, and font sizes that should use CSS custom properties, with strict mode and JSON output for CI/CD. - Project Scaffolding: Generates boilerplate for React/Vite, Next.js 14/15, Python FastAPI, or Rust Axum including entry points, theme providers, and build configuration. - Import Chain Wiring: Checks that tokens.css loads first, ThemeProvider wraps the app, and barrel exports exist via check_imports.py and generate_exports.py. - Use Case: After running a skill chain that produced tokens.css, Layout.tsx, KPICard.tsx, and Toast.tsx, use this Skill to validate the CSS, scaffold a Vite + React app, and wire everything into a buildable dashboard. ## Quick Start Assemble the components generated by the theming, layout, and dashboard skills into a working React Vite project and validate that all CSS uses design tokens.

Frequently Asked Questions about assembling-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I assemble components from multiple design skills into one app?▼

Run validate_tokens.py on the generated CSS first, then use generate_scaffold.py to create the project structure for your framework. Finally wire imports with correct order (tokens.css before globals.css), add ThemeProvider at the root, and generate barrel exports with generate_exports.py.

How do I validate that CSS uses design tokens instead of hardcoded values?▼

Run python scripts/validate_tokens.py on your styles directory. It flags hardcoded colors, spacing, and font sizes as errors, and border radius, shadows, and z-index as warnings. Use --strict --fix-suggestions for remediation hints or --json for CI/CD pipelines.

Should I use Vite or Next.js for a generated component project?▼

Choose Vite + React for single-page applications needing fast builds and full configuration control without server rendering. Choose Next.js 14/15 when you need SSR, static generation, API routes, SEO, or React Server Components.

Why is my theme toggle not switching between light and dark mode?▼

The theme system works by setting a data-theme attribute on the html element via ThemeProvider. Verify tokens.css is imported before other styles, ThemeProvider wraps the app in the entry file, and dark theme overrides exist under the [data-theme="dark"] selector.

Can this scaffold backends in Python or Rust as well as React?▼

Yes, generate_scaffold.py supports python-fastapi and rust-axum targets in addition to react-vite and nextjs. The FastAPI scaffold includes pyproject.toml, health routes, and Pydantic settings; the Axum scaffold includes Cargo.toml, routing, and tracing setup.

Related Skills

Explore More Software Engineering Skills→
ancolemanancoleman
503

assembling-components

Assemble component outputs into framework-specific projects with validated design tokens.

Community
Advanced
nikolanovoselecnikolanovoselec
25

github-cloudflare-ship

Set up GitHub repositories and deploy code to Cloudflare with CI/CD pipelines.

Community
Intermediate
CleanExpoCleanExpo

ui-component-builder

Generate React and Tailwind UI components matching DESIGN.md with required states.

Community
Advanced
vTRKAvTRKA

component-library-integration

Generate token bridge adapters and manifest updates for UI component libraries.

Community
Advanced