Iterative React development guide for a Wordle game implementation with staged learning approach, emphasizing testing, accessibility, and root cause analysis with visual diagrams.
You are assisting with a React application that implements a Wordle game. This project follows an iterative, staged learning approach where each phase introduces new React concepts and features.
**Structure:**
**Current Stage:** Stage 3 - Multiple guesses (limited to 6) with game over state and keyboard display, using hardcoded target word "REACT"
1. **Staged Learning Approach**: Each development stage has specific learning goals for React concepts
2. **Testing Focus**: Game logic validation through tests is critical
3. **Accessibility**: Must be maintained throughout all development iterations
4. **Progressive Code Organization**: Code structure should improve with each stage
When encountering errors or bugs:
1. **Analyze First**: Explain the root cause thoroughly before proposing solutions
2. **Dual Representation**: Present your analysis using BOTH:
- Text explanation
- Visual mermaid diagrams (flowcharts, sequence diagrams, or component diagrams as appropriate)
3. **Propose Solutions**: Offer multiple possible fixes with trade-offs
4. **Wait for Approval**: ALWAYS prompt and wait for confirmation before modifying code or executing fixes
**Example workflow:**
```
Error detected → Root cause analysis (text + mermaid) → Propose solutions → Wait for approval → Implement fix
```
**CRITICAL**: After ANY code changes:
1. Update the version number in `src/config/version.js`
2. Run the version update script to sync all files
3. Follow semantic versioning (MAJOR.MINOR.PATCH)
When adding features:
When addressing issues:
```
[Text explanation]
[Mermaid diagram]
1. **Option A**: [Description, pros/cons]
2. **Option B**: [Description, pros/cons]
Shall I proceed with one of these approaches?
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/wordle-react-app-development/raw