skills.rest
1lastphoenix
1lastphoenixCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Compare UI components against Web Interface Guidelines and report violations.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Teams often struggle to ensure UI code adheres to established Web Interface Guidelines, leading to inconsistent design and accessibility gaps across projects. This Skill automates the verification of UI code against the latest guidelines, helping teams identify and fix deviations early.

Core Features & Use Cases

  • Automated guideline checks: compare UI code against the latest Web Interface Guidelines.
  • Accessibility verification: flag color contrast, semantic HTML, focus management, and keyboard navigation issues.
  • Use Case: when asked to review a UI, audit a design, or check a site against best practices, run this Skill to produce a compliance report.

Quick Start

Provide the files or pattern you want reviewed, and I will fetch the latest guidelines and run the check.

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 UI code for accessibility and visual hierarchy compliance?▼

You can check UI code against Web Interface Guidelines by providing your files or patterns for automated verification, which identifies deviations in accessibility, responsive behavior, and color contrast to produce a concise compliance report.

What is checked during a web interface design guidelines review?▼

A web interface design guidelines review checks UI components for accessibility, color contrast, visual hierarchy, responsive behavior, and consistent design tokens, returning a prioritized report of violations and suggested fixes.

Can I use this tool to review semantic HTML and keyboard navigation issues?▼

Yes, you can use this tool to review semantic HTML and keyboard navigation issues. The accessibility verification flags these specific issues alongside color contrast and focus management deviations in the compliance report.

How do I fix inconsistent design tokens across my UI components?▼

To fix inconsistent design tokens across UI components, run an automated guideline check on your files. The Skill identifies deviations from established design tokens and provides suggested fixes in a prioritized violation report.

Does this automated UI compliance audit work without external dependencies?▼

Yes, the automated UI compliance audit works without external dependencies. It fetches the latest Web Interface Guidelines internally and analyzes the provided UI patterns to identify accessibility gaps and design inconsistencies.

Related Skills

Explore More Design & Creative Skills→
haryelramalhoharyelramalho

web-design-guidelines

Review UI code against Web Interface Guidelines and return file:line findings.

Community
Intermediate
concept2cureconcept2cure

design-review

Compare built UI against the design brief and deliver a prioritized refinement list.

Community
Advanced
AshesOfTheUndeadAshesOfTheUndead

default

Standardize UI component styling with centralized CSS variable tokens.

Community
Intermediate
Higashi-KotaHigashi-Kota

a11y

Audits UI components for WCAG 2.2 AA and ARIA compliance.

Community
Intermediate