chromatic-viewports
Chromatic Viewports
Configure responsive visual testing across multiple screen sizes using Chromatic's Modes API.
This skill covers:
- Setting up viewport modes in
.storybook/modes.ts - Applying modes at project, component, and story levels
- Controlling snapshot height with
cropToViewport - Migrating from the legacy
chromatic.viewportsAPI
Quick start
- Scan the project for existing viewport config: look for
chromatic.viewports(legacy) or amodes.ts/modesimport (new API). - Fetch the relevant docs from
reference/docs-map.md. - Determine whether this is a fresh setup, an extension, or a migration.
- Generate configuration files and output the checklist from
reference/output-contract.md.
Required workflow
More from chromaui/chromatic-skills
turbosnap-debug
Diagnose TurboSnap behavior using logs, config, git context, support-shareable hosted metadata references, and targeted trace commands. Use when you need to classify why TurboSnap is enabled, disabled, unavailable, or tracing the wrong stories, then recommend the smallest valid next step.
8chromatic-themes
Configure Chromatic to capture visual test snapshots across multiple themes (light/dark mode, design tokens, branded variants) using the Modes API and @storybook/addon-themes. Use when the user wants to test components with different themes in Chromatic, set up light/dark mode visual testing, configure @storybook/addon-themes with Chromatic, or apply theme modes at the project, component, or story level.
6chromatic-setup-ci
Configure CI/CD pipelines to run Chromatic visual tests automatically. Use when the user wants to set up Chromatic in CI, add Chromatic to GitHub Actions / GitLab / Bitbucket Pipelines / CircleCI / Jenkins / Azure Pipelines, automate visual testing, or run Chromatic on every push.
6chromatic-troubleshoot-config
Diagnose Storybook configuration issues that block Chromatic or local Storybook, including missing stories, framework or builder mismatches, addon conflicts, preview errors, static asset path issues, and package version drift. Use when Storybook fails to build, Chromatic cannot verify Storybook, stories are missing, or a team needs the smallest config change to restore a working Storybook surface.
6chromatic-turbosnap-debug
Diagnose TurboSnap behavior using logs, config, git context, support-shareable hosted metadata references, and targeted trace commands. Use when you need to classify why TurboSnap is enabled, disabled, unavailable, or tracing the wrong stories, then recommend the smallest valid next step.
6chromatic-workflow-debug
Diagnose Chromatic workflow issues involving git history, baselines, pull request event shape, merge queues, merge-base failures, replacement builds, and patch builds. Use when builds compare against the wrong baseline, an ancestor build is not found, pull request comparisons look wrong, or CI git context does not match Chromatic's expectations.
5