pretext-layoutIntegrate, debug, or prototype @chenglou/pretext for browser-based multiline text measurement and manual line layout. Use when replacing DOM height probes, b...
Install via ClawdBot CLI:
clawdbot install royhk920/pretext-layoutGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Generated May 5, 2026
In a chat application or feed, each message varies in length. Pretext measures multiline text height without DOM reflow, enabling efficient virtual scrolling with accurate container sizing.
When rendering text on a flowchart or data visualization canvas, Pretext's per-line APIs allow custom line breaks and wrapping, ensuring text fits within shapes without DOM overhead.
Infographics use SVG for scalability. Pretext adjusts text wrap dynamically when SVG containers resize, maintaining layout accuracy across devices without re-rendering the DOM.
Building a rich text editor that supports multiple fonts and line heights. Pretext provides precise line geometry to implement features like line numbering, highlighting, and pagination.
International apps with emoji and right-to-left scripts need accurate text measurement. Pretext handles complex character clusters, ensuring layouts are correct across languages.
Offer Pretext-based measurement as a premium feature in a SaaS platform (e.g., CMS or design tool) that improves text rendering performance and accuracy.
A developer tool extension using Pretext to measure and compare text layouts in real-time, sold to web developers for debugging responsive designs.
Package Pretext as a lightweight API for other companies to integrate into their products, charging based on usage volume (measurements per month).
💬 Integration Tip
Cache prepared handles and align font/line-height inputs with real element styles to avoid measurement mismatches.
Scored Apr 19, 2026
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
Professional Figma design analysis and asset export. Use for extracting design data, exporting assets in multiple formats, auditing accessibility compliance, analyzing design systems, and generating comprehensive design documentation. Read-only analysis of Figma files with powerful export and reporting capabilities.
Complete workflow for creating distinctive design systems from scratch. Orchestrates aesthetic documentation, token architecture, components, and motion. Use when starting a new design system or refactoring an existing one. Triggers on create design system, design tokens, design system setup, visual identity, theming.
Create logos, interfaces, and visual systems with principles of hierarchy, branding, and usability.
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer han...
Comprehensive UI design skill covering fundamentals, patterns, and anti-patterns. Layout, typography, color, spacing, accessibility, motion, and component design. Use when building any web interface, reviewing design quality, or creating distinctive UIs.