skills.rest
adryanev
adryanevCOMMUNITY
Explore all skills by this author →
Website𝕏@adryan_evGitHub

web-design-guidelines

Audit HTML, CSS, and JavaScript files for Web Interface Guidelines violations.

2|Updated May 2, 2025
Search Tags:#accessibility#frontend#audit#web-design#design-consistency#ui-guidelines
One-click install
npx skills add https://github.com/adryanev/.dotfiles --skill web-design-guidelines-adryanev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/adryanev/.dotfiles/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/adryanev/.dotfiles --skill web-design-guidelines-adryanev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web projects often fail to meet accessibility and design guidelines, leading to usability issues and inconsistent interfaces. This skill helps identify and report violations so teams can improve UI quality.

Core Features & Use Cases

  • Automated checks against the latest Web Interface Guidelines to flag accessibility and design conformance issues.
  • Component-level review for consistency, color contrast, keyboard accessibility, semantic HTML, and visual hierarchy.
  • Use Case: run a site review for a marketing landing page or a React app to surface actionable violations and generate a concise report.

Quick Start

Provide the UI source files or patterns to review and run the latest guidelines against them.

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 web interface for accessibility and design guideline violations?▼

To audit web interface accessibility and design violations, provide your HTML, CSS, and JavaScript source files. The tool fetches current Web Interface Guidelines to check components, colors, navigation, and structure, generating a concise file:line report.

What is the best way to check UI design consistency and color contrast in a React app?▼

Checking UI design consistency and color contrast in a React app requires applying automated checks to your source files. This process flags visual hierarchy and contrast issues, producing an actionable file:line style report for interface improvements.

Can I review semantic HTML and keyboard accessibility for specific UI components?▼

Yes, you can review semantic HTML and keyboard accessibility for specific UI components. By applying fetched Web Interface Guidelines to your files, the audit identifies structural and interaction violations and outputs a concise report detailing the exact locations.

Does this accessibility audit work with standard HTML, CSS, and JavaScript projects?▼

This accessibility audit works directly with standard HTML, CSS, and JavaScript projects. It analyzes your specified files to evaluate design conformance, semantic structure, and interface consistency, yielding a targeted file:line style report of violations.

How do I get a file:line style report for UI guidelines violations in my web project?▼

To get a file:line style report for UI guidelines violations, submit your web project files for review. The tool applies the latest Web Interface Guidelines to your codebase and produces a concise report mapping accessibility and design issues to specific file lines.

Why does my web project fail design conformance checks and how do I surface actionable violations?▼

Web projects fail design conformance checks due to inconsistent interfaces and accessibility issues. You can surface actionable violations by running an audit against current Web Interface Guidelines, which reviews your files and generates a concise violation report.

Related Skills

Explore More Design & Creative Skills→
Typeless-GitTypeless-Git
1

web-design-guidelines

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

Official
Intermediate
takayatomosetakayatomose

web-design-guidelines

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

Community
Intermediate
marcus-frictionmarcus-friction
3

ui-accessibility-review

Identify and fix accessibility and UI quality gaps in Nuxt/Tailwind projects.

Community
Intermediate
boparaiamritboparaiamrit
5

accessibility-audit

Audit frontend UI accessibility against WCAG standards and generate remediation guidance.

Community
Advanced