What problem does it solve? Building a dashboard, SaaS app, or landing page that feels calm, dense, and native requires hundreds of coordinated decisions about color, radius, motion, and copy. This Skill encodes the complete Open Analytics design language—every hex code, spring constant, and radius lifted from the shipped product—so an agent can reproduce it exactly instead of guessing. ## Core Features & Use Cases - Token system: One ink color derives every neutral via color-mix percentages, with light and dark themes, a multiplied radius scale, and two-shadow elevation, installable as a single _root.css block. - Twelve component recipes: Squircle cards, pressing buttons, dropdowns, tab bars with traveling highlights, modals, measured-height multi-step dialogs, pixel-matched skeletons, notice strips, floating pills, toasts, header morphs, and scroll reveals—each with full type-checked React source embedded. - Motion vocabulary: Seven named springs (PANEL, LAYOUT, POP, POP_EXIT, BANNER, FLICK, CHART) cover the entire product, with rules for enter/exit asymmetry and reduced-motion support. - Use Case: Ask your agent to build a settings screen or analytics dashboard; it applies the squircle surface anatomy, fixed-height card grids, and plain-spoken copy voice so the result matches the Open Analytics look. ## Quick Start Use the oa-design skill to build a dashboard stats page with squircle cards, a tab bar, and skeleton loading states following the Open Analytics design language.
