Multi-Editor Frontend Setup
Frontend-optimized AI config covering design system tokens, component conventions, and testing patterns across Cursor, Copilot, and Claude Code simultaneously.
Description
Frontend teams rarely use just one AI tool. This pattern provides parallel configuration for Cursor (.cursor/rules/ with component-scoped .mdc files), Copilot (.github/instructions/ with applyTo patterns for .tsx, .css, .test files), and Claude Code (CLAUDE.md with component architecture). A shared docs/ai-context/ directory contains design system tokens, component patterns, and naming conventions that all three tools reference. Cursor rules auto-attach when editing components. Copilot instructions scope to file types. Claude Code reads the shared docs via @imports. The shared directory is the single source of truth — tool-specific files reference it, not duplicate it.
Who is this for
Frontend teams where different developers prefer different AI editors (Cursor, VS Code with Copilot, Claude Code) but need consistent output.
Why files are split this way
Each tool has its own configuration format and scoping mechanism. Duplicating design system tokens and component patterns in each tool's config creates drift. A shared ai-context directory holds the canonical definitions, while tool-specific files handle format translation and scoping. When the design system changes, you update one place.
What changed from the previous setup
Tool-specific config files with duplicated design system tokens and component patterns that drifted between editors.
Related patterns
Universal AGENT.md with Symlinks
One AGENT.md file as the single source of truth, with symlinks to CLAUDE.md, .cursorrules, .windsurfrules, and copilot-instructions.md.
Turborepo Per-Package AI Context
Root-level CLAUDE.md with per-package CLAUDE.md files that Claude auto-loads when working in subdirectories. Works with Turborepo, Nx, and pnpm workspaces.
Spec-Driven AI Development
Separates what to build (SPEC.md) from how the AI should work (CLAUDE.md). Specs define features and constraints, CLAUDE.md defines workflow and conventions.