skills.rest
createdbysalt
createdbysaltCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Detect UI code non-compliance with Web Interface Guidelines and report file:line findings.

Updated Jan 22, 2026
Search Tags:#accessibility#UI#review#lint#design-guidelines#UX audit
One-click install
npx skills add https://github.com/createdbysalt/nextjs-starter-template --skill web-design-guidelines-createdbysalt
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/createdbysalt/nextjs-starter-template/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/createdbysalt/nextjs-starter-template --skill web-design-guidelines-createdbysalt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure UI code complies with Web Interface Guidelines.

Core Features & Use Cases

  • Accessibility checks: Evaluate UI components for accessible color contrast, keyboard navigation, aria attributes, and focus management.
  • UX consistency audits: Verify layout, interaction patterns, and design tokens align with guidelines across pages and components.
  • Use Case: When you ask, "Review my UI," the skill fetches the latest rules and reports violations with file:line-style notes.

Quick Start

Use the web-design-guidelines skill to review the UI codebase matching a file pattern like 'src/**/*.tsx'.

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 my UI code for accessibility and UX quality issues?▼

To audit UI code for accessibility and UX quality, you can run a review against Web Interface Guidelines by specifying a file pattern like 'src/**/*.tsx' to detect non-compliance across components and report violations.

What checks are included in a UI accessibility and UX consistency audit?▼

An accessibility and UX consistency audit checks color contrast, keyboard navigation, aria attributes, focus management, layout patterns, interaction consistency, and design token alignment across specified UI files.

How do I run an accessibility lint on specific UI components?▼

To run an accessibility lint on specific components, provide a file pattern matching your UI codebase; the skill fetches the latest rules, evaluates the targeted files, and outputs findings in a terse file:line format.

Can I review a React codebase for UX guideline violations?▼

Yes, you can review a React codebase for UX guideline violations by passing matching file patterns such as 'src/**/*.tsx'; the skill evaluates the targeted UI components and reports accessibility and layout inconsistencies.

What format are UI accessibility audit findings reported in?▼

UI accessibility audit findings are reported in a terse file:line format, pinpointing exact locations of non-compliance with Web Interface Guidelines across your UI codebase for quick resolution.

Do I need to install dependencies to check my UI code against design guidelines?▼

No dependencies are required to check your UI code against design guidelines; the skill fetches the latest rules directly from the guidelines source to evaluate your files and report accessibility or UX violations.

Related Skills

Explore More Design & Creative Skills→
stratagastrataga

web-design-guidelines

Review UI code against Web Interface Guidelines and report file:line findings.

Community
Basic
dthompsonfldthompsonfl

web-design-guidelines

Audit HTML, CSS, and ARIA against Web Interface Guidelines and report violations.

Community
Intermediate
padjeipadjei

design-systems-slds-validate

Audit Lightning Web Components for SLDS compliance and generate a scored quality report.

Community
Advanced
zeronx798zeronx798

dogfood

Navigate web pages and interact with DOM elements to detect functional, visual, accessibility issues via browser snapshots and console error monitoring, producing structured bug reports.

Community
Advanced