pixel-perfect-audit
Enforces WCAG 2.1 accessibility standards and senior-level architectural patterns like zero-prop-drilling.
Install
mkdir -p .claude/skills/pixel-perfect-audit && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/9800" && unzip -o skill.zip -d .claude/skills/pixel-perfect-audit && rm skill.zipInstalls to .claude/skills/pixel-perfect-audit
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Seniors-only structural and accessibility auditing. Ensures 100% WCAG 2.1 compliance, zero-prop-drilling, and high-performance React 19 standards.Key capabilities
- →Audit frontend code for WCAG 2.1 compliance
- →Refactor junior patterns like prop-drilling
- →Enforce React 19 performance standards
- →Validate semantic HTML and accessibility states
How it works
The skill runs a mental simulation of Lighthouse performance and accessibility checks, then refactors non-semantic or inefficient code patterns.
Inputs & outputs
When to use pixel-perfect-audit
- →Auditing accessibility
- →Refactoring prop-drilling
- →Optimizing React performance
About this skill
SKILL: Pixel-Perfect Audit & Quality Guard
1. Skill Meta
Name: Pixel-Perfect Audit (The "Sentinel" Protocol) Description: Extreme proficiency in auditing frontend code for professional standards. This skill moves beyond "working code" and focuses on "excellent code." It eradicates junior patterns (prop-drilling, bad naming, redundant logic) and enforces 2025 performance standards.
2. The Sentinel Checklist
A. Visual Fidelity (The 1:1 Rule)
- CLS Check: Every animation (GSAP/Framer) must be audited for Cumulative Layout Shift. Use
absoluteortransformexclusively for movement. - Typography Scale: Check for 1:1 scale ratios (e.g., 4vw headlines vs 16px body).
- Noise Integrity: Ensure the global noise overlay is at exactly 0.05 opacity—invisible to the conscious mind, but present in the "feel."
B. Accessibility (The Human Rule)
- Color Contrast: All text on Oat, Terracotta, or Deep Earth must meet WCAG AA standards.
- Aria Labels: Every interactive element (
/boutiqueislands,/foodmenus) must have descriptivearia-labeloraria-expandedstates. - Semantic HTML: Never use generic
<div>. Use<header>,<main>,<section>,<nav>,<footer>.
C. Architecture (The Senior Rule)
- Prop-Drilling: No more than 2 levels of prop-drilling allowed. Use Context or Jotai for global state (e.g., cart, auth).
- Server/Client Boundaries: Strictly separate "interactive" client components from "static" server components to minimize JS bundle size.
- Naming: Use industry-standard naming (e.g.,
BoutiqueHero,ArtifactCard).
3. Engineering Guidelines
A. Automated Review Trigger
When /audit is called, run a mental simulation of:
- Lighthouse Performance: Target 95+.
- Accessibility: Target 100.
- Best Practices: Target 100.
B. Refactor Logic
If a junior pattern is found (e.g., onClick on a div), the Sentinel must instantly refactor it into a proper <button> with the correct utility classes.
4. Visual Constants
- Performance: Use
will-change-transformfor all GSAP-heavy elements. - Loading: Every high-fidelity site must have a custom "Fade-to-Brand" transition effect during hydration.
When not to use it
- →General backend logic auditing
Limitations
- →Requires React 19 context
- →Limited to frontend structural and accessibility standards
How it compares
Unlike generic linters, this skill enforces specific senior-level architectural patterns and visual fidelity rules.
Compared to similar skills
pixel-perfect-audit side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| pixel-perfect-audit (this skill) | 0 | 4mo | No flags | Intermediate |
| elegant-design | 21 | 5mo | Review | Intermediate |
| web-design-reviewer | 7 | 7mo | No flags | Intermediate |
| baseline-ui | 3 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
elegant-design
rand
Create world-class, accessible, responsive interfaces with sophisticated interactive elements including chat, terminals, code display, and streaming content. Use when building user interfaces that need professional polish and developer-focused features.
web-design-reviewer
github
This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and layout breakage, then performs fixes at the source code level.
baseline-ui
agentset-ai
Enforces an opinionated UI baseline to prevent AI-generated interface slop.
bencium-innovative-ux-designer
bencium
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
theme-system
btriapitsyn
Use when creating or modifying UI components, styling, or visual elements in OpenChamber. All UI colors must use theme tokens - never hardcoded values or Tailwind color classes.
design-system-starter
davila7
Create and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.