Generic Claude Code Framework

Production-ready Claude Code agents and skills with auto-generated documentation

🎯 What is This?

A comprehensive, reusable framework for Claude Code featuring:

• 14 Production-Ready Agents - Code quality, testing, UI/UX, project management, debugging
• 11 Productivity Skills - Simple, high-impact wins (61-99.8% token savings, 5-20x faster)
• Auto-Generated Documentation - Individual READMEs with installation guides
• Battle-Tested - Used in production projects (SubsHero SaaS)
• Unique Focus - Only framework prioritizing simple daily productivity wins

Perfect for: JavaScript/TypeScript, PHP/Laravel, React, Python projects

---

🚀 Quick Navigation

<table> <tr> <td width="50%">

📚 Browse Framework

• Agent Catalog → 13 agents categorized by type with benchmarks

• Skill Catalog → 10 skills grouped by language and category

• Productivity Wins → ⭐ Simple skills with 61-88% token savings

• Quick Start Guide → 5-minute setup for any project

</td> <td width="50%">

🎓 Learn More

• Framework Summary → Architecture, stats, and design principles

• Documentation System → How auto-generation works

• Ecosystem Reference → Discover other Claude Code repositories

• Changelog → Version history and releases

</td> </tr> </table>

---

⭐ Featured Agents

<table> <tr> <td width="50%">

🔧 eslint-fixer

Category: Code Quality & Linting Speed: ⚡⚡⚡⚡⚡ | Efficiency: 85% faster

Ultra-fast ESLint fixing with risk-based analysis (LOW/MEDIUM/HIGH). Feature-scoped for safer changes.

📖 Full Documentation | 🎯 Quick Start

</td> <td width="50%">

🎨 mockup-creation-agent

Category: UI/UX Speed: ⚡⚡⚡⚡ | Efficiency: 80% faster

Generate HTML/CSS mockups with design system integration, dark/light themes, and screenshot reference.

📖 Full Documentation | 🎯 Quick Start

</td> </tr> <tr> <td width="50%">

🧪 playwright-test-generator

Category: Testing & QA Speed: ⚡⚡⚡ | Complexity: Medium

Automated browser test generation from user interactions. Creates Playwright tests with proper assertions.

📖 Full Documentation

</td> <td width="50%">

📦 changelog-version-manager

Category: Project Management Speed: ⚡⚡⚡⚡ | Complexity: Low

Automated changelog updates and version releases with semantic versioning.

📖 Full Documentation

</td> </tr> </table>

👉 View All 13 Agents →

---

📊 Framework Stats

Metric	Value	Details
Agents	14 production-ready	View Catalog →
Skills	11 utilities	View Catalog →
Token Efficiency	Up to 99.8% reduction	Optimized prompts & scripts
Speed Improvement	Up to 95% faster	Direct API access
Documentation	Auto-generated	How it works →
Cross-Platform	Windows, Mac, Linux	Tested on all platforms

---

⚡ Quick Start (3 Steps)

1. Clone Framework

git clone https://github.com/yourusername/claude-code-framework.git
cd claude-code-framework

2. Copy to Your Project

# Copy generic framework to your project
cp -r generic-claude-framework/* /your-project/.claude/

3. Use in Claude Code

User: "Fix ESLint issues in src/"
Claude: I'll use the eslint-fixer agent...

📖 Full Setup Guide (5 minutes) →

---

🎯 Use Cases

I want to...	Use this	Documentation
Fix ESLint issues safely	eslint-fixer	Risk-based fixing
Generate browser tests	playwright-test-generator	E2E automation
Create UI mockups	mockup-creation-agent	Design prototyping
Run PHP tests	pest-test-runner	Coverage reports
Manage releases	changelog-version-manager	Semantic versioning
Parse markdown efficiently	markdown-helper skill	61-85% token savings
Query database quickly	sql-cli skill	87% faster than Tinker

👉 Browse All Use Cases →

---

📚 Documentation

For Users

• QUICKSTART.md - Get started in 5 minutes
• AGENT_CATALOG.md - Complete agent reference (categorized)
• SKILL_CATALOG.md - All skills (by language & category)
• FRAMEWORK_SUMMARY.md - Architecture & statistics

For Contributors

• DOCUMENTATION_SYSTEM.md - How auto-docs work
• CLAUDE.md - Project instructions for Claude Code
• CHANGELOG.md - Version history

Individual Agent/Skill Docs

All agents and skills have individual README files with:

• Installation instructions
• Dependencies (npm, pip, composer, etc.)
• Benchmarks
• Usage examples
• Configuration options

Browse agents/ | Browse skills/

---

🔧 Auto-Documentation System

This framework uses Python-based auto-generation for all documentation:

# Regenerate all documentation
npm run docs:generate

# Or use Python directly
python scripts/generate_docs.py

Generates:

• Individual README for each agent (13 files)
• Individual README for each skill (9 files)
• AGENT_CATALOG.md (categorized tables)
• SKILL_CATALOG.md (by language & category)

Learn more →

---

🎨 Agent Categories

Browse agents by category:

• Code Quality & Linting (1) - ESLint fixing
• Testing & QA (7) - Playwright, Pest, manual testing
• UI/UX & Design (2) - Mockups, design implementation
• Project Management (2) - Tasks, changelogs
• Development Utilities (1) - File watching

View Full Catalog →

---

🛠️ Skill Categories

Browse skills by category or language:

By Category

• Utilities - General purpose tools
• Development Tools - Dev aids
• Documentation - Doc generation

By Language

• Python - Changelog manager, Lark integration
• JavaScript - Markdown helper
• Bash - SQL CLI
• PHP - Time helper

View Full Catalog →

---

🚀 Performance Highlights

Token Efficiency

Agent/Skill	Traditional	Framework	Improvement
eslint-fixer	30,000 tokens	4,500 tokens	85% reduction
markdown-helper	1,580 tokens	270 tokens	83% less
sql-cli	1,500 tokens	200 tokens	87% faster

Speed Improvements

Operation	Traditional	Framework	Improvement
ESLint fixing	100-200s	5-10s	95% faster
Test generation	Hours	Minutes	90%+ time saved
Mockup creation	Manual coding	Template-based	80%+ time saved

---

🎓 Examples

Example 1: Fix ESLint Issues

User: "Fix ESLint issues in the authentication module"

Agent Process:
1. Discovers authentication files using presets
2. Analyzes issues → categorizes by risk (LOW/MEDIUM/HIGH)
3. Presents options to user
4. Applies selected fixes
5. Provides testing guidance

Result: Safe, feature-scoped ESLint fixing

Example 2: Generate Tests

User: "Generate Playwright tests for user registration"

Agent Process:
1. Navigates to registration page
2. Identifies form elements
3. Generates test scenarios
4. Creates Playwright test file
5. Validates execution

Result: Automated browser tests ready to run

Example 3: Create Mockup

User: "Create mockup for settings page with dark mode"

Agent Process:
1. Loads design system config
2. Generates HTML/CSS with theme toggle
3. Implements light/dark modes
4. Saves to /mockups/pages/
5. Provides usage instructions

Result: Interactive mockup with theme switching

More Examples →

---

🤝 Contributing

This framework thrives on community contributions!

How to Contribute

1. Add New Agents

   • Create agent file with YAML frontmatter
   • Add to generic-claude-framework/agents/
   • Run npm run docs:generate
   • Submit PR

2. Improve Documentation

   • Update YAML metadata
   • Add benchmarks
   • Run doc generator
   • Submit PR

3. Share Examples

   • Add your project-specific implementations
   • Place in generic-claude-framework/examples/ directory
   • Document customizations

Contribution Guidelines → (create this file)

---

📜 License

MIT License - See LICENSE file for details

---

🆘 Support

• Documentation: Start with docs/ directory
• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Claude Code Docs: https://docs.claude.com/en/docs/claude-code

---

🎯 Quick Links

Resource	Description
Agent Catalog	Browse all 13 agents by category
Skill Catalog	Browse all 9 skills by language
Quick Start	5-minute setup guide
Framework Summary	Architecture & stats
Documentation System	Auto-generation details
Changelog	Version history

---

Status: Production Ready ✅ | Version: 1.0.0 | Last Updated: 2025-10-21

Made with ❤️ by the community | Powered by Claude Code