web-design-guidelines

Review UI code against Web Interface Guidelines for compliance.

Updated Feb 26, 2026
One-click install
npx skills add https://github.com/dgkngk/super-kit --skill web-design-guidelines-dgkngk
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/dgkngk/super-kit/tree/main/skills/tech/web-design-guidelines
Command: npx skills add https://github.com/dgkngk/super-kit --skill web-design-guidelines-dgkngk

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that user interfaces comply with established Web Interface Guidelines, improving accessibility, performance, and overall user experience.

Core Features & Use Cases

  • Automated Auditing: Fetches the latest guidelines and checks provided files against them.
  • Compliance Reporting: Outputs findings in a standardized file:line format.
  • Use Case: After developing a new feature, use this skill to automatically audit the UI code for accessibility issues and adherence to design best practices before deployment.

Quick Start

Review the accessibility and design compliance of the files in the 'src/components' directory.

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 web design guidelines and accessibility?

To audit UI code for web design guidelines, you can provide your front-end files or patterns to this automated reviewer. It fetches fresh rules from a specified URL and checks your code for compliance with accessibility, performance, and design best practices.

When do I need to run an automated accessibility audit on front-end components?

You need to run an automated accessibility audit after developing a new feature and before deployment. This ensures your UI code adheres to established web interface guidelines, identifying accessibility issues and design deviations early in the development cycle.

How do I check my front-end files against a specific set of web interface guidelines?

You can check front-end files by providing the directory path, such as 'src/components', to the reviewer. It fetches the latest guidelines from a specified URL and applies all rules to your provided files to evaluate accessibility and performance.

Does this automated design audit work with any front-end framework?

Yes, the automated design audit works with any front-end framework as long as you provide the UI code files or patterns. It evaluates the raw code against fetched web interface guidelines, making it applicable across various front-end development projects.

What format does the compliance reporting use for accessibility issues?

The compliance reporting outputs findings in a standardized 'file:line' format. This pinpoints exactly where accessibility issues or design best practice violations occur within your provided UI code, allowing for quick targeted fixes.

Can I fetch fresh web design guidelines from my own URL for the audit?

Yes, you can fetch fresh web design guidelines from a specified URL to conduct the audit. This ensures the accessibility and performance checks are always evaluated against the most current rules or your specific organizational standards.