skills.rest
dudqks0319-cpu
dudqks0319-cpuCOMMUNITY
Explore all skills by this author →
GitHub

ui-web

Implements accessible web UI components with Tailwind CSS, glassmorphism, and dark mode support.

Updated Jan 16, 2026
Search Tags:#accessibility#tailwind css#wcag#glassmorphism#dark mode#react components#web ui
One-click install
npx skills add https://github.com/dudqks0319-cpu/antigravity-skills --skill ui-web-dudqks0319-cpu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-web
Source: https://github.com/dudqks0319-cpu/antigravity-skills/tree/main/ui-web
Command: npx skills add https://github.com/dudqks0319-cpu/antigravity-skills --skill ui-web-dudqks0319-cpu

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building web interfaces that look polished while meeting WCAG 2.1 AA accessibility requirements is error-prone, and developers often ship low-contrast text, invisible buttons, or missing focus states that fail accessibility audits. ## Core Features & Use Cases - Mandatory WCAG 2.1 AA Compliance Rules: Enforces color contrast ratios, visible button boundaries, focus indicators, and minimum 44px touch targets with explicit forbidden and safe color combinations. - Ready-to-Use Component Patterns: Provides Tailwind-based implementations for buttons, cards, inputs, glassmorphism effects, skeleton loaders, and layout grids with dark mode variants. - Design System Guidance: Defines spacing scales, typography hierarchies, semantic color tokens, and micro-interaction transitions for consistent visual output. - Use Case: When building a React landing page or dashboard, apply these patterns to generate components that pass contrast checks, support dark mode, and include proper focus rings without manual accessibility review. ## Quick Start Use the ui-web skill to build an accessible React dashboard card component with dark mode support and proper focus states.

Frequently Asked Questions about ui-web

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

FAQPage Schema
How do I make Tailwind buttons meet WCAG contrast requirements?▼

Use solid backgrounds like bg-gray-900 with text-white for primary buttons, or bg-gray-100 with text-gray-900 for secondary. Ghost buttons must include a visible border such as border-gray-300, and all buttons need minimum 44px height with px-4 py-2 padding.

What color combinations fail WCAG 2.1 AA contrast checks?▼

gray-400 on white fails at 2.6:1, white on yellow fails, and gray-500 on gray-900 in dark mode fails at 2.4:1. Safe pairs include gray-700 on white at 9.2:1 and white on gray-900 or blue-600 backgrounds.

When should I use glassmorphism in web design?▼

Glassmorphism works for hero sections over image backgrounds, floating cards, modal overlays, and subtle navigation bars. Avoid it on text-heavy content, forms, and data tables where the blur effect reduces contrast and readability.

How do I add accessible focus states in Tailwind?▼

Combine focus:outline-none with focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 on every interactive element. Never use outline-none alone, as removing focus indicators without a replacement breaks keyboard navigation accessibility.

Does this approach support dark mode in React?▼

Yes, all component patterns include dark: prefixed Tailwind variants pairing light surfaces with gray-900/gray-950 dark equivalents. Text must stay light (gray-100 to white) on dark backgrounds, and both modes should be tested before shipping.

Related Skills

Explore More Design & Creative Skills→
laravellaravel
3.6k

tailwindcss-development

Apply Tailwind CSS v4 utilities for styling and responsive layouts.

Official
Intermediate
Community-AccessCommunity-Access
387

Playwright Accessibility Testing

Automate web accessibility testing with Playwright and Axe-Core to report WCAG violations.

Official
Advanced
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced
aberrantCodeaberrantCode
1

ui-mobile

Provide mobile UI design patterns and accessibility rules for React Native, iOS, and Android interfaces.

Community
Intermediate