What problem does it solve?
Inconsistent UI styling, "magic numbers," and inline styles degrade design quality, increase technical debt, and slow down development. This Skill rigorously enforces the Liquid Glass design system, preventing deviations and ensuring a premium, consistent user experience across your application.
Core Features & Use Cases
- Token-Based Styling: Guides the use of predefined glass, shadow, color, and typography tokens, eliminating guesswork and ensuring consistency.
- Banned Patterns Detection: Identifies and corrects common anti-patterns like hardcoded values and inline styles that duplicate existing tokens.
- Automated Visual QA (Nano Banana Sentinel): Integrates with visual AI to perform design compliance checks, ensuring components visually match design specifications.
- Use Case: When building a new button, you can ask the AI to "Ensure this button adheres to the Liquid Glass design system for primary CTAs." The AI will guide you to use
liquid-glass, shadow-ultra, and appropriate transitions.
Quick Start
Create a new card component. Ensure it uses the glass-refined class, shadow-diffused, and text-primary for its title, adhering to the design system.
