web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility compliance.

Updated Dec 3, 2025
One-click install
npx skills add https://github.com/ankitsharma495/Flowbase --skill web-design-guidelines-ankitsharma495
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ankitsharma495/Flowbase/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/ankitsharma495/Flowbase --skill web-design-guidelines-ankitsharma495

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (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 user experience.

Core Features & Use Cases

  • Automated Code Review: Scans UI code files against a predefined set of best practices and accessibility rules.
  • Compliance Checking: Identifies deviations from guidelines related to design, accessibility, and usability.
  • Use Case: A developer can use this skill to audit a new component's code before merging it into the main branch, ensuring it meets the project's design and accessibility standards.

Quick Start

Use the web-design-guidelines skill to review the UI code 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 check my UI code for web design guidelines and accessibility compliance?

To check UI code for web design guidelines, this Skill performs automated rule-based reviews against fetched web interface standards, identifying accessibility deviations and ensuring front-end components meet usability best practices.

How does an automated code review for accessibility standards work?

Automated code review for accessibility works by scanning provided front-end files against a predefined set of best practices fetched from a specified URL, applying rule-based checks to detect deviations from established web interface guidelines.

Can I audit a specific component directory for UX and UI best practices?

Yes, you can audit a specific component directory by providing the file patterns to the Skill, which will fetch the latest guidelines and scan the front-end code to identify any compliance issues with web standards.

What is the best way to ensure front-end code meets web interface guidelines before merging?

The best way to ensure front-end code meets web interface guidelines before merging is to run an automated compliance check on the source files, detecting accessibility and usability deviations against fetched best practice rules.

Do I need to provide a URL to perform a rule-based check on UI code?

Yes, you need to provide a URL because the Skill fetches the latest web interface guidelines from that specified location to perform the rule-based checks on your UI code files.

Why does my UI code fail accessibility compliance checks during automated review?

UI code fails accessibility compliance checks during automated review when the provided files contain deviations from the fetched web interface guidelines, specifically violating predefined design and usability best practice rules.