skills.rest
baekenough
baekenoughCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit UI code against accessibility, performance, and UX guidelines.

34|5|Updated Jan 25, 2026
Search Tags:#design#ui#performance#accessibility#ux#code-review
One-click install
npx skills add https://github.com/baekenough/oh-my-customcode --skill web-design-guidelines-baekenough
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/baekenough/oh-my-customcode/tree/main/templates/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/baekenough/oh-my-customcode --skill web-design-guidelines-baekenough

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams audit UI code against accessibility, performance, and UX guidelines, reducing defects and design debt.

Core Features & Use Cases

  • Automated UI reviews: Evaluate components for accessibility, performance, and UX consistency.
  • Design-system alignment: Check across pages to ensure consistent tokens and patterns.
  • Use Case: Imagine auditing a design system for ARIA label coverage and focus behavior across components.

Quick Start

Inspect a UI component and generate a compliance report against the guidelines.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I audit UI code for accessibility and performance issues?▼

To audit UI code for accessibility and performance issues, this tool applies 100+ design rules to check components against ARIA labels, focus states, and typography, generating a structured compliance report.

What is automated UX consistency checking for design systems?▼

Automated UX consistency checking for design systems evaluates UI components against 100+ predefined rules to ensure design tokens, patterns, and accessibility criteria remain uniform across projects.

How do I check ARIA label coverage across UI components?▼

You check ARIA label coverage by running an automated UI audit that applies category-specific accessibility criteria to your code, identifying missing labels and generating a detailed compliance report.

Can I review UI pages for design debt without manual inspection?▼

Yes, you can review UI pages for design debt by running an automated tool that applies 100+ rule-based checks for performance, accessibility, and UX consistency, outputting a structured compliance report.

Does automated UI review work for both single components and full pages?▼

Yes, automated UI review works for both single components and full pages, applying 100+ rule-based checks for typography, performance, and ARIA labels to ensure compliance across your design system.

What is the best way to ensure design system alignment across multiple projects?▼

The best way to ensure design system alignment is to perform automated UI audits that check pages and components against 100+ established UX and accessibility guidelines, producing a structured compliance report.

Related Skills

Explore More Design & Creative Skills→
NagyViktNagyVikt
2

figma-generate-design

Generate and synchronize Figma screens from source code UI structures.

Community
Advanced
pixel-cellarpixel-cellar
277

tech-debt

Scan repositories for debt indicators and maintain a prioritized debt ledger.

Official
Advanced
TeiNamTeiNam
12

laravel-verification

Automate Laravel project verification for CI/CD pipelines.

Community
Advanced
joeylife94joeylife94

browse

Automate website QA tests with headless browser interactions and screenshots using Playwright.

Community
Advanced