skills: add pretext (creative demos with @chenglou/pretext)#17259
Merged
Conversation
Adds a 'pretext' skill under skills/creative/ for building cool browser
demos with @chenglou/pretext — the 15KB DOM-free text-layout library by
Cheng Lou.
The skill documents pretext as a creative primitive (not plumbing): text
flowing around obstacles, text-as-geometry games, proportional ASCII
surfaces, shatter/particle typography, editorial multi-column, kinetic
type, and multiline shrink-wrap. Each pattern pairs with copy-pasteable
snippets in references/patterns.md.
Two single-file HTML templates, both verified in a browser:
templates/hello-orb-flow.html
Minimal starter: long paragraph flows around a mouse-tracked orb
using layoutNextLineRange + a per-row corridor-width function.
templates/donut-orbit.html
Full 3D Sloane torus with orbit controls (drag to rotate, scroll to
zoom, idle auto-rotate). Each 'luminance pixel' is a real grapheme
sampled in reading order from a prose corpus via pretext's
prepareWithSegments + layoutWithLines + Intl.Segmenter. Amber-on-
black CRT aesthetic, z-buffer keyed by screen cell, 60fps.
Related skills: p5js, claude-design, excalidraw, architecture-diagram.
Capture the reusable layout and animation lessons from the advanced Pretext demo so the skill teaches measured obstacle fields, morphing geometry, and polished browser examples.
02356abc
pushed a commit
to 02356abc/hermes-agent
that referenced
this pull request
May 14, 2026
skills: add pretext (creative demos with @chenglou/pretext)
jsboige
pushed a commit
to jsboige/hermes-agent
that referenced
this pull request
May 14, 2026
skills: add pretext (creative demos with @chenglou/pretext)
dannyJ848
pushed a commit
to dannyJ848/hermes-agent
that referenced
this pull request
May 17, 2026
skills: add pretext (creative demos with @chenglou/pretext)
gweeteve
pushed a commit
to gweeteve/hermes-agent
that referenced
this pull request
Jun 2, 2026
skills: add pretext (creative demos with @chenglou/pretext)
Egavasyug
pushed a commit
to Egavasyug/hermes-agent
that referenced
this pull request
Jun 10, 2026
skills: add pretext (creative demos with @chenglou/pretext)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Context
Adds a
pretextskill underskills/creative/so Hermes can make cool browser demos with@chenglou/pretext— Cheng Lou's 15KB zero-dep DOM-free text-layout library that's been going viral on X for its wild creative demos (text flowing around dragged sprites, ASCII dragons, text-made-of-Tetris, etc.).The author literally tweeted "throw your AI into making cool demos for it" — so this skill teaches that AI how.
What's in the skill
SKILL.md(13.5 KB) — positions pretext as a creative primitive, not plumbing. Covers both use-cases (height-onlyprepare/layoutand manual-renderprepareWithSegments/layoutNextLineRange), a creative-standard section, workflow, perf notes, 8 named pitfalls, verification checklist, and links to the community demo corpus at pretext.cool.references/patterns.md(8 KB) — 7 copy-pasteable demo recipes: flow-around-obstacle, text-as-geometry game, shatter/particles, proportional ASCII surfaces, editorial multi-column, multiline shrink-wrap, kinetic type, plus a font-stack palette table.templates/hello-orb-flow.html— minimal starter: a paragraph flows around a mouse-tracked glowing orb usinglayoutNextLineRangewith a per-row corridor-width function.templates/donut-orbit.html— the money demo: a full 3D Sloane torus rendered entirely from prose graphemes, with orbit controls (drag to rotate, scroll to zoom, idle auto-rotate). Amber-on-black CRT aesthetic, z-buffer keyed by screen cell, 60fps on my laptop.Verified
Both templates tested in-browser via a local static server. No console errors,
measureLineStatsreturns a real value, drag+zoom confirmed working, ~60fps measured.Conventions
tools/skill_manager_tool.pyconstraints (name ≤64, description ≤1024, body ≤100k — all well within).skills/creative/(overview → when-to-use → creative standard → stack → patterns → workflow → pitfalls → checklist).related_skillsall resolve in-repo (p5js,claude-design,excalidraw,architecture-diagram).esm.shCDN, pinned to@0.0.6. No build step, no Node deps added.How to try the donut
Drag to orbit, scroll to zoom. Let go and it idle-rotates.