pretext-layout
by Roy Yuen
High-performance browser-based text layout and measurement for virtualization, canvas, and layout-heavy applications.
- Measure text dimensions without triggering DOM layout thrashing
- Calculate multiline text height for smooth dynamic height virtuallization ops
- Render complex text layouts on HTML canvas with high-performance metrics
Free
One-time purchase
Included in download
- Downloadable skill package
- Works with Public, pretext
- 1 permission declared
Sample Output
A real example of what this skill produces.
Prepared handle cached for "Hello World". Height: 48px at 200px width. Line 1: "Hello " (0-6) Line 2: "World" (6-11) Performance: <0.1ms layout time. Verified against document.fonts.ready status.
pretext-layout
by Roy Yuen
High-performance browser-based text layout and measurement for virtualization, canvas, and layout-heavy applications.
Free
One-time purchase
Included in download
- Downloadable skill package
- Works with Public, pretext
- 1 permission declared
- Instant install
Sample Output
A real example of what this skill produces.
Prepared handle cached for "Hello World". Height: 48px at 200px width. Line 1: "Hello " (0-6) Line 2: "World" (6-11) Performance: <0.1ms layout time. Verified against document.fonts.ready status.
About This Skill
Efficient Text Measurement & Layout
The Pretext Layout skill enables AI agents to integrate and debug high-performance multiline text measurement using the @chenglou/pretext library. It solves the common frontend performance bottleneck of "layout thrashing" by replacing slow DOM-based height probes with a fast, browser-native API approach.
What it does
This skill provides developers with a structured methodology for measuring text width and height without repeated DOM reflows. It supports high-level block height calculation for virtualization and low-level line-by-line geometry for custom Canvas or SVG rendering workflows. It handles complex edge cases including web fonts, emoji, and bidirectional text.
Supported Workflows
- Virtualization: Pre-measure list item heights for smooth scroll anchoring.
- Custom Rendering: Extract per-line ranges for manual drawing in Canvas or SVG.
- Responsive Design: Rapidly recalculate layouts during window resize events on the hot path.
- Debugging: Verify layout accuracy against real-world CSS styles and font loading states.
Why use this skill?
While a general AI can write basic JavaScript, this skill understands the specific lifecycle of the Pretext library—such as partitioning the expensive "prepare" phase from the lightweight "layout" phase. It ensures your agent correctly manages browser-only runtime constraints, font loading promises, and locale-specific white-space behaviors to prevent layout shifts and flickering.
📖 Learn more: Best Frontend & Design Skills for Claude Code →
Use Cases
- Measure text dimensions without triggering DOM layout thrashing
- Calculate multiline text height for smooth dynamic height virtuallization ops
- Render complex text layouts on HTML canvas with high-performance metrics
- Audit text overflow and wrapping logic for layout-heavy applications
Known Limitations
• Requires a browser environment or OffscreenCanvas; no native Node.js support. • Does not support complex CSS properties like 'float', 'flex', or 'letter-spacing'.
How to Install
mkdir -p ~/.claude/skills && curl -sL https://www.agensi.io/api/install/pretext-layout | tar xz -C ~/.claude/skills/Free skills install directly. Paid skills require purchase - use the download button above after buying.
Reviews
No reviews yet - be the first to share your experience.
Only users who have downloaded or purchased this skill can leave a review.
No reviews yet - be the first to share your experience.
Only users who have downloaded or purchased this skill can leave a review.
Security Scanned
Passed automated security review
Permissions
File Scopes
Public, sanitized export of the `pretext-layout` skill for browser-first `@chenglou/pretext` integration npm install @chenglou/pretext
Frequently Asked Questions
Learn More About AI Agent Skills
More Premium Skills
cinematic-sites
Turn any basic business URL into a high-end cinematic landing page with AI-generated 4K assets and GSAP animations.
designing-hybrid-context-layers
Architects the right retrieval strategy for every query — teaching your agent when to use RAG, a knowledge graph, or a temporal index instead of defaulting to vector search for everything.
consumer-motivation-analyzer
Go beyond surface-level feedback to uncover the psychological drivers and hidden motivations behind buyer behavior.
diagnosing-rag-failure-modes
RAG fails quietly. It retrieves documents, returns confident-looking answers, and misses the question entirely — because the question required connecting facts across documents, reasoning about sequence, or tracing causation. This skill gives you a five-question diagnostic checklist that classifies any failing query as either RAG-safe or structurally RAG-incompatible, then maps it to the specific failure pattern and the architectural fix that resolves it.