Repository: mag-claude-plugins (local development path: project root)
Marketplace: mag-claude-plugins
Owner: Jack Rudenko (i@madappgang.com) @ MadAppGang
License: MIT
3 Production Plugins:
- Frontend Development (v2.8.0) - 13 agents, 6 commands, 3 skills
- Code Analysis (v1.1.0) - 1 agent, 1 command, 2 skills
- Bun Backend Development (v1.2.0) - 3 agents, 3 commands, 1 skill
Total Artifacts: 22 files
What's New in v2.8.0:
- Intelligent Workflow Detection - /implement command now automatically detects API/UI/Mixed workflows and adapts execution
- API-focused workflows skip design validation and UI testing for faster implementation
- UI-focused workflows get full design validation and 3-reviewer quality gates
- Mixed workflows combine both with appropriate focus areas
- Adaptive code review (2 or 3 reviewers based on workflow type)
- Workflow-specific testing strategies (API tests vs UI tests)
What's New in v2.7.0:
- Chrome DevTools MCP debugging methodology for responsive layout issues
What's New in v2.6.1:
- CVA (class-variance-authority) best practices for shadcn/ui
What's New in v2.6.0:
- CSS-aware design validation with DOM inspection and computed CSS analysis
What's New in v2.5.0:
- CSS Developer agent for CSS architecture management
- Task decomposition in /implement-ui for parallel execution
| Agent | Purpose | File |
|---|---|---|
| developer | Expert TypeScript/React implementation | agents/developer.md |
| architect | Architecture planning & design | agents/architect.md |
| tester | Browser-based UI testing with Chrome DevTools | agents/tester.md |
| test-architect | Testing strategy & implementation | agents/test-architect.md |
| api-analyst | API docs analysis & integration | agents/api-analyst.md |
| cleaner | Cleanup temporary artifacts | agents/cleaner.md |
| reviewer | Human-style code review | agents/reviewer.md |
| codex-reviewer | AI-powered code review using Codex | agents/codex-reviewer.md |
| designer | Senior UX/UI design review with CSS-aware validation | agents/designer.md |
| designer-codex | Expert design validation proxy via Codex AI | agents/designer-codex.md |
| css-developer | CSS architecture specialist maintaining CSS knowledge files | agents/css-developer.md |
| ui-developer | Senior UI/UX developer (React 19, Tailwind CSS 4, WCAG 2.1 AA) | agents/ui-developer.md |
| ui-developer-codex | Expert UI review proxy via Codex AI | agents/ui-developer-codex.md |
| Command | Purpose | File |
|---|---|---|
| /implement | NEW in v2.8.0: Full-cycle feature implementation with intelligent workflow detection and 8 adaptive phases (automatically skips design validation for API-only tasks) | commands/implement.md |
| /import-figma | Import Figma components into React project | commands/import-figma.md |
| /configure-mcp | Configure MCP servers (Apidog, Figma, etc.) | commands/configure-mcp.md |
| /api-docs | Analyze & work with API documentation | commands/api-docs.md |
| /cleanup-artifacts | Clean up temporary development artifacts | commands/cleanup-artifacts.md |
| /validate-ui | UI validation workflow with designer & ui-developer agents | commands/validate-ui.md |
| /implement-ui | Implement UI from scratch with task decomposition & intelligent agent switching | commands/implement-ui.md |
| Skill | Purpose | Directory |
|---|---|---|
| browser-debugger | Systematic UI testing & debugging | skills/browser-debugger/ |
| api-spec-analyzer | OpenAPI/Swagger analysis & client generation | skills/api-spec-analyzer/ |
| ui-implementer | Proactive UI implementation from design references | skills/ui-implementer/ |
Total Artifacts: 5 files
| Agent | Purpose | File |
|---|---|---|
| codebase-detective | Deep code investigation and analysis | agents/codebase-detective.md |
| Command | Purpose | File |
|---|---|---|
| /analyze | Launch deep codebase investigation | commands/analyze.md |
| Skill | Purpose | Directory |
|---|---|---|
| deep-analysis | Automatic code investigation | skills/deep-analysis/ |
| semantic-code-search | Expert guidance on claude-context MCP usage | skills/semantic-code-search/ |
Total Artifacts: 10 files
What's New in v1.2.0:
- Comprehensive camelCase naming conventions for API and database
- Database naming standards documentation
- Apidog integration for API documentation synchronization
What's New in v1.1.0:
- Apidog agent for API documentation management
- /apidog command for quick API spec synchronization
- Apidog MCP server configuration
| Agent | Purpose | File |
|---|---|---|
| backend-developer | Expert TypeScript backend implementation with Bun | agents/backend-developer.md |
| api-architect | Backend API architecture planning | agents/api-architect.md |
| apidog | API documentation synchronization specialist | agents/apidog.md |
| Command | Purpose | File |
|---|---|---|
| /implement-api | Full-cycle API implementation with orchestration | commands/implement-api.md |
| /setup-project | Initialize new Bun + TypeScript backend project | commands/setup-project.md |
| /apidog | Synchronize API specifications with Apidog | commands/apidog.md |
| Skill | Purpose | Directory |
|---|---|---|
| best-practices | Comprehensive TypeScript backend best practices (2025) | skills/best-practices.md |
Best Practices Includes:
- ✅ camelCase naming conventions (API + database)
- ✅ Clean architecture patterns (routes → controllers → services → repositories)
- ✅ Security best practices (JWT, bcrypt, validation)
- ✅ Prisma ORM patterns with camelCase schemas
- ✅ Testing strategies with Bun
- ✅ Docker & AWS ECS deployment
| Server | Configuration | Purpose |
|---|---|---|
| Apidog | Dynamic project ID via env vars | API documentation & spec synchronization |
Configuration File: mcp-servers/mcp-config.json
| Server | Configuration | Purpose |
|---|---|---|
| Apidog | Dynamic project ID via env vars | API documentation & endpoint management |
| Figma | Personal access token | Design component import |
| GitHub | Personal access token | Repository operations |
| PostgreSQL | Connection string | Database operations |
Configuration File: mcp-servers/mcp-config.example.json
Documentation: mcp-servers/README.md (comprehensive guide)
- ✅ Architecture planning
- ✅ Implementation
- ✅ CSS-aware design validation (v2.6.0+)
- ✅ CVA best practices for shadcn/ui (v2.6.1+)
- ✅ Code review (human + AI)
- ✅ UI testing
- ✅ Unit testing
- ✅ API integration
- ✅ Cleanup
- ✅ DOM inspection via Chrome DevTools MCP
- ✅ Computed CSS analysis from browser
- ✅ Pattern awareness through CSS Developer consultation
- ✅ Safe fix recommendations with impact assessment (LOCAL vs GLOBAL)
- ✅ Prevents breaking 26 components while fixing 1
- ✅ Type-safe component variants with IDE autocomplete
- ✅ Decision trees for className vs variant props
- ✅ Troubleshooting guide for common CVA issues
- ✅ No anti-patterns (no !important usage)
- ✅ Consistent with shadcn/ui best practices (2025)
- ✅ Automatic task analysis and splitting by Architect agent
- ✅ Parallel execution for independent tasks
- ✅ Per-task validation loops (max 5 iterations)
- ✅ Isolated changes (Task A can't break Task B)
- ✅ Clear progress tracking
- ✅ Environment variable-based configuration
- ✅ Per-project settings
- ✅ Interactive setup command (
/configure-mcp) - ✅ Security best practices
- ✅ Multi-project support
- ✅ Main README.md (600+ lines)
- ✅ DYNAMIC_MCP_GUIDE.md (complete MCP guide)
- ✅ MCP servers README (setup instructions)
- ✅ LICENSE (MIT)
- ✅ .gitignore (proper git hygiene)
claude-code/
├── README.md # Main documentation (600+ lines)
├── DYNAMIC_MCP_GUIDE.md # MCP configuration guide
├── COMPLETE_PLUGIN_SUMMARY.md # This file
├── LICENSE # MIT License
├── .gitignore # Git ignore rules
└── .claude-plugin/
├── marketplace.json # Marketplace config
└── plugins/
└── frontend/ # Complete plugin (18 files)
├── plugin.json # Plugin manifest
├── agents/ # 8 agents
│ ├── developer.md
│ ├── architect.md
│ ├── tester.md
│ ├── test-architect.md
│ ├── api-analyst.md
│ ├── cleaner.md
│ ├── reviewer.md
│ └── codex-reviewer.md
├── commands/ # 5 commands
│ ├── implement.md
│ ├── import-figma.md
│ ├── configure-mcp.md
│ ├── api-docs.md
│ └── cleanup-artifacts.md
├── skills/ # 2 skills
│ ├── browser-debugger/
│ │ └── SKILL.md
│ └── api-spec-analyzer/
│ └── SKILL.md
└── mcp-servers/ # MCP configs
├── mcp-config.example.json
└── README.md
# Add marketplace locally (from repo root)
/plugin marketplace add /path/to/claude-code
# Install plugin
/plugin install frontend@mag-claude-plugins# Push to GitHub (from repo root)
git add .
git commit -m "Complete plugin marketplace with all agents, skills, and MCP support"
git push origin main
# Team members install
/plugin marketplace add MadAppGang/claude-code
/plugin install frontend@mag-claude-plugins# Push to GitLab or other git hosting
git remote add origin https://gitlab.com/MadAppGang/claude-code.git
git push -u origin main
# Team members install
/plugin marketplace add https://gitlab.com/MadAppGang/claude-code.git
/plugin install frontend@mag-claude-pluginsAdd to project's .claude/settings.json:
{
"extraKnownMarketplaces": {
"mag-claude-plugins": {
"source": {
"source": "github",
"repo": "MadAppGang/claude-code"
}
}
},
"enabledPlugins": {
"frontend@mag-claude-plugins": true
}
}User: "Create a user profile page with avatar, name, bio, and edit functionality"
Claude: [Uses /implement command]
1. Launches architect → creates plan
2. Waits for user approval
3. Launches developer → implements feature
4. Launches dual code reviewers (reviewer + codex-reviewer)
5. Launches tester → validates in browser
6. Launches test-architect → creates tests
7. Presents final implementation for approval
User: "Import the UserCard component from Figma"
Claude: [Uses /import-figma command]
1. Reads Figma URL from CLAUDE.md
2. Fetches component code from Figma
3. Adapts imports for project structure
4. Installs dependencies
5. Creates test route at /playground/user-card
6. Validates with tester
7. Updates CLAUDE.md with mapping
User: "Set up Apidog integration"
Claude: [Uses /configure-mcp command]
1. Asks for Apidog project ID
2. Asks for API token
3. Validates connection
4. Writes to .claude/settings.json
5. Tests MCP server
6. Provides usage instructions
User: "Get all endpoints from my API project"
Claude: [Uses apidog MCP with configured project ID]
User: "I just implemented the login form"
Claude: [Automatically invokes browser-debugger skill]
1. Launches tester agent
2. Navigates to localhost:5173
3. Tests form interactions
4. Monitors console & network
5. Reports any issues found
User: "Generate a TypeScript client for this OpenAPI spec: api-spec.yaml"
Claude: [Automatically invokes api-spec-analyzer skill]
1. Parses OpenAPI specification
2. Generates TypeScript types
3. Creates API client class
4. Implements error handling
5. Adds usage examples
- All 8 agents from reference project included
- All 5 commands working
- Both skills (browser-debugger + api-spec-analyzer) included
- MCP servers configured with dynamic project support
-
/configure-mcpcommand for easy setup - Comprehensive documentation (800+ lines)
- Security best practices implemented
- Proper attribution (Jack Rudenko @ MadAppGang)
- MIT License included
- .gitignore configured
- Plugin manifest (plugin.json) complete
- Marketplace manifest (marketplace.json) complete
- Ready for team distribution
Unlike simple code generators, this plugin orchestrates entire development workflows from architecture to deployment.
Agents work together with handoffs, quality gates, and feedback loops for production-quality results.
First-class MCP support with dynamic project-specific configuration via environment variables.
Actual browser automation with Chrome DevTools, not just code analysis.
Human-style review + AI analysis for comprehensive code quality assurance.
Battle-tested workflows from real-world project (caremaster-tenant-frontend).
| Metric | Count |
|---|---|
| Total Agents | 8 |
| Total Commands | 5 |
| Total Skills | 2 |
| MCP Servers | 4 configured |
| Total Artifacts | 18 files |
| Documentation Lines | 800+ |
| Ready for Production | ✅ Yes |
-
code-quality plugin
- ESLint configuration
- Prettier setup
- Security scanning
- Performance profiling
-
api-development plugin
- REST API scaffolding
- GraphQL schema generation
- API documentation generation
- Contract testing
-
devops-automation plugin
- Docker setup
- CI/CD configuration
- Deployment automation
- Infrastructure as code
-
database-tools plugin
- Migration generators
- Query builders
- Schema validators
- Seeding utilities
Maintainer: Jack Rudenko Email: i@madappgang.com Company: MadAppGang Website: https://madappgang.com
Issues: https://github.com/MadAppGang/claude-code/issues Discussions: https://github.com/MadAppGang/claude-code/discussions
- Built for Claude Code by Anthropic
- Inspired by the Claude Code community
- Battle-tested on caremaster-tenant-frontend project
- Created with ❤️ by MadAppGang
Last Updated: November 6, 2025 Status: Production Ready 🚀 Version: 2.6.1 (Frontend), 1.1.0 (Code Analysis)