skills.rest
Hikkywannafly
HikkywannaflyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Identify UI code violating Web Interface Guidelines and report findings in file:line style.

1|Updated Jan 27, 2026
Search Tags:#linting#accessibility#web-design#design-guidelines#ui-review#ux-audits
One-click install
npx skills add https://github.com/Hikkywannafly/NextStart --skill web-design-guidelines-hikkywannafly
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Hikkywannafly/NextStart/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/Hikkywannafly/NextStart --skill web-design-guidelines-hikkywannafly

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Align UI code with Web Interface Guidelines to improve accessibility, usability, and consistency across interfaces, reducing design debt and regressions.

Core Features & Use Cases

  • Fetch the latest guidelines from the specified source and compare target UI files or patterns against the rules.
  • Identify accessibility issues (color contrast, semantic markup, keyboard navigation) and UX inconsistencies across components.
  • Use Case: Given a UI codebase, generate a concise report highlighting violations and recommended fixes.

Quick Start

Provide the UI files or patterns you want checked, and I will fetch the latest guidelines and run a compliance review.

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 UI code for accessibility and UX compliance?▼

To audit UI code for accessibility and UX compliance, provide your UI files or patterns. The tool fetches the latest Web Interface Guidelines, compares your code against the rules, and reports violations in a mandated file:line style.

What web design guidelines are checked during a UI review?▼

A UI review checks web design guidelines covering accessibility issues like color contrast, semantic markup, and keyboard navigation, alongside UX inconsistencies across components to reduce design debt and regressions.

How do I run a linting check on my web interface components?▼

To run a linting check on web interface components, supply your UI codebase files. The system fetches current design guidelines, compares target patterns against the source rules, and generates a concise report highlighting violations and recommended fixes.

Does this accessibility audit work with any web interface codebase?▼

Yes, the accessibility audit applies to any provided UI files or patterns across web interfaces. It fetches rules from the source URL and reviews the target code regardless of the specific framework used.

What is the best way to identify color contrast and semantic markup violations in my UI?▼

The best way to identify color contrast and semantic markup violations is to run a UX audit on your UI codebase. It compares your files against fetched guidelines and outputs findings with specific file and line references.

Why does my UI review report show UX inconsistencies across components?▼

Your UI review report shows UX inconsistencies because the audit compares your target UI files against standardized Web Interface Guidelines, actively detecting design debt, semantic markup issues, and regressions across your web interfaces.

Related Skills

Explore More Design & Creative Skills→
devyan18devyan18

web-design-guidelines

Identify UI compliance issues with Web Interface Guidelines in file:line format.

Community
Intermediate
jrmatherlyjrmatherly

web-design-guidelines

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

Community
Basic
zai-orgzai-org
588

web-design-guidelines

Evaluate UI assets for accessibility and design conformance issues.

Official
Intermediate
factorialcofactorialco
27

a11y

Enforce WCAG 2.1/2.2 Level AA accessibility standards in UI components.

Official
Intermediate