← ClaudeAtlas

vectojs-styleslisted

Use when styling VectoJS UI with @vectojs/styles — CSS-property-name style objects, var() token themes with setTheme switching, css() merging, font composition, per-axis padding, or migrating CSS/web styling habits onto the numeric Virtual Math Tree.
vectojs/vectojs-skills · ★ 0 · AI & Automation · score 70
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