skills.rest
itallstartedwithaidea
itallstartedwithaideaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-design-guidelines

Enforces WCAG 2.2 AA web UI generation and review across frontend components and pages.

31|8|Updated Apr 10, 2026
Search Tags:#accessibility#wcag 2.2#dark mode#form validation#web ui#focus states#responsive typography
One-click install
npx skills add https://github.com/itallstartedwithaidea/agent-skills --skill web-design-guidelines-itallstartedwithaidea
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-design-guidelines
Source: https://github.com/itallstartedwithaidea/agent-skills/tree/main/skills/web-frontend/web-design-guidelines
Command: npx skills add https://github.com/itallstartedwithaidea/agent-skills --skill web-design-guidelines-itallstartedwithaidea

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web UI code often ships with inconsistent accessibility, weak focus/keyboard behavior, poor contrast, fragile forms, and UX gaps that cause usability and compliance problems.

Core Features & Use Cases

  • Accessibility-first rules (WCAG 2.2 AA): Ensures keyboard navigation, visible focus states, and compliant color contrast patterns.
  • Frontend UI quality guardrails: Covers forms (labels + validation + error association), responsive typography, image optimization (CLS-safe sizing + alt text), and navigation hierarchy.
  • Modern UX and compatibility: Handles prefers-reduced-motion, dark mode via system preference, touch target sizing, and RTL/i18n support.
  • Use cases: Generating new components/pages, reviewing existing frontend code for accessibility, implementing theme switching, and building validated forms.

Quick Start

Use the web-design-guidelines skill to produce accessible React UI code that includes visible focus states, properly labeled form fields, and dark-mode support for the requested page.

Frequently Asked Questions about web-design-guidelines

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

FAQPage Schema
How do I generate web UI that meets WCAG 2.2 AA accessibility standards?▼

To generate WCAG 2.2 AA accessible web UI, you need production-grade rulesets enforcing keyboard navigation, visible focus states, and compliant color contrast. This ensures frontend components ship with semantic HTML and accessible error messaging by default.

How do I implement accessible form validation and error messaging?▼

Accessible form validation requires proper label associations and error messaging linked to input fields. Enforcing frontend quality guardrails ensures forms have validation states and accessible error associations that screen readers can interpret accurately.

What's the best way to handle dark mode and prefers-reduced-motion in frontend components?▼

Handling dark mode and prefers-reduced-motion requires system color-scheme detection and conditional animation logic. Applying modern UX compatibility rules ensures frontend components respect user system preferences for theme switching and motion sensitivity.

Can I audit existing React code for accessibility and touch target compliance?▼

Auditing existing React code for accessibility checks compliance against touch target sizing, focus states, and responsive typography rulesets. Reviewing frontend code identifies usability gaps and maps components to platform-style UX patterns for compliance.

How do I add RTL and i18n support to responsive web typography?▼

Adding RTL and i18n support to responsive typography requires semantic HTML structures and layout adjustments for bidirectional text. Applying comprehensive design rulesets ensures navigation hierarchy and typography adapt correctly for internationalized interfaces.

Why does my web UI fail keyboard navigation and focus state checks?▼

Web UI fails keyboard navigation checks when frontend code lacks visible focus states and semantic HTML. Auditing components against WCAG 2.2 AA principles identifies missing focus management and enforces platform-style UX patterns for keyboard accessibility.

Related Skills

Explore More Design & Creative Skills→
calcosmiccalcosmic
9

html-css

Enforce semantic HTML, ARIA, color contrast, and flat CSS architecture.

Community
Intermediate
apexradiusapexradius

a11y-check

Audit web content accessibility against WCAG 2.2 AA standards.

Official
Advanced
act70255act70255

tailwind-patterns

Implement modern CSS patterns with Tailwind CSS v4 configuration and theming.

Community
Advanced
zeronx798zeronx798

design-md

Create, lint, and export design tokens via Google DESIGN.md.

Community
Intermediate