Pretext Usage Skill

pretext-claude-skill

A Claude Code skill that teaches the assistant how to use @chenglou/pretext — the pure-JS/TS library for DOM-free multiline text measurement and layout — correctly and idiomatically.

The skill loads automatically when you ask Claude Code anything about measuring text height without the DOM, wrapping/laying out text to canvas/SVG, computing line counts, shrink-wrapping a container to its text, virtualizing long text lists, or laying out inline rich text with chips/mentions.

The skill is a thin decision and usage layer on top of pretext's own README.md, which remains the authoritative API reference. It deliberately does not duplicate signatures, so it can't drift out of sync.

What it covers

• The core mental model — prepare() once, layout() many; never re-prepare the same (text, font, options).
• Choosing the right API — a decision guide across the three families: the fast path (prepare/layout), rich manual layout (prepareWithSegments + walkLineRanges / layoutNextLineRange / layoutWithLines), and the @chenglou/pretext/rich-inline helper.
• The accuracy contract — the silent-wrong-number traps: sync font / lineHeight / letterSpacing with your CSS, avoid system-ui, await font load, clamp empty strings.
• Supported vs. out-of-scope CSS surface, plus recipes (height prediction, resize hot path, shrink-wrap, canvas render, flow-around-obstacle, virtualization, inline chips) and a best-practices checklist.

Install

Recommended: install as a plugin

This repo is a Claude Code plugin marketplace. Inside Claude Code, run:

/plugin marketplace add GuyNachshon/pretext-claude-skill
/plugin install pretext-skill@pretext-claude-skill

That's it — no cloning, no file copying. The skill activates automatically when relevant. Later, update to the latest version with:

/plugin update pretext-skill@pretext-claude-skill

Manual: copy the SKILL.md

If you'd rather not use the plugin system, the skill is a single Markdown file at plugins/pretext-skill/skills/pretext/SKILL.md. Put it where Claude Code discovers skills.

Personal (available in every project):

git clone https://github.com/GuyNachshon/pretext-claude-skill.git
cp -r pretext-claude-skill/plugins/pretext-skill/skills/pretext ~/.claude/skills/pretext

Project-scoped (committed to a repo, shared with your team) — copy it into the repo's .claude/skills/ so it travels with the code:

cp -r pretext-claude-skill/plugins/pretext-skill/skills/pretext <your-repo>/.claude/skills/pretext

Restart Claude Code (or start a new session) so it picks up a manually-copied skill.

Verifying it loaded

In a Claude Code session, ask something like "how do I measure a paragraph's height with pretext without touching the DOM?" — the pretext skill should activate and the answer should lead with the prepare() / layout() split.

Keeping in sync

The API names in the skill are verified against @chenglou/pretext's published exports (src/layout.ts, src/rich-inline.ts). If pretext ships a new minor with API changes, update plugins/pretext-skill/skills/pretext/SKILL.md (and bump version in plugins/pretext-skill/.claude-plugin/plugin.json) — but keep concrete signatures pointing back to pretext's README rather than copying them here.

License

MIT. The skill describes the MIT-licensed @chenglou/pretext library but is an independent community contribution and is not affiliated with or endorsed by its maintainer.