From design-qa
Use when comparing the current page against a stored visual baseline. Uses Argos when an Argos token is configured, otherwise falls back to Playwright's built-in toHaveScreenshot.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-qa:visual-regressionThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You're comparing the current screenshot matrix against an established baseline.
You're comparing the current screenshot matrix against an established baseline.
${user_config.argosToken} is set: use Argos. Cloud-hosted baselines, no committed PNGs, GitHub PR check.toHaveScreenshot. Local PNGs in __screenshots__/. Works for solo dev, struggles in teams.responsive-design-sweep skill).bash ${CLAUDE_PLUGIN_ROOT}/bin/run-argos-upload.sh <reportDir>. The script:
@argos-ci/cli with argos upload.--reporter=html and capture the diff.<n>-diff.png files for each mismatch.templates/playwright.config.template.ts under expect.toHaveScreenshot:
maxDiffPixelRatio: 0.01 (1% of pixels can differ).threshold: 0.2 (per-pixel color tolerance).
These are stricter than Argos defaults — loosen them in your project's playwright.config.ts if false positives are noisy. The plugin does not yet read these from reviewer.json.Before any screenshot for visual regression:
await page.waitForLoadState('networkidle').await page.evaluate(() => document.fonts.ready).mask: [page.locator('[data-dynamic]')] in Playwright.## Visual Regression (Argos build #1234)
- Build: https://app.argos-ci.com/stacks-inc/project/builds/1234
- Status: completed in 47s
- Total screenshots compared: 108
- Diffs detected: 6
### Blockers (1)
- `1440-light-default.png` — header logo size changed by 24% (likely accidental). Diff: ...
### High (3)
...
Approve the build in Argos to update the baseline if these changes are intentional.
npx claudepluginhub my-stacks/claude-code-skills --plugin design-qaProvides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.