ui-web
Web UI - glassmorphism, Tailwind, dark mode, accessibility
By alinaqi · 383 installs
npx skills add alinaqi/maggy --skill ui-web
Source repository · Upstream listing
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)
2. Visibility Rules (CRITICAL)
3. Required Element Styles
4. Focus States (REQUIRED)
5. Dark Mode Contrast
Core Philosophy
Beautiful UI is not decoration it's communication. Every visual choice should serve clarity, hierarchy, and user confidence. Default to elegance and restraint.
Design Principles
1. Visual Hierarchy
2. Spacing System (8px Grid)
3. Typography Scale
Glassmorphism (Web)
Base Glass Card
Glass Variants
When to Use Glassmorphism
Color System
Semantic Colors
Gradient Backgrounds
Component Patterns
Buttons
Cards
Input Fields
Micro Interactions
Transitions
Hover Effects
Loading States
Layout Patterns
Container
Section Spacing
Grid Systems
Dark Mode
Implementation
Color Pairing
Accessibility
Contrast Requirements
Focus States
Screen Readers
Anti Patterns
Never Do
Common Mistakes
Quick Reference
Modern Defaults
Premium Feel Checklist