web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/masakinihirota/vns-masakinihirota --skill web-design-guidelines-masakinihirota
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/masakinihirota/vns-masakinihirota/tree/main/.github/skills/web-design-guidelines
Command: npx skills add https://github.com/masakinihirota/vns-masakinihirota --skill web-design-guidelines-masakinihirota

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill ensures that web interfaces adhere to established design and accessibility best practices, preventing common UI/UX pitfalls.

Core Features & Use Cases

  • Compliance Checking: Reviews UI code against a comprehensive set of web interface guidelines.
  • Accessibility Audit: Identifies potential accessibility issues within the design.
  • Design Best Practices: Verifies adherence to modern UX and design principles.
  • Use Case: A developer can use this skill to automatically check their new component's UI code against the latest guidelines before deployment.

Quick Start

Use the web-design-guidelines skill to review my UI code for accessibility compliance.

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 compliance?

To audit UI code for accessibility compliance, provide your front-end files to the Skill, which reviews them against fetched Web Interface Guidelines to identify design and accessibility issues.

Can I check my front-end components against web design guidelines automatically?

You can check front-end components automatically by supplying your code patterns to the Skill, which fetches the latest web design guidelines and evaluates your code against modern UX principles.

What web design best practices are checked during a UI code review?

During a UI code review, the Skill checks web design best practices by fetching established guidelines and applying them to your code to prevent common UI/UX pitfalls and ensure accessibility.

Do I need to provide a URL to review UI code for accessibility?

Yes, you need to specify a URL so the Skill can fetch the latest Web Interface Guidelines required to evaluate your user-provided files or patterns for accessibility compliance.

How do I prevent common UI and UX pitfalls before deployment?

To prevent common UI and UX pitfalls before deployment, run the Skill to review your new component's UI code against fetched guidelines, verifying adherence to established design best practices.

Does web-design-guidelines work with any front-end code?

The web-design-guidelines Skill applies to front-end development and UI/UX auditing tasks, reviewing any user-provided files or patterns against fetched web interface guidelines.