What problem does it solve? Frontend codebases drift into inconsistent styling, unsafe type casts, and ad-hoc component patterns as they grow. This Skill gives an AI assistant the project's exact UI conventions so every generated component follows the same design tokens, type-safety rules, and gamification patterns. ## Core Features & Use Cases - Design token enforcement: Components use semantic tokens from the @theme block in src/styles.css (primary, destructive, skill-*, streak, coin) instead of hardcoded hex values. - Type-safety rules: No as casts in business logic, discriminated unions with exhaustive switch, no non-null assertions, and validated URL search params. - Icon and context conventions: SVG icons imported via ?react with currentColor coloring, and strict context providers built with createStrictContext. - Gamification UI guidance: Chip depth styling, success popups, coin-gain animations, and DuoProgressBar usage for XP, streak, and goal progress. - Use Case: When asked to build a new streak-reward card, the assistant produces a component using border-2 border-b-4 tint styling, token-based colors, and the coin-gain store instead of inventing one-off styles. ## Quick Start Create a new React component for the learner dashboard following the component-patterns rules for tokens, icons, and type safety.
