What problem does it solve? Applying a translucent glass visual style to a production wellness app risks breaking readability, accessibility, performance, and emergency-state clarity. This Skill provides a normative design-engineering contract that keeps the Liquid Glass rebuild consistent with the existing React + TypeScript + Vite architecture. ## Core Features & Use Cases - Material hierarchy rules: Defines primary, secondary, elevated, subtle, and solid glass surfaces with explicit guidance on which components (BottomNav, AppShell, dialogs, cards, lists) may use each. - Accessibility and performance budgets: Enforces WCAG AA contrast, 44px touch targets, reduced-motion/reduced-transparency fallbacks, and a limit of roughly six blurred containers per mobile viewport. - Component mapping and token integration: Maps existing Radix primitives, layout shells, and domain pages to materials while extending the current token registry instead of creating a parallel system. - Use Case: When rebuilding the WellMate frontend visuals, use this Skill to decide whether a given component should be glass or solid, and to validate the result against accessibility, responsive, and performance checklists. ## Quick Start Use the wellmate-liquid-glass skill to review my planned glass treatment for the BottomNav component and confirm it meets the accessibility and performance requirements.
