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

•

Seguridad y Pruebas

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.

Características Principales

01Pixelmatch-driven visual regression with customizable error thresholds

02Automated 'Implement-Render-Snapshot-Compare-Fix' development loop

03Dual-engine support for both Web (Playwright) and PDF (Puppeteer) rendering

04Design token enforcement to prevent hardcoded styling values

05Intelligent auto-fix capability that iterates on CSS until design specs are met

063 GitHub stars

Casos de Uso

01Verifying layout integrity for automated PDF report generation

02Preventing visual regressions during major CSS refactors or dependency updates

03Developing high-fidelity UI components from Figma or design mockups

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nguyenthienthanh/aura-frog visual-pixel-perfect

For use in Claude.ai and ChatGPT

Características Principales

01Pixelmatch-driven visual regression with customizable error thresholds

02Automated 'Implement-Render-Snapshot-Compare-Fix' development loop

03Dual-engine support for both Web (Playwright) and PDF (Puppeteer) rendering

04Design token enforcement to prevent hardcoded styling values

05Intelligent auto-fix capability that iterates on CSS until design specs are met

063 GitHub stars

Casos de Uso

01Verifying layout integrity for automated PDF report generation

02Preventing visual regressions during major CSS refactors or dependency updates

03Developing high-fidelity UI components from Figma or design mockups

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nguyenthienthanh/aura-frog visual-pixel-perfect

For use in Claude.ai and ChatGPT