Document Feature: $ARGUMENTS
Generate comprehensive documentation for a feature in both developer and user-friendly formats.
Process
Phase 1: Feature Analysis
- Identify feature type: Frontend, Backend, or Full-stack
- Gather technical context: Files, types, dependencies, data flow
- Analyze user interaction: UI elements, step-by-step journey
Search in: /components/, /app/, /lib/, /types/, /contexts/
Phase 2: Developer Documentation
Create: docs/dev/$ARGUMENTS-implementation.md
Required sections:
- Overview and quick reference
- Architecture (component structure, data flow, types)
- Implementation details (core logic, state, events)
- Code examples (basic and advanced)
- Testing (coverage, manual checklist)
- Integration guide (config, dependencies)
- API reference (if applicable)
- Maintenance (known issues, future work)
Phase 3: User Documentation
Create: docs/user/how-to-$ARGUMENTS.md
Required sections:
- Overview (what it does, benefits)
- Getting started (prerequisites, access)
- Step-by-step instructions with screenshot placeholders
- Common use cases/scenarios
- Tips and best practices (do's, don'ts, pro tips)
- Troubleshooting (common problems + solutions)
- FAQ
- Related features
Phase 4: Screenshot List
Create: docs/screenshots/$ARGUMENTS-screenshots-needed.txt
List all screenshots needed with:
- Filename
- What to show
- What to highlight
Phase 5: Cross-References
- Update main documentation index
- Add links to related docs
- Update CLAUDE.md if new patterns introduced
Naming Conventions
| Type |
Pattern |
Example |
| Dev docs |
[feature]-implementation.md |
dark-mode-implementation.md |
| User docs |
how-to-[feature].md |
how-to-dark-mode.md |
| Screenshots |
[feature]-[context].png |
dark-mode-toggle.png |
Quality Standards
Developer docs: Technically accurate, includes file paths and line numbers, proper terminology
User docs: Non-technical language, visual aids, clear actionable steps, scannable formatting
Output Checklist
1---2name: document-feature-whatifwedigdeeper-application-tracker3description: Generate technical and user documentation for a feature4---56# Document Feature: $ARGUMENTS78Generate comprehensive documentation for a feature in both developer and user-friendly formats.910## Process1112### Phase 1: Feature Analysis13141. **Identify feature type**: Frontend, Backend, or Full-stack152. **Gather technical context**: Files, types, dependencies, data flow163. **Analyze user interaction**: UI elements, step-by-step journey1718Search in: `/components/`, `/app/`, `/lib/`, `/types/`, `/contexts/`1920### Phase 2: Developer Documentation2122Create: `docs/dev/$ARGUMENTS-implementation.md`2324**Required sections:**251. Overview and quick reference262. Architecture (component structure, data flow, types)273. Implementation details (core logic, state, events)284. Code examples (basic and advanced)295. Testing (coverage, manual checklist)306. Integration guide (config, dependencies)317. API reference (if applicable)328. Maintenance (known issues, future work)3334### Phase 3: User Documentation3536Create: `docs/user/how-to-$ARGUMENTS.md`3738**Required sections:**391. Overview (what it does, benefits)402. Getting started (prerequisites, access)413. Step-by-step instructions with screenshot placeholders424. Common use cases/scenarios435. Tips and best practices (do's, don'ts, pro tips)446. Troubleshooting (common problems + solutions)457. FAQ468. Related features4748### Phase 4: Screenshot List4950Create: `docs/screenshots/$ARGUMENTS-screenshots-needed.txt`5152List all screenshots needed with:53- Filename54- What to show55- What to highlight5657### Phase 5: Cross-References5859- Update main documentation index60- Add links to related docs61- Update CLAUDE.md if new patterns introduced6263## Naming Conventions6465| Type | Pattern | Example |66|------|---------|---------|67| Dev docs | `[feature]-implementation.md` | `dark-mode-implementation.md` |68| User docs | `how-to-[feature].md` | `how-to-dark-mode.md` |69| Screenshots | `[feature]-[context].png` | `dark-mode-toggle.png` |7071## Quality Standards7273**Developer docs**: Technically accurate, includes file paths and line numbers, proper terminology7475**User docs**: Non-technical language, visual aids, clear actionable steps, scannable formatting7677## Output Checklist7879- [ ] Dev doc at correct path with all sections80- [ ] User doc at correct path with all sections81- [ ] Screenshot placeholder list generated82- [ ] Code examples syntactically correct83- [ ] Cross-references added84- [ ] Technical accuracy verified against code
majiayu000