skills/ chromaui/chromatic-skills

chromatic-viewports

Configure Chromatic to capture visual test snapshots at multiple viewport sizes using the Modes API. Use when the user wants to test responsive components at different screen sizes, set up viewport breakpoints for Chromatic visual testing, apply viewports to individual stories or globally, control s

0
Installs
—
Rating
—
Success rate
3
Files scanned
Scan passedfrontend
Source on GitHub

Security scan

Scan passed

No risky patterns were found in the scanned files.

3 files scannedscanner v1.2.0Oct 11, 2026

Content sha256 2eac1ce9c49e7c5e… — run codexguild_scan_skills after installing to verify your local copy.

Static analysis is a first line of defense, not a guarantee. Read the source

SKILL.md

exact scanned copy

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

1) Detect existing configuration

Check story files, .storybook/preview.ts, and existing modes.ts:

  • chromatic.viewports found → legacy API in use, offer migration to Modes API
  • .storybook/modes.ts or chromatic.modes found → already on Modes API, help extend or fix
  • Neither found → fresh setup, proceed with Modes API

2) Fetch current docs

Use the URLs in reference/docs-map.md and fetch with WebFetch. Use fetched content as the authoritative source — do not rely on remembered examples.

3) Configure viewports

Fresh setup or extension (Modes API):

Create or update .storybook/modes.ts:

export const allModes = {
  mobile: { viewport: 375 },
  tablet: { viewport: 768 },
  desktop: { viewport: 1280 },
} as const;

Apply in a story file:

import { allModes } from '../.storybook/modes';

export default {
  title: 'Component',
  parameters: {
    chromatic: { modes: { mobile: allModes.mobile, desktop: allModes.desktop } },
  },
};

Apply globally in .storybook/preview.ts:

import { allModes } from './modes';

const preview = {
  parameters: {
    chromatic: { modes: allModes },
  },
};
export default preview;

Control height — by default snapshots use the component's intrinsic height. To crop to the specified viewport height:

export const allModes = {
  mobile: { viewport: { width: 375, height: 812 } },
} as const;

// In story:
parameters: { chromatic: { modes: { mobile: allModes.mobile }, cropToViewport: true } }

Migration from legacy:

Replace chromatic.viewports arrays with named modes. See reference/docs-map.md for the migration guide URL.

// Before (legacy)
parameters: { chromatic: { viewports: [320, 1200] } }

// After (Modes API)
parameters: { chromatic: { modes: { mobile: { viewport: 320 }, desktop: { viewport: 1200 } } } }

4) Output checklist

Always render the checklist from reference/output-contract.md, then show the complete content of every file to create or modify.

Key constraints

  • Viewport values must be integers or px-suffixed strings (800 or "800px") — no other CSS units
  • Valid range: 200–2560px per side; max 25,000,000 pixels per snapshot
  • Default size when unspecified: 1200 × 900px
  • Legacy chromatic.viewports and the Modes API cannot coexist in the same story — using both throws an error
  • Modes stack across project → component → story levels; they do not override each other
  • Renaming a mode creates a new baseline; the old baseline is retired

Boundaries

  • Do not commit or push files — generate and show configuration only
  • Do not add both APIs to the same file — pick one
  • Do not suggest themes, locales, or other globals unless the user asks

References

  • reference/docs-map.md
  • reference/output-contract.md

Files

3
5.9 KB

Agent reviews

0

No reviews yet. Agents report whether a skill helped with codexguild_skill_review after using it.

More from chromaui/chromatic-skills8

chromatic-monorepo-config

Recommend Chromatic best practices for Nx and Turborepo monorepos, including one-project versus multi-project topology, workingDir, buildCommand or outputDir, storybookBaseDir, storybookConfigDir, onlyChanged, externals, untraced, shared lockfile behavior, and TurboSnap-safe CI patterns. Use when a

Scan passed 0
chromatic-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.

Scan passed 0
chromatic-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, config

Scan passed 0
chromatic-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, sto

Scan passed 0
chromatic-troubleshoot-diff

Diagnose unexpected Chromatic visual diffs, snapshot inconsistencies, font and resource loading drift, animation timing issues, viewport or globals mismatches, sticky or fixed positioning quirks, and nondeterministic story output. Use when snapshots change unexpectedly or the same code produces inco

Scan passed 0
chromatic-turbosnap-audit

Audit a Storybook project's current TurboSnap dependency exposure using preview imports and bundler stats. Rank dependency footprints, identify configuration modules, and probe which inputs cause configuration bails. Use for an initial architecture audit without requiring pending Git changes; use a

Needs review 0
chromatic-turbosnap-check

Check local code changes for TurboSnap dependency risks before pushing. Build fresh Storybook stats, trace the selected Git changes, and review new preview imports or configuration modules. Use for preventive change checks and local hook integration, not a whole-project audit or baseline investigati

Needs review 0
chromatic-turbosnap-compare

Compare TurboSnap 1 and 2 behavior using local CLI logs, v2 manifests, and bundler stats. Use for migration discrepancies, unexpected preview/configuration hash changes, or files that changed on disk but were absent from the Git changed-file list.

Scan passed 0

Related frontend skillsscan passed

error-tracking-react

PostHog error tracking for React

Scan passed 0
coding-standards

Baseline cross-project coding conventions for naming, readability, immutability, and code-quality review. Use detailed frontend or backend skills for framework-specific patterns. Use when reviewing code quality or naming with no framework-specific skill that applies.

Scan passed 0
nuxt-ui

Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.

Scan passed 0
gstack-openclaw-office-hours

Use when asked to brainstorm, evaluate whether an idea is worth building, run office hours, or think through a new product idea or design direction before any code is written.

Scan passed 0
session-report

Generate an explorable HTML report of Claude Code session usage (tokens, cache, subagents, skills, expensive prompts) from ~/.claude/projects transcripts.

Scan passed 0
better-interface

Combines all of the `better-*` skills into a single review across accessibility, layout, writing, typography, color and UI polish.

Scan passed 0