skills.rest
az9713
az9713COMMUNITY
Explore all skills by this author →
GitHub

test-consistency

Audit design system consistency across pages and components using Playwright.

1|Updated Feb 14, 2026
Search Tags:#design#consistency#playwright#ui-testing#design-tokens#visual-testing#cross-page
One-click install
npx skills add https://github.com/az9713/my-agent-skills --skill test-consistency-az9713
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: test-consistency
Source: https://github.com/az9713/my-agent-skills/tree/main/.claude/skills/playwright-ui-testing/test-consistency
Command: npx skills add https://github.com/az9713/my-agent-skills --skill test-consistency-az9713

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Audit design system consistency across pages and components to surface visual and structural variances.

Core Features & Use Cases

  • Discover design token and style inconsistencies across pages using automated tests.
  • Compare typography, colors, spacing, and component patterns across routes.
  • Generate a consolidated report with highlighted inconsistencies and recommended fixes.

Quick Start

Run the design-consistency workflow against your site to start detecting visual drift and layout mismatches.

Frequently Asked Questions about test-consistency

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

FAQPage Schema
How do I audit design system consistency across multiple web pages?▼

You can audit design system consistency by running an automated Playwright-based workflow that discovers pages, checks design tokens, typography, and spacing, and generates a consolidated report of visual and structural variances.

Can I detect visual drift and layout mismatches across different routes and breakpoints?▼

Yes, visual drift and layout mismatches are detected across routes and breakpoints by running three subagents—visual, components, and pages—which compare component patterns and surface structural variances.

What is the best way to check design tokens and typography consistency in a multi-page app?▼

The best way to check design tokens and typography consistency is using an automated cross-page testing workflow that compares colors, spacing, and component reuse, saving a final report to test-results.

Does this design consistency testing workflow require Playwright to run?▼

Yes, this design consistency testing workflow uses a deterministic Playwright-based process to discover pages and execute the visual, component, and page audits for your site.

How do I generate a report of UI inconsistencies and recommended fixes?▼

To generate a report of UI inconsistencies, run the design-consistency workflow against your site; it produces a consolidated report with highlighted inconsistencies and recommended fixes saved to the test-results directory.

What are the limitations of using automated tests for design system consistency?▼

Automated tests for design system consistency require a deterministic Playwright-based workflow and are limited to discovering pages, running subagents, and generating reports, which may not capture subjective design nuances.

Related Skills

Explore More Design & Creative Skills→
cheesejaguarcheesejaguar
7

clerk-testing

Configure Playwright and Cypress authentication tests for Clerk applications.

Community
Intermediate
OmerFarukOrucOmerFarukOruc
2

design-review

Audit live sites for visual inconsistencies and spacing issues.

Community
Advanced
shredbxshredbx

frontend-storyboard-artist

Automate Storybook component library creation with MDX docs, props tables, and visual regression tests.

Community
Intermediate
plurigridplurigrid
60

brand-guidelines

Apply brand colors, typography, and spacing to documents and presentations.

Official
Basic