Frontend Development Plugin

Comprehensive toolkit for professional TypeScript/React development with CSS-aware design validation

Version: 2.6.1 Category: Development Author: Jack Rudenko @ MadAppGang

Overview

The Frontend Development plugin is a complete solution for building modern web applications with TypeScript, React, Vite, TanStack Router, and TanStack Query. It provides CSS-aware design validation, CVA best practices for shadcn/ui, and orchestrated workflows that combine 13 specialized AI agents, powerful commands, and intelligent skills to deliver production-ready code with minimal manual intervention.

New in v2.6.1: CVA (class-variance-authority) best practices for shadcn/ui components New in v2.6.0: CSS-aware design validation with DOM inspection and computed CSS analysis New in v2.5.0: CSS Developer agent and task decomposition for parallel UI implementation

Perfect for:

React/TypeScript projects
TanStack ecosystem (Router, Query)
Frontend teams requiring consistent code quality
Projects with Figma designs
shadcn/ui component libraries
Pixel-perfect UI implementation
API-driven applications
Teams using Tailwind CSS 4 (2025)

The `/implement` Command: Full-Cycle Orchestration

The /implement command is the cornerstone of this plugin. It orchestrates a complete feature development workflow from planning to delivery, ensuring quality at every step.

What Makes `/implement` Special

/implement is not just a code generator—it's a complete development workflow that:

Plans before coding - Architecture-first approach with user approval gates
Implements with quality - Following project patterns and best practices
Reviews thoroughly - Triple review process (human + AI + browser testing)
Tests comprehensively - Automated test generation with Vitest
Cleans automatically - Removes temporary artifacts

The Complete `/implement` Workflow

/implement Create a user profile page with avatar upload, bio editing, and settings panel

This single command triggers an 8-phase orchestration (with optional Phase 2.5 for design validation):

Phase 1: Architecture Planning

Agent: architect

What happens:

Gap Analysis
- Scans existing codebase patterns
- Identifies reusable components
- Finds similar implementations
- Reviews project architecture
Clarification Questions
- Asks about specific requirements
- Confirms technical decisions
- Validates assumptions
- Gathers constraints
Architecture Design
- Designs component hierarchy
- Plans state management approach
- Defines API integration strategy
- Considers accessibility and performance
Documentation
- Creates detailed plan in AI-DOCS/
- Documents component structure
- Lists implementation steps
- Includes code examples
User Approval Gate ⛔
- Presents plan for review
- Explains architectural decisions
- Waits for explicit approval
- No code written until approved

Example Output:

Architecture Plan: User Profile Feature
────────────────────────────────────────
Components:
  - ProfilePage (container)
  - ProfileHeader (avatar + basic info)
  - AvatarUpload (drag-drop + preview)
  - BioEditor (rich text editing)
  - SettingsPanel (preferences form)

State Management:
  - TanStack Query for user data
  - Local state for form inputs
  - Optimistic updates for bio changes

API Integration:
  - GET /users/:id
  - PATCH /users/:id/profile
  - POST /users/:id/avatar

Plan saved to: AI-DOCS/user-profile-feature.md

👤 Review the plan and type 'approved' to proceed

Stage 2: Implementation

Agent: developer

What happens:

Todo List Creation
- Breaks plan into specific tasks
- Creates visible progress tracker
- User can see exactly what's being built
Code Generation
- Follows project patterns (file structure, naming conventions)
- Uses existing components and utilities
- Implements TypeScript types correctly
- Follows React best practices
- Integrates with TanStack Router and Query
Quality Checks (Automated)
- Runs Biome linter/formatter
- Validates TypeScript compilation
- Checks for common mistakes
- Ensures code style consistency
Progress Updates
- Marks todos as completed in real-time
- Shows what's being worked on
- Reports any issues immediately

Example Output:

Implementation Progress
────────────────────────────────────────
✅ Create ProfilePage container component
✅ Implement AvatarUpload with preview
✅ Add BioEditor with form validation
✅ Build SettingsPanel with preferences
✅ Integrate TanStack Query hooks
✅ Add route configuration
⏳ Running quality checks...
✅ Biome: No issues found
✅ TypeScript: Compilation successful
✅ All checks passed!

Implementation complete. Ready for review.

Stage 2.5: Design Fidelity Validation (Optional, Conditional)

Agents: designer, css-developer

When it runs:

Automatically triggered if Figma URLs are present in the feature request
Skipped if no design references found (no performance impact)
Can be run manually via /validate-ui command

What happens:

Screenshot & DOM Inspection
- Captures current implementation in browser
- Inspects DOM elements via Chrome DevTools MCP
- Gets computed CSS properties (actual rendered values)
- Identifies which CSS rules and Tailwind classes apply
CSS Developer Consultation
- Understands existing CSS patterns
- Identifies standard component styles
- Assesses impact of potential changes (LOCAL vs GLOBAL)
- Provides safe fix recommendations
Design Comparison with CSS Awareness
- Compares design reference vs implementation
- Shows expected vs actual computed CSS values
- Identifies which classes cause discrepancies
- Categorizes issues by severity (CRITICAL/MEDIUM/LOW)
Iterative Validation
- UI Developer implements fixes
- Designer validates changes
- Maximum 3 iterations per component
- Design fidelity score (X/60) must be >= 54 to pass

Benefits:

✅ No more guessing why UI looks different
✅ Understand which CSS rules cause visual differences
✅ Safe fixes that won't break other components
✅ Pattern-aware changes aligned with codebase
✅ Prevents breaking 26 other components while fixing 1

Example Output:

Design Fidelity Validation
────────────────────────────────────────
🖥️  Computed CSS Analysis:
Button (.btn-primary):
- padding: 8px 16px (from classes: px-4 py-2)
- background: #60A5FA (from class: bg-blue-400)

🧩 CSS Developer Insights:
- Standard button uses bg-blue-600 (26 files)
- This deviates from standard pattern

⚠️  Discrepancies Found (2 CRITICAL):
1. Button background color
   Expected: #3B82F6 (blue-600)
   Actual: #60A5FA (blue-400)
   Impact: LOCAL - Only this component
   Safe Fix: Change bg-blue-400 to bg-blue-600

Design Fidelity Score: 52/60 (FAIL - needs fixes)

Stage 3: Triple Review Process

The /implement workflow includes three distinct review stages to catch different types of issues:

Review 3.1: Senior Code Review

Agent: reviewer

What happens:

Code Quality Analysis
- Architectural patterns
- TypeScript best practices
- React patterns and hooks usage
- Performance considerations
- Error handling
- Accessibility compliance
Security Review
- XSS vulnerabilities
- Data validation
- Authorization checks
- Secure API calls
Maintainability
- Code clarity and documentation
- Component reusability
- Test coverage gaps
- Technical debt

Output:

Code Review Report
────────────────────────────────────────
✅ Architecture: Follows project patterns
✅ TypeScript: Proper typing, no any usage
⚠️  Performance: Consider memoizing UserList
✅ Accessibility: ARIA labels present
⚠️  Testing: Missing edge case tests
✅ Security: Input validation correct

Suggestions:
1. Add React.memo to UserListItem (line 45)
2. Add error boundary around AvatarUpload
3. Test file upload size limits

Overall: 8/10 - Ready with minor improvements

Review 3.2: Automated AI Review (Codex)

Agent: senior-code-reviewer-codex

What happens:

Runs Codex AI analyzer
Detects code smells
Finds potential bugs
Suggests optimizations
Checks against best practices database

Output:

Codex Analysis Report
────────────────────────────────────────
Files Analyzed: 8
Issues Found: 3 low, 0 critical

Low Priority:
- ProfileHeader.tsx:23 - Consider extracting magic number to constant
- AvatarUpload.tsx:67 - Add loading state for upload
- useUserProfile.ts:12 - Consider adding retry logic

Auto-fixable: 1
Manual review: 2

Review 3.3: Browser UI Testing

Agent: ui-manual-tester

What happens:

Launches Chrome DevTools Protocol
- Opens your application in Chrome
- Navigates to the new feature
- Monitors console and network
Interactive Testing
- Tests all user interactions
- Validates form submissions
- Checks error states
- Verifies loading states
- Tests responsive behavior
Console Monitoring
- Catches JavaScript errors
- Identifies warnings
- Monitors network requests
- Checks performance metrics
Visual Verification
- Takes screenshots
- Compares with Figma designs (if available)
- Checks layout and spacing
- Validates responsive breakpoints

Output:

Browser Testing Report
────────────────────────────────────────
Test URL: http://localhost:5173/profile
Browser: Chrome 120.0

✅ Page loads successfully (1.2s)
✅ Avatar upload works correctly
✅ Bio editor saves changes
⚠️  Console warning: "Deprecated prop in SettingsPanel"
✅ Network requests successful
✅ No JavaScript errors
✅ Responsive layout works (tested 3 breakpoints)

Screenshots saved to: AI-DOCS/screenshots/

Issues to address:
1. Deprecation warning in SettingsPanel (line 34)
2. Avatar upload could show progress indicator

Overall: Feature works correctly with minor polish needed

Stage 4: Test Generation

Agent: vitest-test-architect

What happens:

Test Strategy Design
- Analyzes implemented code
- Identifies testable scenarios
- Plans unit, integration, and E2E tests
- Prioritizes critical paths
Test Implementation
- Generates Vitest unit tests
- Creates React Testing Library tests
- Adds integration tests for API calls
- Includes edge cases and error scenarios
Test Execution
- Runs all tests
- Verifies coverage
- Reports failures
- Suggests improvements

Example Output:

Test Generation Report
────────────────────────────────────────
Tests Created:
  - ProfilePage.test.tsx (8 tests)
  - AvatarUpload.test.tsx (12 tests)
  - BioEditor.test.tsx (6 tests)
  - SettingsPanel.test.tsx (10 tests)
  - useUserProfile.test.ts (5 tests)

Test Execution:
✅ 41/41 tests passed
✅ Coverage: 94% (target: 80%)
✅ All edge cases covered
✅ Error scenarios tested

Test run completed successfully

Stage 5: User Final Approval

What happens:

Summary of all work completed
Review reports presented
Test results shared
User given final approval gate

Output:

Implementation Summary
────────────────────────────────────────
✅ Architecture planned and approved
✅ Feature implemented (8 components)
✅ Code reviewed (3 review stages)
✅ Tests created (41 tests, 94% coverage)
✅ Browser testing passed

Files changed: 12
Lines added: 847
Quality score: 8.5/10

Review all changes? Type 'approved' to proceed with cleanup

Stage 6: Project Cleanup

Agent: project-cleaner

What happens:

Removes temporary files
Cleans up debug artifacts
Organizes AI-DOCS folder
Removes unused imports
Cleans up console.log statements

Output:

Cleanup Report
────────────────────────────────────────
Removed:
  - 3 temporary screenshot files
  - 2 debug log files
  - 1 unused component stub

Organized:
  - AI-DOCS/user-profile-feature.md
  - AI-DOCS/screenshots/ (archived)

Project cleaned successfully

Stage 7: Final Delivery

Output:

🎉 Feature Implementation Complete!
────────────────────────────────────────

Created:
  📁 src/features/profile/
    ├── ProfilePage.tsx
    ├── ProfileHeader.tsx
    ├── AvatarUpload.tsx
    ├── BioEditor.tsx
    ├── SettingsPanel.tsx
    └── useUserProfile.ts
  📁 src/features/profile/__tests__/
    └── (41 test files)

Documentation:
  📄 AI-DOCS/user-profile-feature.md

Quality Metrics:
  - Code Review: 8/10
  - Test Coverage: 94%
  - Browser Tests: Passed
  - Zero TypeScript errors
  - Zero console errors

Ready to commit:
  git add src/features/profile
  git commit -m "Add user profile feature"

Why This Workflow Works

1. Architecture-First Approach

Plan before coding prevents costly rewrites
User approval ensures alignment with expectations
Documentation captures decisions for future reference

2. Quality at Every Step

Automated checks catch common mistakes immediately
Triple review catches different issue types
Browser testing validates real-world functionality

3. Comprehensive Testing

Tests generated automatically, not as afterthought
High coverage ensures confidence
Edge cases and errors handled

4. Clean Delivery

No temporary files left behind
Documentation organized
Project ready for team review

Other Components

Agents (8 Total)

`typescript-frontend-dev`

Expert TypeScript/React developer for implementation tasks.

When to use:

Implementing new features
Refactoring existing code
Fixing bugs
Adding new components

Tools: All development tools Model: Sonnet (complex reasoning)

`frontend-architect-planner`

System design and architecture planning specialist.

When to use:

Starting new features
Planning large refactors
Designing system architecture
Technical decision making

Tools: Read, Grep, Glob, Task Model: Sonnet (strategic thinking)

`ui-manual-tester`

Browser-based testing with Chrome DevTools Protocol.

When to use:

Testing UI interactions
Debugging console errors
Validating network requests
Visual regression testing

Tools: Bash, Read, Write, BashOutput Model: Haiku (fast testing)

`vitest-test-architect`

Comprehensive testing strategy and implementation.

When to use:

Creating test suites
Improving test coverage
Planning testing strategy
Debugging failing tests

Tools: All testing tools Model: Sonnet (test design)

`api-documentation-analyzer`

API documentation analysis and client generation.

When to use:

Integrating new APIs
Analyzing OpenAPI specs
Generating API clients
Understanding API contracts

Tools: WebFetch, Read, Context7 Model: Haiku (document analysis)

`project-cleaner`

Cleanup utilities for development artifacts.

When to use:

After feature implementation
Cleaning temporary files
Organizing documentation
Preparing for commits

Tools: Bash, Glob, Edit Model: Haiku (simple operations)

`senior-code-reviewer`

Comprehensive manual code review.

When to use:

Before merging features
Reviewing pull requests
Architecture validation
Quality assessment

Tools: Read, Grep, Glob Model: Sonnet (deep analysis)

`senior-code-reviewer-codex`

Automated AI-powered code review.

When to use:

Quick automated analysis
Finding code smells
Security scanning
Best practices validation

Tools: Bash, Read, Grep Model: Haiku (fast analysis)

Slash Commands (5 Total)

`/implement [description]`

Full-cycle feature implementation orchestrator (documented above).

Example:

/implement Add user authentication with email/password and social login

`/import-figma [component-name]`

Import Figma components into your React project.

What it does:

Fetches component from Figma via MCP
Adapts code to your project structure
Installs dependencies
Creates test route
Opens in browser for validation
Generates CLAUDE.md documentation

Example:

/import-figma NavigationBar

Output:

Figma Import Complete
────────────────────────────────────────
✅ Component imported from Figma
✅ Code adapted to project structure
✅ Dependencies installed
✅ Test route created: /test/navigation-bar
✅ Browser opened for validation
✅ Documentation created

Files:
  - src/components/NavigationBar.tsx
  - src/components/CLAUDE.md

`/configure-mcp [server-name]`

Smart interactive MCP server configuration.

Supported servers:

apidog - API documentation and testing
figma - Figma design integration
github - GitHub API integration

What it does:

Checks if already configured
Validates existing credentials
Collects required information
Writes to .claude/settings.json
Tests connection
Offers reconfiguration if invalid

Example:

/configure-mcp apidog

Smart behavior:

Already configured ✅
  Project ID: 123456
  Last tested: Success (2 minutes ago)

  [1] Keep current config
  [2] Reconfigure
  [3] Test connection again

`/api-docs [url]`

Analyze and work with API documentation.

What it does:

Fetches API documentation
Analyzes endpoints and schemas
Generates TypeScript types
Creates API client code
Adds to your project

Example:

/api-docs https://api.example.com/docs/openapi.json

`/cleanup-artifacts`

Clean temporary development artifacts.

What it does:

Removes temporary screenshots
Cleans debug files
Organizes AI-DOCS
Removes console.log statements
Cleans unused imports

Example:

/cleanup-artifacts

Skills (2 Total)

`browser-debugger`

Systematic UI testing and debugging using Chrome DevTools.

Automatically invoked when:

Implementing UI features
User reports console errors
Testing form interactions
Validating user flows

What it does:

Launches Chrome with DevTools Protocol
Navigates to your app
Tests interactions
Monitors console and network
Reports issues with reproduction steps

`api-spec-analyzer`

Analyze OpenAPI/Swagger specifications.

Automatically invoked when:

Working with API specifications
User mentions OpenAPI/Swagger
Generating API clients
Analyzing API contracts

What it does:

Parses OpenAPI/Swagger specs
Analyzes endpoints and schemas
Generates TypeScript types
Creates API client code
Validates contracts

MCP Servers (4 Total)

Apidog Integration

Connect to Apidog for API documentation and testing.

Required:

APIDOG_PROJECT_ID - In .claude/settings.json
APIDOG_API_TOKEN - In .env (private)

Setup:

/configure-mcp apidog

Figma Integration

Import designs and components from Figma.

Required:

FIGMA_ACCESS_TOKEN - In .env (private)

Setup:

/configure-mcp figma

GitHub Integration

Access GitHub repositories and issues.

Required:

GITHUB_PERSONAL_ACCESS_TOKEN - In .env (private)

Setup:

/configure-mcp github

Installation

Prerequisites

Node.js v18+ (with npm/npx)
Chrome browser
Git

Global Installation

/plugin marketplace add madappgang/claude-plugins
/plugin install frontend@mag-claude-plugins

Project-Specific Installation

Add to .claude/settings.json:

{
  "extraKnownMarketplaces": {
    "mag-claude-plugins": {
      "source": {
        "source": "github",
        "repo": "MadAppGang/claude-code"
      }
    }
  },
  "enabledPlugins": {
    "frontend@mag-claude-plugins": true
  }
}

Environment Setup

Create .env file:

# Required for Apidog
APIDOG_API_TOKEN=your-personal-token

# Required for Figma
FIGMA_ACCESS_TOKEN=your-personal-token

# Optional
GITHUB_PERSONAL_ACCESS_TOKEN=your-token
CHROME_EXECUTABLE_PATH=/Applications/Google Chrome.app/Contents/MacOS/Google Chrome
CODEX_API_KEY=your-codex-key

Best Practices

When to Use `/implement`

✅ Good for:

New features with clear requirements
Features requiring multiple components
Projects with established patterns
When you want comprehensive quality checks

❌ Not ideal for:

Quick bug fixes (use agents directly)
Experimental prototypes
Simple one-file changes

Maximizing Quality

Provide clear descriptions - Detailed requirements = better architecture
Review the plan - Catch issues before implementation
Check review reports - Learn from suggestions
Run tests - Ensure nothing breaks

Team Workflow

Use project-specific installation - Consistent setup
Commit .claude/settings.json - Share configuration
Keep .env private - Never commit secrets
Share AI-DOCS - Team knowledge base

Troubleshooting

MCP Servers Not Working

# Check if configured
/configure-mcp apidog

# Validate connection
/configure-mcp apidog
# Choose option [3] Test again

Browser Testing Fails

# Set Chrome path in .env
CHROME_EXECUTABLE_PATH=/path/to/chrome

Tests Not Generating

Ensure Vitest is installed:

npm install -D vitest @testing-library/react @testing-library/jest-dom

Support

Documentation: Main README
Issues: GitHub Issues
Email: i@madappgang.com
Dependencies: DEPENDENCIES.md

Plugin Version: 2.6.1 Last Updated: November 2024 Maintained by: Jack Rudenko @ MadAppGang

FilesExpand file tree

frontend.md

Latest commit

History

frontend.md

File metadata and controls

Frontend Development Plugin

Overview

The /implement Command: Full-Cycle Orchestration

What Makes /implement Special

The Complete /implement Workflow

Phase 1: Architecture Planning

Stage 2: Implementation

Stage 2.5: Design Fidelity Validation (Optional, Conditional)

Stage 3: Triple Review Process

Review 3.1: Senior Code Review

Review 3.2: Automated AI Review (Codex)

Review 3.3: Browser UI Testing

Stage 4: Test Generation

Stage 5: User Final Approval

Stage 6: Project Cleanup

Stage 7: Final Delivery

Why This Workflow Works

1. Architecture-First Approach

2. Quality at Every Step

3. Comprehensive Testing

4. Clean Delivery

Other Components

Agents (8 Total)

typescript-frontend-dev

frontend-architect-planner

ui-manual-tester

vitest-test-architect

api-documentation-analyzer

project-cleaner

senior-code-reviewer

senior-code-reviewer-codex

Slash Commands (5 Total)

/implement [description]

/import-figma [component-name]

/configure-mcp [server-name]

/api-docs [url]

/cleanup-artifacts

Skills (2 Total)

browser-debugger

api-spec-analyzer

MCP Servers (4 Total)

Apidog Integration

Figma Integration

GitHub Integration

Installation

Prerequisites

Global Installation

Project-Specific Installation

Environment Setup

Best Practices

When to Use /implement

Maximizing Quality

Team Workflow

Troubleshooting

MCP Servers Not Working

Browser Testing Fails

Tests Not Generating

Support

The `/implement` Command: Full-Cycle Orchestration

What Makes `/implement` Special

The Complete `/implement` Workflow

`typescript-frontend-dev`

`frontend-architect-planner`

`ui-manual-tester`

`vitest-test-architect`

`api-documentation-analyzer`

`project-cleaner`

`senior-code-reviewer`

`senior-code-reviewer-codex`

`/implement [description]`

`/import-figma [component-name]`

`/configure-mcp [server-name]`

`/api-docs [url]`

`/cleanup-artifacts`

`browser-debugger`

`api-spec-analyzer`

When to Use `/implement`