pretext

Name: pretext
Availability: InStock
Author: LynxLab

Generate DOM-free text layouts using canvas measurement techniques.

Updated Jul 3, 2026

Search Tags:#creative coding #generative art #ASCII art #text layout #kinetic typography

Ready to run

npx skills add https://github.com/LynxLabVN/office-agent --skill pretext-lynxlabvn

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/LynxLabVN/office-agent/tree/main/agent-core/skills/creative/pretext
Command: npx skills add https://github.com/LynxLabVN/office-agent --skill pretext-lynxlabvn

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @chenglou/pretext, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the creation of complex, interactive text layouts, eliminating the need for traditional DOM manipulation, and empowers users to develop engaging demos with text as a creative element.

Core Features & Use Cases

Text Layout Measurement: Measure text layouts without relying on the DOM, providing accurate line breaks and positions.
Customizable Demos: Generate demos with text reflowing around shapes, text-as-geometry games, kinetic typography, and generative art.
Use Case: Imagine a developer wants to create an interactive text-based game where the playfield is made up of words. This Skill can help in designing such a game without the need for traditional graphics.

Quick Start

Use the pretext skill to create a demo that shows text reflowing around a moving orb.

Frequently Asked Questions about pretext

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I measure text layout for generative art without relying on the DOM?▼

You can measure text layout without the DOM by applying canvas measurement techniques to calculate accurate line breaks and positions. This Skill generates text-based layouts for interactive demos, enabling precise text rendering for creative coding without relying on traditional DOM manipulation.

Can I create kinetic typography and interactive text games without traditional DOM manipulation?▼

Yes, you can create kinetic typography and interactive text-as-geometry games without traditional DOM manipulation. By generating DOM-free text layouts, this approach allows developers to build engaging playfields made entirely of words for creative coding projects.

Do I need the @chenglou/pretext library to build text-based layouts?▼

Yes, you need the @chenglou/pretext library to perform text measurement and layout. This Skill requires the library as a dependency to accurately generate DOM-free text layouts and apply canvas measurement techniques for creative coding demos.

What is the best way to make text reflow around moving shapes in a canvas demo?▼

The best way to make text reflow around moving shapes is to generate text-based layouts using canvas measurement techniques. This Skill enables customizable demos where text dynamically reflows around shapes like moving orbs without relying on the DOM.

Does this approach support ASCII art and generative text reflow for interactive demos?▼

Yes, this approach supports ASCII art and generative text reflow for interactive demos. It measures text layouts without the DOM to provide accurate line breaks and positions, making it ideal for creating generative art and kinetic typography.

What are the limitations of using DOM-free text layout measurement for creative coding?▼

The main limitation of DOM-free text layout measurement is that it requires the @chenglou/pretext library for accurate rendering. While it excels at kinetic typography and generative art, it replaces traditional DOM manipulation rather than augmenting existing DOM-based text workflows.