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.

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

This skill teaches AI agents how to use pretext correctly:

• API usage — all 13 core functions plus the 5 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, the 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

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

— 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

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

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

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

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

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/

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

npx skills add yaniv-golan/pretext-skill

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

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

The skill auto-activates whenever your AI assistant encounters something it covers. Triggers include any mention of pretext, @chenglou/pretext, or @chenglou/pretext/rich-inline; symptom phrases like "measure text height without triggering DOM reflow"; capability mentions like auto-fitting font size, flowing text around obstacles, computing intrinsic line width, rich inline runs with chips or mentions; and API names like layoutNextLine, layoutNextLineRange, or prepareWithSegments. Example queries:

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

How do I render an @mention chip inside a chat bubble using pretext's rich-inline?

See CHANGELOG.md for the full version history. The latest release notes are on the GitHub Releases page.

• docs/cross-platform.md — how this single repo ships to Claude Code, Cursor, ChatGPT, Manus, Codex CLI, and any agentskills.io host
• VERSIONING.md — version source-of-truth and release process

MIT

Built with Skill Creator Plus.