skills.rest
CoRLab-Tech
CoRLab-TechOFFICIAL
Explore all skills by this author →
GitHub

pix-storybook

Generate Stencil components from Figma designs and test them visually with Playwright.

1|Updated Jan 30, 2026
Search Tags:#figma#playwright#visual testing#storybook#component development#stenciljs
One-click install
npx skills add https://github.com/CoRLab-Tech/skills --skill pix-storybook
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pix-storybook
Source: https://github.com/CoRLab-Tech/skills/tree/main/pix-storybook
Command: npx skills add https://github.com/CoRLab-Tech/skills --skill pix-storybook

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the creation and visual testing of pixel-perfect Stencil components, ensuring they precisely match Figma designs.

Core Features & Use Cases

  • Figma to Code: Translates Figma designs into Stencil.js components.
  • Automated Visual Testing: Uses Playwright MCP for pixel-perfect comparison against Figma.
  • Iterative Refinement: Facilitates quick fixes based on visual discrepancies.
  • Use Case: Implement a new button component from a Figma design, automatically generate its Storybook stories, and verify its visual accuracy against the design using automated screenshots and comparisons.

Quick Start

Use the pix-storybook skill to create a Stencil component from a given Figma link.

Frequently Asked Questions about pix-storybook

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate visual testing for Stencil components against Figma designs?▼

Automated visual testing for Stencil components uses Playwright to capture screenshots and compare them directly against Figma designs, ensuring pixel-perfect accuracy. This process facilitates iterative refinement by highlighting visual discrepancies for quick fixes.

What is the best way to convert a Figma design into a Stencil.js component?▼

Converting a Figma design into a Stencil.js component is best handled by integrating Figma MCP to analyze the design and automatically generate the component code. This workflow also generates Storybook stories for immediate visual validation.

Do I need Figma MCP and Playwright MCP configured to run pixel-perfect component tests?▼

Yes, Figma MCP and Playwright MCP must be available and configured to run pixel-perfect component tests. These dependencies provide the design analysis data and browser automation required to compare Stencil components against original Figma files.

Can I use Storybook to validate Stencil components built from Figma designs?▼

Yes, you can use Storybook to validate Stencil components built from Figma designs. The workflow automatically generates Storybook stories for the new components, allowing you to verify visual accuracy through automated screenshots and comparisons.

Why does my Stencil component not match the Figma design during visual testing?▼

A Stencil component might not match a Figma design during visual testing due to unhandled visual discrepancies. The automated Playwright comparison identifies these pixel-level mismatches, facilitating quick iterative refinements until the component achieves pixel-perfect accuracy.

Related Skills

Explore More Software Engineering Skills→
parhummparhumm
25

frontend-visual-verify

Automate visual verification of UI components with Storybook snapshots and Playwright MCP.

Community
Advanced
robkamrobkam
12

bugfix-red-green-proof

Enforce a red-green-proof loop starting with a failing regression test.

Community
Advanced
zinohomezinohome
1

storybook-setup

Automate Storybook setup and configuration for UI component documentation.

Community
Intermediate
i3ringiti3ringit
3

figma-design-sync

Detect and fix visual differences between Figma designs and web implementations.

Community
Advanced