skills.rest
yashraj22
yashraj22COMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Identify UI accessibility and design issues in HTML, CSS, and JavaScript files.

1|Updated Mar 7, 2026
Search Tags:#design#accessibility#frontend#review#guidelines#web-ui
One-click install
npx skills add https://github.com/yashraj22/reflection --skill web-design-guidelines-yashraj22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/yashraj22/reflection/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/yashraj22/reflection --skill web-design-guidelines-yashraj22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This tool helps you ensure your user interfaces comply with the latest Web Interface Guidelines by comparing code to established accessibility, layout, and interaction standards.

Core Features & Use Cases

  • Guideline conformance: Checks UI files against the latest guidelines for accessibility, usability, and design consistency.
  • File patterns & scope: Accepts a file path or glob pattern to scope reviews to relevant UI assets (HTML, CSS, JS, components).
  • Use Case: Imagine you are delivering a UI beta release; you can quickly audit your codebase to surface accessibility issues and visual regressions before review.

Quick Start

Provide a file or pattern to review, such as index.html or src/components/**.tsx.

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 my HTML and CSS for accessibility issues during a code review?▼

Audit HTML and CSS for accessibility issues by comparing your code to Web Interface Guidelines. The tool scopes to relevant UI assets using a file path or glob pattern and outputs findings in a file:line format.

Can I scope an accessibility assessment to specific UI components like src/components/**.tsx?▼

Yes, you can scope an accessibility assessment to specific UI components by providing a file path or glob pattern like src/components/**.tsx. This focuses the review on relevant HTML, CSS, and JavaScript files.

How do I check frontend code for compliance with the latest web design guidelines?▼

Check frontend code for compliance by fetching the latest standards from a provided source URL. The tool compares your UI files against these Web Interface Guidelines to identify accessibility and visual regressions.

What is the best way to surface visual regressions before a UI beta release?▼

The best way to surface visual regressions before a UI beta release is to run a design audit on your codebase. This compares your UI files against established layout and interaction standards to identify compliance issues.

Does the web design guidelines audit work with JavaScript files?▼

Yes, the web design guidelines audit works with JavaScript files, alongside HTML and CSS. It compares your JavaScript code against Web Interface Guidelines to identify accessibility and interaction issues during reviews.

What format are accessibility issues reported in when auditing UI files?▼

Accessibility issues are reported in a file:line format when auditing UI files. This output format pinpoints exactly where design and compliance issues occur within your HTML, CSS, and JavaScript code.

Related Skills

Explore More Design & Creative Skills→
brainbrewlabsbrainbrewlabs
7

web-design-guidelines

Audit HTML, CSS, and JavaScript files against Web Interface Guidelines.

Official
Intermediate
devyan18devyan18

web-design-guidelines

Identify UI compliance issues with Web Interface Guidelines in file:line format.

Community
Intermediate
MesteriisMesteriis

ui-qa

Routes UI testing and review tasks to specialized skills for visual regression, accessibility checks, and frontend debugging.

Community
Advanced
alexzuoshalexzuosh

web-design-guidelines

Audit UI code against Web Interface Guidelines for compliance and accessibility.

Community
Basic