{
 "schema_version": 1,
 "generated": "2026-10-30",
 "id": "openlabs-so-oa-design--give-claude-code-open-analytics-design-skill",
 "repo": "OpenLabs-so/oa-design",
 "repo_url": "https://github.com/OpenLabs-so/oa-design",
 "repo_slug": "openlabs-so-oa-design",
 "title": "Teach Claude Code the Open Analytics design rules",
 "page_title": "How to teach Claude Code the Open Analytics design rules with Oa Design",
 "summary": "Install the Oa Design agent skill so Claude Code styles new UI with the same rules, springs and copy voice.",
 "who": "A developer using Claude Code who keeps getting generic-looking interfaces and wants the agent to follow a fixed design language.",
 "problem": "Each new screen needs the same corner radii, ink colour, motion and focus rules, and an agent without them drifts.",
 "outcome": "Claude Code loads the Oa Design skill from .claude/skills and applies its ten rules, spring table and recipes when building UI.",
 "steps": [
  "Run `git clone https://github.com/OpenLabs-so/oa-design` in a folder outside your project.",
  "Run `cp -r oa-design/skills/oa-design .claude/skills/oa-design` from the folder that contains both your project and the clone, or copy the folder by hand.",
  "Alternatively, run `npx getopen-design skill` in your project to install the skill into .claude/skills.",
  "Start Claude Code in the project and ask it to build one small card with a button.",
  "Check that the card uses the skill's radius, ink and spring choices."
 ],
 "agent_prompt": "Install the oa-design skill from OpenLabs-so/oa-design into .claude/skills in <project-path>, then build a settings card in <target-file> following it. Expected output: a component that uses the skill's tokens and spring values. Verify that the skill folder exists and the file imports the token CSS.",
 "agents": [
  "claude-code"
 ],
 "difficulty": "Intermediate",
 "time": "30 minutes",
 "basis": "readme",
 "caveat": "The README describes the skill as a set of rules and recipes, so output quality depends on what the agent follows, and you should review its result.",
 "category": "Software and DevOps",
 "tags": [
  "Software and DevOps"
 ],
 "lang": "typescript",
 "requirements": [
  "npm, for the npx commands",
  "git, for cloning the repository",
  "A React and Tailwind v4 project, which the values were written against (the README says the values are plain CSS and can be ported)",
  "A coding agent such as Claude Code, Cursor, or Codex, if you want the agent to apply the design"
 ],
 "risk": "none",
 "seen_in_the_wild": false,
 "mentioned_publicly": false,
 "risks": [
  {
   "tag": "reverse-engineering",
   "notice": "The values were taken from the shipped Open Analytics product, so reuse the approach and tokens for your own product and avoid copying their brand identity."
  }
 ],
 "best": false,
 "score": 0.9,
 "evidence": [],
 "url": "https://dedupedai.com/use-cases/openlabs-so-oa-design/give-claude-code-open-analytics-design-skill/",
 "md": "https://dedupedai.com/use-cases/openlabs-so-oa-design/give-claude-code-open-analytics-design-skill/index.md",
 "disclaimer": "Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked \"Seen in the wild\", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email hello@dedupedai.com and we will look at it promptly.",
 "api": "https://dedupedai.com/api/v1/usecases/openlabs-so-oa-design--give-claude-code-open-analytics-design-skill.json",
 "api_version": "v1"
}