skills.rest
andrelandgraf
andrelandgrafCOMMUNITY
Explore all skills by this author →
Website𝕏@andrelandgrafGitHub

web-design-guidelines

Compare UI code against the latest Web Interface Guidelines and report non-compliance.

20|3|Updated Nov 30, 2025
Search Tags:#ui#accessibility#audit#guidelines#web-design#design-review
One-click install
npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill web-design-guidelines-andrelandgraf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/andrelandgraf/fullstackrecipes/tree/main/templates/fullstackrecipe/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/andrelandgraf/fullstackrecipes --skill web-design-guidelines-andrelandgraf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI code aligns with Web Interface Guidelines, reducing accessibility issues and usability gaps across dashboards, forms, and components.

Core Features & Use Cases

  • Guideline-driven Review: evaluates UI code against current web guidelines to surface accessibility, contrast, semantic structure, and responsive issues.
  • Audit & Reporting: generates a concise compliance report with actionable fixes, prioritized by impact.
  • Use Case: when asked to "review my UI" or "check accessibility," run an automatic guideline-based audit across project files and present findings.

Quick Start

Provide the path to the UI files you want reviewed, and the Skill will fetch guidelines and return compliance findings.

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 web accessibility compliance?▼

To audit UI code for web accessibility compliance, provide the path to your HTML, CSS, or JavaScript files. The review fetches current Web Interface Guidelines and reports non-compliant findings in a file:line format.

How do I check my web design for visual conformity and semantic structure issues?▼

Checking web design for visual conformity and semantic structure involves comparing UI components against Web Interface Guidelines. The audit evaluates code to surface contrast, responsive, and semantic issues prioritized by impact.

Does this guideline-based UI review work with standard HTML, CSS, and JavaScript projects?▼

Yes, this guideline-based UI review works with standard HTML, CSS, and JavaScript projects. It evaluates web projects, design systems, and UI components to identify accessibility and usability gaps.

What is the best way to run an accessibility audit on my design system components?▼

The best way to run an accessibility audit on design system components is requesting a UI review. The process fetches fresh guidelines before each review, applies all rules, and generates a concise compliance report with actionable fixes.

How do I review my web interface for usability gaps and UX issues?▼

Reviewing web interfaces for usability gaps and UX issues requires comparing UI code to Web Interface Guidelines. The audit surfaces accessibility, contrast, and responsive problems, presenting findings in a precise file:line format.

Related Skills

Explore More Design & Creative Skills→
takayatomosetakayatomose

web-design-guidelines

Compare HTML, CSS, and JavaScript files against Web Interface Guidelines.

Community
Intermediate
roderikroderik
2

rams

Analyze UI components for WCAG accessibility and visual design issues.

Community
Basic
Ayushkumar48Ayushkumar48

web-design-guidelines

Audit web UI files for accessibility and UX guideline compliance.

Community
Intermediate
hotriluanhotriluan
2

web-design-guidelines

Audit UI accessibility and usability gaps against official web-interface-guidelines rules.

Community
Intermediate