skills.rest
kennyolofsson23-netizen
kennyolofsson23-netizenCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code files against the latest Web Interface Guidelines.

1|Updated Mar 15, 2026
Search Tags:#design#ui#accessibility#audit#guidelines#web
One-click install
npx skills add https://github.com/kennyolofsson23-netizen/claude-code-config --skill web-design-guidelines-kennyolofsson23-netizen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/kennyolofsson23-netizen/claude-code-config/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/kennyolofsson23-netizen/claude-code-config --skill web-design-guidelines-kennyolofsson23-netizen

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI code often fails to follow the latest Web Interface Guidelines, leading to accessibility, design, and usability issues that can affect user experience and compliance.

Core Features & Use Cases

  • Fetch latest guidelines from the official source before each review.
  • Read specified files or patterns provided by the user.
  • Apply all rules from the fetched guidelines to detect violations.
  • Output findings in a concise file:line format for quick remediation.
  • Use case: A developer can ask the skill to audit a React component library for guideline compliance before a release.

Quick Start

Ask the skill to review your UI files, e.g., “review my UI for web design guidelines in src/**/*.tsx”.

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

To check UI files for web design guideline compliance, provide a file path or pattern like src/**/*.tsx. The skill reads the specified files, applies all fetched guideline rules, and outputs violations in a terse file:line format.

Can I review a React component library for UI guideline violations before release?▼

Yes, you can review a React component library before release by providing your UI file patterns. The skill applies the latest Web Interface Guidelines to detect accessibility and usability issues across all specified files.

Does the web design guidelines audit work with any web project files?▼

The skill fetches the latest Web Interface Guidelines from the official source before each review. This ensures the audit checks your UI code against the most current accessibility and design rules available.

What format are UI guideline violations reported in?▼

The skill requires access to the Web Interface Guidelines URL and the ability to read your specified web project files. It then fetches the latest rules and applies them to detect violations across all provided UI patterns.

Related Skills

Explore More Design & Creative Skills→
alexwoxalexwox

web-design-guidelines

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

Community
Intermediate
Citrus-bitCitrus-bit
135

web-design-guidelines

Review UI code against the Web Interface Guidelines and output file:line violation reports.

Community
Intermediate
Kushal9889Kushal9889

husky

Sets up Husky git hooks to automate code quality checks and testing before commits.

Community
Intermediate
dachentdachent
18

frontend-design-codex

Validate frontend UI components through browser rendering and screenshot analysis.

Community
Advanced