2

    pretext-layout

    by Roy Yuen

    High-performance browser-based text layout and measurement for virtualization, canvas, and layout-heavy applications.

    Updated May 2026
    5 installs
    170 views

    Free

    One-time purchase

    ⚡ Also available via Agensi MCP — your AI agent can load this skill on demand via MCP. Learn more →

    Included in download

    • Downloadable skill package
    • Works with Public, pretext
    • 1 permission declared
    • Instant install

    See it in action

    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

    Reviews

    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

    Terminal / Shell

    File Scopes

    pretext-layout/**

    Tags

    frontend
    typescript
    layout-engine
    browser-performance
    canvas-api
    text-processing

    Public, sanitized export of the `pretext-layout` skill for browser-first `@chenglou/pretext` integration npm install @chenglou/pretext

    Creator

    Roy Yuen

    Frequently Asked Questions

    Learn More About AI Agent Skills

    Similar Skills

    code-reviewer

    Reviews your code for bugs, security vulnerabilities, logic errors, performance issues, and style violations. Organizes findings by severity and suggests fixes with code examples.

    Free274 installs

    git-commit-writer

    Writes conventional commit messages by analyzing your staged git changes. Detects commit type, scope, and breaking changes automatically.

    Free126 installs

    readme-generator

    Generates a complete, polished README.md by scanning your actual project structure, dependencies, and code.

    Free81 installs

    env-doctor

    Diagnoses why your project will not start. Checks runtime versions, dependencies, environment variables, databases, ports, and build artifacts systematically.

    Free64 installs

    Free