This folder provides Enterprise-Grade Cursor Project Rules enhanced from Claude Code workflows and expanded for a Next.js + TypeScript + Tailwind codebase with MCP (Model Context Protocol) server integration.
- Systematic 7-Phase Design Review with MCP tool integration
- Advanced Code Review Framework with 6-dimension evaluation
- Enterprise Testing Patterns for Playwright and Vitest
- Comprehensive API Architecture with validation and security
- Advanced Git Workflow with automated quality gates
- Playwright MCP: Automated browser testing, screenshots, accessibility
- Context7 MCP: Intelligent documentation and library analysis
- Git MCP: Repository analysis and workflow automation
- Real-time Development Assistance: Contextual help and suggestions
.cursor/
rules/
00-project-basics.mdc # Project fundamentals
01-nextjs-architecture.mdc # App Router & data patterns
02-tailwind-ui.mdc # Component & styling conventions
03-design-review.mdc # 🎯 Enhanced: Systematic 7-phase review
04-code-review.mdc # 🎯 Enhanced: 6-dimension evaluation
05-testing-playwright.mdc # 🎯 Enhanced: Advanced E2E patterns
06-testing-vitest.mdc # 🎯 Enhanced: Comprehensive unit testing
07-api-routes.mdc # API validation & enterprise patterns
08-security.mdc # Security framework & authentication
09-git-pr.mdc # 🎯 Enhanced: Advanced workflow & automation
10-mcp-servers.mdc # 🆕 NEW: MCP integration & automation
README.md
- .mdc files are Cursor Rule files with metadata (
description,globs,alwaysApply). - Rules are scoped using
globsso Cursor auto‑attaches the most relevant guidance. 00-project-basics.mdcisalwaysApply: trueto set project-wide guardrails.
# Node.js 18+
node --version
# Git
git --version
# Cursor IDE (latest version recommended)# Install globally
npm install -g @microsoft/playwright-mcp
# Install Playwright browsers
npx playwright install# Install globally
npm install -g @context7/mcp-server
# Get API key from https://context7.ai
# Set environment variable
export CONTEXT7_API_KEY="your-api-key-here"# Install globally
npm install -g @modelcontextprotocol/git-mcpCreate or update your MCP configuration file:
Cursor Settings (JSON):
{
"mcp": {
"servers": {
"playwright": {
"command": "npx",
"args": ["@microsoft/playwright-mcp"],
"env": {
"PLAYWRIGHT_BROWSERS_PATH": "0",
"PLAYWRIGHT_HEADLESS": "true"
}
},
"context7": {
"command": "npx",
"args": ["@context7/mcp-server"],
"env": {
"CONTEXT7_API_KEY": "your-api-key-here"
}
},
"git": {
"command": "npx",
"args": ["@modelcontextprotocol/git-mcp"]
}
}
}
}Environment Variables (.env.local):
# MCP Server Configuration
MCP_PLAYWRIGHT_ENABLED=true
MCP_CONTEXT7_API_KEY=your-api-key
MCP_GIT_ENABLED=true
# Browser Configuration for Playwright
PLAYWRIGHT_HEADLESS=true
PLAYWRIGHT_BROWSER=chromium
PLAYWRIGHT_VIEWPORT_SIZE=1440x900# Test MCP servers
npx @microsoft/playwright-mcp --help
npx @context7/mcp-server --help
# Check Cursor MCP integration
# Open Cursor → Settings → MCP → Should show configured servers- Copy the
.cursor/rulesdirectory into your project root. - In Cursor:
- Use the Agent or Inline chat.
- Reference rules explicitly when helpful, e.g. "apply
@03-design-review". - Mention files or folders so Cursor auto‑attaches the correct rule set via globs.
// Cursor will automatically use MCP tools for:
- Live browser testing with Playwright MCP
- Screenshot capture for visual regression
- Accessibility analysis
- Performance monitoring
- Code quality assessment with Context7 MCP// Get contextual help with MCP integration:
- Library documentation via Context7 MCP
- Code examples and best practices
- Security vulnerability detection
- Performance optimization suggestions| Rule | Trigger Condition | MCP Enhancement |
|---|---|---|
03-design-review |
UI/UX changes, PRs touching UI | Playwright browser testing |
04-code-review |
Code changes, new features | Context7 library analysis |
05-testing-playwright |
E2E test files, test changes | Automated test execution |
06-testing-vitest |
Unit test files, component changes | Coverage analysis |
07-api-routes |
API endpoints, server code | Security validation |
10-mcp-servers |
MCP configuration, automation needs | Server health monitoring |
- 7-Phase Design Review: Live testing, responsiveness, accessibility, performance
- 6-Dimension Code Review: TypeScript, architecture, performance, security, testing
- Advanced Testing Pyramid: 70% unit, 20% integration, 10% E2E with MCP automation
- Enterprise API Patterns: Validation, caching, monitoring, security
- Git Workflow Automation: PR templates, quality gates, metrics tracking
- Automated Browser Testing: Screenshots, accessibility, performance monitoring
- Intelligent Documentation: Library analysis, API validation, best practices
- Real-time Assistance: Contextual help, code suggestions, security alerts
- Quality Automation: Pre-commit checks, CI/CD integration, monitoring
- Security Framework: Authentication, authorization, input validation, CSP
- Performance Optimization: Bundle analysis, caching strategies, monitoring
- Accessibility Compliance: WCAG 2.1 AA, automated testing, semantic HTML
- Monitoring & Analytics: Error tracking, performance metrics, user feedback
# Pre-commit hooks (automatically configured)
✅ TypeScript compilation
✅ ESLint/Prettier formatting
✅ Unit test execution (80% coverage)
✅ E2E smoke tests
✅ Bundle size validation
✅ Security vulnerability scan# .github/workflows/quality-checks.yml
name: Quality Assurance
on: [push, pull_request]
jobs:
quality-gate:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install dependencies
run: npm ci
- name: MCP Server Health Check
run: npm run mcp:health
- name: Code Quality Checks
run: npm run quality:check
- name: Automated Testing
run: npm run test:all
- name: MCP-Enhanced Analysis
run: npm run mcp:analyze- Code Quality: TypeScript errors, linting violations, test coverage
- Performance: Bundle size, load times, Core Web Vitals
- Security: Vulnerability scans, dependency updates, security incidents
- Process: PR review time, merge frequency, deployment success rate
// Automated health monitoring
- Server response times
- Error rates and patterns
- Resource usage tracking
- Automated restart on failures---
description: Your custom rule description
globs:
- your/file/pattern/**/*
alwaysApply: false
---
Your custom rule content here...
// lib/mcp/custom-integration.ts
export class CustomMCPIntegration {
// Add your custom MCP server integration
async customAnalysis() {
// Use MCP tools for specialized analysis
return await mcp__your_server__analyze();
}
}# Check MCP server status
npm run mcp:health
# Restart MCP servers
npm run mcp:restart
# View MCP server logs
npm run mcp:logs- MCP servers not connecting: Check API keys and network connectivity
- Playwright browser issues: Run
npx playwright installto install browsers - Context7 API limits: Monitor usage and upgrade plan if needed
- Cursor Rules Documentation
- MCP Protocol Specification
- Playwright MCP Documentation
- Context7 MCP Documentation
- Next.js Best Practices
- Monthly: Update MCP servers and dependencies
- Quarterly: Review and enhance rules based on team feedback
- Annually: Major version updates and architectural improvements
Version: 2.0 - Enterprise Edition with MCP Integration Compatibility: Next.js 14+, TypeScript 5+, Tailwind CSS 3+ MCP Servers: Playwright, Context7, Git