{"enrichment":{"faq":[{"a":"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.","q":"How does ui-web help build accessible WCAG 2.1 AA compliant web components?"},{"a":"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.","q":"What dark mode ui design does tailwind css support in ui-web?"},{"a":"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.","q":"How can I style buttons with focus states for accessibility?"},{"a":"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.","q":"What glassmorphic card components and modern design patterns does ui-web offer?"},{"a":"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.","q":"How does ui-web ensure responsive layouts with consistent spacing?"},{"a":"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.","q":"What license does ui-web use for its components and patterns?"}],"shadow_tags":["wcag-compliance","touch-targets","color-contrast","semantic-html","focus-management","screen-reader-support","responsive-design","micro-animations","premium-aesthetics","inclusive-design"],"summary_rewrite":"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\u2014all grounded in Tailwind and modern design principles."},"files":[{"bytes":15166,"path":"skills/ui-web/SKILL.md","sha256":"fab9f64e390bdbfb415c1cf0a8eb59085c1d6f451f004e269378759a07143406","url":"https://skillfed.io/files/alinaqi/maggy/ui-web/c57806b9/SKILL.md"}],"id":"alinaqi/maggy/ui-web","links":{"html":"https://skillfed.io/alinaqi/maggy/ui-web","md":"https://skillfed.io/alinaqi/maggy/ui-web.md","repo":"https://github.com/alinaqi/maggy"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":56,"language":"Python","last_updated":"2026-07-14","license":"MIT","name":"ui-web","publisher":"alinaqi","stars":703},"relations":{"similar":[{"id":"Cap-go/capgo-skills/tailwind-capacitor"},{"id":"manutej/luxor-claude-marketplace/tailwind-css"},{"id":"bobmatnyc/claude-mpm-skills/tailwind"},{"id":"jmsktm/claude-settings/ui-builder"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-advanced-components"},{"id":"AsyrafHussin/agent-skills/tailwind-best-practices"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-framework-integration"},{"id":"patricio0312rev/skills/design-to-component-translator"},{"id":"majesticlabs-dev/majestic-marketplace/tailwind-styling"},{"id":"bobmatnyc/claude-mpm-skills/headlessui"}]},"slug":{"owner":"alinaqi","repo":"maggy","skill":"ui-web"},"version":"c57806b9"}