Skip to main content
affpapa.org
RU EN
skill CX Codex

pretext-text-measurement — Claude Code skill: setup and features

Calculates multiline text dimensions and line breaking in JavaScript without touching DOM layout properties or triggering reflow.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add reason-machines/trending-skills --skill pretext-text-measurement -a claude-code
Open on GitHub

What pretext-text-measurement does

This skill guides coding agents on using @chenglou/pretext for estimating typography bounds in client-side code. Instead of querying properties like offsetHeight or calling getBoundingClientRect, which force browser layout recalculation, it processes string dimensions through cached font metrics.

The workflow separates preparation from placement. An initial call to prepare normalizes spaces and samples segment lengths via canvas context, while repeated calls to layout perform lightweight math during container resizes. That makes it suitable for canvas text rendering and virtual list row heights.

Running the resulting implementation requires adding @chenglou/pretext to your project dependencies.

What it helps with

  • Determine paragraph height without touching DOM nodes
  • Break text into lines for HTML canvas drawing
  • Pre-calculate row heights for virtualized scrolling lists
  • Flow text around floated graphics with dynamic line widths

Example prompts for the agent

  • Show how to compute textarea height without reflow using pretext
  • Generate code to split a paragraph into canvas lines with prepareWithSegments
  • Measure row heights for a virtualized list using pretext layout

How to install pretext-text-measurement

1Skills CLI (Vercel)

npx skills add reason-machines/trending-skills --skill pretext-text-measurement -a claude-code

2Manually: put the files in place

~/.claude/skills/pretext-text-measurement/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/pretext-text-measurement/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about pretext-text-measurement

How do I install pretext-text-measurement in Claude Code?

Run npx skills add reason-machines/trending-skills --skill pretext-text-measurement -a claude-code. The skill definition will be added under ~/.claude/skills/pretext-text-measurement/SKILL.md.

What is pretext-text-measurement used for?

It instructs agents to measure text bounds and wrap lines using @chenglou/pretext without reading DOM layout properties. This keeps resizing operations fast and avoids layout reflows.

Does pretext require DOM elements to measure text?

It runs without DOM elements by measuring glyph metrics once and computing line breaks through pure arithmetic. You must install the @chenglou/pretext package in your project for the code to run.

Similar skills

Everything for Frontend and UI →
pretext Hermes Agent A skill for browser demos built on @chenglou/pretext: text wraps around shapes, splits into graphemes and gets measured through canvas without a page reflow. CX Codex +1 317installs pixijs-scene-text pixijs Teaches coding agents to render text in PixiJS v8 properly. Helps pick between bitmap, HTML, and canvas rendering without stalling frame updates. CX Codex +1 5,800installs text-and-bitmaptext phaserjs Helps AI agents configure and render text in Phaser 4. Useful when styling Canvas text, handling word wrapping, and setting up bitmap fonts. CX Codex +1 823installs site-specification cline Turns brief website ideas or brand images into a JSON design specification with layout requirements, target audience, and Google Fonts. CX Codex +1 2,100installs editorial-tech MengTo Guides code agents to blend magazine typography with technical product UI using asymmetrical grids, mono labels, and restrained accent color. CX Codex +1 1,500installs agency-grid-layout-minimal MengTo Sets a minimal agency-site direction with an editorial grid, oversized type and restrained image framing. Use it when a page needs structure rather than card-heavy sections. CX Codex +1 1,400installs

From the same set186

emdash-cms Get guidance for adding EmDash to Astro, configuring content storage, and querying entries. Useful when starting a CMS project or extending an existing site. CX Codex +1 719installs openclaude-multi-llm Lets Claude talk to models that expose an OpenAI Chat Completions endpoint while keeping Bash, Grep, MCP and the rest of the toolset. CX Codex +1 716installs cc-gateway-ai-proxy Guides deployment of CC Gateway, a proxy that routes Claude Code traffic through one gateway and standardizes device telemetry. Useful across multiple machines. CX Codex +1 713installs open-multi-agent-orchestration A skill that teaches your agent to build AI agent teams on the open-multi-agent TypeScript framework: roles, models, task dependencies. CX Codex +1 710installs claude-code-source-recovery Walks an agent through the recovered TypeScript source of Claude 2.1.88: commands, MCP wiring and the terminal UI. CX Codex +1 693installs omnivoice-tts A skill for OmniVoice: clone a voice from a sample, generate speech from a text description, or run batch synthesis from Python and CLI. CX Codex +1 680installs awesome-design-md-jp Provides Japanese UI specifications in DESIGN.md format for AI agents. It sets up CJK typography, font fallback chains, and punctuation line-break rules. CX Codex +1 668installs paper2code-arxiv-implementation Converts arXiv papers into working Python code anchored to equations and sections. It audits ambiguities and flags missing paper details before execution. CX Codex +1 635installs

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor