skills.rest
kensleDev
kensleDevCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility and design compliance.

Updated Oct 14, 2025
Search Tags:#design#ui#code review#accessibility#guidelines#ux
One-click install
npx skills add https://github.com/kensleDev/dotfiles --skill web-design-guidelines-kensledev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/kensleDev/dotfiles/tree/main/claude/.claude/skills/web-design-guidelines
Command: npx skills add https://github.com/kensleDev/dotfiles --skill web-design-guidelines-kensledev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps ensure that user interface code adheres to established web interface guidelines, improving consistency and quality.

Core Features & Use Cases

  • UI Code Review: Automatically checks provided files against a set of predefined design and accessibility rules.
  • Compliance Auditing: Audits user-submitted UI code against best practices for web interfaces.
  • Use Case: When you need to quickly check if a new component's code follows the company's design system and accessibility standards before merging.

Quick Start

Review the UI code in the file 'src/components/Button.js' for guideline compliance.

Frequently Asked Questions about web-design-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I check if my UI code meets accessibility guidelines?▼

To review UI code for compliance, the Skill audits submitted files against fetched web interface rules to identify accessibility violations and design best practice issues. It automatically processes specified components to pinpoint exact design inconsistencies before merging.

Can I audit a specific component file for design system compliance?▼

Yes, you can audit a specific component file for design system compliance by providing its path, such as 'src/components/Button.js'. The Skill fetches external rules and processes the specified code to identify violations against established UI standards.

What is UI code compliance auditing for web interfaces?▼

UI code compliance auditing for web interfaces is the process of reviewing user-submitted code against predefined design and accessibility rules. It improves consistency and quality by ensuring new components follow established standards before integration.

Does this guideline review work with external web interface rules?▼

Yes, the guideline review works with external web interface rules by fetching them during the auditing process. It applies these fetched rules to your submitted UI code patterns to detect accessibility issues and design violations automatically.

Are there limitations to checking UX best practices in code files?▼

A limitation of checking UX best practices in code files is that the Skill relies on fetching external rules and processing specified files. It cannot evaluate runtime user interactions or dynamic visual states, focusing strictly on static code pattern compliance.

Related Skills

Explore More Design & Creative Skills→
wellnessbrotherjay-debugwellnessbrotherjay-debug

web-design-guidelines

Review UI code for Web Interface Guidelines compliance and report findings in file:line format.

Community
Intermediate
kindfi-orgkindfi-org
19

web-design-guidelines

Assess UI code against Web Interface Guidelines for accessibility and design issues.

Official
Intermediate
racciolyraccioly

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and design consistency.

Community
Intermediate
giosuetedeschi-specgiosuetedeschi-spec

web-design-guidelines

Evaluate web interface code for compliance with design and accessibility standards.

Community
Intermediate