Setup

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 - Real app screenshots
   • Page Flows - User flow recordings
   • Refactoring UI - 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:

jsonCopy code
{
  "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

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:

bashCopy code
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