skills.rest
0xarcano
0xarcanoCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

A tool for checking UI code compliance.

Updated Feb 2, 2026
Search Tags:#ui#code review#accessibility#web design#guidelines#ux
One-click install
npx skills add https://github.com/0xarcano/UXWallet --skill web-design-guidelines-0xarcano
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/0xarcano/UXWallet/tree/main/frontend/.agents/skills/web-design-guidelines
Command: npx skills add https://github.com/0xarcano/UXWallet --skill web-design-guidelines-0xarcano

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

  • Automated Code Review: Scans UI code files against a predefined set of best practices and guidelines.
  • Compliance Checking: Identifies potential violations related to design, accessibility, and interface standards.
  • Use Case: A developer can use this Skill to quickly audit a new component's code before merging, ensuring it aligns with the project's established design system and accessibility requirements.

Quick Start

Use the web-design-guidelines skill to review the file 'src/components/Button.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 check if my UI code meets web design guidelines?▼

To check if UI code meets web design guidelines, this skill fetches rules from a specified URL and scans your files for compliance. It outputs violations in a terse file:line format to identify design and accessibility issues.

Can I automate accessibility code review for a specific file pattern?▼

You can automate accessibility code review by specifying file patterns for the skill to scan. It fetches the latest interface rules and checks those files, outputting findings in a terse file:line format.

What is the process for auditing UI components against established design systems?▼

Auditing UI components against established design systems involves fetching guidelines from a URL and comparing your code. This skill identifies potential violations related to interface standards and accessibility requirements automatically.

Do I need to provide a URL to review UI code for compliance?▼

Yes, you need to provide a URL to review UI code for compliance. The skill fetches the latest web interface guidelines from that specified URL to check your files against all fetched rules.

How are code review findings for accessibility and UX violations reported?▼

Code review findings for accessibility and UX violations are reported in a terse file:line format. This ensures you can quickly locate and fix compliance issues within your UI code files.

Related Skills

Explore More Design & Creative Skills→
BangjjackBangjjack

web-design-guidelines

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

Official
Intermediate
elophantoelophanto
116

web-design-guidelines

Fetch web interface guidelines and report UI code compliance in file:line format.

Community
Intermediate
VoDaiLoczVoDaiLocz
24

lint-and-validate

Automate linting and static analysis of code in CI pipelines.

Community
Intermediate
uni-helperuni-helper
95

web-design-guidelines

Analyze UI code for compliance with Web Interface Guidelines.

Official
Intermediate