[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-95180":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":15,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":16,"rankGlobal":10,"rankLanguage":10,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":18,"hasPages":18,"topics":20,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":10,"trendingCount":15,"starSnapshotCount":15,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},95180,"oa-design","OpenLabs-so\u002Foa-design","OpenLabs-so","The Open Analytics design language as an agent skill: component recipes with type-checked source, token CSS, and a CLI. Works with Claude Code, Cursor, or any agent.","https:\u002F\u002Fgetopen.so",null,"TypeScript",113,5,106,0,42.33,"MIT License",false,"main",[21,22,23,24,25,26,27,28,29],"agent-skill","ai-agents","analytics","claude-code","design-system","motion","react","tailwindcss","ui","2026-08-24 04:01:23","# oa-design\n\nThe design language of [Open Analytics](https:\u002F\u002Fgetopen.so), packaged three\nways: an agent skill, type-checked component recipes, and a CLI. People kept\nasking how the dashboard looks and moves the way it does; this repository is\nthe answer, in a form an agent can execute. Every hex code, spring constant,\nradius and easing is lifted from the shipped product, with the reasoning\nattached.\n\nThe look in one sentence: **white surfaces with continuous-curvature corners,\nresting on a quiet grey stage, drawn in a single ink, moved by a single\nspring.**\n\n## Get it\n\n**CLI** (recipes into your project, shadcn-style):\n\n```sh\nnpx getopen-design list                  # what's available\nnpx getopen-design add tab-bar toast     # recipes into .\u002Foa-design\nnpx getopen-design add --all --code      # everything, .tsx source included\nnpx getopen-design tokens                # just the token CSS\nnpx getopen-design skill                 # agent skill into .claude\u002Fskills\n```\n\n**Claude Code**, without the CLI:\n\n```sh\ngit clone https:\u002F\u002Fgithub.com\u002FOpenLabs-so\u002Foa-design\ncp -r oa-design\u002Fskills\u002Foa-design .claude\u002Fskills\u002Foa-design\n```\n\n**Any other agent** (Cursor, Codex, plain chat): grab\n[`DESIGN-SKILL.md`](DESIGN-SKILL.md), the whole language compiled into one\nfile, and point your rules at it:\n\n```\nWhen building or styling UI, follow DESIGN-SKILL.md in full.\n```\n\n## What's in the box\n\n```\nskills\u002Foa-design\u002F     the agent skill\n├── SKILL.md          ten rules, the spring table, the index\n├── _root.css         the installable token block everything reads from\n├── 01…12-*.md        one recipe per component, full source embedded\n└── _*.md             guides: tokens, layout, components, motion, landing, copy\n\ncomponents\u002F           the type-checked source the recipes embed\n├── _lib\u002F             cn + the seven springs as constants\n└── \u003Cslug>\u002F           squircle-card, button, dropdown, tab-bar, modal,\n                      multi-step-dialog, skeleton, notice-strip,\n                      floating-pill, toast, header-morph, reveal\n\ncli\u002F                  the getopen-design npm package\nDESIGN-SKILL.md       everything in one file, for pasting\n```\n\nThe recipes are the consumer format and they are never written by hand:\n`node build\u002Fsync.mjs` injects the compiled source from `components\u002F` into\neach recipe (and `--cli` mirrors the payload into the npm package), so the\ncode in the MDs is exactly the code `npm run typecheck` passes.\n\n## What's inside the language\n\n- One ink, every neutral derived from it by `color-mix` percentages.\n- The squircle surface system (CSS `shape()` clip-path, both layers, exact\n  radii) behind the cards.\n- A seven-spring motion vocabulary covering the entire product, plus the\n  signature moves: the measured-height dialog choreography, the tab bar's\n  label mask, the landing header's glass morph, the blur skeleton arrival.\n- Layout as plates, fixed-height card grids, the notice and floating-pill\n  patterns, toast physics.\n- The copy voice, because half the design is the words.\n- The quality floor: focus rings, reduced motion, no sideways scroll.\n\n## What this is not\n\nNot a component library and not a theme package: nothing here depends on us\nat runtime. The values were written against React + Tailwind v4 +\n[`motion`](https:\u002F\u002Fmotion.dev), but they are plain CSS numbers and spring\nconstants; port them anywhere. If your project already has a design system,\nyours wins; use this to fill gaps.\n\n## Credits\n\n- Built from the shipped UI of [Open Analytics](https:\u002F\u002Fgetopen.so), which is\n  itself [open source](https:\u002F\u002Fgithub.com\u002FOpenLabs-so\u002Fopenanalytics).\n- The repository shape (recipes + skill + CLI from one source) follows\n  [Jakub Antalik's transitions.dev](https:\u002F\u002Fgithub.com\u002FJakubantalik\u002Ftransitions.dev),\n  which also inspired our skeleton blur arrival. Thank you.\n\n## License\n\nMIT. Use it, ship it, sell what you build with it. A link back is\nappreciated but not required.\n",2,"2026-08-23 02:30:02","CREATED_QUERY"]