setup

为新团队成员的一次性环境设置

SKILL.md

--- frontmatter

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

•Clone the repository
•Run npm install in monorepo root
•Start Docker: docker-compose up -d
•Run migrations: npm run migrate
•Seed database: npm run seed

Phase 2.5: Pattern Resources Orientation

Familiarize yourself with design resources:

•Read /docs/pattern-resources.md - External UI/UX references
•Read /docs/design-system/ folder - Internal tokens and guidelines
•
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

•
Copy .env.example to .env in:
- •apps/api/.env
- •apps/web/.env
•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:

json

{
  "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):

•Cancel the operation (Cmd+C or close dialog)
•Manually edit ~/.cursor/mcp.json
•Add the config block directly
•Restart Cursor: Cmd+Shift+P > "Reload Window"

MCP shows disconnected:

•Verify JSON syntax is valid (use jsonlint.com)
•Check token is correct and not expired
•For Figma: ensure desktop app is running with MCP enabled

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

bash

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