skills.rest
trungtnm
trungtnmCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audits frontend HTML, CSS and JS files for UI compliance gaps using Web Interface Guidelines.

1|Updated Feb 3, 2026
Search Tags:#accessibility#a11y#frontend#code-quality#web-design#design-review#ui-guidelines
One-click install
npx skills add https://github.com/trungtnm/claude-code-utils --skill web-design-guidelines-trungtnm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/trungtnm/claude-code-utils/tree/main/plugins/skills/web-design-guidelines
Command: npx skills add https://github.com/trungtnm/claude-code-utils --skill web-design-guidelines-trungtnm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps development teams ensure UI code adheres to Web Interface Guidelines, catching accessibility, consistency, and usability gaps before deployment.

Core Features & Use Cases

  • Fetch and apply the latest Web Interface Guidelines to target frontend files.
  • Evaluate HTML, CSS, and JavaScript for accessibility, responsiveness, and visual consistency.
  • Use Case: A developer wants to confirm a new page meets the guidelines before review, generating a concise pass/fail report with actionable fixes.

Quick Start

Run the guideline checker against your frontend file set to see immediate compliance prompts and recommended fixes.

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 visual consistency?▼

You can audit frontend code for accessibility and visual consistency using a skill that fetches web interface guidelines, evaluates HTML CSS and JS files, and outputs actionable findings in a file:line format.

What is the best way to check if my HTML and CSS meet web interface guidelines?▼

The best way to check if HTML and CSS meet web interface guidelines is to run an automated audit that applies the latest rules to your files and generates a concise pass or fail report with recommended fixes.

Can I use this tool to evaluate JavaScript files for responsiveness and accessibility?▼

Yes, you can evaluate JavaScript files for responsiveness and accessibility because the audit applies rules across HTML CSS and JS to identify UI compliance gaps before deployment.

Does this web design audit work with any frontend codebase?▼

Yes, this web design audit works across frontend codebases by fetching the latest rules from the guidelines source and reading specified project files to identify UI compliance gaps.

How do I get a pass or fail report for UI compliance gaps before a code review?▼

To get a pass or fail report for UI compliance gaps before a code review, run the guideline checker against your frontend file set to see immediate compliance prompts and recommended fixes.

What format does the accessibility audit output for identified code issues?▼

The accessibility audit outputs identified code issues in a file:line format, providing a concise report of UI compliance gaps along with actionable fixes for your frontend project files.

Related Skills

Explore More Design & Creative Skills→
Chai-UnChai-Un

web-design-guidelines

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

Community
Intermediate
nakafaainakafaai
78

web-design-guidelines

Analyze UI files against Web Interface Guidelines and report issues in file:line format.

Official
Basic
lyzno1lyzno1
1

web-design-guidelines

Audit UI code against current Web Interface Guidelines for accessibility and consistency.

Community
Basic
airoweairowe
14

Accessibility Audit Skill

Audit web projects for WCAG 2.1 violations using axe-core and eslint-plugin-jsx-a11y.

Community
Advanced