Agent skill

Pixi Vn History

by DRincs-Productions in DRincs-Productions/pixi-vn

A skill your agent uses when implementing "go back" / "rewind" / step-navigation features in a Pixi'VN game, or when you need to read the player-facing dialogue/choice history (e.g.

LGPL-2.1Auto-check passed

Install Pixi Vn History

skills CLI
$ npx skills add DRincs-Productions/pixi-vn --skill pixi-vn-history -a claude-code

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

GitHub CLI
$ gh skill install DRincs-Productions/pixi-vn pixi-vn-history --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/DRincs-Productions/pixi-vn.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/history .claude/skills/pixi-vn-history && 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
pixi-vn-history
GitHub stars
149
Token cost
~2.6k tokens
SKILL.md length
1,154 words
Files
1
Skills in repo
13
Repo updated
First seen
Licence
LGPL-2.1

At a glance

A skill your agent uses when implementing "go back" / "rewind" / step-navigation features in a Pixi'VN game, or when you need to read the player-facing dialogue/choice history (e.g.

  • Implementing go back / rewind / step-navigation features in a PixiVN game
  • SKILL.md covers When to use this skill, Mental model, Checkpoints and goBackMode and Going back, plus 5 more sections
  • Calls npm; needs NARRATION_DATA_USE_QUERY_KEY
  • You need to read the player-facing dialogue/choice history (e.g

What it does

Pixi Vn History is an agent skill from DRincs-Productions/pixi-vn. Use when implementing "go back" / "rewind" / step-navigation features in a Pixi'VN game, or when you need to read the player-facing dialogue/choice history (e.g. for a backlog or "history log" UI) — covers the History module's stepHistory API and the "step" vs "paragraph" goBackMode.

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

It works with React. The repository describes itself as: Create visual novels with a modern 2D rendering engine and your favorite JavaScript framework.

When your agent uses it

  • Implementing go back / rewind / step-navigation features in a PixiVN game
  • You need to read the player-facing dialogue/choice history (e.g

Example prompts

  • “go back”
  • “rewind”
  • “history log”
  • “/pixi-vn-history”

Requirements

  • A credential in NARRATION_DATA_USE_QUERY_KEY

What it can do on your machine

Read from SKILL.md and the folder at commit 01c19cb. 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

    Links to these hosts (documentation or services it may open):

    • pixi-vn.com

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

  • Credentials

    Names these keys or tokens, usually read from environment variables:

    • NARRATION_DATA_USE_QUERY_KEY

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

Context cost

Pixi Vn History loads about 2.6k tokens when it runs. Until then it costs about 76 tokens; SKILL.md has 1,154 words of instructions outside code blocks.

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

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 DRincs-Productions/pixi-vn at commit 01c19cb, republished under its LGPL-2.1 licence (© DRincs-Productions). 1,154 words, ~2,647 tokens.

Download SKILL.mdSave it as .claude/skills/pixi-vn-history/SKILL.md (or your agent's skills folder).
name
pixi-vn-history
description
Use when implementing "go back" / "rewind" / step-navigation features in a Pixi'VN game, or when you need to read the player-facing dialogue/choice history (e.g. for a backlog or "history log" UI) — covers the History module's `stepHistory` API and the "step" vs "paragraph" goBackMode.

Pixi'VN History module

Official docs: https://pixi-vn.com/start/history — this skill also documents goBackMode and the real-world go-back/backlog patterns not detailed on the public page. It sticks to the public stepHistory API a game actually calls, not how it's implemented internally.

When to use this skill

Load this skill whenever a task involves: letting the player undo the last line(s) of dialogue ("go back" / "rewind" button), reading/rendering the narration backlog (a "history log" or "scrollback" panel), deciding how much can be undone after a save/load, or tuning how coarse/fine-grained "going back" feels (line-by-line vs paragraph-by-paragraph).

Mental model

Every time narration advances one step, Pixi'VN records that moment so the player can later go back to it. stepHistory is the module/singleton that manages these recorded steps: going back to an earlier one, and reading back what was shown at each one (for a backlog/scrollback UI). The manager instance is the named export stepHistory (re-exported at the package root, so import { stepHistory } from "@drincs/pixi-vn" works; also reachable as .history on the package's default export object).

Checkpoints and goBackMode

Not every step is necessarily something the player can go back to on its own — that depends on stepHistory.goBackMode (type HistoryGoBackModeType = "step" | "paragraph", default "step"):

  • "step" (default): every single step can be gone back to individually. Matches classic VN-style "click to undo one line" behavior.
  • "paragraph": only a step that starts a new paragraph (a call/jump happened, or a called label returned), proposes choices, or requires input can be gone back to on its own — everything else replays together with the next such step. Consequence: calling back() from anywhere inside paragraph N jumps all the way to the start of paragraph N-1, not to "one line up" — the whole of paragraph N-1 gets replayed. Step 0 is always a valid target regardless of mode.

Set it directly on the manager:

ts
import { stepHistory } from "@drincs/pixi-vn";

stepHistory.goBackMode = "paragraph"; // or "step" (default)

Going back

Trigger "go back" from game/UI code with stepHistory.back(props):

ts
import { stepHistory } from "@drincs/pixi-vn";

// In a click handler for a "back" / "undo" button:
await stepHistory.back(props); // props: the StepLabelPropsType passed into your step/label functions
// go back 3 steps (or 3 checkpoints, in "paragraph" mode) at once:
await stepHistory.back(props, { steps: 3 });

This is also how Pixi'VN itself handles the player pressing a system/browser "back" gesture, and Game.addOnError examples show calling await stepHistory.back(props) inside an error handler to roll back to the previous step on failure.

Notes on back():

  • steps must be a finite number > 0; anything else logs a warning and does nothing.
  • If narration is mid-step, or another back()/continue() is already in flight, the request is queued automatically rather than executed immediately — safe to call from an event handler without extra guarding.
  • Use stepHistory.canGoBack (boolean) to decide whether to show/enable a "go back" button. In "step" mode this is true as soon as there's at least one earlier step to return to; in "paragraph" mode it becomes true less often, since most steps aren't individually go-back-able.
  • stepHistory.blockGoBack() disables back() from this point on, permanently (only takes effect when no step is currently running) — useful right after an irreversible action (e.g. a choice with real consequences) if the player shouldn't be able to rewind past it.

Reading step/narration history (for a backlog UI)

In Pixi'VN's own terminology, "narrative history" is the list of all dialogues, choices, etc. that have been shown to the player — that's what these getters expose:

  • stepHistory.narrativeHistory: NarrationHistory[] — every recorded step across the whole playthrough, in order, each with dialogue, choices, playerMadeChoice, inputValue, stepIndex, openedLabelsNumber. This is the property the official docs' "Get" section shows:
    ts
    import { stepHistory } from "@drincs/pixi-vn";
    const dialogues: NarrationHistory[] = stepHistory.narrativeHistory;
    (The public docs page's code sample types this as NarrativeHistory[] — that type isn't actually exported; the real export from @drincs/pixi-vn is NarrationHistory, confirmed in src/narration/interfaces/NarrationHistory.ts and used as the return type in src/history/HistoryManager.ts. Trust the source/this skill's NarrationHistory naming over that docs typo.)
  • stepHistory.currentLabelHistory: NarrationHistory[] — just the "current page": steps belonging to the current label and its child labels, reset every time narration.jump is used. Useful for a per-scene backlog.
  • stepHistory.currentPageParagraphs: NarrationHistory[][] — currentLabelHistory grouped into paragraphs (a new paragraph starts whenever openedLabelsNumber changes), regardless of goBackMode.
  • stepHistory.removeNarrativeHistory(itemsNumber?) — deletes all narrative history if called with no argument, or trims just the oldest itemsNumber entries if you pass a number:
    ts
    stepHistory.removeNarrativeHistory(); // delete everything
    stepHistory.removeNarrativeHistory(2); // delete the first 2 elements
Show full SKILL.md (506 more words)Show less

Save/load and step limits

  • stepHistory.stepLimitSaved (default 20) caps how many steps' worth of go-back history are kept when exporting for a save file (consumed by Game.exportGameState() — see pixi-vn-saves). Older steps beyond that limit are dropped from what's exported — meaning after loading a save, the player can only go back up to stepLimitSaved steps, even though narrativeHistory itself may show more (older entries lose the ability to be "gone back to" but keep their display text — the docs put it as "only essential information from older steps is kept"). Set it to Infinity to disable the limit and keep everything go-back-able.
  • stepHistory.clear() wipes all history (called by Game.clear() and at the start of Game.restoreGameState()).

Real-world usage (official React template)

The official "TS narration + React" template (what npm create pixi-vn@latest scaffolds, source at pixi-vn-react-template) shows one concrete way to wire up "go back" and a backlog UI. This is that template's convention, not a library requirement — the APIs below (canGoBack, back(), narrativeHistory) are all you actually need; the loading-state/React-Query/i18n wrapping around them is the template's own app architecture.

Guarding the "back" button/gesture — src/lib/query/narration-query.ts exposes stepHistory.canGoBack through a React Query hook so the UI can enable/disable a back button reactively:

ts
export function useQueryCanGoBack() {
  return useQuery({
    queryKey: [NARRATION_DATA_USE_QUERY_KEY, "can_go_back_use_query_key"],
    queryFn: async () => stepHistory.canGoBack,
  });
}

Triggering back() — src/lib/hooks/narration-hooks.ts wraps the call in a loading-state guard and error handling, then invalidates cached interface data (dialogue/choices/etc. queries) once it settles:

ts
const goBack = useCallback(async () => {
  if (hasOpenMenu) return;
  GameStatus.setLoading(true);
  return stepHistory
    .back(gameProps) // gameProps: the app's StepLabelProps-shaped object from useGameProps()
    .then(() => {
      GameStatus.setLoading(false);
      gameProps.invalidateInterfaceData();
    })
    .catch((e) => {
      GameStatus.setLoading(false);
      console.error(e);
    });
}, [gameProps, hasOpenMenu]);

The same stepHistory.back is also bound directly as a handler elsewhere (src/lib/hooks/quick-tools-hooks.ts), e.g. stepHistory.back.bind(stepHistory) fired on a scroll-down gesture in a "quick tools" wheel — confirming back(props) is safe to call straight from arbitrary UI event handlers, not just a dedicated button.

Backlog/history-log UI — src/lib/query/narration-query.ts's useQueryNarrativeHistory({ searchString }) maps stepHistory.narrativeHistory into a flat display model per step (translating character name/dialogue text, passing through choices and inputValue as-is), then filters by a search string against character name and text:

ts
const dialogues = stepHistory.narrativeHistory.map((step) => ({
  character: /* step.dialogue?.character name, translated */,
  text: /* step.dialogue?.text, translated */,
  icon: /* character icon, if any */,
  choices: step.choices,
  inputValue: step.inputValue,
}));

This is the shape a backlog/scrollback panel typically wants: one row per narrative-history entry with speaker, line, any choices offered, and any input the player typed at that step.

Gotchas

  • Canvas is optional. If Game.init() was called without a canvas element (headless/engine-only usage), canvas state is never captured or restored during back() — going back only affects storage, sound, path and narration position in that setup.
  • "paragraph" mode replays, it doesn't rewind precisely. back() in "paragraph" mode always lands on the start of the previous paragraph/checkpoint, undoing everything since then in one jump — there is no way to undo "just the last line" within a paragraph.
  • There is no "redo" after back(). Going back to an earlier step discards every step recorded after the point you land on, rather than merely skipping past them — so there's nothing to go forward to again.
  • stepHistory.get(stepIndex) can return undefined even for a valid, recorded step index if that step carried no dialogue/choices/input worth showing (an internal bookkeeping-only entry) — check for undefined rather than assuming every index in range has a step to render.
  • If restoring a step fails (e.g. corrupted or incompatible save data), back() logs an error and leaves the game state unchanged rather than throwing.

pixi-vn-getting-started, pixi-vn-saves, pixi-vn-narration, pixi-vn-canvas, pixi-vn-storage

© DRincs-Productions, LGPL-2.1. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/history of DRincs-Productions/pixi-vn.

Open the folder on GitHubat commit 01c19cb

Compare with similar skills

Pixi Vn History 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.

Pixi Vn History compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Pixi Vn History this skillDRincs-Productions/pixi-vn149—~2.6kAutomated safety check: PassLGPL-2.1
Web Artifacts Builderanthropics/skills180k40 repos~769Automated safety check: PassApache-2.0
Vercel Composition Patternssupabase/supabase111k58 repos~726Automated safety check: PassMIT
React Doctormakeplane/plane61k12 repos~657Automated safety check: PassAGPL-3.0
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT
React UI State PatternsChrisWiles/claude-code-showcase6.1k8 repos~1.6kAutomated safety check: PassNone

Similar skills

  • Web Artifacts Builder

    anthropics/skills

    Official

    Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.

    180k GitHub starsUsed in 40 repos~769 tokens
    Frontend & DesignAuto-check passed
  • Official

    React composition patterns that scale. An agent skill from supabase/supabase.

    111k GitHub starsUsed in 58 repos~726 tokens
    DevelopmentAuto-check passed
  • React Doctor

    makeplane/plane

    Scans React code for lint, accessibility, bundle size and architecture issues, reports a health score and checks that changes do not lower it.

    61k GitHub starsUsed in 12 repos~657 tokens
    Frontend & DesignAuto-check passed
  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed
  • React UI State Patterns

    ChrisWiles/claude-code-showcase

    Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.

    6.1k GitHub starsUsed in 8 repos~1.6k tokens
    Frontend & DesignAuto-check passed
  • Tells the agent where new code belongs in an Electron multi-process project and which APIs each process may use, with rules for new bridges, services, agents and workers.

    33k GitHub starsUsed in 1 repo~1.8k tokens
    DevelopmentAuto-check passed

More from DRincs-Productions/pixi-vn

All 13 skills in this repo
  • Pixi Vn Assets

    DRincs-Productions/pixi-vn

    A skill your agent uses when adding, organizing, registering, or loading non-code files (images, audio, video) in a Pixi'VN project — local assets processed by PixiJS AssetPack vs.

    149 GitHub stars~2.9k tokensUpdated 10 days ago
    Auto-check passed
  • Pixi Vn Characters

    DRincs-Productions/pixi-vn

    A skill your agent uses when defining visual novel characters for a @drincs/pixi-vn game — creating a character with a name, color, icon and other props, registering it so it can be looked up by id…

    149 GitHub stars~3.1k tokensUpdated 10 days ago
    Auto-check passed
  • Pixi Vn Minigames

    DRincs-Productions/pixi-vn

    A skill your agent uses when adding a minigame (snake, quiz, puzzle, timing/reaction game, ...) to a Pixi'VN visual novel — the useMinigame lifecycle hook pattern, using PixiJS directly on its own…

    149 GitHub stars~2.9k tokensUpdated 10 days ago
    Auto-check passed
  • Pixi Vn Narration

    DRincs-Productions/pixi-vn

    A skill your agent uses when writing or editing Pixi'VN story content — defining labels (scenes) with newLabel, writing dialogue steps, adding player choices with…

    149 GitHub stars~4.9k tokensUpdated 10 days ago
    Auto-check passed
  • Pixi Vn Saves

    DRincs-Productions/pixi-vn

    A skill your agent uses when implementing save/load in a Pixi'VN game — Game.exportGameState()/restoreGameState()/jsonToGameState(), what the exported GameState contains, and how to persist it (save…

    149 GitHub stars~1.5k tokensUpdated 10 days ago
    Auto-check passed
  • Pixi Vn Sound

    DRincs-Productions/pixi-vn

    A skill your agent uses when playing or stopping background music, sound effects, or voice lines; creating/organizing audio channels; controlling volume, mute, or pan; or wiring Tone.js audio…

    149 GitHub stars~3.3k tokensUpdated 10 days ago
    Auto-check passed

Works with

Questions about Pixi Vn History

What does Pixi Vn History do?

A skill your agent uses when implementing "go back" / "rewind" / step-navigation features in a Pixi'VN game, or when you need to read the player-facing dialogue/choice history (e.g. Pixi Vn History is an agent skill from DRincs-Productions/pixi-vn.g.

When should I use Pixi Vn History?

Pixi Vn History fits situations like: implementing go back / rewind / step-navigation features in a PixiVN game; you need to read the player-facing dialogue/choice history (e.g.

How do I install Pixi Vn History in Claude Code?

Run `npx skills add DRincs-Productions/pixi-vn --skill pixi-vn-history -a claude-code`. Or copy the skill folder (skills/history in DRincs-Productions/pixi-vn) into .claude/skills/pixi-vn-history in your project. Claude Code loads it when a task matches its description.

How do I install Pixi Vn History in Codex?

Run `npx skills add DRincs-Productions/pixi-vn --skill pixi-vn-history -a codex`. Or copy the skill folder (skills/history in DRincs-Productions/pixi-vn) into .agents/skills/pixi-vn-history in your project. Codex loads it when a task matches its description.

Can I use Pixi Vn History 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 DRincs-Productions/pixi-vn --skill pixi-vn-history -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/pixi-vn-history, .gemini/skills/pixi-vn-history, .github/skills/pixi-vn-history and .opencode/skills/pixi-vn-history in your project.

What does Pixi Vn History need to run?

Going by SKILL.md and its folder, Pixi Vn History needs the command-line tools its instructions call (npm) and credentials named NARRATION_DATA_USE_QUERY_KEY. Our summary lists: A credential in NARRATION_DATA_USE_QUERY_KEY.

Does Pixi Vn History access the network?

SKILL.md names 1 domain. As links in the text: pixi-vn.com. This is read from the text; nothing was executed.

Is Pixi Vn History 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 Pixi Vn History use?

Pixi Vn History is published under the LGPL-2.1 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Pixi Vn History use?

About 2.6k tokens (SKILL.md is roughly 11k 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 Pixi Vn History?

Skills that share tags, products or a category with Pixi Vn History: Web Artifacts Builder (anthropics/skills, 180k stars), Vercel Composition Patterns (supabase/supabase, 111k stars), React Doctor (makeplane/plane, 61k stars) and React Router Development (remix-run/react-router, 57k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Pixi Vn History?

DRincs-Productions (a GitHub organization) maintains it in DRincs-Productions/pixi-vn, which has 149 GitHub stars. The repository holds 13 skills in this directory. The repository was last updated on October 1, 2026.

Source: DRincs-Productions/pixi-vn on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.