skills.rest
andres-vv
andres-vvCOMMUNITY
Explore all skills by this author →
GitHub

web-design-guidelines

Review UI code against Web Interface Guidelines for accessibility and usability.

3|1|Updated Jan 31, 2026
Search Tags:#ui#code review#accessibility#web design#guidelines#ux
One-click install
npx skills add https://github.com/andres-vv/Flowkify-mission-10x --skill web-design-guidelines-andres-vv
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/andres-vv/Flowkify-mission-10x/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/andres-vv/Flowkify-mission-10x --skill web-design-guidelines-andres-vv

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers ensure their user interface code adheres to established web design best practices, focusing on accessibility, usability, and performance.

Core Features & Use Cases

  • Accessibility Audit: Checks for common accessibility issues like missing labels or ARIA attributes.
  • Usability Review: Enforces guidelines for focus states, forms, and navigation.
  • Performance Optimization: Identifies potential performance bottlenecks in UI code.
  • Use Case: Review a React component to ensure it follows accessibility guidelines for interactive elements and has proper focus management.

Quick Start

Review the attached file 'src/components/Button.jsx' for UI 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 React component meets web accessibility guidelines?▼

To check if a React component meets web accessibility guidelines, review the UI code for compliance with rules covering missing labels, ARIA attributes, focus states, and touch interaction to ensure usability.

What is a UI code review for web design best practices?▼

A UI code review for web design best practices analyzes provided files against a comprehensive set of rules and anti-patterns, covering accessibility, forms, typography, dark mode, and performance to ensure established standards are met.

Can I audit UI code for dark mode and locale compliance?▼

Yes, you can audit UI code for dark mode and locale compliance by analyzing the provided component patterns against established web interface guidelines to identify anti-patterns and ensure correct rendering.

How do I review UI files for focus state and navigation issues?▼

Review UI files for focus state and navigation issues by analyzing the code against a comprehensive set of web interface rules, identifying missing focus management and enforcing usability guidelines for interactive elements.

What's the best way to identify performance bottlenecks in UI code?▼

The best way to identify performance bottlenecks in UI code is to analyze the files against web interface guidelines, which check for anti-patterns in animations, images, and hydration that may degrade usability.

Does this UI code review cover safe areas and touch interaction?▼

Yes, this UI code review covers safe areas and touch interaction by analyzing provided patterns against comprehensive web interface guidelines to ensure mobile usability and proper handling of interactive elements.

Related Skills

Explore More Design & Creative Skills→
elianivaelianiva
203

web-design-guidelines

Audit UI code against Web Interface Guidelines for accessibility and usability.

Community
Intermediate
ihj04982ihj04982

web-design-guidelines

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

Community
Intermediate
RexO77RexO77
2

web-design-guidelines

Review web interface code for compliance with design and accessibility guidelines.

Community
Intermediate
christopherlouetchristopherlouet
5

qa-design

Audit web interfaces for accessibility, performance, typography, and internationalization compliance.

Community
Intermediate