skills.rest
eehnsio
eehnsioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Verify HTML, CSS, and JavaScript UI code against Web Interface Guidelines.

1|Updated Jun 18, 2025
Search Tags:#code quality#design#accessibility#UX audit#UI review#web guidelines
One-click install
npx skills add https://github.com/eehnsio/dotfiles --skill web-design-guidelines-eehnsio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/eehnsio/dotfiles/tree/main/claude/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/eehnsio/dotfiles --skill web-design-guidelines-eehnsio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams verify that UI code complies with Web Interface Guidelines, reducing accessibility issues and design drift across projects.

Core Features & Use Cases

  • Guideline alignment: Compare UI code against the latest Web Interface Guidelines to identify deviations.
  • Accessibility checks: Flag contrast, focus order, and semantic markup concerns to improve inclusivity.
  • Audit example: Given a UI prototype or HTML/CSS files, quickly generate a report listing violations and suggested fixes.

Quick Start

Provide the files to review (e.g., index.html or src/**/*.css) and run the skill to fetch guidelines and return findings.

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 HTML and CSS code for web accessibility and usability issues?▼

To check HTML and CSS code for web accessibility and usability issues, you can run an automated UI review that analyzes specified file patterns against the latest Web Interface Guidelines to flag contrast, focus order, and semantic markup concerns.

What is a UI review for web interface guidelines?▼

A UI review for web interface guidelines is an automated audit that fetches the latest compliance rules and applies them to HTML, CSS, and JavaScript codebases to identify deviations in design consistency and accessibility.

How do I perform a UX audit on existing UI prototypes?▼

Perform a UX audit on UI prototypes by providing the HTML or CSS files to a guideline alignment tool, which will analyze the code and return a concise report listing violations and suggested fixes.

Can I audit JavaScript codebases for visual consistency issues?▼

Yes, you can audit JavaScript codebases for visual consistency issues by running a guideline verification process that analyzes JavaScript files alongside HTML and CSS to detect design drift and usability problems.

What's the best way to prevent design drift across multiple web projects?▼

The best way to prevent design drift across multiple web projects is to regularly compare UI code against standardized Web Interface Guidelines, ensuring visual consistency and compliance through automated accessibility checks.

How do I get actionable suggestions for fixing semantic markup concerns?▼

To get actionable suggestions for fixing semantic markup concerns, run an automated UI code review that identifies specific accessibility violations and outputs findings in a concise format with recommended fixes.

Related Skills

Explore More Design & Creative Skills→
brainbrewlabsbrainbrewlabs
7

web-design-guidelines

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

Official
Intermediate
yeohj0710yeohj0710

web-design-guidelines

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

Community
Intermediate
austinjanaustinjan

web-design-guidelines

Check UI code compliance with Web Interface Guidelines for accessibility.

Community
Intermediate
HouseofmvpsHouseofmvps
115

a11y

Detect and fix deterministic WCAG 2.2 A/AA accessibility violations in HTML files.

Community
Advanced