skills.rest
Scardubu
ScardubuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

frontend-design-auditor

Audits frontend components and UI designs against WCAG accessibility and design token standards.

1|Updated May 4, 2026
Search Tags:#typography#accessibility#frontend#design tokens#ui review#wcag#design audit
One-click install
npx skills add https://github.com/Scardubu/SwarmXQ --skill frontend-design-auditor-scardubu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-design-auditor
Source: https://github.com/Scardubu/SwarmXQ/tree/main/.ai/skills/frontend-design-auditor
Command: npx skills add https://github.com/Scardubu/SwarmXQ --skill frontend-design-auditor-scardubu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend designs often ship with vague, subjective feedback and hidden accessibility violations. This Skill turns design critique into a structured, principle-grounded audit so every issue is specific, actionable, and tied to a named standard like WCAG or Gestalt principles. ## Core Features & Use Cases - Six-Dimension Audit: Evaluates visual hierarchy, typography, color and contrast, spacing and layout, accessibility, and motion for any component or page. - Structured Audit Report: Separates critical issues from improvements and polish, includes an accessibility score with specific WCAG criterion IDs, and always lists what is working. - Corrected Code Output: Rewrites provided JSX, HTML, CSS, or Tailwind code using design token variables with inline comments explaining every change. - Use Case: Paste a React component that feels visually off and receive a prioritized issue list, a WCAG AA compliance score, and a corrected version using a proposed spacing, type, and color token set. ## Quick Start Ask the assistant to audit the attached UI screenshot or pasted component code for accessibility, spacing, and visual hierarchy issues.

Frequently Asked Questions about frontend-design-auditor

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

FAQPage Schema
How do I audit a UI component for accessibility issues?▼

Provide a screenshot, component code, or design description and request an accessibility audit. The audit checks WCAG AA contrast ratios, keyboard navigability, focus rings, ARIA roles, touch target sizes, and reduced-motion support, then reports a Pass, Partial, or Fail score with specific criterion IDs.

How to get design feedback on React or Tailwind code?▼

Paste your JSX, HTML, CSS, or Tailwind code and ask for a design review. The audit evaluates both the inferred visual output and implementation quality, then returns corrected code using design token variables with inline comments explaining each change.

What design standards does a frontend audit check?▼

The audit covers six dimensions: visual hierarchy using Gestalt principles, typography scale and line height, WCAG AA color contrast, spacing on an 8px grid, accessibility criteria, and motion timing between 150 and 500 milliseconds.

Can a design audit generate design tokens for my project?▼

Yes. When a component uses raw hex or pixel values, the audit proposes a minimal token set covering spacing, type scale, and semantic colors as CSS custom properties, and the corrected code references only those tokens.

What are the limitations of automated UI design audits?▼

Audits of screenshots or descriptions infer implementation details and cannot measure actual rendered contrast or runtime behavior. Figma URLs are handled only through contextual inference, so findings should be verified against the live rendered page.

Related Skills

Explore More Design & Creative Skills→
AradotsoAradotso
3

figma-console-mcp-design-system-api

Synchronize Figma design tokens and components with code-ready formats.

Official
Advanced
christian-byrnechristian-byrne

comfyui-frontend

Enforces Vue 3, TypeScript, Tailwind 4, and Pinia conventions for ComfyUI_frontend development.

Community
Intermediate
vobasevobase
59

polish

Inspect UI components, layouts, and accessibility for pre-release polish issues.

Official
Intermediate
cosmicdreamscosmicdreams

accessibility-scan

Run Pa11y, axe-core, and Lighthouse audits across web pages with JSON scores.

Community
Intermediate