| name | test-consistency |
| description | Audit design system consistency across pages. Use when user wants to check visual consistency, design tokens, component reuse, color palette, typography, spacing, or cross-page uniformity. |
| allowed-tools | Bash(playwright-cli:*) Bash(npx:*) Bash(mkdir:*) |
Design System Consistency
Run 30 design consistency test cases across 3 parallel agents covering visual tokens, component patterns, and cross-page uniformity. Extracts computed styles from matched elements across multiple pages and compares for variance.
Setup
URL="${ARGUMENTS:-http://localhost:3000}"
TIMESTAMP=$(date +%Y%m%d-%H%M%S)
OUTDIR="test-results/test-consistency/$TIMESTAMP"
mkdir -p "$OUTDIR/screenshots" "$OUTDIR/snapshots" "$OUTDIR/traces"
Before running, verify prerequisites per references/prerequisites.md.
Page Discovery
Before testing, discover pages to compare:
playwright-cli -s=cons-discover open "$URL"
playwright-cli -s=cons-discover run-code "async page => {
const links = await page.locator('a[href]').all();
const hrefs = await Promise.all(links.map(l => l.getAttribute('href')));
const origin = new URL(page.url()).origin;
const internal = [...new Set(hrefs.filter(h => h && (h.startsWith('/') || h.startsWith(origin))).map(h => h.startsWith('/') ? origin + h : h))];
return internal.slice(0, 10); // Test up to 10 pages
}"
playwright-cli -s=cons-discover close
