Pretext Skill

An AI agent skill that helps developers use @chenglou/pretext — a small, tree-shakable TypeScript library that computes exact text metrics without DOM reflows.

Uses the open Agent Skills standard. Works with Claude Desktop, Claude Cowork, Claude Code, Codex CLI, Cursor, Windsurf, Manus, ChatGPT, and any other compatible tool.

What It Does

Pretext computes exact text dimensions using pure math — no DOM reflows. This skill teaches AI agents how to use it correctly, covering:

• API usage — all 13 core functions plus the 5 functions in @chenglou/pretext/rich-inline, with correct argument order, types, and parameter-order asymmetries
• Critical gotchas — the lineHeight-must-be-pixels bug, argument order, font loading timing, ESM-only packaging, parameter-order swap between core and rich-inline
• Integration patterns — wrapper modules, auto-fit font size, height estimation, text around obstacles with and without string allocation, rich inline runs with chips/mentions, shrink-wrap chat bubbles
• Creative patterns — editorial layouts, balanced/Knuth-Plass paragraphs, streaming AI chat (with honest cost notes), framework-integration idioms (React/Vue/Svelte)
• When NOT to use Pretext — CSS-only solutions, HTML content, fragile virtualizer integrations, per-token streaming over very long messages

Installation

Claude.ai (Web)

1. Download pretext-skill.zip
2. Click Customize in the sidebar
3. Go to Skills and click +
4. Choose Upload a skill and upload the zip file

Claude Desktop

— or install manually —

1. Click Customize in the sidebar
2. Click Browse Plugins
3. Go to the Personal tab and click +
4. Choose Add marketplace
5. Type yaniv-golan/pretext-skill and click Sync

Claude Code (CLI)

From your terminal:

claude plugin marketplace add https://github.com/yaniv-golan/pretext-skill
claude plugin install pretext@pretext-marketplace

Or from within a Claude Code session:

/plugin marketplace add yaniv-golan/pretext-skill
/plugin install pretext@pretext-marketplace

Cursor

1. Open Cursor Settings
2. Paste https://github.com/yaniv-golan/pretext-skill into the Search or Paste Link box

Manus

1. Download pretext-skill.zip
2. Go to Settings -> Skills
3. Click + Add -> Upload
4. Upload the zip

ChatGPT

Note: ChatGPT Skills are currently in beta, available on Business, Enterprise, Edu, Teachers, and Healthcare plans only.

1. Download pretext-skill.zip
2. Upload at chatgpt.com/skills

Codex CLI

Use the built-in skill installer:

$skill-installer https://github.com/yaniv-golan/pretext-skill

Or install manually:

1. Download pretext-skill.zip
2. Extract the pretext/ folder to ~/.codex/skills/

Any Agent (npx)

Works with Claude Code, Cursor, Copilot, Windsurf, and 40+ other agents:

npx skills add yaniv-golan/pretext-skill

Other Tools (Windsurf, etc.)

Download pretext-skill.zip and extract the pretext/ folder to:

• Project-level: .agents/skills/ in your project root
• User-level: ~/.agents/skills/

Usage

The skill auto-activates when you mention pretext, @chenglou/pretext, text measurement without DOM, auto-fit font size, layoutNextLine, or text around obstacles. Examples:

I need to measure text height without triggering a reflow

How do I auto-fit a headline to 3 lines using pretext?

Help me flow text around a circular image using layoutNextLine

What Pretext Is

Pretext is a small, tree-shakable TypeScript library by Cheng Lou. It uses CanvasRenderingContext2D.measureText internally, segments text, measures once, caches, then does arithmetic for all subsequent layouts. Each layout() call is ~0.0002ms — safe to call every animation frame.

Key capabilities:

• Know text dimensions before rendering (virtual scrolling, masonry layouts)
• Auto-fit text to a container (find largest font that fits N lines)
• Flow text around obstacles (magazine-style layouts)
• Render rich inline text — mentions, chips, code spans — via the @chenglou/pretext/rich-inline subpath
• Measure text in canvas/SVG/WebGL

License

MIT

Built with Skill Creator Plus.