theming

Name: theming
Author: SamuelMaddox

Theme and styling rules for Tailwind v4 + shadcn + design-system tokens

by SamuelMaddox(0) 0 installs

Free

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

See reviews

About

Instruction file imported from SamuelMaddox/health-plan-advisor-web-app (.github/instructions/theming.instructions.md). Copyright stays with the author.

Theme And Styling Instructions

Prefer semantic Tailwind theme utilities in UI code (for example bg-background, text-foreground, border-border).
Avoid raw color utilities when a semantic utility exists.
Do not use --ds-* variables directly in component files.
Keep raw design tokens and token mapping in stylesheet files.
Reuse existing shadcn components and variants before creating custom primitives.
Keep dark/light behavior token-driven; avoid duplicated per-component light/dark color logic unless necessary.

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/samuelmaddox-health-plan-advisor-web-app-theming-instructions/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.

samuelmaddox-health-plan-advisor-web-app-theming-instructions.ocm.jsonjson

{
  "ocm": "1",
  "id": "samuelmaddox-health-plan-advisor-web-app-theming-instructions",
  "kind": "skill",
  "name": "theming",
  "description": "Theme and styling rules for Tailwind v4 + shadcn + design-system tokens",
  "publisher": "SamuelMaddox",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "math"
    ],
    "tags": [
      "skill-md",
      "github-instructions"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "Theme and styling rules for Tailwind v4 + shadcn + design-system tokens"
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github-instructions",
      "repository": "https://github.com/SamuelMaddox/health-plan-advisor-web-app",
      "path": ".github/instructions/theming.instructions.md",
      "ref": "a1a1dffc8da840c708e7185df8fe9cf90c94ddf5",
      "url": "https://github.com/SamuelMaddox/health-plan-advisor-web-app/blob/a1a1dffc8da840c708e7185df8fe9cf90c94ddf5/.github/instructions/theming.instructions.md",
      "key": "SamuelMaddox/health-plan-advisor-web-app/.github/instructions/theming.instructions.md"
    },
    "applies_to": "src/**/*.{ts,tsx,css}"
  },
  "instructions": "# Theme And Styling Instructions\n\n- Prefer semantic Tailwind theme utilities in UI code (for example `bg-background`, `text-foreground`, `border-border`).\n- Avoid raw color utilities when a semantic utility exists.\n- Do not use `--ds-*` variables directly in component files.\n- Keep raw design tokens and token mapping in stylesheet files.\n- Reuse existing shadcn components and variants before creating custom primitives.\n- Keep dark/light behavior token-driven; avoid duplicated per-component light/dark color logic unless necessary.",
  "cost": {
    "context_tokens": 133
  }
}

Fetch it by URL: GET /api/v1/registry/samuelmaddox-health-plan-advisor-web-app-theming-instructions/manifest?version=1.0.0

About

Theme And Styling Instructions

Use it

Manifest

Reviews