themes

Name: themes
Author: indielayer

When changing one theme variant, check whether the others need the same logical change.

by indielayer(0) 0 installs

Free

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

See reviews

About

Instruction file imported from indielayer/ui (.cursor/rules/themes.mdc). Copyright stays with the author.

description: Component theme files (shipped variants: base, carbon) globs: packages/ui/**/*.theme.ts alwaysApply: false

Themes

Every styled component needs a *.<id>.theme.ts for each shipped theme (currently base, carbon)
Import *Theme type from the sibling .vue file
classes keys map to template slots/elements; use function form ({ props, slots, data }) => [...]
styles uses colors.getPalette(), css(), and CSS variables — follow Button.base.theme.ts
Export default theme object; register in every themes/<id>/components.ts with matching key name
Global theme entries: packages/ui/src/themes/<id>/index.ts (classPrefix: 'x-')
New shipped theme pack: .cursor/skills/add-theme/SKILL.md

When changing one theme variant, check whether the others need the same logical change.

Reference: packages/ui/src/components/button/theme/Button.base.theme.ts

Use it

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

# after Install: the listing is in your workspace's routing pool - a plan picks it for its slot
curl -s -X POST https://api.opensmartroute.ai/api/v1/route -H 'Authorization: Bearer $OSR_API_KEY' -H 'Content-Type: application/json' -d '{"text": "...", "plan": true}'

Manifest

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

indielayer-ui-themes-rule.ocm.jsonjson

{
  "ocm": "1",
  "id": "indielayer-ui-themes-rule",
  "kind": "skill",
  "name": "themes",
  "description": "When changing one theme variant, check whether the others need the same logical change.",
  "publisher": "indielayer",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "coding"
    ],
    "tags": [
      "skill-md",
      "github-cursor-rules"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "When changing one theme variant, check whether the others need the same logical change."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github-cursor-rules",
      "repository": "https://github.com/indielayer/ui",
      "path": ".cursor/rules/themes.mdc",
      "ref": "b6221ed6e52e94e2cdf0546d0eefc8e22a2a0e82",
      "url": "https://github.com/indielayer/ui/blob/b6221ed6e52e94e2cdf0546d0eefc8e22a2a0e82/.cursor/rules/themes.mdc",
      "key": "indielayer/ui/.cursor/rules/themes.mdc"
    }
  },
  "instructions": "---\ndescription: Component theme files (shipped variants: base, carbon)\nglobs: packages/ui/**/*.theme.ts\nalwaysApply: false\n---\n\n# Themes\n\n- Every styled component needs a `*.<id>.theme.ts` for each shipped theme (currently `base`, `carbon`)\n- Import `*Theme` type from the sibling `.vue` file\n- `classes` keys map to template slots/elements; use function form `({ props, slots, data }) => [...]`\n- `styles` uses `colors.getPalette()`, `css()`, and CSS variables — follow `Button.base.theme.ts`\n- Export default theme object; register in every `themes/<id>/components.ts` with matching key name\n- Glo",
  "cost": {
    "context_tokens": 226
  }
}

Fetch it by URL: GET /api/v1/registry/indielayer-ui-themes-rule/manifest?version=1.0.0

About

description: Component theme files (shipped variants: base, carbon) globs: packages/ui/**/*.theme.ts alwaysApply: false

Themes

Use it

Manifest

Reviews