skills.rest
JStaRFilms
JStaRFilmsCOMMUNITY
Explore all skills by this author →
Website𝕏@OlulekeJOkeGitHub

web-design-guidelines

Identify UI code deviations from Web Interface Guidelines and report fixes in file:line format.

23|5|Updated Nov 5, 2025
Search Tags:#ui#accessibility#guidelines#ux#web-design#frontend-review
One-click install
npx skills add https://github.com/JStaRFilms/VibeCode-Protocol-Suite --skill web-design-guidelines-jstarfilms
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/JStaRFilms/VibeCode-Protocol-Suite/tree/main/assets/.agent/skills/web-design-guidelines
Command: npx skills add https://github.com/JStaRFilms/VibeCode-Protocol-Suite --skill web-design-guidelines-jstarfilms

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web Interface Guidelines review helps teams ensure UI code adheres to established accessibility, usability, and design standards, reducing UX gaps and rework.

Core Features & Use Cases

  • Fetch the latest Web Interface Guidelines and evaluate target UI files for conformance.
  • Audit UI patterns, components, and pages for accessibility, color contrast, keyboard navigation, and responsive design.
  • Use Case: When you receive a new design or open-source UI, run this skill to identify violations and compile a concise list of fixes.

Quick Start

Provide the UI files or patterns you want reviewed; the skill will fetch the latest guidelines and perform the conformance 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 frontend components for accessibility and UI conformance?▼

To audit UI for accessibility and design conformance, provide your frontend files and the skill fetches the latest Web Interface Guidelines, evaluating target pages against all rules to surface actionable fixes in a terse file:line format.

What UI design and usability gaps can an automated frontend review detect?▼

An automated frontend review detects UI code deviations from established guidelines, specifically identifying accessibility gaps, color contrast issues, keyboard navigation flaws, and responsive design problems across components and pages.

How do I check if a new open-source UI meets web design guidelines?▼

To check if a new open-source UI meets web design guidelines, provide the UI patterns for review and the skill fetches the latest standards to evaluate conformance and compile a concise list of fixes.

Does this UI accessibility audit require any specific dependencies or components?▼

No dependencies or components are required to run this UI accessibility audit; you simply provide the target UI files or patterns you want reviewed against the fetched Web Interface Guidelines.

What format does the accessibility conformance check use to report findings?▼

The accessibility conformance check reports findings in a terse file:line format, directly identifying UI code that deviates from the Web Interface Guidelines and surfacing actionable fixes.

When should I run a web interface guidelines review on my project?▼

Run a web interface guidelines review when you receive a new design or need to evaluate existing UI components, ensuring your code adheres to accessibility, usability, and visual standards to reduce UX gaps and rework.

Related Skills

Explore More Design & Creative Skills→
henriquearthurhenriquearthur
46

web-design-guidelines

Compare frontend code against Web Interface Guidelines and output file:line findings.

Community
Intermediate
beemanbeeman
12

web-design-guidelines

Evaluate web UI components against Web Interface Guidelines for compliance.

Community
Intermediate
t-stringst-strings

Frontend Accessibility

Review frontend UI code for HTML semantics, ARIA, keyboard navigation, and contrast.

Official
Basic
thiagoooo34252thiagoooo34252
1

engineer-accessibility

Scan web applications for WCAG 2.2 violations using axe-core.

Community
Advanced