visual▌

Generate self-contained HTML files for technical diagrams, visualizations, and data tables. Always open the result in the browser. Never fall back to ASCII art when this skill is loaded.

Visual regression testing captures screenshots of UI components and pages, then compares them across versions to detect unintended visual changes. This automated approach catches CSS bugs, layout issues, and design regressions that traditional functional tests miss.

Production-ready patterns for marketing visual asset creation.

Guides visual identity for consistent brand presentation. Companies with consistent branding see up to 23-33% revenue lift; 94% of consumers say consistency influences buying decisions.

Create, extract, and apply portable visual design systems. A visual-style.md file defines colors, typography, layout, motion, and mood in one file that any AI tool can consume.

Establish design tokens, spacing systems, and color palettes for cohesive, accessible visual designs. \n \n Provides modular typography scale, 8-point spacing grid, semantic color tokens, and iconography system with CSS variable templates \n Includes WCAG contrast requirements (4.5:1 for body text, 3:1 for UI), dark mode implementation patterns, and font-pairing guidelines \n Covers responsive typography with clamp() , color accessibility checking, and vertical rhythm techniques for visual consi