Frontend Claude Code (FE-CC)

A frontend-focused Claude Code plugin optimized for React, Next.js, and TypeScript development. Derived from the battle-tested Everything Claude Code project, stripped down to focus exclusively on modern frontend development workflows.

Overview

FE-CC provides:

• 10 specialized agents for frontend development tasks
• 20 slash commands for workflow automation
• Plugin hooks for auto-formatting, TypeScript checks, and code quality
• 15 skills covering frontend patterns, testing, and best practices
• Custom tools for testing, coverage analysis, and security auditing

Quick Start

Option 1: Use with Claude Code

1. Clone this repository:

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

2. The plugin will be automatically loaded by Claude Code based on .claude-plugin/plugin.json.

Option 2: Use with OpenCode

1. Install the plugin:

cd fe-claude-code/.opencode
npm install
npm run build

2. Add to your project's opencode.json:

{
  "plugin": ["fe-claude-code/.opencode"]
}

Available Agents

Agent	Purpose	When to Use
planner	Implementation planning	Complex features, refactoring
architect	System design	Frontend architecture decisions
tdd-guide	Test-driven development	New features, bug fixes
code-reviewer	Code review	After writing code
security-reviewer	Security analysis	Before commits
build-error-resolver	Fix build errors	When build fails
e2e-runner	E2E testing	Critical user flows
refactor-cleaner	Dead code cleanup	Code maintenance
doc-updater	Documentation	Updating docs

Available Commands

Command	Description
/plan	Create detailed implementation plan
/tdd	Enforce TDD workflow with 80%+ coverage
/code-review	Review code for quality and security
/security	Run comprehensive security review
/build-fix	Fix build and TypeScript errors
/e2e	Generate and run E2E tests with Playwright
/refactor-clean	Remove dead code and duplicates
/orchestrate	Multi-agent orchestration
/test-coverage	Analyze test coverage
/update-docs	Update documentation

Project Structure

fe-claude-code/
├── .claude-plugin/
│   └── plugin.json          # Claude Code plugin manifest
├── .opencode/               # OpenCode plugin implementation
│   ├── package.json
│   ├── tsconfig.json
│   ├── index.ts             # Main plugin entry
│   ├── opencode.json        # OpenCode configuration
│   ├── plugins/
│   │   ├── index.ts
│   │   └── fe-hooks.ts      # Plugin hooks
│   ├── tools/
│   │   ├── index.ts
│   │   ├── run-tests.ts
│   │   ├── check-coverage.ts
│   │   └── security-audit.ts
│   ├── commands/            # Slash command templates
│   ├── prompts/agents/      # Agent prompt files
│   └── instructions/
│       └── INSTRUCTIONS.md  # Core guidelines
├── agents/                  # Agent definitions
├── rules/                   # Coding rules
│   ├── common/             # Language-agnostic rules
│   └── typescript/         # TypeScript-specific rules
├── skills/                  # Skills library
│   ├── coding-standards/
│   ├── frontend-patterns/
│   ├── security-review/
│   ├── tdd-workflow/
│   └── ...
└── docs/                    # Documentation

Frontend-Focused Features

React/Next.js Optimizations

• Component architecture guidance
• Hook best practices (useMemo, useCallback)
• Server/Client component boundaries
• Performance optimization patterns

TypeScript-First

• Strict type checking recommendations
• Interface vs Type guidance
• Generic patterns for reusable components
• Type-safe API client patterns

Testing Strategy

• Component testing with React Testing Library
• Hook testing patterns
• E2E testing with Playwright
• 80%+ coverage enforcement

Security for Frontend

• XSS prevention
• CSRF protection
• Secret management
• Secure dependency auditing

Code Quality

• Prettier auto-formatting
• ESLint integration
• console.log detection
• Import organization

Skills Included

• coding-standards - Universal coding standards and best practices
• frontend-patterns - React, Next.js, and TypeScript patterns
• backend-patterns - API design and integration patterns
• security-review - Security audit procedures
• tdd-workflow - Test-driven development enforcement
• eval-harness - Evaluation framework
• iterative-retrieval - Context management
• strategic-compact - Token optimization
• continuous-learning - Pattern extraction from sessions

Differences from Everything Claude Code

This project is a frontend-focused subset of Everything Claude Code:

Feature	Everything Claude Code	FE-CC
Languages	TypeScript, Python, Go	TypeScript only
Agents	13 agents	10 agents (removed go-, python-, database-reviewer)
Skills	29 skills	15 skills (removed language-specific skills)
Backend Frameworks	Django, Spring Boot, PostgreSQL	Generic backend patterns only
Focus	Full-stack	Frontend-only

Rules

Coding rules are organized into:

• common/ - Language-agnostic principles (immutability, error handling, testing)
• typescript/ - TypeScript/React specific rules

See rules/README.md for details.

Contributing

1. Create a new branch for your feature
2. Follow the existing code style
3. Add tests for new functionality
4. Submit a pull request

License

MIT License - see LICENSE file for details.

Acknowledgments

This project is derived from Everything Claude Code by Affaan Mustafa, an Anthropic hackathon winner. Thanks to the original author for the excellent foundation.