pretext

pretext is a skill for Claude Code from tdimino/claude-code-minoan. It costs 91 tokens per session (3,464 once invoked), scanned A, original, MIT.

A browser-based toolkit for creating animated and precisely shaped text effects. It measures letters and can work with individual letter outlines to make text flow, move, morph, or form pictures.

In plain words
What is it for?
Use it for kinetic typography, text flowing around objects, calligrams, animated chat bubbles, ASCII art made from letters, variable-font effects, and animated letter shapes.
Why use it?
CSS cannot easily control text at this level, especially when letters must follow custom paths or react to other objects. It outputs one self-contained HTML file with no build step.

Skill for Claude Code

Written for Claude Code: argument-hint in frontmatter. Also seen: reads .claude/ paths.

Good fit Use it for kinetic typography, text flowing around objects, calligrams, animated chat bubbles, ASCII art made from letters, variable-font effects, and animated letter shapes.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/tdimino/claude-code-minoan/pretext
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add tdimino/claude-code-minoan --skill pretext
Clone the repo
git clone --depth 1 https://github.com/tdimino/claude-code-minoan

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for pretext

README.md
[![agentmods](https://agentmods.dev/badge/skills/tdimino/claude-code-minoan/pretext/github.svg)](https://agentmods.dev/skills/tdimino/claude-code-minoan/pretext)
Your own site
<a href="https://agentmods.dev/skills/tdimino/claude-code-minoan/pretext"><img src="https://agentmods.dev/badge/skills/tdimino/claude-code-minoan/pretext/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for pretext

Your own site · 80×15
<a href="https://agentmods.dev/skills/tdimino/claude-code-minoan/pretext"><img src="https://agentmods.dev/badge/skills/tdimino/claude-code-minoan/pretext.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 91 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 3,464 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe. Third-party audits
  • NVIDIA SkillSpector pass 7 Sept 2026
How audits are shown
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00091 $0.03464
Opus 5 $0.00046 $0.01732
Sonnet 5 $0.00018 $0.00693
Haiku 4.5 $0.00009 $0.00346

Measured 7d ago against content hash 9342c5845fdc, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

Grade A, and why

pretext scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 7d ago.

The scan reads SKILL.md. This mod also ships 1 executable file (scripts/validate_pretext.py), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/design-media/pretext/SKILL.md · 250 lines

How it starts

The opening of the file, as written. The whole thing — 250 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Pretext Text Effects

Generate browser pages powered by Pretext (@chenglou/pretext)—a pure-arithmetic text measurement library that bypasses DOM layout reflow entirely. Pretext measures text with proportional font precision using canvas measureText, enabling effects impossible with CSS alone.

Companion library: opentype.js ([email protected]) — direct font binary parsing for per-glyph SVG path rendering, Bezier control point access, kerning tables, and variable font axes. Pretext handles line breaking; opentype.js handles what happens inside each glyph. Together they unlock effects neither can achieve alone.

Output is always a single self-contained HTML file. No build step, no framework, runs in any modern browser.

Quick Start

Describe a text effect. Claude picks the right Pretext pattern and generates a complete HTML file.

Examples:

  • /pretext fluid smoke ASCII art with gold characters on black
  • /pretext chat bubbles that shrinkwrap tighter than CSS
  • /pretext calligram — the word "ocean" shaped like a wave
  • /pretext editorial layout with text flowing around draggable circles
  • /pretext masonry grid of shower thoughts with instant height prediction
  • /pretext glyph path art — SVG letterforms with stroke animation
  • /pretext animated dragon cursor that pushes text aside as it moves
  • /pretext illuminated manuscript with live vine growth reflow
  • /pretext variable font wave — per-character weight animation
  • /pretext glyph morph — letterform interpolation from A to Z
  • /pretext letterbox gallery of "BEACON" in Playfair Display italic on dark background
  • /pretext glyph-mask calligram — letter R filled with lorem ipsum in Georgia

Do NOT Use This Skill When

  • Simple CSS text-shadow, text-stroke, or gradient text effects
  • CSS Shapes level 1 (shape-outside on floated elements) for static layouts
  • Basic @keyframes text animation (fade, slide, typewriter)
  • Monospace ASCII art (no proportional measurement needed)
  • SVG <text> without per-glyph control
  • Rich text editing (contenteditable, ProseMirror, TipTap)
  • PDF generation or markdown rendering

Read the full file on GitHub · 250 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 7d ago First seen · 250 lines · 91 tokens per session scan A 9342c5845fdc

Subscribe to this mod's changes

pretext is a skill published in the GitHub repository tdimino/claude-code-minoan (41 stars, last pushed today), licensed MIT. It adds 91 tokens to every session and 3,464 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.

Related

Other skills, from other repositories

remotion-video

Create motion graphics and videos using Remotion (React) with audio sync, web fonts, and TailwindCSS. Triggers on: "create a Remotion video", "React video", "motion graphics", "branded video", "product demo video", "video with voiceover". NOT for math animations, use concept-to-video.

Mathews-Tom/armory · 72 tokens

webgl-neon-grid

A real-time synthwave scene — a perspective floor grid scrolling toward a banded retro sun under a neon starfield, all from one fragment shader. No textures. Rendered as a single self-contained index.html. Use when the brief asks for "synthwave", "outrun", "retro 80s", "neon grid", "perspective grid", "vaporwave", or…

nexu-io/open-design · 115 tokens

webgl-distortion-grain

A vertical gallery (Three.js) where planes bend with scroll velocity, ripple under the cursor via simplex noise, and carry a film grain.

nexu-io/open-design · 35 tokens

shaders-cursor-ripples

Add cursor-following fluid WebGPU distortion over an existing image with the Shaders library's ImageTexture and CursorRipples components. Use when a hero, gallery, or media panel needs a water-ripple mouse effect; when replacing a drifting CSS spotlight or flashlight reveal; or when a prompt says to borrow only the…

MengTo/Skills · 92 tokens

scroll-scrubbed-visual-sequence

Build reversible scroll-controlled visual transformations with a pinned or sticky stage, normalized progress, and video, image-sequence, canvas, SVG, or DOM renderers. Use for hero transformations, product assembly, interface state walkthroughs, object rotation, diagrams, or photo sequences that must move forward and…

MengTo/Skills · 73 tokens

unicorn-studio

Use when embedding and customizing Unicorn Studio interactive animations on the web (embed, responsive sizing, performance, layering with UI, fallbacks).

MengTo/Skills · 32 tokens