skills.rest
richardnguyen0715
richardnguyen0715COMMUNITY
Explore all skills by this author →
GitHub

pretext

Measure and layout text without a DOM using the @chenglou/pretext library.

Updated May 11, 2026
Search Tags:#generative art#interactive demos#ASCII art#text layout#kinetic typography
One-click install
npx skills add https://github.com/richardnguyen0715/keep-it-real --skill pretext-richardnguyen0715
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pretext
Source: https://github.com/richardnguyen0715/keep-it-real/tree/main/refer-projects/hermes-agent/skills/creative/pretext
Command: npx skills add https://github.com/richardnguyen0715/keep-it-real --skill pretext-richardnguyen0715

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill solves the problem of creating visually engaging and interactive text layouts without relying on the DOM, enabling developers to achieve creative effects with DOM-free text layout, kinetic typography, and ASCII art.

Core Features & Use Cases

  • Creative Text Layout: Design DOM-free text layouts, including ASCII art, typographic flow around obstacles, text-as-geometry games, and kinetic typography.
  • Generative Art: Utilize text as a medium for generative art, especially with non-Latin scripts or mixed scripts.
  • Use Case: Create a dynamic webpage where text flows around a moving object or morphs into different shapes based on user interaction.

Quick Start

Run the 'pretext' skill with the 'create_demo' command followed by the desired text and target size, e.g., 'pretext create_demo "Hello, World!" 200x100'.

Frequently Asked Questions about pretext

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

FAQPage Schema
How do I create kinetic typography and text layouts without a DOM?▼

Kinetic typography and text layout can be achieved DOM-free by utilizing canvas measurement and layout operations with the pretext library to design interactive web demos and generative art.

What is the best way to generate ASCII art from text in a web demo?▼

ASCII art generation is handled by measuring text and performing layout operations without a DOM, allowing developers to design creative text-as-geometry games and interactive visual displays.

Do I need a DOM to measure and flow text around obstacles for generative art?▼

No DOM is required to measure and flow text around obstacles; the pretext library performs canvas measurement and layout operations directly, making it ideal for generative art and dynamic webpages.

Can I use interactive text layout for non-Latin scripts and mixed scripts?▼

Interactive text layout supports non-Latin scripts and mixed scripts by utilizing the pretext library to measure and layout text as a medium for generative art applications.

What are the limitations of using a DOM-free text layout for interactive demos?▼

DOM-free text layout requires the @chenglou/pretext library dependency for canvas measurement and layout operations, limiting use cases to environments where this specific library can be utilized.

Related Skills

Explore More Design & Creative Skills→
jordanhubbardjordanhubbard
9

pretext

Generate interactive text-based visual effects using @chenglou/pretext for DOM-free text measurement and layout.

Community
Advanced
GitnappGitnapp

pretext

Convert measured text layout data into interactive canvas typography compositions.

Community
Advanced
SriRamkunamsettySriRamkunamsetty

pretext

Measure text without DOM reflow and return line breaks, widths, and glyph positions.

Community
Intermediate
ldzhhxxldzhhxx
1

pretext

Generate text layouts and animations using the @chenglou/pretext library.

Community
Advanced