skills.rest
cagdotin
cagdotinCOMMUNITY
Explore all skills by this author →
Website𝕏@0xcgnGitHub

web-design-guidelines

Evaluate frontend UI code against Web Interface Guidelines for accessibility and usability gaps.

36|Updated Jan 28, 2026
Search Tags:#accessibility#frontend#usability#web-design#design-review#ui-guidelines
One-click install
npx skills add https://github.com/cagdotin/agents --skill web-design-guidelines-cagdotin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/cagdotin/agents/tree/main/extensions/frontend-dev/skills/web-design-guidelines
Command: npx skills add https://github.com/cagdotin/agents --skill web-design-guidelines-cagdotin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This tool helps teams verify that user interfaces conform to established Web Interface Guidelines, surfacing visual and interaction gaps early in the development cycle.

Core Features & Use Cases

  • Automated UI guideline checks across frontend codebases and component libraries
  • Accessibility conformance evaluation for components, layouts, and interactions
  • Use Case: run a design-system audit on a React component library to identify contrast issues and keyboard navigation problems

Quick Start

Initiate a guideline check on the target UI codebase to receive a prioritized list of violations and suggested fixes.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I audit my frontend UI code for accessibility compliance?▼

An accessibility audit evaluates your frontend UI code against established Web Interface Guidelines, surfacing visual and interaction gaps like contrast issues and keyboard navigation problems early in development.

Can I check my React component library for usability and design issues?▼

Yes, you can run a design-system audit on a React component library to identify specific usability and accessibility issues like contrast failures and keyboard navigation problems across components.

What is the best way to enforce UI guidelines during a design review?▼

Enforcing UI guidelines during a design review involves evaluating target frontend files against a source URL to output concise findings suitable for developer remediations and governance checks.

Does this accessibility check require any specific dependencies or environments?▼

No specific dependencies are required; this tool reads and analyzes your target frontend files directly to identify accessibility and usability gaps without external component installations.

How do I get suggested fixes for UI accessibility violations?▼

You receive suggested fixes by initiating a guideline check on your target UI codebase, which analyzes the code and outputs a prioritized list of violations with actionable developer remediations.

Related Skills

Explore More Design & Creative Skills→
victor-telesvictor-teles
1

web-design-guidelines

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

Community
Intermediate
djkloopdjkloop

audit

Audit pages, features, or components for accessibility, performance, theming, responsive design, and anti-patterns.

Community
Advanced
zizzfizzixzizzfizzix

ui-consistency

Verify backend/admin UI components against design system semantic tokens and component catalog.

Community
Basic
t-stringst-strings

Frontend Accessibility

Review frontend UI code for HTML semantics, ARIA, keyboard navigation, and contrast.

Official
Basic