component-builder

Name: component-builder
Availability: InStock
Author: okgoogle13

Generate M3-compliant React components with MUI and design tokens.

1|Updated Aug 12, 2025

Search Tags:#design #react #scaffolding #tokens #mui #m3

Ready to run

npx skills add https://github.com/okgoogle13/careercopilot --skill component-builder

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: component-builder
Source: https://github.com/okgoogle13/careercopilot/tree/main/.claude/skills/component-builder
Command: npx skills add https://github.com/okgoogle13/careercopilot --skill component-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill generates self-contained, accessible React components using Material Design 3 tokens and MUI.

Core Features & Use Cases

Token-aware styling via sx and CSS variables
Accessible, typed TypeScript component API
Reusable building blocks with MUI primitives
Edge-case handling (loading, empty data, errors)
Design-token references and error fallback guidance

Quick Start

Describe the component you want (name, props, visuals) and this skill will scaffold a production-ready React component.

Frequently Asked Questions about component-builder

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

FAQPage Schema

How do I generate production-ready React components with Material Design 3?▼

Describe your component's name, props, and visual requirements, and this Skill scaffolds a production-ready React component using MUI primitives and M3 design tokens with TypeScript typing, accessibility compliance, and token-based styling via CSS variables.

Can I use design tokens for styling React components in MUI?▼

Yes. This Skill generates token-aware React components that leverage MUI and CSS variables for styling, ensuring consistent design system compliance and graceful fallback handling when tokens are missing.

How do I scaffold accessible React components with MUI and TypeScript?▼

This Skill generates fully typed, accessible React components using MUI as the foundation, enforcing TypeScript best practices with named props, built-in ARIA support, and edge-case handling for loading, empty states, and errors.

What's the best way to build UI elements compliant with Material Design 3?▼

Use M3-compliant component scaffolding that applies design tokens, MUI primitives, and strict accessibility standards. This Skill generates self-contained components ready for production with token references and fallback guidance.

Do I need to manually manage design tokens when building React components?▼

No. This Skill automates token-based styling through sx and CSS variables, handles missing tokens with console warnings and fallbacks, and integrates token references directly into generated components.

How does component scaffolding handle edge cases like loading states and errors?▼

Generated components include built-in edge-case handling for loading, empty data, and error states, plus accessibility enforcement and graceful fallback guidance when design tokens are unavailable.