/pix: The Pixel-Perfect Autonomous Loop

Note: This skill requires Figma MCP and Claude Chrome extension. Tool names may vary based on your MCP configuration (e.g., figma__get_screenshot or mcp__figma__get_screenshot). Run /mcp to see available tools.

Phase 0: Project Discovery

Before anything else, analyze the project to understand its stack:

1. Package Manager Detection

Check which lockfile exists: package-lock.json (npm), yarn.lock (yarn), pnpm-lock.yaml (pnpm), bun.lockb (bun). Use the corresponding command for all package operations.

2. Dev Server & Port Detection

• Read package.json scripts to find the dev command
• Check for port configuration in: vite.config.*, next.config.*, nuxt.config.*, webpack.config.*, .env*, or the dev script itself
• Common patterns: --port, -p, PORT=, server.port
• Default fallback order: 5173 (Vite), 3000 (Next/CRA), 8080 (Vue CLI)