skills.rest
ihj04982
ihj04982COMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

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

Updated Feb 10, 2026
Search Tags:#ui#code review#best practices#accessibility#web design#ux
One-click install
npx skills add https://github.com/ihj04982/my-cursor-settings --skill web-design-guidelines-ihj04982
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/ihj04982/my-cursor-settings/tree/main/skills/web-design-guidelines
Command: npx skills add https://github.com/ihj04982/my-cursor-settings --skill web-design-guidelines-ihj04982

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps ensure that your web interface code adheres to established design and accessibility best practices, improving user experience and maintainability.

Core Features & Use Cases

  • Accessibility Audits: Checks for common accessibility issues like missing ARIA labels, improper element usage, and keyboard navigation problems.
  • Design Compliance: Verifies adherence to guidelines for focus states, forms, animations, typography, and content handling.
  • Performance Checks: Identifies potential performance bottlenecks related to rendering, DOM manipulation, and asset loading.
  • Use Case: You've just finished a new component and want to ensure it's accessible and performs well. Run this Skill to get a report of potential issues before deployment.

Quick Start

Use the web-design-guidelines skill to review the UI code in the src/ directory.

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

To check UI code for web design best practices, review your source files against established interface guidelines to identify accessibility anti-patterns, improper focus states, and performance bottlenecks before deployment.

What is included in a web interface accessibility and design compliance audit?▼

A web interface design compliance audit reviews UI code for accessibility issues like missing ARIA labels, keyboard navigation problems, focus states, forms, animations, typography, dark mode, and hydration to ensure maintainability.

How do I find anti-patterns in my frontend components before deployment?▼

To find anti-patterns in frontend components before deployment, scan the UI code in your source directory for violations of web interface guidelines, outputting identified issues in a terse file and line format for quick resolution.

Can I review touch interaction and dark mode implementation in my UI code?▼

Yes, you can review touch interaction, safe areas, and dark mode implementation by auditing your UI code against web interface guidelines that specifically cover these mobile and environment-aware design patterns.

What is the best way to verify keyboard navigation and focus states in web components?▼

The best way to verify keyboard navigation and focus states in web components is to perform a design compliance check on your UI code, identifying improper element usage and missing focus state anti-patterns.

Related Skills

Explore More Design & Creative Skills→
RuzenieRuzenie
2

app-workspace-guide

Identify Node, Vite, Tailwind, and shadcn configurations and directory constraints.

Community
Basic
chris-c-thomaschris-c-thomas
3

web-design-guidelines

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

Community
Intermediate
mouayadakelmouayadakel

accessibility-test-generator

Generate accessibility tests for axe-core violations, keyboard navigation, focus traps, and ARIA attributes.

Community
Intermediate
CivicActionsCivicActions
2

accessibility-audit

Audit web pages and components for WCAG 2.1 AA and Section 508 compliance.

Official
Advanced