/setup

name: setup
description: One-time environment setup for new team members

Environment Setup Skill

Use this skill for first-time setup of your development environment.

Phase 1: Core Development Tools

Verify these are installed:

• [ ] Cursor IDE (latest version)
• [ ] GitHub Desktop
• [ ] Docker
• [ ] TablePlus (database GUI)
• [ ] Figma Desktop App - https://www.figma.com/downloads/
• [ ] Screen.studio (optional, for demos)
• [ ] Google Cloud SDK (only for admins)

Phase 2: Repository Setup

1. Clone the repository 2. Run `npm install` in monorepo root 3. Start Docker: `docker-compose up -d` 4. Run migrations: `npm run migrate` 5. Seed database: `npm run seed`

Phase 2.5: Pattern Resources Orientation

Familiarize yourself with design resources:

1. Read `/docs/pattern-resources.md` - External UI/UX references 2. Read `/docs/design-system/` folder - Internal tokens and guidelines 3. Bookmark key competitor sites for your domain:

• [Mobbin](https://mobbin.com/) - Real app screenshots
• [Page Flows](https://pageflows.com/) - User flow recordings
• [Refactoring UI](https://www.refactoringui.com/) - Visual design principles

Phase 3: Environment Configuration

1. Copy `.env.example` to `.env` in:

• `apps/api/.env`
• `apps/web/.env`

2. Configure required variables

Phase 4: MCP Configuration

Installation Method: Manual (Recommended)

Cursor's UI auto-install can loop indefinitely. **Edit `~/.cursor/mcp.json` directly.**

Complete mcp.json Template

Copy this to `~/.cursor/mcp.json` and replace `YOUR_*` placeholders:

{
  "mcpServers": {
    "notion": {
      "command": "npx",
      "args": ["-y", "@notionhq/notion-mcp-server"],
      "env": {
        "OPENAPI_MCP_HEADERS": "{\"Authorization\": \"Bearer YOUR_NOTION_TOKEN\", \"Notion-Version\": \"2022-06-28\"}"
      }
    },
    "n8n-mcp": {
      "command": "npx",
      "args": ["-y", "supergateway", "--streamableHttp", "YOUR_N8N_URL/mcp-server/http", "--header", "authorization:Bearer YOUR_N8N_TOKEN"]
    },
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    },
    "figma": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Authentication by MCP

| MCP | Auth Type | How to Get Token | |-----|-----------|------------------| | Notion | API Token | notion.so/my-integrations > New integration > Copy token | | n8n | Bearer Token | n8n instance > Settings > API > Create key | | Context7 | None | Just works | | Figma Desktop | None | Enable in Figma app Dev Mode (Shift+D) | | Figma Remote | OAuth | Use `"url": "https://mcp.figma.com/mcp"`, click Connect in Cursor | | Browser | None | Built-in to Cursor |

Browser MCP (Built-in)

Browser MCP is built into Cursor and requires no setup. Use it for:

• Taking screenshots of competitor apps during DIVERGE phase
• Testing Storybook stories
• E2E workflow verification

**Tip**: During feature exploration, navigate to competitor apps and use `browser_take_screenshot` to capture reference designs.

Troubleshooting

**MCP won't install (infinite loop):** 1. Cancel the operation (Cmd+C or close dialog) 2. Manually edit `~/.cursor/mcp.json` 3. Add the config block directly 4. Restart Cursor: Cmd+Shift+P > "Reload Window"

**MCP shows disconnected:** 1. Verify JSON syntax is valid (use jsonlint.com) 2. Check token is correct and not expired 3. For Figma: ensure desktop app is running with MCP enabled

**Verification:** After restart, list MCP folder to confirm all servers loaded:

ls ~/.cursor/projects/*/mcps/

Phase 5: Cursor Settings

Configure in Cursor Settings:

• Model: Claude Opus 4.5
• Auto mode: Disabled
• Completion sounds: Enabled
• Usage summary: Always

Phase 6: Verification

Run these to verify setup:

• [ ] `npm run dev` - starts without errors
• [ ] `npm run typecheck` - passes
• [ ] `npm run storybook` - loads components

Completion

When all phases complete, you're ready to use:

• `init [Notion URL]` - Start a new feature
• `plan [feature]` - Create implementation plan