web-design-guidelines

Audit frontend code against Web Interface Guidelines for accessibility and design compliance.

Updated Jan 31, 2026
One-click install
npx skills add https://github.com/DaytimeBlues/ADHD-CADDI --skill web-design-guidelines-daytimeblues
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/DaytimeBlues/ADHD-CADDI/tree/main/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/DaytimeBlues/ADHD-CADDI --skill web-design-guidelines-daytimeblues

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that web interfaces comply with established best practices for design, accessibility, and user experience, catching potential issues before they impact users.

Core Features & Use Cases

  • Compliance Auditing: Reviews code against a set of predefined web interface guidelines.
  • Accessibility Checks: Identifies common accessibility pitfalls in UI code.
  • Best Practice Verification: Ensures adherence to modern web design standards.
  • Use Case: After developing a new feature, run this Skill to audit the UI code for compliance with accessibility standards and general best practices, ensuring a high-quality user experience.

Quick Start

Use the web-design-guidelines skill to 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 accessibility and best practices?

To audit UI code for accessibility and best practices, the Skill reviews your frontend codebase against established Web Interface Guidelines, identifying compliance issues and usability pitfalls before they impact users. You can target specific directories like 'src/components' to check adherence to modern web design standards.

What does a UX audit of frontend code check for?

A UX audit of frontend code checks for compliance with web interface guidelines, identifying common accessibility pitfalls and verifying adherence to modern web design standards and usability principles across your UI components. This ensures a high-quality user experience by catching potential issues early.

Can I review specific files and directories for web design compliance?

Yes, you can review specific files and directories for web design compliance by specifying file patterns or paths like 'src/components'. The Skill fetches external guidelines and applies them directly to the targeted frontend codebase to verify accessibility and best practice adherence.

When do I need to run a web interface guidelines review?

You need to run a web interface guidelines review after developing a new feature to audit the UI code for compliance with accessibility standards and general best practices, ensuring a high-quality user experience before release. It catches potential design and usability issues early.

Does this UI review fetch external guidelines for verification?

Yes, the UI review requires fetching external guidelines to apply them to your specified files or patterns, verifying that your codebase adheres to established web interface design standards and accessibility principles. This ensures comprehensive compliance auditing.