| name | frontend-dev-flow |
| description | Standardized Test-Driven Development (TDD) and agile frontend development workflow. Use when taking on a new frontend feature or requirement. Manages the end-to-end process from design evaluation, tool selection (Claude Code, Gemini CLI, etc.), test planning, implementation, to UAT and final reporting. |
| license | MIT |
| category | development |
Frontend Development Flow (TDD & Agile)
This skill guides you through a rigorous, human-in-the-loop development process for frontend features. It ensures high quality through test-driven planning and structured documentation.
Directory Structure & State Management
All documents generated during this flow must be stored in a requirement-specific directory:
docs/features/YYYY-MM-DD-[feature-name]/
The flow is tracked through four sequential documents in this folder:
01-design-eval.md: Requirement breakdown, technical design, and human sign-off.
02-test-plan.md: Unit, Integration, and E2E test strategy and mock data definitions.
03-qa-uat-log.md: Incremental log of test failures, fixes, and user feedback during trials.
04-final-report.md: Summary of changes, test coverage, and technical debt.
Phase 0: Setup & Tool Selection
Trigger: When starting a new feature.
- Create the feature directory:
docs/features/YYYY-MM-DD-[feature-name]/.
- Mandatory Question: Ask the user:
"Which execution engine should I use for actual code writing?
A. Current Agent: I will write and modify the files directly.
B. Claude Code: I will provide instructions for you to run in Claude Code.
C. Gemini CLI: I will provide instructions for Gemini CLI.
D. Human: You will write the code, and I will guide/test."
- Record the selection in the metadata of
01-design-eval.md.
Phase 1: Requirement & Design Analysis
- Breakdown the feature into UI components, state logic, and API interactions.
- Perform technical boundary assessment (performance, security, constraints).
- Draft the initial implementation strategy in
01-design-eval.md.
Phase 2: Human Verification (Gate 1)
- Present the design in
01-design-eval.md to the user.
- Stop and Wait: You MUST obtain an explicit "Approved" or "Sign-off" from the user before proceeding to Phase 3.
Phase 3: Test-Driven Planning
- Based on the approved design, write the test plan in
02-test-plan.md.
- Define scenarios for:
- Unit Tests: Utility logic and isolated components.
- Integration Tests: Component interactions and state flow.
- E2E/UI Tests: Critical user paths.
- Define Mock API data structures.
Phase 4: Implementation
- If 'Current Agent' was chosen: Start writing code in
src/ and tests in tests/ following the test plan.
- If other tools were chosen: Generate a detailed prompt/instruction set based on
02-test-plan.md and direct the user to run it in the chosen tool.
- Follow a progressive implementation: Structure -> Logic -> Styles.
Phase 5: Test & Fix Loop
- Run the test suite (Unit, Integration, E2E).
- Log every failure in
03-qa-uat-log.md.
- Fix the code and re-run tests until all are green.
Phase 6: UAT & Requirement Check (Gate 2)
- Invite the user to perform a manual trial.
- Compare the implementation against the original requirements in
01-design-eval.md.
- Log user feedback or missed details in
03-qa-uat-log.md.
- If changes are needed, loop back to Phase 4 or 5 as appropriate.
Phase 7: Final Comprehensive Report
- Generate
04-final-report.md.
- Include:
- Summary of implemented functionality.
- List of changed files.
- Test results and coverage summary.
- Recommended next steps or identified technical debt.