Menú
Pixel drift detection, mandatory measurement workflow for any CSS or HTML element change. Auto-invoke when editing CSS, changing HTML elements, or replacing DOM structures.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
| name | pixel-perfect |
| description | Pixel drift detection, mandatory measurement workflow for any CSS or HTML element change. Auto-invoke when editing CSS, changing HTML elements, or replacing DOM structures. |
| user-invocable | true |
When making any CSS change or HTML element swap (e.g. <dl> to <ul>, <div> to <section>), follow this workflow exactly. Screenshots alone prove NOTHING about pixel parity, only measured numbers do.
Use browser_evaluate to capture exact values for every affected element:
// Capture dimensions
el.getBoundingClientRect() // width, height, x, y
// Capture computed styles — the ACTUAL rendered values, not what CSS says
getComputedStyle(el).display // may differ from your CSS (global overrides!)
getComputedStyle(el).gap
getComputedStyle(el).margin
getComputedStyle(el).padding
getComputedStyle(el).lineHeight
getComputedStyle(el).fontSize
Store these numbers. Report them. They are your baseline.
Global styles, resets, and browser defaults frequently override scoped CSS. A <dl> might render as display: grid; gap: 16px even though scoped CSS says display: flex; gap: 8px. Never assume, always measure.
Edit the HTML/CSS.
Navigate to the same page. Measure the same elements with browser_evaluate. Report the numbers side by side.
After git stash pop, git checkout, or file restoration, the dev server may serve stale CSS. Touch the file (touch path/to/file) and hard-reload before measuring.
Report a table:
| Metric | Before | After | Diff |
| -------------- | ------ | ----- | ---- |
| footer height | 396px | 396px | 0 |
| section height | 98px | 98px | 0 |
If any measurement differs by even 1px:
| Trap | Example | Fix |
|---|---|---|
| Browser default margins | <ul> has margin: 0 0 16px, <dl> has margin: 1em 0 | Explicitly reset margin: 0 |
| Browser default padding | <ul> has padding-left: 40px | Explicitly reset padding: 0 |
| Default line-height | <li> gets line-height: 1.5 from UA stylesheet | Set line-height: 1 or match original |
| Global CSS overrides | A global dl { display: grid } overrides scoped display: flex | Measure computed styles BEFORE changing elements |
| Scoped CSS not matching | Changed & dl to & ul but Astro scoping attrs differ | Touch file + reload to force CSS rebuild |
MSW 2 (Mock Service Worker) mocking in Svelte: Storybook, Vitest browser tests, SvelteKit dev/SSR. Use when writing handlers or fixtures, when a story renders blank or errors Failed to fetch, or when migrating msw-storybook-addon v2 to v3.
Vitest test.projects, browser mode with playwright(), optimizeDeps, separate vitest.config from vite.config. Use when editing vitest config, debugging flaky browser tests, upgrading @vitest/*, or splitting node vs browser projects.
Svelte CSF (@storybook/addon-svelte-csf) + @storybook/addon-vitest: .stories.svelte as Vitest browser tests with play functions and tags. Use when wiring or debugging Svelte Storybook tests in Vitest/CI, not for React/Vue/CSF3 .ts story files.
Validation discipline for all code changes, testing, baselines, browser checks, CSS screenshots. Auto-invoke whenever making code changes, running tests, or declaring a task done.
Storybook workflow, MCP tools, fixtures, CSS import chains. Auto-invoke when working with Storybook stories or components.
Fix and create Svelte 5 tests with vitest-browser-svelte and Playwright. Use when fixing broken tests, debugging failures, writing unit/SSR/e2e tests, or working with vitest/Playwright.