Refactor high-complexity React components in Dify frontend. Use when `pnpm analyze-component...
npx skills add echoVic/spec-flow
Or install specific skill: npx add-skill https://github.com/echoVic/spec-flow
# Description
Interactive spec-driven development workflow with phase-by-phase confirmation. Each phase waits for user confirmation before proceeding. Trigger phrases include "spec-flow", "spec mode", "need a plan", or "structured development". Creates .spec-flow/ directory with proposal, requirements, design, and tasks documents.
# SKILL.md
name: spec-flow
description: Interactive spec-driven development workflow with phase-by-phase confirmation. Each phase waits for user confirmation before proceeding. Trigger phrases include "spec-flow", "spec mode", "need a plan", or "structured development". Creates .spec-flow/ directory with proposal, requirements, design, and tasks documents.
Spec-Flow - Structured Development Workflow
Structured workflow for complex feature development. Creates living documentation that guides implementation and serves as team reference.
โ ๏ธ Interaction Rules (MUST Follow)
This skill uses a phase-by-phase confirmation workflow, ensuring users can review and adjust at each stage.
Language Rule
All generated documents (.md files) MUST be written in Chinese (ไธญๆ), including:
- proposal.md, requirements.md, design.md, tasks.md
- Section headings, descriptions, requirements text, task descriptions
- Comments and notes within documents
Core Principles
- One phase at a time: Only work on the current phase. NEVER generate documents for subsequent phases in advance.
- Mandatory confirmation: After completing each phase, you MUST stop and wait for user confirmation.
- User-driven progression: Only proceed to the next phase when user explicitly says "continue", "ok", "next", "looks good", "็ปง็ปญ", "ๅฅฝ", "ไธไธๆญฅ", etc.
Confirmation Template
After completing each phase, you MUST use this format to request confirmation:
๐ **[Phase Name] Complete**
Created `.spec-flow/active/<feature>/<file>.md` containing:
- [Key content summary]
**Please review**:
1. [Review question]?
2. [Review question]?
โ
Say "continue" to proceed to next phase
โ๏ธ Tell me what to modify if needed
โ Prohibited Behaviors
- Generating multiple phase documents after user describes a feature
- Automatically proceeding to next phase without user confirmation
- Creating both proposal.md and requirements.md in one response
- Assuming user wants to skip confirmation for speed
โ Correct Flow Example
User: I want to implement user authentication
AI: [Creates only proposal.md] + confirmation prompt
User: continue
AI: [Creates only requirements.md] + confirmation prompt
User: looks good, next
AI: [Creates only design.md] + confirmation prompt
User: continue
AI: [Creates only tasks.md] + confirmation prompt
Fast Mode (Optional)
If user explicitly requests to skip phase-by-phase confirmation:
- "generate all documents at once"
- "fast mode"
- "skip confirmations"
Then you may generate all documents consecutively, but still request final overall confirmation.
Quick Start
- Initialize spec directory: Run
scripts/init-spec-flow.sh <feature-name>or manually create.spec-flow/active/<feature-name>/ - Copy templates from this skill's
templates/directory - Follow four-phase workflow below
- Archive completed specs to
.spec-flow/archive/when done
Four-Phase Workflow
Phase 1: Proposal
Goal: Define WHY this change is needed
Create .spec-flow/active/<feature>/proposal.md using templates/proposal.md.template:
- Background: Context and motivation for the change
- Goals: What we want to achieve (with checkboxes)
- Non-Goals: What we explicitly won't do (reduces scope creep)
- Scope: In-scope vs out-of-scope boundaries
- Risks: Potential issues and mitigations
- Open Questions: Items needing clarification before proceeding
Exit Criteria: Proposal reviewed, open questions resolved, scope agreed.
โธ๏ธ Phase Checkpoint: After creating proposal.md, ask user:
- Is the background accurate?
- Are goals clear and measurable?
- Is the scope boundary reasonable?
- Is risk assessment complete?
โ Wait for user confirmation before proceeding to Requirements phase
Phase 2: Requirements
Goal: Define WHAT the system should do
Create .spec-flow/active/<feature>/requirements.md using templates/requirements.md.template:
Use EARS Format (see references/ears-format.md):
- Ubiquitous: "The system shall..."
- Event-Driven: "When [trigger], the system shall..."
- State-Driven: "While [state], the system shall..."
- Unwanted Behavior: "If [condition], then the system shall NOT..."
Include:
- Functional requirements (FR-001, FR-002, ...)
- Non-functional requirements: Performance, Security, Reliability (NFR-001, ...)
- Acceptance criteria (AC-001, AC-002, ...)
Exit Criteria: All requirements testable, acceptance criteria clear.
โธ๏ธ Phase Checkpoint: After creating requirements.md, ask user:
- Do functional requirements cover all use cases?
- Are non-functional requirements (performance/security/reliability) sufficient?
- Are acceptance criteria testable?
โ Wait for user confirmation before proceeding to Design phase
Phase 3: Design
Goal: Define HOW to implement
Create .spec-flow/active/<feature>/design.md using templates/design.md.template:
- Architecture Overview: High-level component diagram (use Mermaid)
- Component Design: Responsibilities and interfaces for each component
- API Design: Endpoints, request/response schemas
- Data Model: Entity relationships (use Mermaid erDiagram)
- Error Handling: Error codes, descriptions, resolutions
- Migration Plan: Steps for data/schema migrations (if applicable)
Exit Criteria: Design addresses all requirements, trade-offs documented.
โธ๏ธ Phase Checkpoint: After creating design.md, ask user:
- Does the architecture meet all requirements?
- Is the API design clear?
- Are there any missing edge cases?
โ Wait for user confirmation before proceeding to Tasks phase
Phase 4: Tasks
Goal: Break down into EXECUTABLE steps
Create .spec-flow/active/<feature>/tasks.md using templates/tasks.md.template:
Task Guidelines (see references/task-decomposition.md):
- Each task completable in 1-2 tool calls
- Include complexity estimate: Low/Medium/High
- List affected files
- Define dependencies between tasks
- Group into phases: Setup โ Implementation โ Testing โ Documentation
Progress Tracking:
- โณ Pending โ ๐ In Progress โ โ
Done
- โ Blocked (add notes explaining blocker)
Exit Criteria: All tasks completed, tests passing, documentation updated.
โธ๏ธ Phase Checkpoint: After creating tasks.md, ask user:
- Is the task granularity appropriate?
- Are dependencies correct?
- Ready to start implementation?
โ Wait for user confirmation before starting implementation
โ ๏ธ Phase 5: Implementation
Goal: Execute tasks according to tasks.md
๐๏ธ Execution Modes
Implementation supports three execution modes. Default is Step Mode unless user specifies otherwise.
| Mode | Trigger Phrases | Behavior |
|---|---|---|
| Step Mode (Default) | "start implementation", "ๅผๅงๆง่ก" | Execute ONE task, wait for confirmation, repeat |
| Batch Mode | "execute all", "ไธๅฃๆฐๆง่ก", "ๅ จ้จๆง่ก", "batch mode" | Execute ALL tasks consecutively, report at end |
| Phase Mode | "execute phase 1", "ๆง่ก็ฌฌไธ้ถๆฎต", "execute setup" | Execute all tasks in ONE phase, then wait |
๐ Step Mode (Default)
Execute tasks one at a time with user confirmation between each.
When to use: Complex tasks, need careful review, first time using spec-flow
Flow:
User: start implementation
AI: ๐ **Task T-001**: [description]
[Executes task]
โ
Completed (1/10)
๐ Say "continue" for next task
User: continue
AI: ๐ **Task T-002**: [description]
...
โก Batch Mode
Execute all remaining tasks consecutively without waiting.
When to use: Simple tasks, trusted plan, want speed
Trigger phrases:
- "execute all tasks" / "ๅ
จ้จๆง่ก"
- "batch mode" / "ๆน้ๆง่ก"
- "ไธๅฃๆฐๆง่กๅฎ"
- "run all remaining tasks"
Flow:
User: execute all tasks
AI: โก **Batch Mode Activated**
๐ T-001: [description] โ โ
๐ T-002: [description] โ โ
๐ T-003: [description] โ โ
...
๐ **Batch Complete**: 10/10 tasks done
**Summary**:
- Files created: [list]
- Files modified: [list]
โ ๏ธ Stopped early? Check error above.
Batch Mode Rules:
1. Still update tasks.md after each task
2. Stop immediately if any task fails or has error
3. Provide summary at the end
4. User can interrupt with "stop" or "ๆๅ"
๐ฆ Phase Mode
Execute all tasks within a specific phase, then wait for confirmation.
When to use: Want to review after each phase (Setup โ Core โ Testing โ Docs)
Trigger phrases:
- "execute phase 1" / "ๆง่ก็ฌฌไธ้ถๆฎต"
- "execute setup phase" / "ๆง่ก Setup"
- "run all setup tasks"
Flow:
User: execute setup phase
AI: ๐ฆ **Phase Mode: Setup**
๐ T-001: [description] โ โ
๐ T-002: [description] โ โ
โ
**Setup Phase Complete** (2/10 total)
**Next phase**: Core Implementation (T-010 to T-015)
๐ Say "continue" or "execute next phase"
๐จ BEFORE Starting Any Task (All Modes)
You MUST do these steps before executing:
- Read tasks.md - Get current task list and statuses
- Identify target tasks - Based on mode (one task / all tasks / phase tasks)
- Check dependencies - Ensure dependency tasks are completed (
- [x]) - Read design.md - Review relevant design sections
โ REQUIRED Behaviors (All Modes)
| Action | Step Mode | Batch Mode | Phase Mode |
|---|---|---|---|
| Read tasks.md before starting | โ | โ | โ |
| Check dependencies | โ | โ | โ |
Update - [ ] to - [x] after each task |
โ | โ | โ |
| Show progress | After each | After each | After each |
| Wait for confirmation | After each task | After all done | After phase done |
| Stop on error | โ | โ | โ |
โ PROHIBITED Behaviors (All Modes)
| Prohibited Action | Why It's Wrong |
|---|---|
| Skip a task | Breaks dependency chain |
| Execute tasks out of order | Dependencies may not be met |
| Do work not in tasks.md | Scope creep, untracked changes |
| Forget to update tasks.md | Progress tracking inaccurate |
| Continue after error without user approval | May cause cascading failures |
๐ When to STOP (All Modes)
Stop and ask user for guidance when:
- A task fails or produces errors
- Design is incomplete for current task
- A dependency is missing or blocked
- Task description is ambiguous
- Need a decision not covered in design.md
Directory Structure
project-root/
โโโ .spec-flow/
โโโ steering/ # Global project context (optional)
โ โโโ constitution.md # Project governance principles
โ โโโ product.md # Product vision and goals
โ โโโ tech.md # Technology constraints
โ โโโ structure.md # Code organization patterns
โโโ active/ # Work in progress
โ โโโ <feature-name>/
โ โโโ proposal.md
โ โโโ requirements.md
โ โโโ design.md
โ โโโ tasks.md
โ โโโ .meta.json # Status, timestamps, owner
โโโ archive/ # Completed features (for reference)
โโโ <feature-name>/
โโโ ...
Steering Documents (Optional)
For larger projects, create .spec-flow/steering/ documents to provide consistent context across all specs:
| Document | Purpose | Template |
|---|---|---|
constitution.md |
Project governance, decision-making principles | templates/steering/constitution.md.template |
product.md |
Product vision, target users, key metrics | templates/steering/product.md.template |
tech.md |
Tech stack, constraints, dependencies | templates/steering/tech.md.template |
structure.md |
Code organization, naming conventions | templates/steering/structure.md.template |
Workflow Tips
Phase Transitions
| From | To | Condition |
|---|---|---|
| Proposal | Requirements | Proposal approved, questions resolved |
| Requirements | Design | Requirements complete, testable |
| Requirements | Tasks | Simple feature, design implicit |
| Design | Tasks | Design approved |
| Tasks | Done | All tasks complete, archived |
When to Skip Phases
- Skip Design: For simple features where architecture is obvious
- Never Skip: Proposal and Tasks (always clarify intent and break down work)
Best Practices
- Keep specs updated: Update status as work progresses
- Link to code: Reference commits, PRs, file paths in tasks
- Archive completed specs: Move to
.spec-flow/archive/when done - Review steering docs: Reference them when writing new specs
- Validate completeness: Run
scripts/validate-spec-flow.pybefore implementation
References
- Complete workflow guide: See
references/workflow.md - EARS requirement format: See
references/ears-format.md - Task decomposition patterns: See
references/task-decomposition.md - Real-world examples: See
references/examples/
Compatibility
This skill works with any AI agent that supports the Skills format:
- Claude Code (~/.claude/skills/)
- Blade (~/.blade/skills/)
- Other compatible agents
The .spec-flow/ directory is Git-friendly and can be committed with your project for team collaboration.
# README.md
Spec-Flow
A Claude Code skill for structured, spec-driven development
Spec-Flow is an interactive skill for Claude Code that transforms complex feature development into a guided, phase-by-phase workflow with living documentation. Perfect for teams that want systematic planning and clear implementation paths.
๐ Features
- Phase-by-Phase Workflow: Breaks down feature development into 4 clear phases (Proposal โ Requirements โ Design โ Tasks)
- Interactive Confirmation: Each phase waits for your approval before proceeding
- Living Documentation: Creates
.spec-flow/directory with Markdown documents that guide implementation - EARS Requirements: Uses industry-standard Easy Approach to Requirements Syntax
- Flexible Execution: Supports Step, Batch, and Phase execution modes
- Team Collaboration: Git-friendly structure for sharing specs across teams
๐ฆ Installation
For Claude Code (Recommended)
This is a Claude Code skill that extends Claude's capabilities with structured development workflows.
# Clone to your Claude Code skills directory
cd ~/.claude/skills
git clone https://github.com/echoVic/spec-flow.git
# Verify installation
ls ~/.claude/skills/spec-flow
Once installed, the skill is automatically available in Claude Code. Just say "spec-flow" to activate it!
For Other Compatible Agents
This skill also works with other AI agents that support the Skills format (Blade, etc.). Install to the appropriate skills directory for your agent.
๐ Quick Start
1. Trigger the Workflow
Use any of these phrases to start:
- "spec-flow"
- "spec mode"
- "need a plan"
- "structured development"
2. Four-Phase Development
โโโโโโโโโโโโ โโโโโโโโโโโโโโโโ โโโโโโโโโโ โโโโโโโโโ
โ Proposal โ -> โ Requirements โ -> โ Design โ -> โ Tasks โ
โโโโโโโโโโโโ โโโโโโโโโโโโโโโโ โโโโโโโโโโ โโโโโโโโโ
WHY WHAT HOW EXECUTE
Phase 1: Proposal
Defines WHY this change is needed
- Background and motivation
- Goals and non-goals
- Scope boundaries
- Risk assessment
Phase 2: Requirements
Defines WHAT the system should do
- Functional requirements (EARS format)
- Non-functional requirements (performance, security, reliability)
- Acceptance criteria
Phase 3: Design
Defines HOW to implement
- Architecture overview (with Mermaid diagrams)
- Component design and interfaces
- API specifications
- Data models
Phase 4: Tasks
Breaks down into EXECUTABLE steps
- Granular tasks (1-2 tool calls each)
- Dependency tracking
- Progress monitoring (โณ Pending โ ๐ In Progress โ โ
Done)
3. Implementation
Choose your execution mode:
| Mode | Trigger | Behavior |
|---|---|---|
| Step (Default) | "start implementation" | Execute one task, wait for confirmation |
| Batch | "execute all tasks" | Execute all tasks consecutively |
| Phase | "execute setup phase" | Execute all tasks in one phase |
๐ Directory Structure
your-project/
โโโ .spec-flow/
โโโ steering/ # Optional: Global project context
โ โโโ constitution.md # Governance principles
โ โโโ product.md # Product vision
โ โโโ tech.md # Tech stack constraints
โ โโโ structure.md # Code organization
โโโ active/ # Work in progress
โ โโโ user-auth/
โ โโโ proposal.md
โ โโโ requirements.md
โ โโโ design.md
โ โโโ tasks.md
โโโ archive/ # Completed features
โโโ oauth-login/
โโโ ...
๐ก Example Usage
User: I need to add user authentication to my app
AI: I'll help you design this feature using spec-flow. Let me start by creating a proposal.
[Creates .spec-flow/active/user-auth/proposal.md]
๐ **Proposal Complete**
Created `.spec-flow/active/user-auth/proposal.md` containing:
- Background: Why we need authentication
- Goals: Security, user management, session handling
- Risks: Security vulnerabilities, performance impact
**Please review**:
1. Is the scope reasonable?
2. Are there any missing risks?
โ
Say "continue" to proceed to Requirements phase
โ๏ธ Tell me what to modify if needed
User: continue
AI: [Creates requirements.md with EARS-formatted requirements]
...
๐ Language Support
- Workflow Instructions: English (this README, SKILL.md)
- Generated Documents: Chinese (ไธญๆ) - proposal.md, requirements.md, design.md, tasks.md
This is configurable in the skill if you need documents in other languages.
๐ Documentation
- Main Skill File:
SKILL.md- Complete workflow guide - References:
references/ears-format.md- EARS requirement syntaxreferences/task-decomposition.md- Task breakdown patternsreferences/workflow.md- Detailed workflow guidereferences/examples/- Real-world examples- Templates:
templates/- All document templates
๐ ๏ธ Utilities
Initialize Spec Directory
./scripts/init-spec-flow.sh <feature-name>
Validate Spec Completeness
python3 scripts/validate-spec-flow.py
Execute Task
./scripts/execute-task.sh <task-id>
๐ค Contributing
Contributions are welcome! Please feel free to submit a Pull Request. For major changes:
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
๐ License
This project is licensed under the MIT License - see the LICENSE file for details.
๐ Acknowledgments
- Inspired by industry best practices in software specification and requirements engineering
- EARS (Easy Approach to Requirements Syntax) methodology
- Claude Code community
๐ง Contact
- GitHub: @echoVic
- Issues: GitHub Issues
๐ Related Projects
- Claude Code - Official Claude CLI tool
- Claude Agent SDK - Build custom Claude agents
Made with โค๏ธ for better software development workflows
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.