component-architect
CommunityDesign React component APIs.
Software Engineering#typescript#developer tools#react#frontend development#component design#api architecture
Authorkaelig
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill streamlines the process of translating design specifications into robust, well-structured React component architectures, ensuring API ergonomics, composability, and maintainability.
Core Features & Use Cases
- API Design: Defines TypeScript prop interfaces, prioritizing discriminated unions and compound components.
- File Structure: Outlines the optimal file organization for components.
- Composition Strategy: Determines how components will be built and interact.
- Library Recommendation: Suggests suitable third-party libraries for complex components, checking against banned dependencies.
- Use Case: When a designer provides a brief for a new complex UI element like a date picker, this Skill generates the TypeScript interfaces, file structure, and composition strategy needed for development.
Quick Start
Generate the architecture for a new 'UserProfileCard' component based on the provided design brief.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: component-architect Download link: https://github.com/kaelig/react-craft/archive/main.zip#component-architect Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.