skills.rest
antfu
antfuCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and usability.

5.7k|318|Updated Jan 28, 2026
Search Tags:#accessibility#UI#audit#compliance#review#guidelines#web-design
One-click install
npx skills add https://github.com/antfu/skills --skill web-design-guidelines-antfu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/antfu/skills/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/antfu/skills --skill web-design-guidelines-antfu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams verify UI implementations against standardized Web Interface Guidelines, enabling accessibility, consistency, and UX quality across projects.

Core Features & Use Cases

  • Fetches the latest guidelines and applies checks to UI files or components.
  • Produces actionable findings with remediation suggestions to improve accessibility and design conformance.
  • Use Case: Before releasing a UI, run an audit on components, pages, and patterns to ensure accessibility, keyboard navigation, color contrast, and semantic markup.

Quick Start

Provide the UI files or patterns to review, for example: src/components//*.{vue,tsx,js} or public//*.html.

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

You can audit component libraries and full pages by providing file patterns like src/components/**/*.{vue,tsx,js} or public/**/*.html. The skill fetches the latest guidelines and checks semantic markup, keyboard navigation, and color contrast.

What is a web interface guidelines compliance check?▼

A web interface guidelines compliance check verifies UI implementations against standardized rules to ensure accessibility, consistency, and UX quality. It fetches the latest guidelines, applies checks to UI files, and reports actionable findings with remediation suggestions.

Can I use this to review Vue and HTML files for UX conformance?▼

Yes, you can review Vue, tsx, js, and HTML files for UX conformance by specifying file patterns. The skill applies to static UI assets, component libraries, and full pages across projects to verify design conformance.

When do I need to run a UI accessibility audit before release?▼

You need to run a UI accessibility audit before releasing a UI to ensure keyboard navigation, color contrast, and semantic markup meet guidelines. The skill automates checking components, pages, and patterns for conformance.

What is the best way to verify component library accessibility?▼

The best way to verify component library accessibility is to automate auditing against Web Interface Guidelines. The skill fetches the latest guidelines, applies checks to your component files, and reports actionable findings with remediation suggestions.

Related Skills

Explore More Design & Creative Skills→
leonanpereirapintoleonanpereirapinto
1

web-design-guidelines

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

Community
Intermediate
peopleforresterpeopleforrester
3

accessibility-checker

Audit web content for WCAG 2.1 AA accessibility issues and output a prioritized remediation report.

Community
Basic
ladinglogichqladinglogichq

web-design-guidelines

Audit web UI assets for compliance with Web Interface Guidelines.

Official
Intermediate
changoo89changoo89
19

web-design-guidelines

Audit UI files against the latest Web Interface Guidelines for accessibility compliance.

Community
Intermediate