skills.rest
hadronomy
hadronomyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Assess UI code against Web Interface Guidelines and output findings.

1|Updated Feb 27, 2026
Search Tags:#design#ui#accessibility#guidelines#ux#web
One-click install
npx skills add https://github.com/hadronomy/autographa --skill web-design-guidelines-hadronomy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/hadronomy/autographa/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/hadronomy/autographa --skill web-design-guidelines-hadronomy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured method to verify that user interface code conforms to Web Interface Guidelines, helping teams catch accessibility gaps and UX regressions early.

Core Features & Use Cases

  • Guideline-based review: fetches the latest web interface guidelines and compares UI files against them.
  • Accessibility checks: evaluates color contrast, keyboard navigation, semantic markup, and ARIA attributes.
  • Use Case: ideal for auditing new web apps, component libraries, or design systems to surface violations and remediation suggestions.

Quick Start

Review the provided UI files to instantly begin a guideline-based evaluation.

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 web interface code for accessibility and UX compliance?▼

To audit web interface accessibility and UX, you can evaluate UI code against Web Interface Guidelines by fetching rules from a source URL and applying them to target files to output concise findings on compliance gaps.

What is a UI accessibility audit for web applications?▼

A UI accessibility audit evaluates color contrast, keyboard navigation, semantic markup, and ARIA attributes against web interface guidelines to catch accessibility gaps and UX regressions early in development.

Can I use this to validate my component library or design system?▼

Yes, you can validate component libraries and design systems by applying fetched web interface guidelines to your source files, surfacing violations and generating remediation suggestions.

How do I check ARIA attributes and semantic markup in UI files?▼

Checking ARIA attributes and semantic markup involves reading target UI files and applying web interface guideline rules to evaluate compliance and output findings on accessibility violations.

What is the best way to catch UX regressions in web interfaces?▼

The best way to catch UX regressions is performing a guideline-based review that fetches the latest web interface guidelines and compares UI files against them to identify violations and remediation steps.

Does this accessibility audit work for any web project or are there limitations?▼

This accessibility audit applies to web interfaces across all projects and scenarios, but requires a specified source URL to fetch guidelines and target UI files to read for applying rules.

Related Skills

Explore More Design & Creative Skills→
junDevCodesjunDevCodes
2

web-design-guidelines

Enforce Web Interface Guidelines compliance across UI components and pages.

Community
Intermediate
mhintz1980mhintz1980

web-design-guidelines

Identify accessibility and UX compliance gaps in web UI code against Web Interface Guidelines.

Community
Intermediate
Tristan578Tristan578
5

web-accessibility

Implement WCAG 2.1-compliant web interfaces with semantic HTML and ARIA.

Community
Advanced
FOUNDUPSFOUNDUPS
2

web-design-guidelines

Fetch external rules and analyze UI code for web interface guideline compliance.

Official
Intermediate