skills.rest
aresbit
aresbitCOMMUNITY
Explore all skills by this author →
Website𝕏@aresyangGitHub

web-design-guidelines

Analyze frontend UI implementations against Web Interface Guidelines and output file:line findings.

46|6|Updated Jan 28, 2026
Search Tags:#accessibility#UI#audit#ux#code-review#design-system#web-design-guidelines
One-click install
npx skills add https://github.com/aresbit/MateBot --skill web-design-guidelines-aresbit
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/aresbit/MateBot/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/aresbit/MateBot --skill web-design-guidelines-aresbit

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web projects often ship UI that fails accessibility, usability, or consistency tests. This skill automates evaluation against Web Interface Guidelines to surface gaps and improvement opportunities.

Core Features & Use Cases

  • Guideline-driven reviews: validate UI components and pages against current guidelines.
  • Accessibility & usability checks: flag contrast, keyboard navigation, ARIA usage, and responsive behavior.
  • Design-system alignment: ensure components conform to tokens, spacing, and typography rules.
  • Use Case: imagine auditing a landing page to ensure accessible color contrast and consistent typography across hero, features, and CTAs.

Quick Start

Use the web-design-guidelines skill to review your project files (e.g., index.html, styles.css) against the latest Web Interface Guidelines fetched automatically.

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 frontend UI code against web interface guidelines?▼

To audit frontend UI, this skill fetches the latest Web Interface Guidelines and analyzes your specified project files, applying all rules to output findings in a terse file:line format for quick fixes.

Can I check my design system for accessibility and usability compliance?▼

Yes, you can check design system accessibility and usability. The skill validates components against guidelines to flag contrast, keyboard navigation, ARIA usage, and responsive behavior issues.

What is the best way to perform an automated UX review for web projects?▼

An automated UX review uses guideline-driven evaluation to surface gaps and improvement opportunities. You provide project files like index.html or styles.css for automated compliance checking.

Does this accessibility audit work with web projects of any scale?▼

Yes, the accessibility audit applies to web projects of any scale. It evaluates codebases and design systems regardless of size to ensure consistent UI compliance.

How do I ensure my UI components conform to typography and spacing rules?▼

To ensure UI components conform to typography and spacing rules, the skill performs design-system alignment checks against tokens and spacing guidelines, outputting specific file:line findings.

Related Skills

Explore More Design & Creative Skills→
vikingokftvikingokft

stitch::extract-design-md

Extract a Stitch-compatible DESIGN.md from frontend source code.

Official
Intermediate
jon890jon890

web-design-guidelines

Compare web interfaces against the latest Web Interface Guidelines and output file:line findings.

Community
Intermediate
infantesromeroadrianinfantesromeroadrian

ecc-verification-loop

Automate build, type check, lint, test, security, and diff verification for Claude Code sessions.

Community
Advanced
InnoMikitaKutasInnoMikitaKutas

wcag-accessibility

Review frontend code for WCAG 2.2 accessibility compliance.

Community
Advanced