React Composer

# React Composer

## Purpose
Refactors components using React composition patterns — avoids boolean prop proliferation, implements compound components, and uses context providers effectively.

## When to Use
Activate this skill when the user's request matches one of these scenarios:
- **"refactor this component"** — Apply React composition patterns to eliminate prop drilling, improve reusability, and simplify the component API.
- **"too many props"** — Apply the React Composer workflow to address this request.
- **"composition patterns"** — Apply the React Composer workflow to address this request.
- **"compound components"** — Apply the React Composer workflow to address this request.
- **"React component architecture"** — Apply the React Composer workflow to address this request.
- **"clean up props"** — Apply the React Composer workflow to address this request.

## Installation

### Quick Start
1. Choose the rules file format for your AI coding assistant from the list below.
2. Copy the entire skill definition into that file.
3. Save the file in your project root directory.
4. The assistant will automatically load the rules on next interaction.

### Assistant-Specific Setup
### Claude
1. Open your project root directory.
2. Create or edit `CLAUDE.md`.
3. Copy the full skill definition below into that file.
4. The assistant will automatically detect and apply these rules when relevant triggers are used.

### Cursor
1. Open your project root directory.
2. Create or edit `.cursorrules`.
3. Copy the full skill definition below into that file.
4. The assistant will automatically detect and apply these rules when relevant triggers are used.

### Windsurf
1. Open your project root directory.
2. Create or edit `.windsurfrules`.
3. Copy the full skill definition below into that file.
4. The assistant will automatically detect and apply these rules when relevant triggers are used.

### OpenCode
1. Open your project root directory.
2. Create or edit `AGENTS.md`.
3. Copy the full skill definition below into that file.
4. The assistant will automatically detect and apply these rules when relevant triggers are used.

### Cline
1. Open your project root directory.
2. Create or edit `.clinerules`.
3. Copy the full skill definition below into that file.
4. The assistant will automatically detect and apply these rules when relevant triggers are used.

### GitHub Copilot
1. Open your project root directory.
2. Create or edit `.github/copilot-instructions.md`.
3. Copy the full skill definition below into that file.
4. The assistant will automatically detect and apply these rules when relevant triggers are used.

### Continue
1. Open your project root directory.
2. Create or edit `.continuerc.json`.
3. Copy the full skill definition below into that file.
4. The assistant will automatically detect and apply these rules when relevant triggers are used.

### Aider
1. Open your project root directory.
2. Create or edit `.aider.conf.yml`.
3. Copy the full skill definition below into that file.
4. The assistant will automatically detect and apply these rules when relevant triggers are used.

### Cody
1. Open your project root directory.
2. Create or edit `.cody.json`.
3. Copy the full skill definition below into that file.
4. The assistant will automatically detect and apply these rules when relevant triggers are used.

### Amazon Q
1. Open your project root directory.
2. Create or edit `.amazon-q.json`.
3. Copy the full skill definition below into that file.
4. The assistant will automatically detect and apply these rules when relevant triggers are used.

### CodeGPT
1. Open your project root directory.
2. Create or edit `.codegpt.json`.
3. Copy the full skill definition below into that file.
4. The assistant will automatically detect and apply these rules when relevant triggers are used.

### Replit
1. Open your project root directory.
2. Create or edit `.replit`.
3. Copy the full skill definition below into that file.
4. The assistant will automatically detect and apply these rules when relevant triggers are used.

### Configuration Files
- `CLAUDE.md`
- `.cursorrules`
- `.windsurfrules`
- `AGENTS.md`
- `.clinerules`

### CLAUDE.md
```markdown
# React Composer — AI Assistant Rules
# Place this file in your project root as CLAUDE.md

Refactors components using React composition patterns — avoids boolean prop proliferation, implements compound components, and uses context providers effectively.

## Trigger Phrases
# - "refactor this component"
# - "too many props"
# - "composition patterns"
# - "compound components"
# - "React component architecture"
# - "clean up props"

## Operating Mode
When the user's request matches any trigger phrase above, activate the React Composer workflow defined in AGENTS.md or the equivalent rules file for your assistant.
```

### .cursorrules
```markdown
# React Composer — AI Assistant Rules
# Place this file in your project root as .cursorrules

Refactors components using React composition patterns — avoids boolean prop proliferation, implements compound components, and uses context providers effectively.

## Trigger Phrases
# - "refactor this component"
# - "too many props"
# - "composition patterns"
# - "compound components"
# - "React component architecture"
# - "clean up props"

## Operating Mode
When the user's request matches any trigger phrase above, activate the React Composer workflow defined in AGENTS.md or the equivalent rules file for your assistant.
```

### .windsurfrules
```markdown
# React Composer — AI Assistant Rules
# Place this file in your project root as .windsurfrules

Refactors components using React composition patterns — avoids boolean prop proliferation, implements compound components, and uses context providers effectively.

## Trigger Phrases
# - "refactor this component"
# - "too many props"
# - "composition patterns"
# - "compound components"
# - "React component architecture"
# - "clean up props"

## Operating Mode
When the user's request matches any trigger phrase above, activate the React Composer workflow defined in AGENTS.md or the equivalent rules file for your assistant.
```

### AGENTS.md
```markdown
# React Composer — AI Assistant Rules
# Place this file in your project root as AGENTS.md

Refactors components using React composition patterns — avoids boolean prop proliferation, implements compound components, and uses context providers effectively.

## Trigger Phrases
# - "refactor this component"
# - "too many props"
# - "composition patterns"
# - "compound components"
# - "React component architecture"
# - "clean up props"

## Operating Mode
When the user's request matches any trigger phrase above, activate the React Composer workflow defined in AGENTS.md or the equivalent rules file for your assistant.
```

### .clinerules
```markdown
# React Composer — AI Assistant Rules
# Place this file in your project root as .clinerules

Refactors components using React composition patterns — avoids boolean prop proliferation, implements compound components, and uses context providers effectively.

## Trigger Phrases
# - "refactor this component"
# - "too many props"
# - "composition patterns"
# - "compound components"
# - "React component architecture"
# - "clean up props"

## Operating Mode
When the user's request matches any trigger phrase above, activate the React Composer workflow defined in AGENTS.md or the equivalent rules file for your assistant.
```

## Operating Instructions
When this skill is activated:

1. **Clarify scope** — Confirm the user's specific goal, audience, constraints, and success criteria before proceeding.
2. **Gather context** — Inspect the relevant files, pages, analytics, or interfaces to understand the current state.
3. **Apply standards** — Evaluate against established best practices for development.
4. **Produce concrete output** — Deliver actionable results: edited code, rewritten copy, audit findings, or implementation plans.
5. **Verify quality** — Include validation steps, edge case handling, and success metrics with every deliverable.
6. **Document decisions** — Note what was changed, why, and what trade-offs were made for future reference.

## Workflow

### Phase 1: Discovery
- Identify the task type and confirm this skill is the right fit.
- Gather minimum context: project type, existing conventions, user goals.
- List assumptions and missing information before proceeding.

### Phase 2: Analysis
- Examine the current state against development best practices.
- Identify gaps, opportunities, and risks.
- Prioritize findings by impact and effort.

### Phase 3: Execution
- Produce the primary deliverable (code, copy, audit, plan).
- Follow project conventions and maintain consistency.
- Include before/after comparisons where relevant.

### Phase 4: Verification
- Run quality checks appropriate to the deliverable type.
- Confirm the output meets the user's stated goals.
- Surface any remaining risks or follow-up items.

## Example Prompts
- "Refactor this component — it has 15 boolean props."
- "Design a compound component API for our data table."

## Example Interaction

**User:** "I need help with refactors components using react composition patterns — avoids boolean prop proliferation, implements compound components, and uses context providers effectively."

**Assistant (with React Composer activated):**
"I'd be happy to help with that. Let me start by understanding your specific needs:

1. What type of project or content are we working with?
2. What's the primary goal or outcome you're targeting?
3. Are there any existing constraints or conventions I should follow?
4. What's the timeframe or priority level?

Once I have this context, I'll apply the React Composer framework to deliver actionable results."

**User:** [Provides context]

**Assistant:** [Applies the skill workflow and produces concrete, verified output]

## Integration Guide
Pair with **React Perf Optimizer** to ensure new components are performant, or with **Frontend Designer** for polished UI.

## Verification Checklist
- [ ] The assistant correctly activates this skill when relevant trigger phrases are used.
- [ ] All recommendations follow the operating instructions and constraints defined.
- [ ] Output includes concrete, actionable deliverables — not just analysis.
- [ ] The skill file is placed in the correct location: `CLAUDE.md`.
- [ ] Tested with Claude to verify rule detection and behavior.
- [ ] Edge cases and failure modes are documented and handled.

## Customization Guide
### Adjusting for Your Project
- **Tone and voice**: Update the operating instructions to match your brand voice or technical writing style.
- **Constraint specificity**: Add project-specific constraints (e.g., "Use TypeScript strict mode", "Follow BEM naming").
- **Toolchain references**: Replace generic tool references with your actual stack (e.g., "Submit a PR" → "Create a GitLab MR").
- **Success criteria**: Add custom quality checks that matter to your team.

### Scaling Across Teams
Share the `CLAUDE.md` file across all repositories in your organization to standardize development workflows. Each team can customize the trigger phrases and operating instructions without changing the core skill structure.

## Primary Use Cases
- Refactor components with boolean prop explosion
- Build reusable component libraries
- Design flexible component APIs

## Compatible Assistants
- Claude
- Cursor
- Windsurf
- OpenCode
- Cline
- GitHub Copilot
- Continue
- Aider
- Cody
- Amazon Q
- CodeGPT
- Replit

## Recommended Files
- CLAUDE.md
- .cursorrules
- .windsurfrules
- AGENTS.md
- .clinerules

## Trigger Phrases
- refactor this component
- too many props
- composition patterns
- compound components
- React component architecture
- clean up props

## Difficulty
**Advanced** — Advanced knowledge required. Best for experienced practitioners.