web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility and design compliance.

Updated Mar 7, 2026
One-click install
npx skills add https://github.com/aifredoai/sdk --skill web-design-guidelines-aifredoai
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/aifredoai/sdk/tree/main/deerflow/skills/public/web-design-guidelines
Command: npx skills add https://github.com/aifredoai/sdk --skill web-design-guidelines-aifredoai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and scripts (resource) components.

What problem does it solve?

This Skill helps ensure that user interface code adheres to established Web Interface Guidelines, improving consistency, accessibility, and overall design quality.

Core Features & Use Cases

  • UI Code Review: Automatically checks provided files against a set of predefined web design and accessibility rules.
  • Compliance Auditing: Verifies that designs and code align with best practices for web interfaces.
  • Use Case: When you need to "review my UI" or "check accessibility" for a new feature, this Skill will audit the relevant code files against the latest guidelines.

Quick Start

Use the web-design-guidelines skill to review the UI code in the file 'src/components/Button.js'.

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 if my UI code meets web accessibility standards?

To check if your UI code meets web accessibility standards, you can review your front-end files against established Web Interface Guidelines. This process audits specified file paths to verify compliance with accessibility rules and design best practices.

What is the best way to audit front-end components for web design compliance?

The best way to audit front-end components for web design compliance is to run a code review against predefined web interface rules. This checks your specified file patterns to ensure adherence to established UX and accessibility standards.

Can I use this to review my UI code for a specific component file?

Yes, you can review your UI code for a specific component file by providing the exact file path, such as 'src/components/Button.js'. The review fetches external guidelines and analyzes the specified file to ensure it meets design standards.

Does the web design guidelines review require external references to work?

Yes, the web design guidelines review requires fetching external guidelines to function properly. It uses these external references to analyze your specified file paths or patterns and verify compliance with established web standards.

Why does my UI code need to be checked against web interface guidelines?

Your UI code needs to be checked against web interface guidelines to improve consistency, accessibility, and overall design quality. This compliance auditing ensures that your front-end development workflows produce user interfaces that adhere to established standards.

What types of files can I check for accessibility and design best practices?

You can check front-end UI code files, such as JavaScript or HTML components, for accessibility and design best practices. The review analyzes specified file paths or patterns within your front-end development workflow to audit user interfaces.