A Model Context Protocol (MCP) server that provides comprehensive React and TypeScript pattern guidance for AI coding assistants.
Clean Code React helps AI coding assistants writeN better React/TypeScript code by providing:
- Essential Patterns: From basic Container/Presentational to advanced Builder and Factory patterns
- Bad vs Good Examples: Compare problematic code with improved solutions
- Detailed Guidance: Comprehensive descriptions, use cases, and best practices
- Pattern Discovery: Get an overview of all patterns or dive deep into specific ones
{
"mcpServers": {
"clean-code-react": {
"command": "npx",
"args": ["clean-code-react@latest"]
}
}
}
claude mcp add clean-code-react npx clean-code-react@latest
code --add-mcp '{"name":"clean-code-react","command":"npx","args":["clean-code-react@latest"]}'
This MCP server provides AI coding assistants with access to:
- Essential React Patterns - From basic Container/Presentational to advanced Builder and Factory patterns
- Code Quality Fundamentals - Four principles of writing good code: Readability, Predictability, Cohesion, and Coupling
- Bad vs Good Examples - Compare problematic code with improved solutions
- Best Practices - Comprehensive guidance and common mistakes to avoid
- Container/Presentational - Separate data logic from presentation
- Render Props - Share code between components using render props
- Compound Component - Create flexible, composable component APIs
- Higher-Order Component - Enhance components with additional functionality
- Dependency Injection - Manage dependencies and improve testability
- Service Layer - Organize business logic and external integrations
- Adapter Pattern - Bridge incompatible interfaces
- Declarative Programming - Write more readable, maintainable code
- Prop Drilling Solutions - Solve prop drilling with modern techniques
- Builder Pattern - Construct complex objects step by step
- Factory Pattern - Create objects without specifying exact classes
- Strategy Pattern - Define algorithms and make them interchangeable
Simply ask your AI coding assistant to use the clean-code-react MCP server when working on React code:
Refactor existing code:
"Refactor this component using clean-code-react mcp"
Build new features:
"Build a user settings page using clean-code-react mcp"
Improve code quality:
"Apply clean-code-react mcp's quality fundamentals to improve this code"
The AI assistant will automatically discover and apply the most appropriate patterns and principles for your specific use case.
# Install dependencies
npm install
# Run in development mode
npm run dev
# Build for production
npm run build
# Run type checking
npm run typecheck
# Run linting
npm run lint
# Inspect server with MCP Inspector (for debugging)
npm run inspect
The project includes the MCP Inspector for debugging and development:
npm run inspect
This opens a web interface where you can:
- Test all available tools interactively
- Inspect tool schemas and responses
- Debug server behavior
- Validate MCP protocol implementation
src/
├── patterns/ # Pattern definitions with colocated data
├── tools/ # MCP tool implementations
├── types/ # TypeScript type definitions
├── server.ts # Core server setup with all tools
└── index.ts # Entry point with stdio transport
Contributions are welcome! Please:
- Fork the repository
- Create a feature branch
- Add tests for new functionality
- Ensure all patterns have bad/good examples
- Update pattern descriptions and use cases
- Submit a pull request
MIT