skills.rest
r-senchuk
r-senchukCOMMUNITY
Explore all skills by this author →
GitHub

visual-design-audit

Audit pages and components against brand tokens, accessibility, and CRO patterns to generate prioritized findings.

Updated Mar 29, 2026
Search Tags:#accessibility#next.js#tailwind css#design audit#brand consistency#cro#wcag contrast
One-click install
npx skills add https://github.com/r-senchuk/agentskills --skill visual-design-audit-r-senchuk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-design-audit
Source: https://github.com/r-senchuk/agentskills/tree/main/.agents/skills/visual-design-audit
Command: npx skills add https://github.com/r-senchuk/agentskills --skill visual-design-audit-r-senchuk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Design inconsistencies like hardcoded hex colors, wrong font weights, missing touch targets, and weak CTA patterns slip into codebases over time, and manually reviewing every page and component for brand, accessibility, and conversion compliance is slow and error-prone. ## Core Features & Use Cases - Brand Fidelity Checks: Verify color tokens, typography weights, explicit pixel text sizes, spacing, and border-radius conventions against Tailwind v4 theme directives. - Accessibility and Mobile Review: Check WCAG contrast ratios, aria-labels, semantic nav elements, 44px touch targets, and mobile-first grid defaults. - CRO Pattern Audit: Confirm one primary CTA per page, sticky mobile bars, WhatsApp widgets, and short paths to quote forms. - Use Case: Before launching a Next.js renovation site, run a full-site audit to produce a Critical/High/Low findings report with exact file paths and className fixes, verified across both it and en locales. ## Quick Start Audit the homepage and shared components for brand compliance and generate a prioritized findings report.

Frequently Asked Questions about visual-design-audit

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

FAQPage Schema
How do I audit a website for brand consistency?▼

Enumerate all page and component files, then check each against brand rules for color tokens, typography weights, spacing, and border radius. Mark every file as pass, warn, or fail and compile findings into a Critical/High/Low report with exact className references.

How to check WCAG color contrast in Tailwind CSS projects?▼

Identify the exact hex values behind your theme tokens and compute contrast ratios for text and background pairings, requiring at least 4.5:1 for body text. For example, #65695B on #EBE0DD yields 4.6:1 and passes.

Does this audit work with Tailwind CSS v4 and Next.js?▼

Yes, the audit targets Next.js 15+ App Router projects using Tailwind CSS v4 theme tokens and static export. It checks utility correctness against @theme definitions rather than arbitrary values.

What CRO patterns should a landing page audit check?▼

Verify each page has exactly one primary CTA, the hero includes an H1, sub-headline, and CTA, sticky mobile bars and chat widgets are present, and users reach the conversion form within two clicks or taps.

When should I not use a visual design audit?▼

Do not use it to implement fixes, build new components, run SEO audits, or profile performance and bundle size. It only identifies and prioritizes design violations; fixes should be delegated to implementation-focused workflows.

Related Skills

Explore More Design & Creative Skills→
mkopcicmkopcic

tailwindcss-development

Style applications with Tailwind CSS v4 utilities for responsive UIs.

Community
Intermediate
davepoondavepoon
3.4k

review-findings

Fixes critical and warning findings from QA code review reports with updated tests.

Community
Intermediate
Hack23Hack23
9

playwright-testing

Automate end-to-end browser testing for static websites with Playwright.

Official
Advanced
murphytruemanmurphytrueman
155

cicd-integration

Generate CI/CD pipeline configurations for design system quality checks.

Community
Advanced