web-design-guidelines

Audit UI code against current Web Interface Guidelines and report findings.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/SkormJF/WebDesigner --skill web-design-guidelines-skormjf
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/SkormJF/WebDesigner/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/SkormJF/WebDesigner --skill web-design-guidelines-skormjf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure UI code conforms to up-to-date Web Interface Guidelines, improving accessibility, usability, and visual consistency across a project.

Core Features & Use Cases

  • Guideline fetch: Retrieve the latest rules from the official source before audits.
  • File set evaluation: Analyze specified files or patterns to check compliance against the guidelines.
  • Output & reporting: Produce concise findings in a standardized file:line format to facilitate quick remediation.
  • Use Case: A designer or frontend engineer runs this on a React app's components folder to identify contrast issues and semantic markup gaps.

Quick Start

Provide the files or patterns to review and run the latest Web Interface Guidelines check.

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 UI code for accessibility and design consistency?

To audit UI code for accessibility, provide your target files or patterns for evaluation. The skill fetches the latest Web Interface Guidelines from the official source and reports findings in a concise file:line format for quick remediation.

What are Web Interface Guidelines and why do I need them for my frontend project?

Web Interface Guidelines are official rules ensuring accessibility, usability, and visual consistency across a project. You need them to identify and fix issues like poor contrast and semantic markup gaps in your UI components.

Can I check a specific React components folder for accessibility compliance?

Yes, you can check a specific React components folder for accessibility compliance by specifying that file set or pattern. The skill analyzes the targeted files and reports semantic markup gaps and contrast issues in a standardized format.

Does this accessibility audit require any external dependencies or components?

No, this accessibility audit does not require external dependencies or components to function. It operates independently to fetch the current guidelines from the official source and apply validation checks directly to your target files.

What is the best way to report accessibility issues for quick remediation?

The best way to report accessibility issues for quick remediation is using a concise, line-based format. This approach pinpoints exact locations in the UI code, allowing frontend engineers to immediately navigate to and fix the identified compliance failures.