What problem does it solve? Frontend developers often produce inconsistent UI when styling components ad hoc, mixing hardcoded colors, wrong border depths, and off-brand patterns. This Skill enforces a single Duolingo-inspired gamification design system so every card, button, and progress bar follows the same tokens and rules. ## Core Features & Use Cases - Design tokens and color rules: Provides semantic Tailwind token classes (bg-primary, bg-success, bg-skill-*) with a strict forbidden list of hardcoded palettes, hex codes, and dark: variants. - Component patterns: Supplies copy-ready class strings for buttons, cards, MCQ options, inputs, 3D progress bars, chips, dialogs, and coin badges, including the signature border-2 border-b-4 depth formula. - Icon and copy guidelines: Defines a 3-layer icon system (Icons8 3D PNG, Lucide, custom brand assets) plus Vietnamese encouraging copy rules with no Unicode emoji. - Use Case: When building a new exercise result screen in the React frontend, load this Skill to generate the correct success/destructive feedback cards, 3D progress bar, and score-based encouragement text without consulting the full RFC. ## Quick Start Use the design-system skill to style this new React component according to the Duolingo gamification patterns.
