skills.rest
adobe
adobeOFFICIAL
Explore all skills by this author →
WebsiteGitHub

vrt-authoring

Author Storybook visual regression stories for Spectrum Web Components 2nd-gen components.

1.5k|261|Updated Nov 19, 2018
Search Tags:#storybook#web components#Chromatic#spectrum#snapshot testing#visual regression testing#pseudo-states
One-click install
npx skills add https://github.com/adobe/spectrum-web-components --skill vrt-authoring
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vrt-authoring
Source: https://github.com/adobe/spectrum-web-components/tree/main/.ai/skills/vrt-authoring
Command: npx skills add https://github.com/adobe/spectrum-web-components --skill vrt-authoring

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Writing Chromatic visual regression test (VRT) stories for Spectrum Web Components requires many non-obvious conventions: where .vrt.ts files live, how to group permutations into scannable rows, how to force pseudo-states in static snapshots, and how to cover custom properties and forced-colors mode. This Skill encodes those conventions so contributors produce consistent, reviewable VRT coverage.

Core Features & Use Cases

  • VRT story authoring patterns: Defines file placement (test/vrt/*.vrt.ts), story shapes for permutations, global stylesheets, and custom properties, plus shared helpers like createPermutations, groupPermutationsBy, and row.
  • Forced pseudo-state snapshots: Explains how forcePseudoStates applies data-forced-<state> attributes so :hover, :focus-visible, and :active render in static Chromatic captures, including slotted light-DOM children.
  • Coverage guidance: Covers forced-colors stories, positioned overlay pitfalls with Floating UI, CJK text rendering, and custom-property reference/override rows verified against custom-elements.json.
  • Use Case: When adding a new 2nd-gen component like a badge, use this Skill to generate a .vrt.ts story grouping permutations by variant, splitting forced states into labeled rows, and adding a custom-properties coverage story.

Quick Start

Use the vrt-authoring skill to create a Chromatic VRT story file for the 2nd-gen button component covering all sizes, variants, and forced hover and focus-visible states.

Frequently Asked Questions about vrt-authoring

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

FAQPage Schema
How do I write visual regression stories for Spectrum Web Components?▼

Place `.vrt.ts` files in the component's `test/vrt/` directory and build data-driven permutations with `createPermutations` and `groupPermutationsBy` from `.storybook/helpers`. Cover every size, variant, state, static-color, and custom-property axis that produces a visual difference.

How to snapshot hover and focus states in Chromatic?▼

Static Chromatic captures cannot trigger `:hover` or `:focus-visible`, so tag permutations with `data-force-state` and call `forcePseudoStates` in the story's play function. It applies a `data-forced-<state>` attribute that mirrors the component's pseudo-state CSS rules.

Where should VRT stories live in the spectrum-web-components repo?▼

VRT stories go in `2nd-gen/packages/swc/components/<component>/test/vrt/*.vrt.ts` or the equivalent `patterns/<pattern>/test/vrt/` path. Docs stories stay separate for examples while `.vrt.ts` files hold dense visual coverage.

Why do forced pseudo-state classes break default styling in snapshots?▼

Applying a class instead of an attribute trips `:not([class])` default-style guards, dropping default styling from the snapshot. The `forcePseudoStates` helper sets a `data-forced-<state>` attribute instead, which preserves default styles while activating the pseudo-state rules.

How do I test custom CSS properties with visual regression tests?▼

Create a `*-custom-properties.vrt.ts` story using `customPropertyRows()` to render reference versus override rows, and verify coverage with `verifyCustomPropertyCoverage()` against `.storybook/custom-elements.json`. Choose override values that render obviously different so regressions are visible.

When should I not group VRT permutations into rows?▼

Skip grouping when a component has no natural grouping axis, such as divider, icon, avatar, or typography, since grouping by a missing key collapses everything into one default row. Also avoid `row()` for positioned overlay components that use Floating UI placement.

Related Skills

Explore More Software Engineering Skills→
adobeadobe
1.5k

migration-testing

Automate Vitest, Playwright, and Storybook tests for migrated components.

Official
Intermediate
gil00pitagil00pita

chromatic

Automate cloud-based visual testing for Storybook components with Chromatic.

Community
Advanced
blueprintuiblueprintui
335

testing-unit

Standardize TypeScript Jasmine unit tests for web components.

Official
Intermediate
FernanSuozaFernanSuoza

qa-browser-ui-verification

Verify web application behavior with Playwright or Cypress UI tests.

Community
Advanced