skills.rest
Stack-and-Flow
Stack-and-FlowOFFICIAL
Explore all skills by this author →
GitHub

visual-review

Audit interactive component CSS for visual states and accessibility constraints.

23|4|Updated May 7, 2025
Search Tags:#accessibility#design system#visual review#focus ring#UI states#glow gradients#transition rules
One-click install
npx skills add https://github.com/Stack-and-Flow/design-system --skill visual-review-stack-and-flow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-review
Source: https://github.com/Stack-and-Flow/design-system/tree/main/.atl/skills/visual-review
Command: npx skills add https://github.com/Stack-and-Flow/design-system --skill visual-review-stack-and-flow

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Visual-review helps teams avoid shipping UI that looks wrong, feels inconsistent, or fails accessibility expectations on interactive states.

Core Features & Use Cases

  • State-by-state visual auditing: verifies base, hover, focus, active, and disabled styling rules for interactive components.
  • Glow, blur, and gradient correctness: checks required glow layer counts, hover amplification behavior, and strict separation of blur vs gradient hierarchy.
  • Animation and accessibility safeguards: enforces transition property rules, focus-ring requirements, reduced-motion behavior, and contrast/disabled-state constraints.

Quick Start

Use the visual-review skill to audit a Pull Request’s button, card, and input state CSS and confirm it matches the Stack-and-Flow visual rules before merging.

Frequently Asked Questions about visual-review

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

FAQPage Schema
How do I audit component visual states for accessibility and design system consistency?▼

Auditing component visual states involves evaluating base, hover, focus, active, and disabled styling rules to verify interactive components meet accessibility and design system constraints before merging.

What focus ring and transition rules should I enforce during a visual review?▼

Visual review enforces explicit constraints including no outline-based focus rings, no transition: all usage, and proper reduced-motion handling to ensure accessible and consistent interactive component behaviors.

How do I validate glow, blur, and gradient techniques in my UI components?▼

Validating glow, blur, and gradient techniques requires checking required glow layer counts, hover amplification behavior, and strict separation of blur versus gradient hierarchy to maintain visual correctness.

Can I use this visual review process to audit a Pull Request's button and input CSS?▼

Yes, you can use visual review to audit a Pull Request's button, card, and input state CSS to confirm it matches defined visual rules and accessibility expectations before merging.

Why does my component visual review require secure cleanup of artifacts?▼

Secure cleanup of visual-review artifacts is required to prevent leftover temporary styling or review states from affecting the final production component rendering and performance.

What is the best way to handle reduced-motion and disabled-state contrast constraints?▼

Handling reduced-motion and disabled-state constraints involves enforcing specific transition property rules, contrast requirements, and disabled-state visual checks during the component audit process.

Related Skills

Explore More Design & Creative Skills→
yonetim258852yonetim258852

button-states

Generate six-state UI component systems with algorithmic color derivations.

Community
Intermediate
telum-aitelum-ai
2

visual-testing

Validate UI components against design tokens and WCAG AA standards.

Official
Advanced
saajunaidsaajunaid

design-system-tokens

Generate and validate design tokens as CSS variables across three-layer architectures.

Community
Intermediate
RepairYourTechRepairYourTech
6

accessibility-compliance

Audit web applications for WCAG 2.1/2.2 compliance with axe-core.

Community
Advanced