{"content":"# AI Coding Agent Configuration\n\nConfigure AI coding agents like Cursor, GitHub Copilot, or Claude Code with project-specific patterns, coding guidelines, and MCP servers for consistent AI-assisted development.\n\n### Step 1: Create an agents.md file\n\nCreate an `agents.md` file in your project root. This file provides coding guidelines and patterns for AI assistants to follow.\n\n```markdown\n// agents.md\n\n# Patterns\n\n- Strictly follow the Functional Core, Imperative Shell pattern: separate application logic into two parts: a functional core with pure, side-effect-free functions for business rules and data transformation, and an imperative shell that handles impure actions like database I/O, network requests, or user input, making the core logic easily testable and modular\n- Everything is a library: Organize features and domains as self-contained folders in `src/lib/` (e.g., `chat`, `ai`, `db`). Co-locate schema, queries, types, and utilities together. Components go in `components/<feature>/`.\n- Use the web platform: Prefer native APIs and standards. Avoid abstractions that hide what the code actually does.\n\n# Coding Guidelines\n\n## Runtime and Package Manager\n\n- Use Bun instead of Node.js, npm, pnpm, or vite.\n- Use `bun install` instead of `npm install` or `yarn install` or `pnpm install`.\n- Use `bun run <script>` instead of `npm run <script>` or `yarn run <script>` or `pnpm run <script>`.\n\n## TypeScript\n\n- Avoid `export default` in favor of `export` whenever possible.\n- Only create an abstraction if it's actually needed\n- Prefer clear function/variable names over inline comments\n- Avoid helper functions when a simple inline expression would suffice\n- Don't use emojis\n- No barrel index files - just export from the source files instead\n- No type.ts files, just inline types or co-locate them with their related code\n- Don't unnecessarily add `try`/`catch`\n- Don't cast to `any`\n\n## React\n\n- Avoid massive JSX blocks and compose smaller components\n- Colocate code that changes together\n- Avoid `useEffect` unless absolutely needed\n\n## Tailwind\n\n- Mostly use built-in values, occasionally allow dynamic values, rarely globals\n- Always use v4 + global CSS file format + shadcn/ui\n\n## Next\n\n- Prefer fetching data in RSC (page can still be static)\n- Use next/font + next/script when applicable\n- next/image above the fold should have `sync` / `eager` / use `priority` sparingly\n- Be mindful of serialized prop size for RSC → child components\n\n## Browser Automation\n\nUse `agent-browser` for web automation. Run `agent-browser --help` for all commands.\n\nCore workflow:\n\n1. `agent-browser open <url>` - Navigate to page\n2. `agent-browser snapshot -i` - Get interactive elements with refs (@e1, @e2)\n3. `agent-browser click @e1` / `fill @e2 \"text\"` - Interact using refs\n4. Re-snapshot after page changes\n```\n\n> This `agents.md` file is based on [Lee Robinson's](https://x.com/leerob) original [shared here](https://x.com/leerob/status/1993162978410004777).\n\n### Step 2: Add MCP Servers\n\nUse MCP (Model Context Protocol) servers to enhance your coding agent's capabilities. Add servers with `bunx add-mcp <mcp url> -y` — it updates all detected agents automatically, so no per-agent config files are required.\n\nIf no agents are detected, add `-a cursor -a codex` to the command or prompt the user to specify what agents they want to use for this project.\n\n```bash\nbunx add-mcp https://mcp.vercel.com\nbunx add-mcp next-devtools-mcp@latest\nbunx add-mcp https://mcp.context7.com/mcp\nbunx add-mcp https://fullstackrecipes.com/api/mcp\n```\n\n| Server | Description |\n| `vercel` | Manage Vercel projects, deployments, and search Vercel docs |\n| `next-devtools` | Next.js development tools for debugging, routing, and build info |\n| `context7` | Up-to-date documentation lookup for any library |\n| `fullstackrecipes` | Fullstackrecipes recipes |\n\n> **Vercel MCP:** On first connection, Cursor will show a \"Needs login\" prompt. Click it to authorize access to your Vercel account. For project-specific context, use `https://mcp.vercel.com/<teamSlug>/<projectSlug>` instead.\n\n### Step 3: Install Browser Automation\n\nInstall the `agent-browser` package globally for web automation:\n\n```bash\nbun install -g agent-browser\nagent-browser install  # Download Chromium\n```\n\n### Step 4: Install Agent Skills\n\nInstall skills for AI agents:\n\n```bash\nbunx skills add anthropics/skills -s skill-creator -a cursor -a codex -y\nbunx skills add anthropics/skills -s frontend-design -a cursor -a codex -y\nbunx skills add vercel-labs/agent-skills -s web-design-guidelines -a cursor -a codex -y\nbunx skills add vercel-labs/agent-skills -s vercel-react-best-practices -a cursor -a codex -y\nbunx skills add vercel-labs/agent-browser -s agent-browser -a cursor -a codex -y\nbunx skills add vercel/ai -s ai-sdk -a cursor -a codex -y\nbunx skills add vercel/ai-elements --skill ai-elements -a cursor -a codex -y\nbunx skills add andrelandgraf/fullstackrecipes/skills -a cursor -a codex -y\nbunx skills add neondatabase/agent-skills -a cursor -a codex -y\nbunx skills add neondatabase/better-env -a cursor -a codex -y\n```\n\n| Skill | Description |\n| `neon-postgres` | Neon Postgres setup and operational guidance |\n| `better-env` | better-env setup, sync, and validation workflows |\n| `agent-browser` | Browser automation for web testing and interaction |\n| `web-design-guidelines` | Web design best practices for UI/UX |\n| `vercel-react-best-practices` | React patterns and conventions for Vercel apps |\n| `skill-creator` | Anthropic skill creation guidelines |\n| `frontend-design` | Anthropic frontend design best practices |\n| `ai-sdk` | Vercel AI SDK patterns and best practices |\n| `ai-elements` | Vercel AI Elements UI components and patterns |\n| `fullstackrecipes` | Fullstackrecipes setup guides and workflows |"}