ui-web
ui-web guides you through building accessible web components that meet WCAG 2.1 AA standards. It enforces color contrast rules, visible focus states, and proper button styling while providing glassmorphism patterns, a semantic color system, and dark mode support—all grounded in Tailwind and modern design principles.
ui-web helps you build WCAG 2.1 AA compliant web UI components with glassmorphism and dark mode.
AI-generated summary based on this skill's SKILL.md
Install
alinaqi/maggy/ui-web · repository language: Python
git clone https://github.com/alinaqi/maggy
cp -r maggy/skills/ui-web ~/.claude/skills/ui-webnpx skillfed install alinaqi/maggy/ui-webFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How does ui-web help build accessible WCAG 2.1 AA compliant web components?
ui-web guides you through building web components that meet WCAG 2.1 AA standards by enforcing color contrast rules, visible focus states, and proper semantic markup. The skill provides templates and patterns for accessible form inputs with labels, screen reader friendly React components, and focus indicators that ensure your UI is usable for all users, including those with visual or motor impairments.
What dark mode ui design does tailwind css support in ui-web?
ui-web supports Tailwind dark mode implementation with proper contrast and color pairing to maintain WCAG AA compliance in both light and dark themes. The skill includes a semantic color system that ensures readable text, accessible interactive elements, and consistent styling across dark mode variants, helping you design interfaces that work seamlessly in low-light environments.
How can I style buttons with focus states for accessibility?
ui-web teaches button styling with focus states by providing clear, visible focus indicators that meet accessibility standards. The skill covers touchscreen-friendly button sizes (44px minimum), hover effects, micro interactions, and proper keyboard navigation patterns. These techniques ensure buttons are interactive and perceivable for keyboard users and assistive technology.
What glassmorphic card components and modern design patterns does ui-web offer?
ui-web provides glassmorphic card components and modern design patterns built with Tailwind, including glass effect UI design, premium web UI design patterns, and loading states with skeleton spinners. These components maintain accessibility while delivering contemporary aesthetics, allowing you to create visually striking interfaces without sacrificing usability or WCAG compliance.
How does ui-web ensure responsive layouts with consistent spacing?
ui-web designs responsive layouts using an 8px grid system and typography scale that maintain consistency across breakpoints. The skill combines responsive web design principles with semantic color systems and proper spacing conventions, ensuring your layouts adapt gracefully to different screen sizes while preserving visual hierarchy and readability.
What license does ui-web use for its components and patterns?
ui-web is released under the MIT license, allowing you to freely use, modify, and distribute the components, patterns, and templates for both personal and commercial projects with minimal restrictions.
SKILL.md
rendered from the published skill — quoted content, verbatim
UI Design Skill (Web)
MANDATORY: WCAG 2.1 AA Compliance
These rules are NON-NEGOTIABLE. Every UI element must pass these checks.
1. Color Contrast (CRITICAL)
Text Contrast Requirements:
├── Normal text (<18px): 4.5:1 minimum
├── Large text (≥18px bold or ≥24px): 3:1 minimum
├── UI components (buttons, inputs): 3:1 minimum
└── Focus indicators: 3:1 minimum
FORBIDDEN COLOR COMBINATIONS:
✗ gray-400 on white (#9CA3AF on #FFFFFF = 2.6:1) - FAILS
✗ gray-500 on white (#6B7280 on #FFFFFF = 4.6:1) - BARELY PASSES
✗ white on yellow - FAILS
✗ light blue on white - USUALLY FAILS
SAFE COLOR COMBINATIONS:
✓ gray-700 on white (#374151 on #FFFFFF = 9.2:1)
✓ gray-600 on white (#4B5563 on #FFFFFF = 6.4:1)
✓ gray-900 on white (#111827 on #FFFFFF = 16:1)
✓ white on gray-900, blue-600, green-700
2. Visibility Rules (CRITICAL)
``` ALL BUTTONS MUST HAVE: ✓ Visible background color OR visible border (min
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 1 file
skills/ui-web/SKILL.md