From 61f4ccdae0d7ce0cb5dbc54fd572862f23239a24 Mon Sep 17 00:00:00 2001 From: Oliver Schafeld Date: Sat, 13 Sep 2025 14:42:24 +0200 Subject: [PATCH] add Claude command 'document-feature' --- .claude/commands/document-feature.md | 238 +++++++++++++++++++++++++++ 1 file changed, 238 insertions(+) create mode 100644 .claude/commands/document-feature.md diff --git a/.claude/commands/document-feature.md b/.claude/commands/document-feature.md new file mode 100644 index 0000000..5e76860 --- /dev/null +++ b/.claude/commands/document-feature.md @@ -0,0 +1,238 @@ +# Document Feature Command + +## Purpose + +Automatically generates comprehensive documentation for new features, including both technical documentation for developers and user-friendly guides for end users. + +## Usage + +```bash +document-feature [options] +``` + +### Examples + +- `document-feature password-reset` +- `document-feature expense-categories --type=frontend` +- `document-feature api-export --type=backend` +- `document-feature user-dashboard --screenshots` + +### Options + +- `--type=` - Force feature type detection +- `--screenshots` - Include automated screenshot placeholders in user docs +- `--no-cross-refs` - Skip automatic cross-referencing +- `--template=` - Use custom documentation template + +## Command Implementation + +When you run this command, I will: + +1. **Analyze the Feature** + - Search the codebase for files related to the feature name + - Analyze component structure, hooks, utilities, and types + - Determine if the feature is frontend, backend, or full-stack + - Identify related existing features and documentation + +2. **Set Up Documentation Structure** + - Create `docs/dev/` and `docs/user/` directories if they don't exist + - Set up proper documentation organization with clear naming conventions + +3. **Generate Developer Documentation** + - Technical specifications and architecture overview + - API endpoints and data models (if backend involved) + - Component hierarchy and props interfaces (if frontend involved) + - Implementation details and code examples + - Testing guidelines and edge cases + - Performance considerations + - Security implications + +4. **Generate User Documentation** + - Clear, step-by-step user guide + - Feature benefits and use cases + - Screenshot placeholders with descriptive captions + - Troubleshooting section + - FAQ for common questions + - Accessibility features + +5. **Add Cross-References** + - Link technical and user documentation + - Reference related existing documentation + - Add navigation between documentation sections + - Create documentation index if needed + +6. **Feature Type Detection Logic** + - **Frontend**: Components in `src/components/`, hooks in `src/hooks/`, pages in `src/app/` + - **Backend**: API routes in `src/app/api/`, server utilities, database schemas + - **Full-stack**: Combination of frontend and backend elements + - **Utility**: Helper functions in `src/lib/`, type definitions in `src/types/` + +## Documentation Templates + +### Developer Documentation Structure + +```markdown +# [Feature Name] - Technical Documentation + +## Overview +- Feature description and purpose +- Architecture overview +- Technical requirements + +## Implementation Details +- Component structure (if frontend) +- API specification (if backend) +- Data models and types +- Key algorithms or logic + +## Code Examples +- Usage examples +- Integration patterns +- Testing examples + +## Performance & Security +- Performance considerations +- Security implications +- Best practices + +## Testing +- Unit test examples +- Integration test guidelines +- Edge cases to consider + +## Maintenance +- Monitoring and debugging +- Common issues and solutions +- Extension points +``` + +### User Documentation Structure + +```markdown +# How to Use [Feature Name] + +## What is [Feature Name]? +- Clear explanation of what the feature does +- Benefits and use cases +- When to use this feature + +## Getting Started +- Prerequisites +- Step-by-step setup (if needed) + +## Using the Feature +- Detailed step-by-step instructions +- Screenshots and visual guides +- Common workflows + +## Tips and Best Practices +- Pro tips for effective usage +- Common mistakes to avoid +- Optimization suggestions + +## Troubleshooting +- Common issues and solutions +- Error messages and their meanings +- When to contact support + +## FAQ +- Frequently asked questions +- Additional resources +``` + +## Execution Process + +When you run `document-feature `, I will: + +1. **Pre-Analysis Phase** + - Validate the feature name format + - Check if documentation already exists + - Scan the codebase for related files + +2. **Analysis Phase** + - Identify all files related to the feature + - Analyze component dependencies and relationships + - Extract types, interfaces, and function signatures + - Determine feature complexity and scope + +3. **Generation Phase** + - Create documentation directories if needed + - Generate technical documentation with code analysis + - Generate user documentation with clear instructions + - Add screenshot placeholders where appropriate + +4. **Cross-Reference Phase** + - Link between technical and user docs + - Reference related existing documentation + - Update documentation index/navigation + +5. **Validation Phase** + - Check for missing information + - Validate documentation completeness + - Suggest improvements or additions + +## Smart Features + +### Automatic Code Analysis + +- Extract component props and state management +- Identify hooks and their dependencies +- Document API endpoints and their parameters +- Analyze data flow and side effects + +### Screenshot Integration + +- Automatically insert screenshot placeholders +- Generate descriptive captions based on feature analysis +- Suggest optimal screenshot locations for maximum clarity + +### Cross-Reference Intelligence + +- Link to related components and utilities +- Reference similar patterns in existing code +- Connect to relevant sections of existing documentation + +### Template Customization + +- Adapt templates based on feature type and complexity +- Include technology-specific sections (React hooks, Next.js pages, etc.) +- Adjust depth and detail based on feature scope + +## Output Examples + +For `document-feature expense-export`: + +**Generated Files:** + +- `docs/dev/expense-export-implementation.md` - Technical specs +- `docs/user/how-to-export-expenses.md` - User guide + +**Content Includes:** + +- Component analysis (`ExportButton`, `ExportModal`) +- Utility function documentation (`exportToCSV`, `downloadCSV`) +- Type definitions (`ExportFormat`, `ExportOptions`) +- User workflow with screenshot placeholders +- Cross-references to related expense management docs + +## Integration with Project + +This command understands your Next.js project structure: + +- Analyzes TypeScript components and their props +- Documents React hooks and their usage patterns +- Identifies Tailwind CSS styling patterns +- Understands the project's type system and interfaces +- Recognizes the localStorage-based data persistence approach + +## Benefits + +1. **Consistency** - Standardized documentation format across all features +2. **Completeness** - Ensures both technical and user perspectives are covered +3. **Efficiency** - Automates tedious documentation tasks +4. **Accuracy** - Based on actual code analysis rather than assumptions +5. **Maintenance** - Creates living documentation that can be updated as features evolve + +--- + +**Ready to use!** Just run `document-feature ` and I'll generate comprehensive documentation for any feature in your codebase. \ No newline at end of file