Agent skill

Figure

by vectorize-io in vectorize-io/hindsight

Draw an animated figure (boxes, arrows, moving data) as one self-contained SVG for a GitHub README, PR, issue or blog post.

MITAuto-check passedWriting & Content

Install Figure

skills CLI

$ npx skills add vectorize-io/hindsight --skill figure -a claude-code

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

GitHub CLI

$ gh skill install vectorize-io/hindsight figure --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/vectorize-io/hindsight.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/figure .claude/skills/figure && 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/

Paste into Claude Code

Install the "figure" agent skill from https://github.com/vectorize-io/hindsight/tree/main/.claude/skills/figure into .claude/skills/figure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figure", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/vectorize-io/hindsight/tree/main/.claude/skills/figure

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add vectorize-io/hindsight --skill figure -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install vectorize-io/hindsight figure --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/vectorize-io/hindsight.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.claude/skills/figure .agents/skills/figure && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "figure" agent skill from https://github.com/vectorize-io/hindsight/tree/main/.claude/skills/figure into .agents/skills/figure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figure", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add vectorize-io/hindsight --skill figure -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install vectorize-io/hindsight figure --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/vectorize-io/hindsight.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.claude/skills/figure .cursor/skills/figure && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "figure" agent skill from https://github.com/vectorize-io/hindsight/tree/main/.claude/skills/figure into .cursor/skills/figure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figure", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/vectorize-io/hindsight.git --path .claude/skills/figure

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add vectorize-io/hindsight --skill figure -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install vectorize-io/hindsight figure --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/vectorize-io/hindsight.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.claude/skills/figure .gemini/skills/figure && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "figure" agent skill from https://github.com/vectorize-io/hindsight/tree/main/.claude/skills/figure into .gemini/skills/figure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figure", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install vectorize-io/hindsight figure

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add vectorize-io/hindsight --skill figure -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/vectorize-io/hindsight.git skills-src && mkdir -p .github/skills && cp -r skills-src/.claude/skills/figure .github/skills/figure && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "figure" agent skill from https://github.com/vectorize-io/hindsight/tree/main/.claude/skills/figure into .github/skills/figure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figure", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add vectorize-io/hindsight --skill figure -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install vectorize-io/hindsight figure --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/vectorize-io/hindsight.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.claude/skills/figure .opencode/skills/figure && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "figure" agent skill from https://github.com/vectorize-io/hindsight/tree/main/.claude/skills/figure into .opencode/skills/figure/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figure", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: figure
GitHub stars: 46k
Token cost: ~1.9k tokens
SKILL.md length: 792 words
Files: 1
Skills in repo: 17
Repo updated: Oct 7, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Draw an animated figure (boxes, arrows, moving data) as one self-contained SVG for a GitHub README, PR, issue or blog post.

Works in 4 steps: Write the spec → Render it — from stdin, so nothing is… → Look at it before you ship it → …
An explanation needs a diagram — how a request flows
SKILL.md covers 1. Write the spec, 2. Render it — from stdin, so…, 3. Look at it before you ship it and 4. Put it where it belongs, plus 2 more sections
Calls npm, python3 and node; reaches raw.githubusercontent.com

What it does

Figure is an agent skill from vectorize-io/hindsight. Draw an animated figure (boxes, arrows, moving data) as one self-contained SVG for a GitHub README, PR, issue or blog post. Use when a change or an explanation needs a diagram — how a request flows, what a background job does, what a feature changed — or when the user asks for a diagram, figure, animation or "show it visually". The docs site uses the interactive React figures instead.

Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Writing & Content, covering Static sites and blogs, Blog and article writing and Background jobs. It works with GitHub and React. The repository describes itself as: Hindsight: Agent Memory That Learns. The licence is MIT.

When your agent uses it

An explanation needs a diagram — how a request flows
What a background job does
What a feature changed —
The user asks for a diagram

Example prompts

“show it visually”
“/figure”

Requirements

Python 3

Workflow steps

4 steps, taken from the step headings in SKILL.md.

Write the spec
Render it — from stdin, so nothing is left on disk
Look at it before you ship it
Put it where it belongs

What it can do on your machine

Read from SKILL.md and the folder at commit 9269b88. 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
- python3
- node
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:
- raw.githubusercontent.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

Figure loads about 1.9k tokens when it runs. Until then it costs about 99 tokens; SKILL.md has 792 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~99
When it runs · the whole SKILL.md, loaded when a task matches: ~1.9k

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 vectorize-io/hindsight at commit 9269b88, republished under its MIT licence (© vectorize-io). 792 words, ~1,887 tokens.

Download SKILL.mdSave it as .claude/skills/figure/SKILL.md (or your agent's skills folder).

name: figure
description: Draw an animated figure (boxes, arrows, moving data) as one self-contained SVG for a GitHub README, PR, issue or blog post. Use when a change or an explanation needs a diagram — how a request flows, what a background job does, what a feature changed — or when the user asks for a diagram, figure, animation or "show it visually". The docs site uses the interactive React figures instead.
user_invocable: true

Figure

One animated SVG, no scripts, no upload: it renders and plays anywhere markdown does — GitHub README, PR and issue comments, blog posts, Notion. ~15 kB for a figure that would be a 2 MB video, sharp at any size, and it follows the reader's light or dark theme.

You write a JSON spec — never SVG, never a .ts figure file (those are only for the docs site's interactive figures, see below). One command renders it. No install, no build, no browser.

1. Write the spec

A spec is { "props": { "layout": …, "edges": […], "steps": […] } }. Do not save it as a file in the repo. It is an input, not a deliverable, and a stray spec.json is the one mess this skill must not leave behind — pipe it in (step 2), and the rendered SVG keeps a copy of it for you.

json

{
  "props": {
    "speed": 2000,
    "layout": {
      "gap": 48,
      "children": [
        { "id": "agent", "label": "Your AI Agent" },
        {
          "id": "api",
          "label": "Hindsight API",
          "direction": "column",
          "gap": 24,
          "children": [{ "id": "retain", "label": "Retain", "sub": "LLM extraction" }]
        },
        {
          "id": "bank",
          "label": "Memory Bank",
          "direction": "column",
          "gap": 28,
          "children": [
            { "id": "facts", "label": "Facts", "sub": "world · experience", "shape": "store" },
            { "id": "obs", "label": "Observations", "shape": "store" }
          ]
        }
      ]
    },
    "edges": [
      { "id": "call", "from": "agent", "to": "retain", "label": "retain()" },
      { "id": "store", "from": "retain", "to": "facts", "label": "extract" },
      { "id": "consolidate", "from": "facts", "to": "obs", "label": "consolidate", "quiet": true }
    ],
    "steps": [
      {
        "label": "retain()",
        "flow": [
          {
            "edges": { "edge": "call", "data": "“Alice joined Google in March”" },
            "say": "Your agent sends what happened."
          },
          {
            "edges": "store",
            "show": {
              "facts": [
                {
                  "tag": "world",
                  "tone": "blue",
                  "text": "Alice joined Google",
                  "meta": "Mar 2026",
                  "mark": "new"
                }
              ]
            },
            "say": "An LLM pulls out the facts."
          },
          {
            "edges": "consolidate",
            "ms": 2600,
            "show": { "obs": [{ "text": "Alice works at Google", "meta": "2 sources" }] },
            "say": "The worker merges them into one belief."
          }
        ]
      }
    ]
  }
}

Layout — a tree. A group has children, and label (which draws a frame around it), direction: "row" | "column", gap, align. Anything else is a box: { id, label, sub?, shape? }, where shape is "store" for a database cylinder (data at rest) or "decision" for a diamond. Plain boxes are the things that do something. Give every box a stable id.

Edges — { from, to, label?, id?, around?, quiet? }; from/to name a box or a group. around: "above" | "below" arcs over the boxes in between; quiet: true draws the edge only while a step uses it (for long edges that would cut across the picture).

Steps and beats — each step is one story the figure tells; the SVG plays them in a loop. A beat is one moment: edges (a hop id, { edge, back, data } for a reverse hop or a data chip, or an array to run several at once), say (the caption; it stays until the next say), show (fills the content card inside a box and persists to the end of the step), light (highlight boxes for that beat), ms (how long the beat lasts).

Card rows — { tag?, tone?, text, meta?, mark?, mono? }. tone is blue | purple | green | orange | gray. Use tag for the kind of thing (world, user, page), meta for a detail, and mark for what happened to it (new, ✓, cited, ↻).

Keep it honest and specific: real example data beats placeholders, and every claim in a label, card or caption must match what the code actually does — check the code, don't assume.

2. Render it — from stdin, so nothing is left on disk

bash

cd hindsight-interfig
npm run svg -- - ../path/to/out.svg <<'SPEC'
{ "props": { "layout": …, "edges": […], "steps": […] } }
SPEC

The quoted <<'SPEC' heredoc passes the JSON through untouched, and the only file produced is the SVG. Zero dependencies, no browser, no build.

Other forms:

bash

npm run svg -- what-hindsight-does out.svg   # a figure from figures/, by name
npm run svg -- --spec out.svg                # print the spec an SVG carries, to edit and re-render

Every SVG embeds its own spec in <metadata>, so a figure stays editable without anyone keeping the JSON: read it back with --spec, change what you need, render again. That is why a spec file is never worth committing.

Use npm run svg, not node scripts/... directly: the script name is the interface, the path is not.

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

3. Look at it before you ship it

Always. Text that overflows its box, an arrow crossing a box, a caption that does not match what is moving — obvious on sight, invisible in the source.

bash

cd $(dirname out.svg) && python3 -m http.server 8777 &   # the browser tool blocks file:// URLs

Then open http://localhost:8777/out.svg, screenshot it, wait a few seconds and screenshot again to catch a later beat. open out.svg works too when a human is watching.

4. Put it where it belongs

PR or issue comment — commit the SVG on the branch, then reference its raw URL: ![figure](https://raw.githubusercontent.com/<owner>/<repo>/<branch>/<path>.svg). GitHub renders and animates it immediately. (Dragging a file into a comment also works, but only a human can do that, and GitHub keeps a fresh upload private for several minutes.)
README or repo docs — commit it and link it with a relative path.
Blog post — hindsight-docs/static/img/blog/, referenced as /img/blog/<name>.svg. An SVG under hindsight-docs/static/ is also read by the docs-skill generator: it pulls the spec out of the image and writes the narration into the skill, so an agent reading the docs gets the content and not a dead image link.
The docs site's own pages — don't use an SVG. Those pages embed the interactive React figure, which has tabs, pause, speed and hover. Add a hindsight-interfig/figures/<name>.ts instead and <Flow {...figure.props} /> on the page (see hindsight-interfig/README.md).

A worked example

The spec in step 1 is a complete, working figure — copy it and edit. Any SVG you find carries its own spec too: npm run svg -- --spec <file>.svg prints it back, so an existing figure is the fastest starting point for a new one.

What the SVG cannot do

It loops through every step with no controls: no tabs, no pause, no hover. If the figure needs those, it belongs on the docs site as a React figure. Keep an SVG to one or two steps so the loop comes back round quickly.

Files

Just SKILL.md in .claude/skills/figure of vectorize-io/hindsight.

Open the folder on GitHubat commit 9269b88

Compare with similar skills

Figure 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.

Figure compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Figure this skillvectorize-io/hindsight	46k	—	~1.9k	Automated safety check: Pass	MIT	today
Publishone-ie/one	131	—	~940	Automated safety check: Pass	Custom licence	9 days ago
Release New Versionkcsujeet/ilamy-calendar	351	—	~5.8k	Automated safety check: Pass	MIT	3 days ago
Sidecar Websitemarcus/sidecar	1.1k	—	~1.7k	Automated safety check: Pass	MIT	2 days ago
No Em Dashespetera2c/simple-table	229	—	~195	Automated safety check: Pass	MIT	3 days ago
Blog Postnteract/semiotic	2.7k	—	~3.4k	Automated safety check: Pass	Apache-2.0	yesterday

Similar skills

Publish
one-ie/one
Put words on this site — a blog post, a docs page, a product, or a live page from ONE's editor.
131 GitHub stars~940 tokensUpdated 9 days ago
Writing & ContentAuto-check passed
Release New Version
kcsujeet/ilamy-calendar
Cut a new release of @ilamy/calendar — analyze commits since the last tag, suggest a semver bump, draft a CHANGELOG entry in the project's existing style, run the CI gate, commit, tag, push to…
351 GitHub stars~5.8k tokensUpdated 3 days ago
DevelopmentAuto-check passed
Sidecar Website
marcus/sidecar
Writing and maintaining the Sidecar Docusaurus documentation site, including page structure, doc authoring, blog posts, styling, images, and deployment workflow.
1.1k GitHub stars~1.7k tokensUpdated 2 days ago
Writing & ContentAuto-check passed
No Em Dashes
petera2c/simple-table
Avoid em dashes in marketing copy, hero text, changelogs, blog posts, docs, UI strings, and chat.
229 GitHub stars~195 tokensUpdated 3 days ago
Writing & ContentAuto-check passed
Blog Post
nteract/semiotic
Author a new entry for the Semiotic blog. An agent skill from nteract/semiotic.
2.7k GitHub stars~3.4k tokensUpdated yesterday
Writing & ContentAuto-check passed
Trigger.dev Realtime
papermark/papermark
Shows how to subscribe to Trigger.dev task runs from the backend and from React for progress indicators, live dashboards, AI response streams and approval waits.
9.2k GitHub stars~1.7k tokensUpdated 1 mo ago
Backend & APIsAuto-check passed

Questions about Figure

What does Figure do?

Draw an animated figure (boxes, arrows, moving data) as one self-contained SVG for a GitHub README, PR, issue or blog post. Figure is an agent skill from vectorize-io/hindsight. Draw an animated figure (boxes, arrows, moving data) as one self-contained SVG for a GitHub README, PR, issue or blog post.

When should I use Figure?

Figure fits situations like: an explanation needs a diagram — how a request flows; what a background job does; what a feature changed —; the user asks for a diagram.

How do I install Figure in Claude Code?

Run `npx skills add vectorize-io/hindsight --skill figure -a claude-code`. Or copy the skill folder (.claude/skills/figure in vectorize-io/hindsight) into .claude/skills/figure in your project. Claude Code loads it when a task matches its description.

How do I install Figure in Codex?

Run `npx skills add vectorize-io/hindsight --skill figure -a codex`. Or copy the skill folder (.claude/skills/figure in vectorize-io/hindsight) into .agents/skills/figure in your project. Codex loads it when a task matches its description.

Can I use Figure 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 vectorize-io/hindsight --skill figure -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/figure, .gemini/skills/figure, .github/skills/figure and .opencode/skills/figure in your project.

What does Figure need to run?

Going by SKILL.md and its folder, Figure needs the command-line tools its instructions call (npm, python3 and node). Our summary lists: Python 3.

Does Figure access the network?

SKILL.md names 1 domain. In commands or code: raw.githubusercontent.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Figure 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 Figure use?

Figure 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 Figure use?

About 1.9k tokens (SKILL.md is roughly 7.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Figure?

Skills that share tags, products or a category with Figure: Publish (one-ie/one, 131 stars), Release New Version (kcsujeet/ilamy-calendar, 351 stars), Sidecar Website (marcus/sidecar, 1.1k stars) and No Em Dashes (petera2c/simple-table, 229 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Figure?

vectorize-io (a GitHub organization) maintains it in vectorize-io/hindsight, which has 46,453 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 7, 2026.

Source: vectorize-io/hindsight on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Figure

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Figure

1. Write the spec

2. Render it — from stdin, so nothing is left on disk

3. Look at it before you ship it

4. Put it where it belongs

A worked example

What the SVG cannot do

Files

Compare with similar skills

Similar skills

More from vectorize-io/hindsight

Related

Questions about Figure