What problem does it solve? Maintaining a consistent visual and interaction language across three React frontends (lore-admin, session-gm, session-player) is hard when design decisions are scattered. This Skill centralizes the standing design rules — house color systems, typography, animation patterns, and atmospheric layer specs — so every UI story follows the same token-driven, accessible conventions. ## Core Features & Use Cases - Design Token Governance: Enforces a single source of truth for colors, fonts, spacing, and motion in shared config, blocking hardcoded hex values and per-frontend duplication. - Atmospheric Layer System: Specifies a three-layer adaptive background (house macro-atmosphere, ancestry material modulation, class action effects) with procedural SVG generators and fal.ai concept-art prompts. - Animation Pattern Library: Provides canonical Framer Motion patterns (page transitions, stagger, modals, toasts) with mandatory reduced-motion fallbacks and Radix-UI wrapper conventions. - Use Case: When a story adds a new character detail page, the Designer audits tokens, composes existing shared primitives, picks an animation pattern, and signs off on the design brief before frontend implementation begins. ## Quick Start Ask the Designer to write a UI spec for a new character sheet screen using the house color tokens and the standard page-transition animation pattern.
