css

Name: css
Author: ikaschenko

CSS styling conventions — design tokens, plain CSS, no frameworks.

by ikaschenko(0) 0 installs

Free

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

See reviews

About

Instruction file imported from ikaschenko/quick-expense (.github/instructions/css.instructions.md). Copyright stays with the author.

All styles live in this single file — no CSS modules, CSS-in-JS, or utility frameworks (Tailwind, etc.).
Use existing design tokens (CSS custom properties) defined in :root:
- Colors: --color-accent, --color-bg, --color-surface, --color-text-primary, --color-error, etc.
- Spacing: --space-1 (4px) through --space-10 (40px).
- Typography: --font-size-xs through --font-size-3xl.
- Radius: --radius-sm, --radius-md, --radius-lg, --radius-full.
- Shadows: --shadow-sm, --shadow-md, --shadow-lg.
Button classes: .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-inline.
Card classes: .card, .card-hover.
Use BEM-like naming for component-specific classes: .home-status-card, .home-status-label.
Mobile-first: most components are already responsive. Use media queries when needed.

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/ikaschenko-quick-expense-css-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.

ikaschenko-quick-expense-css-instructions.ocm.jsonjson

{
  "ocm": "1",
  "id": "ikaschenko-quick-expense-css-instructions",
  "kind": "skill",
  "name": "css",
  "description": "CSS styling conventions — design tokens, plain CSS, no frameworks.",
  "publisher": "ikaschenko",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "general"
    ],
    "tags": [
      "skill-md",
      "github-instructions"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "CSS styling conventions — design tokens, plain CSS, no frameworks."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github-instructions",
      "repository": "https://github.com/ikaschenko/quick-expense",
      "path": ".github/instructions/css.instructions.md",
      "ref": "b4e5dbef1841ee98c0ec7211ebdb0cc4b89d073b",
      "url": "https://github.com/ikaschenko/quick-expense/blob/b4e5dbef1841ee98c0ec7211ebdb0cc4b89d073b/.github/instructions/css.instructions.md",
      "key": "ikaschenko/quick-expense/.github/instructions/css.instructions.md"
    },
    "applies_to": "app-web/index.css"
  },
  "instructions": "- All styles live in this single file — no CSS modules, CSS-in-JS, or utility frameworks (Tailwind, etc.).\n- Use existing design tokens (CSS custom properties) defined in `:root`:\n  - Colors: `--color-accent`, `--color-bg`, `--color-surface`, `--color-text-primary`, `--color-error`, etc.\n  - Spacing: `--space-1` (4px) through `--space-10` (40px).\n  - Typography: `--font-size-xs` through `--font-size-3xl`.\n  - Radius: `--radius-sm`, `--radius-md`, `--radius-lg`, `--radius-full`.\n  - Shadows: `--shadow-sm`, `--shadow-md`, `--shadow-lg`.\n- Button classes: `.btn`, `.btn-primary`, `.btn-secondary`,",
  "cost": {
    "context_tokens": 217
  }
}

Fetch it by URL: GET /api/v1/registry/ikaschenko-quick-expense-css-instructions/manifest?version=1.0.0

About

Use it

Manifest

Reviews