web-design-guidelines

Review UI code against Web Interface Guidelines and output findings in file:line format.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/ainlper/dra-drb2 --skill web-design-guidelines-ainlper
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ainlper/dra-drb2/tree/main/deer-flow/skills/public/web-design-guidelines
Command: npx skills add https://github.com/ainlper/dra-drb2 --skill web-design-guidelines-ainlper

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps developers and designers ensure their UI code adheres to the Web Interface Guidelines, improving accessibility and user experience.

Core Features & Use Cases

  • Guideline Compliance: Automatically checks UI code against the latest Web Interface Guidelines.
  • Accessibility Auditing: Identifies accessibility issues in the code.
  • Best Practices: Validates against best practices for web design and user experience.
  • Use Case: When preparing to release a new web application, use this Skill to ensure all UI components meet the necessary standards.

Quick Start

Run the 'web-design-guidelines' skill on your UI code to check for compliance with the Web Interface Guidelines.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check my UI code for web design guideline compliance?

To check UI code for web design guideline compliance, run this skill to fetch guidelines from a specified URL, parse the code against the rules, and output findings in a file:line format. It automatically identifies accessibility issues and validates best practices.

Can I audit web accessibility issues automatically in my codebase?

Yes, you can audit web accessibility issues automatically by running this skill. It reviews your UI code against the latest Web Interface Guidelines and outputs specific accessibility findings in a file:line format for immediate correction.

What is the best way to ensure UI code meets accessibility standards before release?

The best way to ensure UI code meets accessibility standards before release is to execute this skill during your release preparation. It fetches the latest Web Interface Guidelines, checks your components, and outputs compliance findings in a file:line format.

Does this UI compliance checker require a specific URL to fetch guidelines?

Yes, this UI compliance checker requires a specified URL to fetch the latest Web Interface Guidelines. It needs access to these guidelines and the ability to parse and execute code to accurately output compliance findings.

How are code review findings for UI compliance formatted?

Code review findings for UI compliance are outputted in a file:line format. This format directly maps each accessibility issue or best practice violation to its exact location in your UI code for quick resolution.