skills.rest
limaon
limaonCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Analyze UI code for Web Interface Guidelines compliance and output file:line findings.

Updated Jul 8, 2022
Search Tags:#accessibility#UI#review#ux#web-design#design-review#web-guidelines
One-click install
npx skills add https://github.com/limaon/dotfiles --skill web-design-guidelines-limaon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/limaon/dotfiles/tree/main/.config/opencode/skills/web-design-guidelines
Command: npx skills add https://github.com/limaon/dotfiles --skill web-design-guidelines-limaon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps ensure user interfaces conform to Web Interface Guidelines, reducing accessibility issues and design inconsistencies across projects.

Core Features & Use Cases

  • Guideline-driven review: automatically checks UI files against the latest Web Interface Guidelines.
  • Accessibility and UX focus: identifies issues related to color contrast, keyboard navigation, and semantic markup.
  • Use Case: apply to a UI component library or a website to surface actionable findings and suggested fixes.

Quick Start

Provide a path to the UI files or a pattern to review. The skill will fetch the latest guidelines from the Guidelines Source URL, scan the specified files, and output findings in the form file:line indicating issues found.

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 UX compliance?▼

To audit UI code for accessibility, you can scan frontend files against the latest Web Interface Guidelines to identify issues like poor color contrast, keyboard navigation gaps, and missing semantic markup.

How do I check frontend components for web design consistency?▼

Checking frontend components for web design consistency involves analyzing UI files against fetched web guidelines to surface design inconsistencies and output actionable findings in a concise file:line format.

Can I review a UI component library for semantic markup issues?▼

Yes, you can review a UI component library by providing a file path or pattern to scan, which will analyze the UI code to verify semantic markup and accessibility standards across components.

Does the accessibility review fetch the latest web guidelines automatically?▼

Yes, the accessibility review automatically fetches the latest rules via WebFetch from the Guidelines Source URL before scanning your specified UI files to ensure compliance checks use current standards.

What format are UX review findings output in?▼

UX review findings are output in a concise file:line format, indicating exactly where accessibility, UX, or design consistency issues are located within your UI code for quick fixes.

Are there limitations to checking web interface guidelines with this approach?▼

A limitation of checking web interface guidelines this way is that it requires providing valid file paths or patterns to scan, and focuses strictly on frontend code rather than runtime visual rendering.

Related Skills

Explore More Design & Creative Skills→
createtree2017createtree2017

web-design-guidelines

Audit React/TypeScript web interfaces against Web Interface Guidelines for UI, UX, and accessibility issues.

Community
Intermediate
sefllessseflless

fixing-accessibility

Identify and fix accessibility issues in UI components using defined rules.

Community
Intermediate
shwilliamsonshwilliamson

css-standards

Enforce BEM naming, CSS variables, and responsive patterns for CSS/SCSS.

Community
Basic
kevindreekevindree

browser-testing-with-devtools

Inspect live DOM, console, network, and accessibility data via Chrome DevTools MCP.

Community
Advanced