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
Decision gist · record as of 2026-07-14
ui-web helps you build WCAG 2.1 AA compliant web UI components with glassmorphism and dark mode. 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.
Use it when
- ui-web supports Tailwind dark mode implementation with proper contrast and color pairing to maintain WCAG AA compliance in both light.
- ui-web teaches button styling with focus states by providing clear, visible focus indicators that meet accessibility standards.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
alinaqi/maggy/ui-web · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 1 file
skills/ui-web/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build accessible, WCAG 2.1 AA compliant web UI components”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Apply Tailwind CSS to Capacitor mobile applications with guidance on responsive mobile design, notch and safe area handling, and touch-optimized components. Covers dark mode integration, 44px minimum touch targets, and mobile-specific patterns like bottom sheets and swipe actions.
Master Tailwind CSS, the utility-first framework that lets you build custom interfaces by composing single-purpose classes directly in your markup. This skill covers responsive design, dark mode, theme customization, component patterns, and production-ready optimization techniques.
Build styled React components using Tailwind's utility-first approach with mobile-first responsive design. Includes patterns for buttons, cards, forms, and layouts alongside dark mode support and custom configuration.
This skill covers Tailwind CSS, a utility-first framework that lets you compose designs from low-level utility classes instead of writing CSS. Learn responsive design patterns, dark mode implementation, configuration options, and how to integrate Tailwind into modern component frameworks.
Tailwind Coder styles Rails applications with Tailwind CSS utility classes and responsive breakpoints. It provides patterns for common Rails elements like forms, links, cards, grids, and tables, plus helper methods to reduce repetition across views.
Ui Builder guides you through constructing accessible, responsive interfaces with React and Tailwind CSS. It covers mobile-first design, semantic HTML, performance optimization, and reusable component patterns including buttons, cards, inputs, dialogs, and forms.
More skills tailwindcss-advanced-components (MIT) · tailwind-best-practices (MIT) · tailwindcss-framework-integration (MIT) · tailwindcss-responsive-darkmode (MIT) · design-to-component-translator (MIT)