skills.rest
sanity-io
sanity-ioOFFICIAL
Explore all skills by this author →
Website𝕏@sanity_ioGitHub

sanity-visual-regression

Adds and maintains Chromatic visual regression coverage via Storybook stories, Vitest browser tests, and Playwright snapshots.

6.3k|550|Updated Jan 18, 2017
Search Tags:#Vitest#playwright#storybook#visual regression#Chromatic#Sanity#snapshot testing
One-click install
npx skills add https://github.com/sanity-io/sanity --skill sanity-visual-regression
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sanity-visual-regression
Source: https://github.com/sanity-io/sanity/tree/main/.agents/skills/sanity-visual-regression
Command: npx skills add https://github.com/sanity-io/sanity --skill sanity-visual-regression

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It guides developers through adding, reviewing, and maintaining visual regression coverage in the Sanity monorepo, where three separate Chromatic snapshot sources (Storybook stories, Vitest browser tests, and Playwright e2e) each have distinct setup rules, determinism constraints, and pitfalls that are easy to get wrong.

Core Features & Use Cases

  • Story authoring guidance: Explains where to place co-located *.stories.tsx files, how to reuse *Story.tsx browser-test harnesses, and when to wrap components in TestWrapper for studio context (i18n, workspace, layers).
  • Determinism and tagging rules: Covers parameters.chromatic knobs (delay, diffThreshold, disableSnapshot, modes) and the vrt-only tag convention that keeps regression fixtures out of the Storybook sidebar while retaining snapshot coverage.
  • Integration runbooks: Documents the dormant @chromatic-com/vitest activation steps and the curated opt-in model for Playwright e2e snapshots, including CDP-related pitfalls.
  • Use Case: When migrating a component from styled-components to vanilla-extract, use this Skill to add a sentinel story that snapshots the migrated component so visual regressions are caught in the Chromatic PR check.

Quick Start

Ask the assistant to add Chromatic visual regression coverage for a specific component in the Sanity monorepo, and it will create the appropriate co-located story following the harness and determinism conventions.

Frequently Asked Questions about sanity-visual-regression

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add visual regression coverage for a component in the Sanity monorepo?▼

Add a co-located *.stories.tsx file in the owning package's src tree, usually beside the component or its *Story.tsx harness. Render plain variants directly or wrap studio-context components in TestWrapper, then verify with pnpm dev:storybook and push for the Chromatic check.

How do I snapshot overlays like tooltips and menus in Storybook stories?▼

Add a play function using storybook/test with userEvent and waitFor, querying within(document.body) for portaled content. Chromatic and addon-vitest both run play before capturing, so the snapshot shows the open overlay.

Can I use takeSnapshot from @chromatic-com/vitest in browser tests?▼

Only after the Vitest integration is activated with a Chromatic project token. While dormant, takeSnapshot throws a TypeError in unregistered tests, so never commit calls to shared test files until the plugin is active in CI.

Why are Playwright e2e snapshots limited to page chrome and read-only states?▼

The Chromatic Playwright fixture instruments pages over CDP, which breaks the studio's streaming connections and causes document-editing specs to hang. E2e snapshots are therefore scoped to deterministic chrome states, while form states are covered by Storybook harness stories.

Why does a story render blank in Chromatic but work locally?▼

This usually means an unresolved suspense during mock workspace boot. Raise parameters.chromatic.delay on the story so Chromatic waits longer before capturing the snapshot.

How do I keep regression-only stories out of the Storybook sidebar?▼

Tag the story with ['!dev', '!autodocs', 'vrt-only']. The !dev tag removes it from navigation and !autodocs excludes it from docs pages, but Chromatic still snapshots it and addon-vitest still renders it.

Related Skills

Explore More Software Engineering Skills→
ehtbantonehtbanton

pnpm-workspace-generator

Generate pnpm-workspace.yaml configuration files for pnpm monorepos.

Community
Basic
vecearvecear

visual-regression-tester

Automate visual regression testing of UI with Playwright, Chromatic, or Percy.

Community
Advanced
Tristan578Tristan578
5

testing

Design Vitest, RTL, and Playwright test suites for SpawnForge workflows.

Community
Advanced
snake-dev-teamsnake-dev-team

ck:preview

Preview files and directories and generate diagrams and slides from text.

Official
Advanced