Claude Workspace

Claude Workspace — Frontend Engineering Configuration

Production-grade Claude Code workspace for frontend teams. Drop into any React/TypeScript project — get expert-level AI pair programming with enforced standards, automated quality gates, and domain-specific knowledge.

Architecture

Why Claude Workspace?

Most developers copy-paste prompts. This repo gives you a version-controlled, team-shareable Claude Code configuration with:

• 🎯 18 domain-specific skills (React, TypeScript, a11y, SEO, Core Web Vitals, API, Auth, i18n)
• 🤖 8 autonomous agents with auto-invocation rules
• ⚡ 12 slash commands for full ticket-to-PR workflows
• 🔒 10 hooks for deterministic quality gates
• 📐 5 path-scoped rules for contextual enforcement
• 📦 One-command install into any project

> Works with Claude Code — Anthropic's agentic CLI.

Quick Install

# One-command install into your project
curl -fsSL https://raw.githubusercontent.com/Piyush8296/claude-workspace/main/install.sh | bash -s -- /path/to/your/project

# Or manual copy
git clone https://github.com/Piyush8296/claude-workspace.git /tmp/cw
cp -r /tmp/cw/.claude /tmp/cw/CLAUDE.md /tmp/cw/.mcp.json your-project/

Then edit CLAUDE.md to match your stack and run claude.

What's Inside

claude-workspace/
├── CLAUDE.md                                  # Project memory (~60 lines, lean)
├── install.sh                                 # One-command installer
├── .claude/
│   ├── settings.json                          # Permissions, 10 hooks, env
│   ├── agents/ (8)
│   │   ├── code-reviewer.md                   # Auto-invoked after code changes
│   │   ├── performance-auditor.md             # Core Web Vitals & bundles
│   │   ├── accessibility-auditor.md           # WCAG 2.1 AA compliance
│   │   ├── refactor-planner.md                # Safe incremental migration
│   │   ├── doc-generator.md                   # Auto-writes JSDoc (background)
│   │   ├── architecture-reviewer.md           # Module boundaries (background)
│   │   ├── test-writer.md                     # Writes tests (background)
│   │   └── orchestrator.md                    # Unified health report (Opus)
│   ├── commands/ (12)
│   │   ├── code-quality.md                    # /code-quality 
│   │   ├── component-gen.md                   # /component-gen 
│   │   ├── pr-review.md                       # /pr-review
│   │   ├── ticket.md                          # /ticket 
│   │   ├── migrate.md                         # /migrate  
│   │   ├── onboard.md                         # /onboard
│   │   ├── tdd.md                             # /tdd 
│   │   ├── build-fix.md                       # /build-fix
│   │   ├── e2e.md                             # /e2e 
│   │   ├── lighthouse.md                      # /lighthouse [url]
│   │   ├── perf-audit.md                      # /perf-audit [focus]
│   │   └── deploy.md                          # /deploy (pre-deploy checklist)
│   ├── rules/ (5)
│   │   ├── typescript.md                      # *.ts, *.tsx
│   │   ├── styling.md                         # *.css, tailwind.config.*
│   │   ├── testing.md                         # *.test.*, *.spec.*
│   │   ├── documentation.md                   # *.md, *.mdx
│   │   └── env-config.md                      # .env*, config files
│   ├── skills/ (18)
│   │   ├── react-patterns/SKILL.md            # Component architecture
│   │   ├── state-management/SKILL.md          # TanStack Query, Zustand, URL state
│   │   ├── testing-strategy/SKILL.md          # TDD, factories, mocking
│   │   ├── css-architecture/SKILL.md          # Tailwind, tokens, responsive
│   │   ├── performance-optimization/SKILL.md  # Bundles, splitting, virtualization
│   │   ├── accessibility/SKILL.md             # WCAG, ARIA, keyboard, focus
│   │   ├── systematic-debugging/SKILL.md      # 4-phase root cause analysis
│   │   ├── frontend-design/SKILL.md           # Aesthetics, typography, interactions
│   │   ├── design-intelligence/SKILL.md       # Claude Design + Google Stitch
│   │   ├── security-audit/SKILL.md            # XSS, CSP, secrets, auth, deps
│   │   ├── seo-fundamentals/SKILL.md          # Meta tags, OG, SSR, crawlability
│   │   ├── structured-data/SKILL.md           # JSON-LD schemas, GEO/AEO
│   │   ├── core-web-vitals/SKILL.md           # LCP, INP, CLS fix recipes
│   │   ├── api-layer/SKILL.md                 # Typed fetch, interceptors, retry
│   │   ├── error-handling/SKILL.md            # Error boundaries, normalization
│   │   ├── auth-patterns/SKILL.md             # NextAuth, middleware, RBAC
│   │   ├── monorepo-patterns/SKILL.md         # Turborepo, Nx, workspaces
│   │   └── i18n/SKILL.md                      # next-intl, react-intl, RTL, plurals
│   └── hooks/scripts/
│       └── screenshot.sh                      # UI screenshot capture
├── .mcp.json                                  # MCP server config
└── .gitignore

Skills (18)

| Skill | What It Covers | |-------|----------------| | react-patterns | Component architecture, composition, state handling order | | state-management | TanStack Query, Zustand, URL state, decision framework | | testing-strategy | TDD, factory pattern, mocking, coverage targets | | css-architecture | Tailwind patterns, design tokens, responsive, z-index | | performance-optimization | Bundle splitting, lazy loading, virtualization | | accessibility | WCAG 2.1 AA, ARIA, keyboard nav, focus management | | systematic-debugging | 4-phase root cause analysis | | frontend-design | Bold aesthetics, typography, micro-interactions | | design-intelligence | Claude Design + Google Stitch workflows | | security-audit | XSS, CSP, secrets, auth patterns, dependency vulns | | seo-fundamentals | Meta tags, OG/Twitter cards, SSR vs CSR, crawlability | | structured-data | JSON-LD schemas (Product, Article, FAQ, Breadcrumb), GEO/AEO | | core-web-vitals | LCP, INP, CLS — diagnosis + specific React/Next.js fix recipes | | api-layer | Typed fetch clients, interceptors, retry with backoff, AbortController | | error-handling | Error boundaries hierarchy, custom error classes, normalization | | auth-patterns | NextAuth/Auth.js, middleware protection, RBAC, token refresh | | monorepo-patterns | Turborepo/Nx pipelines, shared packages, changesets | | i18n | next-intl/react-intl, locale routing, RTL, ICU pluralization |

Agents (8)

| Agent | Model | Trigger | |-------|-------|---------| | code-reviewer | Sonnet | Proactively after any code change | | performance-auditor | Sonnet | Performance complaints or pre-launch | | accessibility-auditor | Sonnet | UI work or a11y issues reported | | refactor-planner | Sonnet | Before restructuring or migration | | doc-generator | Haiku | After code changes (background) | | architecture-reviewer | Sonnet | Adding modules or restructuring (background) | | test-writer | Sonnet | After features or bug fixes (background) | | orchestrator | Opus | Full project health check on demand |

Commands (12)

| Command | What it does | |---------|-------| | /code-quality | Lint + typecheck + manual review | | /component-gen | Scaffold component + test + barrel | | /pr-review | Review current branch changes | | /ticket | Full ticket-to-PR workflow | | /migrate | Guided migration with safety checks | | /onboard | Explore and document the codebase | | /tdd | Red-green-refactor TDD cycle | | /build-fix | Auto-diagnose and fix build errors | | /e2e | Generate Playwright E2E tests | | /lighthouse [url] | Run Lighthouse audit, parse scores, generate fix list | | /perf-audit [focus] | Bundle analysis, dep weight, images, fonts, third-party | | /deploy | Pre-deployment readiness checklist |

Rules (5)

| Rule | Glob Pattern | What It Enforces | |------|-------------|------------------| | typescript | *.ts, *.tsx | Strict types, no any, interface conventions | | styling | *.css, tailwind.config.* | Design tokens, utility-first, responsive | | testing | *.test.*, *.spec.* | AAA pattern, factories, coverage thresholds | | documentation | *.md, *.mdx | Structure, frontmatter, linking | | env-config | .env*, config.ts | Zod validation, typed config, no hardcoded secrets |

Hooks (10)

| Hook | Event | What It Does | |------|-------|--------------| | Branch guard | PreToolUse | Blocks edits on main | | File protection | PreToolUse | Blocks .env, production configs, secrets | | Prettier | PostToolUse | Auto-formats JS/TS/JSX/TSX | | TypeScript check | PostToolUse | tsc --noEmit on TS changes | | Test runner | PostToolUse | Runs related tests | | Dep installer | PostToolUse | Auto-install on package.json change | | Auto-commit | PostToolUse | Stages + commits every edit | | UI screenshot | PostToolUse | Captures app on UI file changes | | Notification | Stop | macOS notification when done | | Vercel preview | Stop | Deploy preview after clean build |

Design Tools

• Claude Design — Visual prototyping from conversation, exports to React
• Google Stitch — Free multi-screen UI generation, exports to Tailwind/Vue/Flutter/SwiftUI

Extending

• Add skills: .claude/skills//SKILL.md
• Add agents: .claude/agents/.md
• Add rules: .claude/rules/.md (with globs: frontmatter)
• Add commands: .claude/commands/.md
• Update CLAUDE.md Quick Facts for your stack

Philosophy

• Lean CLAUDE.md — under 65 lines; detail lives in skills and rules
• Progressive disclosure — Claude loads only what the task needs
• Deterministic gates — hooks enforce formatting and checks regardless of model
• Composable — skills cross-reference, agents delegate, commands orchestrate

---

License

MIT

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Piyush8296
• Source: Piyush8296/claude-workspace
• License: MIT
• Homepage: https://www.linkedin.com/in/piyush-sde

Install and usage instructions live in the source repository linked above.