pix
/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_screenshotormcp__figma__get_screenshot). Run/mcpto 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.jsonscripts 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)
More from corlab-tech/skills
pixel-perfect-ui
Autonomous pixel-perfect UI implementation loop for Next.js/React using Figma MCP and Playwright. Converts Figma designs to production-ready components with iterative visual validation. **AUTO-TRIGGERS** on ANY request to implement Figma designs including: 'implement this Figma', 'build this page/component from Figma', 'create from Figma design', 'implement design', 'build this block', 'create component from design'. Use for: (1) Building pages/components from Figma, (2) Pixel-perfect accuracy, (3) Responsive layouts, (4) Design token conversion.
68stenciljs-component-development
Use when creating or modifying Stencil.js web components. Ensures components follow Stencil best practices, proper decorator usage, lifecycle methods, and TypeScript conventions.
63stencil-atomic-design-system
Use when building a Stencil.js design system with Atomic Design methodology, design tokens, theming support, and slot-based components. Implements a multi-client architecture with standardized patterns for atoms, molecules, organisms, and templates.
27storybook-story-writing
Use when creating or modifying Storybook stories for components. Ensures stories follow CSF3 format, properly showcase component variations, and build successfully.
10pix-storybook
Autonomous pixel-perfect Stencil component implementation using Figma MCP, Storybook, and Playwright MCP for visual testing and fixing.
8figma-storybook-workflow
STRICT pixel-perfect Figma to Storybook workflow with ENFORCED extraction and iterative component implementation. MANDATORY: Extract exact design → Implement → Iterate until perfect → Move to next. NO shortcuts, NO assumptions, NO batch processing. Use when implementing Figma designs as Storybook components with 100% accuracy requirement.
8