skills.rest
LuisUrrutia
LuisUrrutiaCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit HTML/CSS/JS UI code against Web Interface Guidelines for accessibility and design consistency.

Updated Oct 29, 2018
Search Tags:#design#accessibility#a11y#code-quality#guidelines#web#ui-review
One-click install
npx skills add https://github.com/LuisUrrutia/.dotfiles --skill web-design-guidelines-luisurrutia
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/LuisUrrutia/.dotfiles/tree/main/tools/opencode/config/.config/opencode/skills/web-design-guidelines
Command: npx skills add https://github.com/LuisUrrutia/.dotfiles --skill web-design-guidelines-luisurrutia

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams ensure web UI code adheres to Web Interface Guidelines, reducing accessibility issues and design drift across projects.

Core Features & Use Cases

  • Conformance checking: validates HTML/CSS against the guidelines.
  • Accessibility audits: checks for contrast, keyboard navigation, aria labels.
  • Use Case: When reviewing a new UI, run this skill to automatically report guideline violations and suggested fixes.

Quick Start

Review the provided UI files against the latest guidelines to identify accessibility and design issues.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate UI code review for web interface guidelines?▼

To automate UI code review for web interface guidelines, apply this skill to HTML, CSS, and JavaScript codebases to audit layouts, color contrast, semantic structure, and interactive behaviors.

What is the best way to check web accessibility and design consistency in a project?▼

Checking web accessibility and design consistency involves auditing HTML and CSS code against established guidelines to identify contrast issues, keyboard navigation gaps, and missing aria labels.

Can I audit color contrast and semantic structure in my web project automatically?▼

Yes, you can audit color contrast and semantic structure automatically by running automated checks against HTML and CSS files to ensure they meet web interface guidelines.

Does this automated UI review fetch the latest accessibility rules?▼

Yes, this automated UI review fetches the latest rules to ensure up-to-date guideline checks, applies all verifiable criteria, and reports violations in a concise format.

How do I fix design drift and accessibility issues in web interfaces?▼

To fix design drift and accessibility issues in web interfaces, run a conformance check against web interface guidelines to automatically report violations and suggested fixes.

What limitations exist when auditing web UI code against interface guidelines?▼

When auditing web UI code against interface guidelines, limitations exist for non-verifiable criteria since the process only applies verifiable rules to web projects with HTML, CSS, and JavaScript.

Related Skills

Explore More Design & Creative Skills→
Max-LooMax-Loo
2

web-design-guidelines

Check web project files against current Web Interface Guidelines.

Community
Intermediate
1lastphoenix1lastphoenix
7

web-design-guidelines

Compare UI components against Web Interface Guidelines and report violations.

Community
Intermediate
viktorbezdekviktorbezdek
10

frontend-design

Create accessible, responsive UI design systems with Tailwind CSS, Radix UI, and shadcn/ui.

Community
Advanced
EdwinFerminEdwinFermin

web-design-guidelines

Identify UI guideline violations in web codebases and report them in file:line format.

Community
Intermediate