skills.rest
Ermianr
ErmianrCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Analyze HTML, JSX/TSX, and CSS files against Web Interface Guidelines.

Updated Aug 27, 2026
Search Tags:#accessibility#a11y#frontend#contrast#semantic-html#ui-review#web-guidelines
One-click install
npx skills add https://github.com/Ermianr/fobos --skill web-design-guidelines-ermianr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/Ermianr/fobos/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/Ermianr/fobos --skill web-design-guidelines-ermianr

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill automates review of UI files against Web Interface Guidelines to improve accessibility, usability, and visual coherence.

Core Features & Use Cases

  • Guideline-driven analysis: checks markup, semantics, accessibility, color contrast, keyboard navigation, and responsive behavior against the latest Web Interface Guidelines.
  • Automated rule updates: fetches fresh guidelines before each review to ensure up-to-date compliance.
  • Use Case: Before releasing a component library, run this Skill on UI code to surface issues and generate a remediation checklist.

Quick Start

To start a review, provide the UI files or patterns to assess. The Skill will fetch the latest guidelines and apply them to the specified files, returning a concise, actionable report. Example: Use the web-design-guidelines skill to review apps/web/components/Button.jsx and src/ui/Modal.jsx for accessibility and design conformance.

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 components for accessibility issues?▼

To audit frontend components for accessibility issues, provide your UI files like HTML, JSX, or TSX to an automated reviewer. The tool fetches the latest Web Interface Guidelines and analyzes markup, semantics, and keyboard navigation to produce a concise, actionable remediation checklist.

What is guideline-driven UI review for web interfaces?▼

Guideline-driven UI review is an automated process that checks HTML, JSX, and CSS files against up-to-date Web Interface Guidelines. It targets markup, color contrast, semantic HTML, and responsive behavior to identify accessibility and design conformance issues in frontend codebases.

Can I check color contrast and semantic HTML in my JSX files?▼

Yes, you can check color contrast and semantic HTML in JSX files. The review process applies Web Interface Guidelines deterministically across HTML, JSX/TSX, and CSS files to surface specific accessibility and visual coherence findings.

How do I get an accessibility remediation checklist before releasing a component library?▼

To get an accessibility remediation checklist before releasing a component library, run an automated UI review on your component directory. The analysis returns concise, actionable findings based on the latest Web Interface Guidelines for markup and a11y compliance.

Does automated UI accessibility review work with CSS files?▼

Yes, automated UI accessibility review works with CSS files alongside HTML and JSX/TSX. It evaluates styles and responsive behavior against current Web Interface Guidelines to identify visual coherence and accessibility issues deterministically.

Why do I need to fetch the latest web guidelines for UI auditing?▼

Fetching the latest web guidelines for UI auditing ensures your review checks against current accessibility standards and a11y rules. Automated rule updates before each analysis guarantee up-to-date compliance for color contrast, semantics, and keyboard navigation.

Related Skills

Explore More Design & Creative Skills→
helderbertohelderberto
12

a11y-audit

Audit frontend source files for WCAG violations and report findings by severity.

Community
Intermediate
PP-NamiasPP-Namias
2

accessibility-audit

Validate web accessibility compliance with WCAG 2.1 AA standards.

Community
Intermediate
89jobrien89jobrien
4

web-accessibility

Audit web content for WCAG 2.1/2.2 conformance and accessibility issues.

Community
Advanced
bdbchbdbch
2

accessibility-review

Audit web applications for WCAG 2.1/2.2 accessibility compliance in Chrome.

Community
Advanced