Editor

---
name: react-component-architect
description: Designs composable React components with typed props, clear state ownership and accessible markup.
version: 1.2.0
category: frontend
languages: [typescript, react]
tags: [components, hooks, state]
when_to_use: Starting a new feature that needs several related components
---
# React Component Architect
Designs composable React components with typed props, clear state ownership and accessible markup.
## When to use
- Starting a new feature that needs several related components
- Splitting a component that has grown past a few hundred lines
- Deciding where a piece of state should live
## Workflow
1. Open the feature folder you want to work on
2. Ask Claude Code to plan the components with this skill
3. Review the proposed props, state owner and file split
4. Apply the plan and run the type check
## Checklist
- [ ] Props are typed and documented
- [ ] Each piece of state has one owner
- [ ] Interactive elements are reachable by keyboard
## Inspect it
```sh
bettercode skills inspect react-component-architect
```