skills.rest
telum-ai
telum-aiOFFICIAL
Explore all skills by this author →
WebsiteGitHub

visual-testing

Validate UI components against design tokens and WCAG AA standards.

2|Updated Dec 21, 2025
Search Tags:#accessibility#screenshots#responsive design#design tokens#visual testing#ui validation
One-click install
npx skills add https://github.com/telum-ai/speck --skill visual-testing-telum-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-testing
Source: https://github.com/telum-ai/speck/tree/main/.cursor/skills/visual-testing
Command: npx skills add https://github.com/telum-ai/speck --skill visual-testing-telum-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that user interfaces accurately reflect design specifications, catch design token violations, and meet accessibility standards, preventing visual bugs and inconsistencies.

Core Features & Use Cases

  • Screenshot Capture: Generates screenshots of UI components across different breakpoints and states.
  • Design Token Validation: Verifies that design tokens are used correctly, preventing hardcoded values.
  • Accessibility Audits: Checks for compliance with accessibility standards like color contrast and focus indicators.
  • Use Case: After implementing a new feature, use this Skill to automatically capture screenshots of the key screens on both mobile and desktop, run accessibility checks, and report any discrepancies against the ui-spec.md file.

Quick Start

Validate the UI for the current story by capturing screenshots and running accessibility audits.

Frequently Asked Questions about visual-testing

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

FAQPage Schema
How do I validate my UI against design specs and accessibility standards?▼

Visual testing catches design token violations by verifying that design tokens are used correctly, preventing hardcoded values, and reporting any discrepancies against your design specifications.

Can I capture screenshots across different breakpoints for responsive design testing?▼

Screenshot capture for responsive design generates images of UI components across different breakpoints and states, allowing you to automatically capture key screens on both mobile and desktop.

How do I check my UI components for WCAG AA compliance?▼

Accessibility audits check for WCAG AA compliance by analyzing UI components for color contrast and focus indicators, outputting detailed accessibility audit results within the generated report.

What is the best way to prevent hardcoded values in my user interface?▼

Design token validation prevents hardcoded values by verifying that design tokens are used correctly across your UI components, ensuring visual consistency and adherence to your design system.

Does visual testing work without external dependencies?▼

Visual testing operates without external dependencies, using internal references to validate UI against design specifications, capture screenshots, and run accessibility checks independently.

Related Skills

Explore More Design & Creative Skills→
lync-cyberlync-cyber
133

ui-design

Define UI design specifications from product requirements with design tokens and responsive rules.

Community
Advanced
C-Jay69C-Jay69

frontend-design

Generate accessible React/TypeScript components with design tokens and dark mode.

Community
Advanced
IFIR649IFIR649

tailwind-design-system

Build scalable Tailwind CSS v4 design systems with tokens, theming, and component variants.

Community
Advanced
CENKSSSCENKSSS

qe-visual-accessibility

Automate visual regression testing, responsive design validation, and WCAG 2.2 compliance audits.

Community
Advanced