skills.rest
BrunoSantanaDeveloper
BrunoSantanaDeveloperCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

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

Updated Jan 27, 2026
Search Tags:#ui#accessibility#frontend#audit#usability#design-guidelines
One-click install
npx skills add https://github.com/BrunoSantanaDeveloper/flyeelab-agent-kit --skill web-design-guidelines-brunosantanadeveloper
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/BrunoSantanaDeveloper/flyeelab-agent-kit/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/BrunoSantanaDeveloper/flyeelab-agent-kit --skill web-design-guidelines-brunosantanadeveloper

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enforce Web Interface Guidelines across UI codebases to ensure accessible, usable, and consistent interfaces.

Core Features & Use Cases

  • Performs automated checks against a centralized set of design and accessibility guidelines.
  • Helps designers and developers identify usability issues, color contrast problems, and semantic HTML gaps.
  • Use Case: Run the audit on a new web UI to surface violations and generate actionable fixes.

Quick Start

Provide the UI files or design patterns to audit and run the guidelines check to receive actionable results.

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 codebase for accessibility and usability issues?▼

Automated UI audits check your HTML, CSS, and JS files against centralized design guidelines to identify color contrast problems, semantic HTML gaps, and usability issues, reporting violations in concise, line-oriented output.

What is the best way to enforce web interface design guidelines during a design review?▼

Enforce web interface guidelines by running automated checks on your UI files during design reviews. The audit fetches up-to-date rules and reports semantic HTML gaps and color contrast problems in concise, line-oriented output.

Can I check HTML and CSS assets for semantic HTML gaps and color contrast problems?▼

Yes, the audit parses HTML and CSS files to identify semantic HTML gaps and color contrast problems. It checks your codebase against design guidelines and outputs concise, line-oriented reports of any violations.

Do I need any dependencies to run an automated UI audit on my web project?▼

No dependencies are required. You simply provide the UI files or design patterns to audit, and the Skill fetches up-to-date rules, parses the target files, and reports violations without needing external components.

How do I get actionable fixes for usability issues found in my web UI?▼

Run the guidelines check on your web UI files to get actionable fixes. The audit identifies usability issues and semantic HTML gaps across your frontend assets, reporting violations in a concise, line-oriented format for quick resolution.

Why does my frontend accessibility audit report line-oriented violations?▼

Line-oriented violations provide concise, actionable results by pinpointing exact locations of accessibility and semantic HTML gaps. The audit parses HTML, CSS, and JS files against design guidelines to ensure clear, actionable reporting.

Related Skills

Explore More Design & Creative Skills→
jrmatherlyjrmatherly

web-design-guidelines

Analyze HTML/CSS/JS files for accessibility and design guideline compliance.

Community
Basic
BigPapiCBBigPapiCB
2

accessibility

Identify and enforce WCAG compliance, ARIA patterns, and keyboard operability in UI components.

Community
Advanced
michaelschechtmichaelschecht
1

frontend-design

Develop frontend UI components and web pages with HTML/CSS/JS.

Community
Advanced
jokken79jokken79
1

web-design-guidelines

Identify UI code violating Web Interface Guidelines and report accessibility and design inconsistencies.

Community
Intermediate