Does this skill work for PDF files?

Yes, the skill includes specialized scripts for PDF rendering and comparison using Puppeteer, ensuring document layouts match intended designs.

What is the visual auto-fix loop?

It is a specialized workflow where the AI analyzes visual differences between a rendered snapshot and a design reference, then iteratively adjusts the code until the mismatch falls below the allowed threshold.

How does it handle design tokens?

The skill is designed to read tokens from a centralized directory, ensuring the AI uses approved variables for colors, spacing, and fonts rather than hardcoding values.

What external dependencies are required?

You will need to install puppeteer, pngjs, and pixelmatch as dev-dependencies in your project to enable rendering and image comparison.

Can I set custom sensitivity for visual matches?

Yes, you can configure mismatch thresholds (e.g., 0.5% for web or 1.0% for PDF) in the DesignSpec configuration files to control how strictly the design must be matched.

Pixel-Perfect UI Testing

Name: Pixel-Perfect UI Testing
Author: nguyenthienthanh

bynguyenthienthanh

•

보안 및 테스팅

Automates visual regression testing and pixel-perfect design matching for frontend components using an intelligent auto-fix loop.

소개

The visual-pixel-perfect skill provides an automated framework for ensuring frontend implementations exactly match design specifications. By utilizing a continuous loop of rendering, snapshotting, and comparison via Pixelmatch, it allows Claude to identify visual discrepancies and automatically apply CSS or layout fixes. This skill is essential for teams requiring high-fidelity UI development, supporting both web components via Playwright and PDF layouts via Puppeteer, while enforcing the use of design tokens to maintain system-wide consistency.

주요 기능

Pixelmatch-driven visual regression with customizable error thresholds
Automated 'Implement-Render-Snapshot-Compare-Fix' development loop
Dual-engine support for both Web (Playwright) and PDF (Puppeteer) rendering
Design token enforcement to prevent hardcoded styling values
Intelligent auto-fix capability that iterates on CSS until design specs are met
3 GitHub stars

사용 사례

Verifying layout integrity for automated PDF report generation
Preventing visual regressions during major CSS refactors or dependency updates
Developing high-fidelity UI components from Figma or design mockups

소개

주요 기능

Pixelmatch-driven visual regression with customizable error thresholds
Automated 'Implement-Render-Snapshot-Compare-Fix' development loop
Dual-engine support for both Web (Playwright) and PDF (Puppeteer) rendering
Design token enforcement to prevent hardcoded styling values
Intelligent auto-fix capability that iterates on CSS until design specs are met
3 GitHub stars

사용 사례

Verifying layout integrity for automated PDF report generation
Preventing visual regressions during major CSS refactors or dependency updates
Developing high-fidelity UI components from Figma or design mockups