web-design-guidelines

Audit UI code against Web Interface Guidelines and report violations in file:line format.

Updated Feb 2, 2026
One-click install
npx skills add https://github.com/kimmyxpow/focus --skill web-design-guidelines-kimmyxpow
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/kimmyxpow/focus/tree/main/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/kimmyxpow/focus --skill web-design-guidelines-kimmyxpow

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI code often fails to meet Web Interface Guidelines, leading to inconsistent UX and accessibility gaps. This Skill helps teams automatically audit code against the latest standards.

Core Features & Use Cases

  • Guideline Fetching: Retrieve the most recent rules from the official source before each review.
  • File Scanning: Read specified files or patterns to evaluate conformance.
  • Report Generation: Output findings in the concise file:line format for quick remediation.
  • Use Case: When preparing a UI audit, run this Skill to identify accessibility and design guideline violations across your frontend project.

Quick Start

Use the web-design-guidelines skill to review project files by providing a file pattern or a list of files (for example: src/*.jsx).

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 web design compliance and accessibility violations?

You can audit UI code for web design compliance by scanning individual files or entire frontend projects to identify accessibility and design consistency violations, with findings output in a file:line format for quick remediation.

What is the best way to check frontend code for accessibility guideline violations?

Checking frontend code for accessibility violations is best handled by fetching the latest rules from the official source and scanning your codebase to enforce compliance with current web interface standards.

Can I review an entire project for design consistency or only individual files?

You can review an entire project for design consistency by providing a file pattern like src/*.jsx or a list of files, allowing evaluation of conformance across full frontend codebases.

How are UI audit findings reported for fixing code quality issues?

UI audit findings for code quality issues are reported in a concise file:line format that maps violations directly to their location in frontend code, enabling quick remediation of accessibility and design inconsistencies.

Does the guideline review process use static rules or fetch them dynamically?

The guideline review process fetches rules dynamically, retrieving the most recent standards from the official source before each review to ensure your UI audit evaluates conformance against the latest web interface guidelines.