Agent skill

Unovis TS Skilld

by skilld-dev in skilld-dev/vue-ecosystem-skills

A skill your agent uses when building charts, network graphs, timelines, or maps with @unovis/ts in vanilla TypeScript or JavaScript.

MITAuto-check passedDevelopment

Install Unovis TS Skilld

skills CLI
$ npx skills add skilld-dev/vue-ecosystem-skills --skill unovis-ts-skilld -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install skilld-dev/vue-ecosystem-skills unovis-ts-skilld --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/skilld-dev/vue-ecosystem-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/unovis-ts-skilld .claude/skills/unovis-ts-skilld && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
unovis-ts-skilld
GitHub stars
181
Token cost
~2.1k tokens
SKILL.md length
579 words
Files
4 (incl. references)
Skills in repo
34
Repo updated
First seen
Licence
MIT

At a glance

A skill your agent uses when building charts, network graphs, timelines, or maps with @unovis/ts in vanilla TypeScript or JavaScript.

  • Building charts
  • SKILL.md covers TypeScript setup, Architecture, Update lifecycle and Sizing, plus 3 more sections
  • Calls npm; reaches unovis.dev
  • Maps with @unovis/ts in vanilla TypeScript

What it does

Unovis TS Skilld is an agent skill from skilld-dev/vue-ecosystem-skills. Use when building charts, network graphs, timelines, or maps with @unovis/ts in vanilla TypeScript or JavaScript. Provides correct container and component setup, accessor and config patterns, update and destroy lifecycle, tooltip, crosshair, and styling rules for Unovis 1.7.x.

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 4 other files, including reference files (for example `references/api-surface.md`, `references/components.md` and `references/styling.md`).

It sits in Development. It works with TypeScript and JavaScript. The repository describes itself as: Agent Skills for the Vue ecosystem, written from current docs, issues, and releases. The licence is MIT.

When your agent uses it

  • Building charts
  • Maps with @unovis/ts in vanilla TypeScript

Example prompts

  • “/unovis-ts-skilld”

Requirements

  • Node.js

What it can do on your machine

Read from SKILL.md and the folder at commit c8994af. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • unovis.dev

    Also links to:

    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Unovis TS Skilld loads about 2.1k tokens when it runs, and up to ~7.5k if it reads all its reference files. Until then it costs about 74 tokens; SKILL.md has 579 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~74
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~7.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from skilld-dev/vue-ecosystem-skills at commit c8994af, republished under its MIT licence (© skilld-dev). 579 words, ~2,054 tokens.

Download SKILL.mdSave it as .claude/skills/unovis-ts-skilld/SKILL.md (or your agent's skills folder). This skill also uses 3 other files; get the full folder from GitHub.
name
unovis-ts-skilld
description
Use when building charts, network graphs, timelines, or maps with @unovis/ts in vanilla TypeScript or JavaScript. Provides correct container and component setup, accessor and config patterns, update and destroy lifecycle, tooltip, crosshair, and styling rules for Unovis 1.7.x.

@unovis/ts

Unovis core package for vanilla TypeScript/JavaScript. Version 1.7.0, Apache-2.0, ES modules only ("type": "module"). Renders SVG (plus Leaflet/MapLibre for maps) into a DOM element. Source paths cited below are relative to the package root (node_modules/@unovis/ts/).

Install (per README.md and https://unovis.dev/docs/intro):

bash
npm install -P @unovis/ts

TypeScript setup

  • Enable allowSyntheticDefaultImports in compilerOptions (required by Unovis dependencies). Source: https://unovis.dev/docs/intro
  • If tsconfig.json lists types explicitly, add "topojson-client" to it. Source: https://unovis.dev/docs/intro
  • Styles are injected at runtime via @emotion/css (declared in package.json sideEffects: styles/index.js). Importing any component injects the global CSS variables. Do not import a CSS file; there is none. For strict CSP sites read https://unovis.dev/docs/guides/csp

Architecture

Three building blocks (README.md, index.js):

  • Containers own the DOM element, the data, size, and rendering.
    • XYContainer(element, config, data) — multiple XY components plus xAxis, yAxis, tooltip, crosshair, annotations slots (containers/xy-container/config.d.ts).
    • SingleContainer(element, config, data) — exactly one component (component slot), e.g. Graph, Sankey, TopoJSONMap, Donut, Treemap (containers/single-container/config.d.ts).
  • Components are constructed with their config: new Line({ x, y }). They hold no data; the container feeds them the data array.
  • Standalone components need no container: LeafletMap, LeafletFlowMap, and the legends (BulletLegend, RollingPinLegend, FlowLegend). Source: https://unovis.dev/docs/intro

Data records are generic (Line<Datum>), read through accessors: a value or a function (d, i) => value. Types in types/accessor.d.ts: NumericAccessor, StringAccessor, ColorAccessor, BooleanAccessor, GenericAccessor.

ts
import { Axis, Line, XYContainer } from '@unovis/ts'

type DataRecord = { x: number; y: number }
const data: DataRecord[] = [
  { x: 0, y: 0 },
  { x: 1, y: 2 },
  { x: 2, y: 1 },
]

const line = new Line<DataRecord>({
  x: d => d.x,
  y: d => d.y,
})

const chart = new XYContainer(document.getElementById('vis-container')!, {
  components: [line],
  xAxis: new Axis(),
  yAxis: new Axis(),
}, data)

Individual imports are tree-shakable and equivalent (@unovis/ts/containers/xy-container, @unovis/ts/components/line, ...). Source: https://unovis.dev/docs/quick-start. Heavy parts (Graph layouts, LeafletMap renderer) load via dynamic import after initialization.

Update lifecycle

Data lives on the container; configs live on components. Update through the container's public API (containers/xy-container/index.d.ts):

MethodPurpose
setData(data, preventRender?)Replace the data array
updateContainer(config, preventRender?)Merge container config
updateComponents(configs[], preventRender?)Merge configs, index-aligned with components
update(containerConfig, componentConfigs?, data?)All at once

SingleContainer has updateComponent (singular) instead of updateComponents (containers/single-container/index.d.ts). Pass preventRender: true to defer rendering when batching updates.

Always call chart.destroy() when tearing down (SPA route change, test teardown). It removes the ResizeObserver, DOM node, and timers (core/container/index.d.ts).

Sizing

Container config width/height accept pixels or CSS units but not % (core/container/config.d.ts). For percentage sizing, set width/height via CSS on the container's DOM element instead. sizing controls fit behavior: Sizing.Fit (default), Sizing.Extend, Sizing.FitWidth (types/component.d.ts).

Show full SKILL.md (238 more words)Show less

Common recipes

Tooltip and crosshair go in the container config, not the components array:

ts
import { Axis, Crosshair, Line, Tooltip, XYContainer } from '@unovis/ts'

const tooltip = new Tooltip()
const crosshair = new Crosshair<DataRecord>({
  color: d => d.color ?? null,
  template: d => `<div>${d.x}: ${d.y}</div>`,
})

const chart = new XYContainer(el, {
  components: [line],
  xAxis: new Axis(),
  yAxis: new Axis(),
  tooltip,
  crosshair,
}, data)

Stacked bars use one y accessor per stack level:

ts
import { Axis, StackedBar, XYContainer } from '@unovis/ts'

const bar = new StackedBar<DataRecord>({
  y: [d => d.a, d => d.b],
})
new XYContainer(el, { components: [bar], xAxis: new Axis(), yAxis: new Axis() }, data)

A graph lives in a SingleContainer with { nodes, links } data:

ts
import { Graph, GraphLayoutType, SingleContainer } from '@unovis/ts'

const graph = new Graph<GraphNodeDatum, GraphLinkDatum>({
  layoutType: GraphLayoutType.Force,
  linkStroke: l => l.color ?? null,
  nodeSize: n => n.size ?? 10,
})

const chart = new SingleContainer(el, { component: graph }, {
  nodes: [{ id: 'a' }, { id: 'b' }],
  links: [{ source: 'a', target: 'b' }],
})

Events are declared per-component with CSS selectors exposed as static selectors on each component class (core/component/config.d.ts):

ts
const area = new Area<DataRecord>({
  x: d => d.x,
  y: d => d.y,
  events: {
    [Area.selectors.area]: {
      click: d => console.log('clicked', d),
    },
  },
  attributes: { // stable hooks for E2E tests
    [Area.selectors.area]: { 'test-value': d => String(d.y) },
  },
})

Map with bundled TopoJSON (maps.d.ts exports WorldMapTopoJSON, USATopoJSON, GermanyTopoJSON, UKTopoJSON, FranceTopoJSON, IndiaTopoJSON, ChinaTopoJSON, USCountiesTopoJSON, WorldMapSimplestTopoJSON, WorldMap110mAlphaTopoJSON):

ts
import { SingleContainer, TopoJSONMap, WorldMapTopoJSON } from '@unovis/ts'

const map = new TopoJSONMap<AreaDatum, PointDatum>({
  topojson: WorldMapTopoJSON,
  mapFeatureName: 'countries',
  areaColor: d => d.color ?? null,
  pointColor: d => d.color ?? null,
  longitude: d => d.longitude ?? null,
  latitude: d => d.latitude ?? null,
})
new SingleContainer(el, { component: map }, areaData)

Rules and pitfalls

  • Do not mutate component.config or container.config directly; call the update* methods so changes merge with defaults and re-render.
  • Axis instances for xAxis/yAxis need no type; the container assigns it (containers/xy-container/config.d.ts). Set type only for a standalone Axis in components.
  • Colors: component color accessors returning null fall back to the container palette (--vis-color<N> CSS variables). Use colorKeys on XY components to map series to colors (core/xy-component/config.d.ts).
  • Animation duration: container duration overrides all components; component duration (default 600) applies to data transitions.
  • Numeric string enums (CurveType, SymbolType, Position, ...) also accept their raw string values, e.g. curveType: 'monotoneX'.
  • Package targets browsers. Node usage needs a DOM shim (the library's own tests run Vitest with jsdom, package.json scripts).

References

  • API surface — full export catalog, container and component class API, events/attributes, tooltips.
  • Components — per-component key configs, defaults, and data shapes.
  • Styling and theming — color palette, CSS variables, dark theme, patterns, testing.

Official documentation: https://unovis.dev/docs/intro — component reference at https://unovis.dev/docs/components/<Name> (e.g. /docs/components/Line), containers at /docs/containers/XY_Container and /docs/containers/Single_Container. Gallery: https://unovis.dev/gallery. Release notes: https://github.com/f5/unovis/releases (current prepared version 1.7.0, package.json).

© skilld-dev, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 3 other files (references) in skills/unovis-ts-skilld of skilld-dev/vue-ecosystem-skills.

  • SKILL.md
  • references/api-surface.md
  • references/components.md
  • references/styling.md

Open the folder on GitHubat commit c8994af

Compare with similar skills

Unovis TS Skilld next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Unovis TS Skilld compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Unovis TS Skilld this skillskilld-dev/vue-ecosystem-skills181—~2.1kAutomated safety check: PassMIT
Code Review ChecklistshareAI-lab/learn-claude-code78k5 repos~1.1kAutomated safety check: PassMIT
Install Anti-Slop Oxlint Rulesdmmulroy/anti-slop5.3k—~2.2kAutomated safety check: PassMIT
Generate Release Notesteambit/bit18k—~2.2kAutomated safety check: PassCustom licence
Pnpm Engineteambit/bit18k—~1.9kAutomated safety check: PassCustom licence
Convert Internal Package to TypeScriptTryGhost/Ghost56k—~1.2kAutomated safety check: PassMIT

Similar skills

  • Code Review Checklist

    shareAI-lab/learn-claude-code

    Reviews code against a five-part checklist covering security, correctness, performance, maintainability and testing, and reports findings in a fixed format.

    78k GitHub starsUsed in 5 repos~1.1k tokens
    DevelopmentAuto-check passed
  • Installs, updates or migrates the vendored anti-slop Oxlint plugin in a repository, keeping local rule changes and the plugin's license and provenance files.

    5.3k GitHub stars~2.2k tokensUpdated 28 days ago
    DevelopmentAuto-check passed
  • Generate comprehensive release notes for Bit from git commits and pull requests.

    18k GitHub stars~2.2k tokensUpdated today
    DevelopmentAuto-check passed
  • Pnpm Engine

    teambit/bit

    Work on the pnpm Rust engine (@pnpm/napi, the pacquet crates) that bit install runs through.

    18k GitHub stars~1.9k tokensUpdated today
    DevelopmentAuto-check passed
  • Moves a legacy internal Ghost package from JavaScript and CommonJS to TypeScript and ESM in three focused commits that keep git file history intact.

    56k GitHub stars~1.2k tokensUpdated today
    DevelopmentAuto-check passed
  • Measures a code port between languages or frameworks with jscpd's function-level comparison, porting tests before code and tracking what is left unmatched.

    6.4k GitHub stars~5k tokensUpdated today
    DevelopmentAuto-check passed

More from skilld-dev/vue-ecosystem-skills

All 34 skills in this repo
  • Floating UI Vue Skilld

    skilld-dev/vue-ecosystem-skills

    Floating UI for Vue (@floating-ui/vue@2.0.1). An agent skill from skilld-dev/vue-ecosystem-skills.

    181 GitHub stars~1.3k tokensUpdated 16 days ago
    Auto-check passed
  • Formkit Core Skilld

    skilld-dev/vue-ecosystem-skills

    A skill your agent uses whenever writing, debugging, or reviewing code that imports @formkit/core — FormKit's framework-agnostic core (node trees, values, events, hooks, message stores, ledgers…

    181 GitHub stars~2.1k tokensUpdated 16 days ago
    Auto-check passed
  • Pinia Colada Skilld

    skilld-dev/vue-ecosystem-skills

    Data fetching layer for Vue built on Pinia. An agent skill from skilld-dev/vue-ecosystem-skills.

    181 GitHub stars~1.9k tokensUpdated 16 days ago
    Auto-check passed
  • Pinia Skilld

    skilld-dev/vue-ecosystem-skills

    A skill your agent uses when writing, debugging, or refactoring code that imports "pinia", the Vue 3 store library.

    181 GitHub stars~1.5k tokensUpdated 16 days ago
    Auto-check passed
  • Primevue Skilld

    skilld-dev/vue-ecosystem-skills

    A skill your agent uses when writing, debugging, or updating code that imports primevue (PrimeVue v5, UI component library for Vue 3).

    181 GitHub stars~1.9k tokensUpdated 16 days ago
    Auto-check passed
  • Quasar Skilld

    skilld-dev/vue-ecosystem-skills

    Build, configure, and debug apps with the Quasar framework (quasar npm package, v2.33.1).

    181 GitHub stars~1.6k tokensUpdated 16 days ago
    Auto-check passed

Categories

Questions about Unovis TS Skilld

What does Unovis TS Skilld do?

A skill your agent uses when building charts, network graphs, timelines, or maps with @unovis/ts in vanilla TypeScript or JavaScript. Unovis TS Skilld is an agent skill from skilld-dev/vue-ecosystem-skills. Use when building charts, network graphs, timelines, or maps with @unovis/ts in vanilla TypeScript or JavaScript.

When should I use Unovis TS Skilld?

Unovis TS Skilld fits situations like: building charts; maps with @unovis/ts in vanilla TypeScript.

How do I install Unovis TS Skilld in Claude Code?

Run `npx skills add skilld-dev/vue-ecosystem-skills --skill unovis-ts-skilld -a claude-code`. Or copy the skill folder (skills/unovis-ts-skilld in skilld-dev/vue-ecosystem-skills) into .claude/skills/unovis-ts-skilld in your project. Claude Code loads it when a task matches its description.

How do I install Unovis TS Skilld in Codex?

Run `npx skills add skilld-dev/vue-ecosystem-skills --skill unovis-ts-skilld -a codex`. Or copy the skill folder (skills/unovis-ts-skilld in skilld-dev/vue-ecosystem-skills) into .agents/skills/unovis-ts-skilld in your project. Codex loads it when a task matches its description.

Can I use Unovis TS Skilld in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add skilld-dev/vue-ecosystem-skills --skill unovis-ts-skilld -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/unovis-ts-skilld, .gemini/skills/unovis-ts-skilld, .github/skills/unovis-ts-skilld and .opencode/skills/unovis-ts-skilld in your project.

What does Unovis TS Skilld need to run?

Going by SKILL.md and its folder, Unovis TS Skilld needs the command-line tools its instructions call (npm). Our summary lists: Node.js.

Does Unovis TS Skilld access the network?

SKILL.md names 2 domains. In commands or code: unovis.dev; the agent is likely to contact it when it follows the instructions. As links in the text: github.com. This is read from the text; nothing was executed.

Is Unovis TS Skilld safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Unovis TS Skilld use?

Unovis TS Skilld is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Unovis TS Skilld use?

About 2.1k tokens (SKILL.md is roughly 8.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.5k tokens, read only when the agent opens those files.

What are the alternatives to Unovis TS Skilld?

Skills that share tags, products or a category with Unovis TS Skilld: Code Review Checklist (shareAI-lab/learn-claude-code, 78k stars), Install Anti-Slop Oxlint Rules (dmmulroy/anti-slop, 5.3k stars), Generate Release Notes (teambit/bit, 18k stars) and Pnpm Engine (teambit/bit, 18k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Unovis TS Skilld?

skilld-dev (a GitHub organization) maintains it in skilld-dev/vue-ecosystem-skills, which has 181 GitHub stars. The repository holds 34 skills in this directory. The repository was last updated on September 22, 2026.

Source: skilld-dev/vue-ecosystem-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.