skills.rest
mauricioacp
mauricioacpCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Fetch Web Interface Guidelines and validate UI code with file:line findings.

1|1|Updated Feb 7, 2026
Search Tags:#design#ui#accessibility#review#guidelines#web
One-click install
npx skills add https://github.com/mauricioacp/tanstack-convex-better-auth-template --skill web-design-guidelines-mauricioacp
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/mauricioacp/tanstack-convex-better-auth-template/tree/main/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/mauricioacp/tanstack-convex-better-auth-template --skill web-design-guidelines-mauricioacp

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps teams ensure UI code aligns with Web Interface Guidelines by routinely validating design decisions, accessibility, and consistency against the latest rules.

Core Features & Use Cases

  • Guidelines-driven reviews: fetch the latest rules from the source URL and apply them to your UI files.
  • File selection by pattern: read specified files or patterns to scope the review (e.g., components/, pages/, or specific components).
  • Output format: produce terse findings in the file:line format to fit into code reviews and CI logs.
  • Use Case: when auditing a new design system, run this skill on the UI assets to surface accessibility issues and deviations from the guidelines.

Quick Start

Provide the files or pattern you want reviewed; the skill will fetch the latest guidelines and evaluate them against your codebase.

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 web UI files for accessibility and design consistency?▼

To audit web UI files for accessibility and design consistency, provide your target files or directory patterns to the skill. It fetches the latest Web Interface Guidelines and evaluates your code, outputting terse file:line findings for code reviews.

What is a guidelines-driven UI code review?▼

A guidelines-driven UI code review validates components, pages, and patterns against fetched accessibility and design rules. It surfaces deviations and visual consistency issues by evaluating target files against all rules from the source URL.

Can I scope an accessibility review to specific components or pages?▼

Yes, you can scope an accessibility review to specific components or pages by providing file patterns. The skill reads specified files or patterns, such as components/ or pages/, to evaluate targeted UI assets against the guidelines.

What format do accessibility and design guideline findings use for CI logs?▼

Findings for accessibility and design guideline reviews use a terse file:line format. This output format ensures results fit directly into code reviews and CI logs without excessive verbosity.

Does this web design review check responsiveness and visual patterns?▼

Yes, this web design review checks responsiveness and visual patterns. It evaluates target files against all fetched rules to validate components, pages, and patterns for accessibility, responsiveness, and visual consistency.

When should I run a UI accessibility and design audit on my codebase?▼

You should run a UI accessibility and design audit when implementing a new design system or updating UI assets. It routinely validates design decisions and surfaces accessibility issues before deployment.

Related Skills

Explore More Design & Creative Skills→
DyreanDyrean

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and UX gaps.

Community
Intermediate
aceable-aiaceable-ai
1

web-design-guidelines

Identify deviations from Web Interface Guidelines in UI code.

Official
Intermediate
superpollo02superpollo02

shadcn

Generate shadcn/ui-inspired component guidance with token-first rules and WCAG 2.2 AA constraints.

Community
Intermediate
FlorinSenonerFlorinSenoner

web-design-guidelines

Fetch latest Web Interface Guidelines and review UI code for compliance.

Community
Intermediate