Skip to content
Skillv1.0.0

designlang-tokens

Use when styling UI for posthog.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.

by manavarya09(0) 0 installs
Free
Sign in to install

Free account. Installing gives you the manifest plus copy-paste snippets.

See reviews

About

Imported from Manavarya09/design-extract (website/public/gallery/posthog-com/.claude/skills/designlang/SKILL.md). Install upstream with npx skills add Manavarya09/design-extract --skill designlang. Copyright stays with the author.

designlang tokens

Source: https://posthog.com Extracted by designlang v7.0.0 on 2026-06-25T08:30:19.935Z

Semantic tokens (use these)

  • color.action.primary: #e1d7c2
  • color.surface.default: #e5e7e0
  • color.text.body: #000000
  • radius.control: 2px
  • typography.body.fontFamily: IBM Plex Sans Variable

Regions

  • sidebar
  • nav
  • sidebar
  • pricing
  • pricing
  • footer
  • nav

How to use

  • Prefer semantic.* tokens over primitive.*.
  • Never invent new tokens or hex values; reuse the ones above.
  • When a value is missing, pick the closest existing semantic token and flag the gap.
  • Reference tokens by their dotted path (e.g. semantic.color.action.primary).

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml
targets:
  - https://api.opensmartroute.ai/api/v1/registry/manavarya09-design-extract-designlang/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

manavarya09-design-extract-designlang.ocm.jsonjson
{
  "ocm": "1",
  "id": "manavarya09-design-extract-designlang",
  "kind": "skill",
  "name": "designlang-tokens",
  "description": "Use when styling UI for posthog.com — references the extracted design system tokens instead of inventing colors, spacing, or typography.",
  "publisher": "Manavarya09",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "github"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Use when styling UI for posthog.com — references the extracted design system tokens instead of inventing colors, spacing, or typography."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github",
      "repository": "https://github.com/Manavarya09/design-extract",
      "path": "website/public/gallery/posthog-com/.claude/skills/designlang/SKILL.md",
      "ref": "a9e832efe304330a7fc491511c0ca30a34bc0106",
      "url": "https://github.com/Manavarya09/design-extract/blob/a9e832efe304330a7fc491511c0ca30a34bc0106/website/public/gallery/posthog-com/.claude/skills/designlang/SKILL.md",
      "key": "Manavarya09/design-extract/website/public/gallery/posthog-com/.claude/skills/designlang/SKILL.md"
    }
  },
  "instructions": "# designlang tokens\nSource: https://posthog.com\nExtracted by designlang v7.0.0 on 2026-06-25T08:30:19.935Z\n\n## Semantic tokens (use these)\n- color.action.primary: #e1d7c2\n- color.surface.default: #e5e7e0\n- color.text.body: #000000\n- radius.control: 2px\n- typography.body.fontFamily: IBM Plex Sans Variable\n\n## Regions\n- sidebar\n- nav\n- sidebar\n- pricing\n- pricing\n- footer\n- nav\n\n## How to use\n- Prefer `semantic.*` tokens over `primitive.*`.\n- Never invent new tokens or hex values; reuse the ones above.\n- When a value is missing, pick the closest existing semantic token and flag the gap.\n- Refere",
  "cost": {
    "context_tokens": 167
  }
}

Fetch it by URL: GET /api/v1/registry/manavarya09-design-extract-designlang/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.