skills.rest
pedronauck
pedronauckCOMMUNITY
Explore all skills by this author →
Website𝕏@pedronauckGitHub

web-design-guidelines

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

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

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, accessibility, and overall quality of web applications.

Core Features & Use Cases

  • Automated Code Review: Scans specified files against a comprehensive set of design and accessibility rules.
  • Compliance Checking: Verifies adherence to best practices for web interfaces.
  • Use Case: When you need to quickly audit a new set of UI components for accessibility issues and design consistency before merging them into the main codebase.

Quick Start

Use the web-design-guidelines skill to review the accessibility of the file named 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 my front-end code for UI accessibility issues?▼

To check UI accessibility issues in front-end code, you can run an automated review against Web Interface Guidelines. This process scans specified UI files to validate design consistency and compliance with accessibility best practices.

What does an automated design audit do for web interface components?▼

An automated design audit reviews web interface components by fetching external guidelines and performing rule-based validation. It checks your UI code for compliance with established accessibility and design best practices before merging.

Can I review a specific file like button.tsx for web design compliance?▼

Yes, you can review a specific file like button.tsx for web design compliance by targeting it in an automated code review. The system scans the specified file against comprehensive design and accessibility rules to find issues.

How do I ensure my UI components meet web standards before merging?▼

To ensure UI components meet web standards before merging, run an automated design audit that validates your code against Web Interface Guidelines. This verifies adherence to established accessibility rules and improves overall application quality.

Does this automated code review require any dependencies?▼

No, this automated code review requires no dependencies to function. It works by fetching external guidelines to perform rule-based validation directly against your specified front-end code files.

What are the limitations of rule-based validation for UI design?▼

Rule-based validation for UI design focuses strictly on compliance with fetched Web Interface Guidelines and may not catch subjective visual issues. It serves as an automated quality assurance check rather than a comprehensive manual design review.

Related Skills

Explore More Design & Creative Skills→
viralcodeviralcode
61

web-design-guidelines

Review UI code for compliance with Web Interface Guidelines.

Community
Intermediate
blackgirlbytesblackgirlbytes

audit-a11y

Audit React/Next.js components for WCAG 2.1 AA accessibility violations.

Community
Intermediate
2nth-ai2nth-ai
1

tech/design

Provide design tools and principles for UI and product design.

Official
Advanced
act70255act70255

ui-visual-validator

Validate UI components for visual consistency, design system compliance, and accessibility.

Community
Advanced