skills.rest
stamatim
stamatimCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Audit web UI code against the latest Web Interface Guidelines.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure UI code adheres to the Web Interface Guidelines, catching accessibility and UX issues early in the review process.

Core Features & Use Cases

  • Fetch the latest Web Interface Guidelines and compare them against your UI codebase.
  • Analyze files or patterns across web projects for accessibility, usability, and visual consistency.
  • Use Case: When you want to audit a website or app for accessible color contrast, semantic markup, and keyboard navigation.

Quick Start

Provide the UI source files or a pattern, and prompt the AI to review them against the current Web Interface Guidelines.

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 web accessibility and UX issues?▼

You can audit UI code for web accessibility by providing source files to be reviewed against the latest Web Interface Guidelines, identifying semantic markup, color contrast, and keyboard navigation gaps in a concise file:line format.

Can I run a design review on a single prototype page or do I need a full codebase?▼

A design review can be run on a single prototype page. The audit applies to individual files, patterns, single pages, prototypes, and full repositories across websites and apps.

What is the best way to check if my web components follow Web Interface Guidelines?▼

The best way to check if web components follow Web Interface Guidelines is to prompt an AI to fetch the latest upstream guideline rules and apply them directly to your provided UI source files.

Does this accessibility review work with my existing design system files?▼

Yes, this accessibility review works with existing design system files. It analyzes codebases and component patterns across web projects for accessible color contrast, usability, and visual consistency.

How are accessibility and UX gaps reported after auditing the UI code?▼

Accessibility and UX gaps are reported in a concise file:line style format, pinpointing exact locations in your UI code where the source files fail to meet the fetched Web Interface Guidelines.

Related Skills

Explore More Design & Creative Skills→
shiroginshirogin
1

web-design-guidelines

Fetch Web Interface Guidelines and report UI compliance issues in file:line format.

Community
Intermediate
omerakbenomerakben
1

web-design-guidelines

Analyze UI code against Web Interface Guidelines for accessibility and usability issues.

Community
Basic
murphytruemanmurphytrueman
155

cicd-integration

Generate CI/CD pipeline configurations for design system quality checks.

Community
Advanced
Tahona-AITahona-AI

fixing-accessibility

Evaluate UI code for accessibility issues against WCAG guidelines.

Official
Intermediate