# Global instructions (applies to all projects)
~/.claude/CLAUDE.md
 
# Project-specific instructions
/your-project/CLAUDE.md

# Project Instructions for Claude Code
 
## Project Overview
This is a [framework] project with [specific requirements].
 
## Development Commands
- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run test` - Run test suite
 
## Code Style & Conventions
- Use TypeScript for all new files
- Follow ESLint rules without exceptions
- Prefer functional components in React
- Use descriptive variable names
 
## Architecture Guidelines
- Follow the existing folder structure
- Place components in `src/components/`
- Keep utilities in `src/lib/`
- Store types in `src/types/`
 
## Quality Standards
- All code must pass TypeScript checks
- Maintain 80%+ test coverage
- Use meaningful commit messages
- Document complex functions

# Advanced Project Configuration
 
## Context & Background
@ARCHITECTURE.md
@CONVENTIONS.md
@DEPENDENCIES.md
 
## Custom Commands
### /component [name]
Create a new React component with:
- TypeScript interface
- Styled with Tailwind CSS
- Unit tests included
- Storybook story
 
### /api [endpoint]
Generate API endpoint with:
- Input validation (Zod)
- Error handling
- OpenAPI documentation
- Integration tests
 
## Automated Workflows
- Run `npm run lint` before any commit
- Execute full test suite on significant changes
- Update documentation for API changes

# Clone SuperClaude framework
git clone https://github.com/superclaude/framework.git ~/.claude/superclaude
 
# Install dependencies
cd ~/.claude/superclaude && npm install
 
# Link to Claude Code
echo "@~/.claude/superclaude/CLAUDE.md" >> ~/.claude/CLAUDE.md

## Persona Activation
--persona-architect    # Systems design focus
--persona-frontend     # UI/UX optimization  
--persona-backend      # API and data focus
--persona-security     # Security-first approach
--persona-performance  # Speed optimization

## MCP Server Auto-Activation
--c7 / --context7      # Documentation lookup
--seq / --sequential   # Complex analysis
--magic                # UI generation
--playwright           # Testing automation

## Wave System
--wave-mode auto       # Automatic complexity detection
--wave-strategy progressive  # Iterative enhancement
--delegate auto        # Intelligent task distribution

# ~/.claude/superclaude/config.yml
personas:
  default: architect
  frontend_projects: frontend
  api_projects: backend
 
mcp_servers:
  auto_activate: true
  preferred: [context7, sequential, magic]
 
wave_orchestration:
  complexity_threshold: 0.7
  auto_delegation: true
  max_concurrent: 5
 
quality_gates:
  typescript_check: true
  lint_validation: true
  test_coverage: 80

## Custom Commands
 
### /scaffold [type] [name]
**Usage**: `/scaffold component UserProfile`
**Actions**:
1. Create component file with TypeScript
2. Generate corresponding test file
3. Add to index exports
4. Create Storybook story
 
### /migrate [from] [to]
**Usage**: `/migrate redux zustand`
**Actions**:
1. Analyze current state management
2. Create migration plan
3. Implement new solution
4. Update all dependents
5. Remove old dependencies
 
### /optimize [target]
**Usage**: `/optimize bundle`
**Actions**:
1. Analyze bundle size
2. Identify optimization opportunities
3. Implement code splitting
4. Update build configuration
5. Validate performance improvements

### /deploy [environment]
**Prerequisite Commands**: 
- `/build --production`
- `/test --coverage`
- `/security-scan`
 
**Actions**:
1. Validate all prerequisites pass
2. Generate deployment artifacts  
3. Update environment configuration
4. Execute deployment pipeline
5. Run post-deployment verification
6. Update documentation

# Installation
npm install -g @context7/mcp-server
 
# Configuration in Claude Code
mcp_servers:
  context7:
    command: "npx @context7/mcp-server"
    args: ["--port", "3001"]

# Installation  
npm install -g @sequential/mcp-server
 
# Usage patterns
--seq          # Enable for complex debugging
--think        # Multi-file analysis (4K tokens)
--think-hard   # Deep analysis (10K tokens)  
--ultrathink   # Critical analysis (32K tokens)

# Installation
npm install -g @magic/mcp-server
 
# Specialized for
- React/Vue/Angular components
- Design system integration
- Accessibility compliance
- Responsive design patterns

// custom-mcp-tool/src/server.ts
import { Server } from '@modelcontextprotocol/sdk/server/index.js';
 
const server = new Server({
  name: 'custom-tool',
  version: '1.0.0'
});
 
// Register custom tools
server.setRequestHandler('tools/list', async () => ({
  tools: [{
    name: 'analyze_dependencies',
    description: 'Analyze project dependencies for security and updates',
    inputSchema: {
      type: 'object',
      properties: {
        path: { type: 'string' }
      }
    }
  }]
}));
 
server.setRequestHandler('tools/call', async (request) => {
  const { name, arguments: args } = request.params;
  
  if (name === 'analyze_dependencies') {
    // Your custom logic here
    return {
      content: [{
        type: 'text',
        text: 'Dependency analysis results...'
      }]
    };
  }
});

// .vscode/settings.json
{
  "claude.autoActivate": true,
  "claude.customCommands": [
    {
      "name": "Generate Component",
      "command": "/component",
      "scope": "selection"
    },
    {
      "name": "Optimize Function", 
      "command": "/optimize",
      "scope": "function"
    }
  ],
  "claude.mcp.autoLoad": ["context7", "sequential"],
  "claude.personas.default": "architect"
}

{
  "recommendations": [
    "anthropic.claude-code",           // Core Claude integration
    "ms-python.python",               // Python support
    "bradlc.vscode-tailwindcss",      // Tailwind intellisense
    "ms-vscode.vscode-typescript-next", // TypeScript support
    "esbenp.prettier-vscode",         // Code formatting
    "ms-playwright.playwright",       // Testing integration
    "github.copilot",                 // AI pair programming
    "gruntfuggly.todo-tree"          // TODO management
  ]
}

// .vscode/tasks.json
{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Claude: Generate Tests",
      "type": "shell", 
      "command": "claude",
      "args": ["/test", "${relativeFile}"],
      "group": "build"
    },
    {
      "label": "Claude: Optimize Performance",
      "type": "shell",
      "command": "claude", 
      "args": ["/optimize", "--focus", "performance"],
      "group": "build"
    }
  ]
}

## Custom Component Generation
 
### /component [name] [type?]
Creates a complete React component with:
- TypeScript interfaces
- Styled with design system
- Unit tests with React Testing Library
- Storybook stories
- Documentation
 
**Usage**: `/component UserCard --type data-display`
 
**Generated Structure**:

### /optimize [target] [--metrics]
Comprehensive performance optimization:
 
**Usage**: `/optimize bundle --metrics lighthouse`
 
**Workflow**:
1. Analyze current performance metrics
2. Identify bottlenecks and opportunities
3. Implement optimizations:
   - Code splitting
   - Tree shaking
   - Image optimization
   - Caching strategies
4. Validate improvements
5. Generate performance report

# React + TypeScript + Tailwind
git clone https://github.com/superclaude/templates/react-ts-tailwind
 
# Next.js Full-Stack  
git clone https://github.com/superclaude/templates/nextjs-fullstack
 
# Node.js API
git clone https://github.com/superclaude/templates/nodejs-api
 
# Python FastAPI
git clone https://github.com/superclaude/templates/python-fastapi

## Efficiency Settings
--uc                    # Ultra-compressed mode (30-50% token reduction)
--answer-only          # Skip workflow automation
--delegate auto        # Intelligent task distribution
--concurrency 5        # Parallel processing

## Caching Configuration
mcp_cache:
  enabled: true
  ttl: 3600             # 1 hour cache
  max_size: 100MB
 
context_cache:
  project_analysis: 24h
  dependency_lookup: 1h
  documentation: 7d

## Security Guidelines
- Never include API keys in CLAUDE.md
- Use environment variables for secrets
- Validate all generated code
- Review MCP tool permissions
- Audit custom commands regularly
 
## Recommended .gitignore additions
.claude/secrets/
.claude/cache/
.claude/logs/

## Team Setup
# Commit shared CLAUDE.md to repository
git add CLAUDE.md
git commit -m "Add Claude Code project configuration"
 
# Document custom commands
docs/claude-commands.md
 
# Share MCP tool configurations
.claude/team-config.yml

# Check MCP server status
claude mcp status
 
# Clear caches
claude cache clear
 
# Reduce token usage
claude config --compression-mode aggressive

# Validate CLAUDE.md syntax
claude validate .
 
# Test custom commands
claude test-command /component TestComponent
 
# Debug MCP connections
claude mcp debug --server context7