What problem does it solve?
This Skill ensures the creation of high-quality, metric-based digital interfaces, correcting common UI clichés and enforcing strict component architecture.
Core Features & Use Cases
- Metric-Based Design: Adheres to defined design variance, motion intensity, and visual density metrics.
- Component Architecture: Enforces strict dependency verification, framework usage, and state management conventions.
- Styling Policy: Utilizes Tailwind CSS with version locking and anti-emoji policy.
- Anti-Slop Implementation: Combats generic AI designs with engineered rules for typography, color calibration, layout diversification, and more.
- Performance Guardrails: Implements performance optimizations like hardware acceleration and DOM cost management.
- Technical Reference: Provides detailed guidance on design variance, motion intensity, visual density, and other technical aspects.
- Forbidden Patterns: Outlines common AI design mistakes to avoid.
- Creative Arsenal: Offers high-end inspiration for UI design.
- Motion-Engine Bento Paradigm: Describes a "Bento 2.0" architecture for modern SaaS dashboards.
- Final Pre-Flight Check: Provides a checklist for code evaluation before output.
Quick Start
Use the design-taste-frontend skill to create a new UI component adhering to the specified design metrics and conventions.