pixel-perfect-ui
Pixel-Perfect UI Implementation
Autonomous workflow for converting Figma designs to production-ready, pixel-perfect React/Next.js implementations with visual validation.
🚀 AUTO-TRIGGER CONDITIONS
This skill MUST be invoked automatically when the user requests ANY of:
- "implement this Figma design"
- "build this page/component from Figma"
- "create from Figma"
- "implement the design"
- "build this block/section"
- "create component matching design"
- Any request involving Figma URL or node ID
- Any request to implement a page, block, or component from a design
Prerequisites
More from corlab-tech/skills
stenciljs-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.
8carbon-icons
Carbon Design System icon usage for React components. MANDATORY when any component includes an icon. Use when implementing UI components that need icons, building atoms/molecules/organisms with icon elements, or adding icons to buttons, inputs, navigation, or any other UI element. Covers icon imports, sizing, color, alignment, touch targets, and the V-Shield Design System icon labeling system.
6