vectojs-styleslisted
Install: claude install-skill vectojs/vectojs-skills
# VectoJS Styles
Use this skill to write VectoJS component styling that reads like CSS without
a parser, cascade, or selector. `@vectojs/styles` maps typed style objects
onto numeric entity fields; `var(--key)` token references resolve against a
flat theme and re-apply on `setTheme`.
## Core workflow
1. Confirm the installed `@vectojs/styles` version; the API below is 0.2.0+.
2. Define a theme once: `setTheme(tokens({ accent: '#2563eb', 'radius-md': 8 }))` — flat keys, no `--` prefix; `PRESET_THEMES` ships `light` (default) / `dark` / `github` / `dracula`.
3. Write styles with `style({...})` (typed identity) and merge variants with `css(base, override, ...)` — later sources win, `null`/`false` skipped.
4. Reference tokens in values: `backgroundColor: 'var(--accent)'` — styles containing `var()` are tracked and re-applied automatically when `setTheme(next)` runs, recolouring the scene.
5. Apply: `applyStyle(entity, style)` writes mapped fields and returns `{ applied }`; it marks the scene dirty once when anything was written.
6. Verify with `@vectojs/devtools` headless: `inspectEntity`/`pickInScene` read the same fields `applyStyle` wrote.
## Key mapping (CSS name → entity field)
| CSS key | Field / behaviour |
| --------------------------------------- | ---------------------------------------------------------------------- |
| `x`/`y`/`width`/`height` | same; bare number o