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.viewports API

Quick start

1. Scan the project for existing viewport config: look for chromatic.viewports (legacy) or a modes.ts / modes import (new API).
2. Fetch the relevant docs from reference/docs-map.md.
3. Determine whether this is a fresh setup, an extension, or a migration.
4. Generate configuration files and output the checklist from reference/output-contract.md.

Required workflow