Diagnoses Chromatic visual test diffs by comparing rendered Storybook DOM, styles, and tokens.
npx skills add https://github.com/daangn/seed-design --skill chromatic-diff
Please help me install this Agent Skill. Skill: chromatic-diff Source: https://github.com/daangn/seed-design/tree/main/skills/chromatic-diff Command: npx skills add https://github.com/daangn/seed-design --skill chromatic-diff
Chromatic tells you that a snapshot changed but not why. This Skill turns a chromatic.com build or test URL into a concrete answer by resolving the build behind it, listing the stories that changed, and rendering both sides' published Storybooks so the difference can be read as DOM structure, computed styles, and design token values instead of pixels.
Paste a Chromatic build or test URL and ask why the visual diff appeared, making sure CHROMATIC_TOKEN is exported in the environment first.
High-intent search queries and answers about installing and using this skill.
Pass the Chromatic build or test URL to the resolve script, which reports the build, branch, commit, and every story with unreviewed changes. The Skill then renders both sides' published Storybooks and compares DOM, computed styles, and design tokens to name the actual cause.
Use the --against flag with a branch name, build number, build id, or another Chromatic URL. This answers questions like what changed versus the dev branch rather than versus the automatic per-branch baseline Chromatic selected.
It requires a CHROMATIC_TOKEN OAuth access token obtained by signing in through the Storybook Visual Tests addon, not the CHROMATIC_PROJECT_TOKEN used by the CLI. The token lasts 30 days and is read from the environment by the scripts.
No. The Skill's render checks are written against the chrome-devtools MCP tools or CLI, and substituting another browser driver is explicitly refused because it silently drops those checks. Without a driver, the run stops after reporting build and story metadata.
If both builds render identically at the captured viewport and globals, the snapshot is likely flaky. The strongest evidence is screenshotting one unchanged page twice and comparing the shots — if the page disagrees with itself, it cannot render deterministically.
The Chromatic API only exposes Project.lastBuild, which returns the newest build matching branch and status filters, so superseded builds cannot be looked up directly. Filtering by status often rescues them; otherwise compare against a reachable build.
cromesdkInstall and configure Storybook with addons for Angular 20 Tailwind CSS applications.
stolinskiMap prompts to canonical Graffiti components for UI shells, forms, and content sections.
highflame-aiGenerate structured release notes from git commit history and pull requests.
syntropic137Access advanced Chrome DevTools Protocol features via Playwright's newCDPSession method.
