Web Artifacts Builder
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
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.
$ npx skills add DRincs-Productions/pixi-vn --skill pixi-vn-history -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install DRincs-Productions/pixi-vn pixi-vn-history --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "pixi-vn-history" agent skill from https://github.com/DRincs-Productions/pixi-vn/tree/main/skills/history into .claude/skills/pixi-vn-history/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixi-vn-history", 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 install https://github.com/DRincs-Productions/pixi-vn/tree/main/skills/historyType 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.
$ npx skills add DRincs-Productions/pixi-vn --skill pixi-vn-history -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install DRincs-Productions/pixi-vn pixi-vn-history --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DRincs-Productions/pixi-vn.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/history .agents/skills/pixi-vn-history && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "pixi-vn-history" agent skill from https://github.com/DRincs-Productions/pixi-vn/tree/main/skills/history into .agents/skills/pixi-vn-history/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixi-vn-history", 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.
$ npx skills add DRincs-Productions/pixi-vn --skill pixi-vn-history -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install DRincs-Productions/pixi-vn pixi-vn-history --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DRincs-Productions/pixi-vn.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/history .cursor/skills/pixi-vn-history && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "pixi-vn-history" agent skill from https://github.com/DRincs-Productions/pixi-vn/tree/main/skills/history into .cursor/skills/pixi-vn-history/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixi-vn-history", 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 https://github.com/DRincs-Productions/pixi-vn.git --path skills/history--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add DRincs-Productions/pixi-vn --skill pixi-vn-history -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install DRincs-Productions/pixi-vn pixi-vn-history --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DRincs-Productions/pixi-vn.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/history .gemini/skills/pixi-vn-history && rm -rf skills-srcUse ~/.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/
Install the "pixi-vn-history" agent skill from https://github.com/DRincs-Productions/pixi-vn/tree/main/skills/history into .gemini/skills/pixi-vn-history/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixi-vn-history", 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.
$ gh skill install DRincs-Productions/pixi-vn pixi-vn-historyInstalls 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).
$ npx skills add DRincs-Productions/pixi-vn --skill pixi-vn-history -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/DRincs-Productions/pixi-vn.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/history .github/skills/pixi-vn-history && rm -rf skills-srcUse ~/.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/
Install the "pixi-vn-history" agent skill from https://github.com/DRincs-Productions/pixi-vn/tree/main/skills/history into .github/skills/pixi-vn-history/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixi-vn-history", 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.
$ npx skills add DRincs-Productions/pixi-vn --skill pixi-vn-history -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install DRincs-Productions/pixi-vn pixi-vn-history --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/DRincs-Productions/pixi-vn.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/history .opencode/skills/pixi-vn-history && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "pixi-vn-history" agent skill from https://github.com/DRincs-Productions/pixi-vn/tree/main/skills/history into .opencode/skills/pixi-vn-history/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "pixi-vn-history", 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.
pixi-vn-historyA 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. 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.
Read from SKILL.md and the folder at commit 01c19cb. It shows what the files ask for, not the result of running them.
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.
Shell commands in SKILL.md call:
npmFrom the folder's file list and the shell code blocks in SKILL.md.
Links to these hosts (documentation or services it may open):
pixi-vn.comFrom URLs in SKILL.md, links to its own repository left out.
Names these keys or tokens, usually read from environment variables:
NARRATION_DATA_USE_QUERY_KEYFrom names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
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.
.claude/skills/pixi-vn-history/SKILL.md (or your agent's skills folder).Official docs: https://pixi-vn.com/start/history — this skill also documents
goBackModeand the real-world go-back/backlog patterns not detailed on the public page. It sticks to the publicstepHistoryAPI a game actually calls, not how it's implemented internally.
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).
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).
goBackModeNot 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:
import { stepHistory } from "@drincs/pixi-vn";
stepHistory.goBackMode = "paragraph"; // or "step" (default)Trigger "go back" from game/UI code with stepHistory.back(props):
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.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.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.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:import { stepHistory } from "@drincs/pixi-vn";
const dialogues: NarrationHistory[] = stepHistory.narrativeHistory;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:stepHistory.removeNarrativeHistory(); // delete everything
stepHistory.removeNarrativeHistory(2); // delete the first 2 elementsstepHistory.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()).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:
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:
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:
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.
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.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.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
Just SKILL.md in skills/history of DRincs-Productions/pixi-vn.
Open the folder on GitHubat commit 01c19cb
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Pixi Vn History this skillDRincs-Productions/pixi-vn | 149 | — | ~2.6k | Automated safety check: Pass | LGPL-2.1 | |
| Web Artifacts Builderanthropics/skills | 180k | 40 repos | ~769 | Automated safety check: Pass | Apache-2.0 | |
| Vercel Composition Patternssupabase/supabase | 111k | 58 repos | ~726 | Automated safety check: Pass | MIT | |
| React Doctormakeplane/plane | 61k | 12 repos | ~657 | Automated safety check: Pass | AGPL-3.0 | |
| React Router Developmentremix-run/react-router | 57k | 1 repos | ~1.5k | Automated safety check: Pass | MIT | |
| React UI State PatternsChrisWiles/claude-code-showcase | 6.1k | 8 repos | ~1.6k | Automated safety check: Pass | None |
anthropics/skills
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
supabase/supabase
React composition patterns that scale. An agent skill from supabase/supabase.
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.
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.
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.
iOfficeAI/AionUi
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.
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.
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…
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…
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…
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…
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…
Works with
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.
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.
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.
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.
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.
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.
SKILL.md names 1 domain. As links in the text: pixi-vn.com. This is read from the text; nothing was executed.
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.
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.
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.
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.
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.