skills.rest
m-salauddin
m-salauddinCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Scan HTML, CSS, and component files against Web Interface Guidelines.

Updated Jan 26, 2026
Search Tags:#accessibility#frontend#UI#audit#guidelines#report
One-click install
npx skills add https://github.com/m-salauddin/Learning-Management-System- --skill web-design-guidelines-m-salauddin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/m-salauddin/Learning-Management-System-/tree/main/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/m-salauddin/Learning-Management-System- --skill web-design-guidelines-m-salauddin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure UI code aligns with Web Interface Guidelines, reducing accessibility gaps and visual inconsistencies across products.

Core Features & Use Cases

  • Guideline-aware scanning: Fetches the latest Web Interface Guidelines and compares files across HTML, CSS, and component code.
  • Comprehensive reporting: Outputs concise, actionable findings suitable for triage and remediation.
  • Versatile use cases: Use during design reviews, code audits, and ongoing UI quality assurance to maintain accessibility and usability standards.

Quick Start

Provide the UI-related files to review (e.g., app/components//*.tsx, app/styles//*.css, public/index.html). The skill will fetch guidelines, scan the specified files, and return findings in a terse file:line format.

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 frontend code for accessibility and color contrast issues?▼

To audit UI code for accessibility and color contrast, provide your HTML, CSS, and component files for review. The tool fetches current Web Interface Guidelines and returns findings in a concise file:line format for rapid remediation.

Can I check framework-based components against Web Interface Guidelines?▼

Yes, you can check framework-based components against Web Interface Guidelines. The scanning process targets frontend files across HTML, CSS, and component code to verify responsive behavior and visual consistency.

What is the best way to scan UI files for visual inconsistencies during a design review?▼

The best way to scan UI files for visual inconsistencies is to run a guideline-aware review. Supply paths like app/components/**/*.tsx and app/styles/**/*.css to receive terse, actionable findings for triage.

How do I get actionable reports for UI accessibility gaps?▼

You get actionable reports for UI accessibility gaps by running rule-based checks on your specified frontend files. The output is formatted as file:line entries, making it suitable for direct triage and remediation.

Do I need to manually provide the Web Interface Guidelines for the audit?▼

No, you do not need to manually provide the Web Interface Guidelines for the audit. The process automatically fetches the latest up-to-date guidelines and applies rule-based checks to your UI code.

Related Skills

Explore More Design & Creative Skills→
nanorepublicananorepublica
61

Frontend Accessibility

Enforce frontend accessibility compliance in HTML, CSS, and JavaScript components.

Community
Basic
yeohj0710yeohj0710

web-design-guidelines

Identify UI guideline compliance issues in HTML, CSS, and JavaScript codebases.

Community
Intermediate
DevelopersGlobalDevelopersGlobal
65

ci-cd-pipelines

Automate CI/CD pipelines with quality gates and deployment processes.

Official
Advanced
TarasTsavolykTarasTsavolyk
1

a11y-audit

Audit web UI components against WCAG 2.2 AA standards using axe and manual checks.

Community
Intermediate