skills.rest
hakushun
hakushunCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Verify UI files against Web Interface Guidelines and output file:line findings.

Updated Feb 4, 2026
Search Tags:#ui#accessibility#qa#guidelines#web-design#design-review#web-standards
One-click install
npx skills add https://github.com/hakushun/ai-dev-starter --skill web-design-guidelines-hakushun
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/hakushun/ai-dev-starter/tree/main/.cursor/skills/web-design-guidelines
Command: npx skills add https://github.com/hakushun/ai-dev-starter --skill web-design-guidelines-hakushun

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams verify that UI files and components adhere to established Web Interface Guidelines, reducing manual review time and improving consistency across products.

Core Features & Use Cases

  • Guideline-driven reviews: compare UI assets against the latest Web Interface Guidelines to surface deviations.
  • Accessibility awareness: identify accessibility gaps and suggest improvements during UI audits.
  • Use Case: imagine auditing a design system's React components to ensure color contrast, semantic markup, and responsive behavior meet standards before release to production.

Quick Start

Provide the files or patterns you want reviewed, then run the skill to fetch the latest guidelines and evaluate the specified assets. The results will be reported in a concise, file:line style.

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 components for web interface guidelines and accessibility?▼

To audit UI components, you fetch the latest web interface guidelines and evaluate your specified files against them. This process surfaces deviations and identifies accessibility gaps, outputting results in a concise file:line style for your design QA.

Can I check React components for color contrast and semantic markup issues before release?▼

Yes, you can check React components for color contrast and semantic markup issues. The skill evaluates UI assets against established standards during a design review, ensuring responsive behavior and accessibility gaps meet requirements before production release.

What is a design review for web standards compliance?▼

A design review for web standards compliance is a guideline-driven evaluation of UI files. It compares your assets against the latest web interface guidelines to surface deviations, reducing manual review time and improving consistency across web projects.

Do I need to manually provide web design guidelines to use this skill?▼

No, you do not need to manually provide web design guidelines. The skill automatically fetches the latest web interface guidelines to evaluate your specified UI assets, ensuring your design QA checks use the most current standards.

What format do UI review findings get output in?▼

UI review findings are output in a concise file:line style format. This prescribed output maps deviations and accessibility gaps directly to your specified UI files, streamlining the design QA process.

Related Skills

Explore More Design & Creative Skills→
uni-helperuni-helper
95

web-design-guidelines

Analyze UI code for compliance with Web Interface Guidelines.

Official
Intermediate
Quanby-IT-SolutionsQuanby-IT-Solutions
2

web-design-guidelines

Compare project files against Web Interface Guidelines and report deviations in file:line format.

Official
Intermediate
zai-orgzai-org
588

web-design-guidelines

Evaluate UI assets for accessibility and design conformance issues.

Official
Intermediate
LimaTechnologiesLimaTechnologies

ui-ux-audit

Automate UI/UX audits for accessibility, responsiveness, and design-system consistency.

Community
Basic