How do I install the Pretext Frontend Motion skill?

Run npx skillmds@latest add hongming-huang/pretext-frontend-motion in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Pretext Frontend Motion safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Pretext Frontend Motion?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Pretext Frontend Motion free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Pretext Frontend Motion?

HongMing-Huang (@hongming-huang) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Pretext Frontend Motion by hongming-huang

Name: Pretext Frontend Motion
Author: HongMing-Huang

Pretext Frontend Motion

Build bold text-driven frontend demos across Accordion, Bubbles, Dynamic Layout, Variable Typographic ASCII, Editorial Engine, Justification Comparison, Rich Text, and Masonry. Use when the request needs strong frontend style, intentional typography, routed text layout, width-tight multiline UI, or kinetic typography driven by real Pretext measurement instead of DOM text reads.

File contents

Pretext Frontend Motion

Overview

Use this skill when the request clearly maps to an official Pretext demo family.

Do not treat Pretext as a decorative dependency. Keep it in the actual layout path.

Typical trigger patterns:

measure text height without DOM reflow
auto-fit text to a fixed number of lines
tight multilingual bubbles
routed text around an obstacle
algorithmic typography or glyph-field motion
line-breaking or justification comparison

Required Workflow

Pick the official demo family.
Pick the matching style profile before writing code.
Use the matching bundled example or blueprint.
Stay in the correct API lane:
- prepare + layout for Accordion, Bubbles, Masonry
- prepareWithSegments + layoutNextLine for Dynamic Layout and Editorial Engine
- prepareWithSegments + layoutWithLines for Variable Typographic ASCII
- walkLineRanges for width probing and layout comparison flows
Keep the design intentional.
Validate resize, mobile, and hot-path measurement rules.

Bundled Resources

core/bundle/references/official-notes.md
core/bundle/references/demo-family-map.md
core/bundle/references/prompt-recipes.md
core/bundle/references/integration-gotchas.md
core/bundle/examples/
core/bundle/integrations/
core/bundle/blueprints/

Validation Checklist

Official demo family is explicit.
Pretext is used for real measurement and layout.
No DOM text measurement in the relayout hot path.
prepare() is not rerun on every resize.
The result still looks intentional on mobile widths.

---name: pretext-frontend-motiondescription: Build bold text-driven frontend demos across Accordion, Bubbles, Dynamic Layout, Variable Typographic ASCII, Editorial Engine, Justification Comparison, Rich Text, and Masonry. Use when the request needs strong frontend style, intentional typography, routed text layout, width-tight multiline UI, or kinetic typography driven by real Pretext measurement instead of DOM text reads.---# Pretext Frontend Motion## OverviewUse this skill when the request clearly maps to an official Pretext demo family.Do not treat Pretext as a decorative dependency. Keep it in the actual layout path.Typical trigger patterns:- measure text height without DOM reflow- auto-fit text to a fixed number of lines- tight multilingual bubbles- routed text around an obstacle- algorithmic typography or glyph-field motion- line-breaking or justification comparison## Required Workflow1. Pick the official demo family.2. Pick the matching style profile before writing code.3. Use the matching bundled example or blueprint.4. Stay in the correct API lane: - `prepare` + `layout` for Accordion, Bubbles, Masonry - `prepareWithSegments` + `layoutNextLine` for Dynamic Layout and Editorial Engine - `prepareWithSegments` + `layoutWithLines` for Variable Typographic ASCII - `walkLineRanges` for width probing and layout comparison flows5. Keep the design intentional.6. Validate resize, mobile, and hot-path measurement rules.## Bundled Resources- `core/bundle/references/official-notes.md`- `core/bundle/references/demo-family-map.md`- `core/bundle/references/prompt-recipes.md`- `core/bundle/references/integration-gotchas.md`- `core/bundle/examples/`- `core/bundle/integrations/`- `core/bundle/blueprints/`## Validation Checklist- Official demo family is explicit.- Pretext is used for real measurement and layout.- No DOM text measurement in the relayout hot path.- `prepare()` is not rerun on every resize.- The result still looks intentional on mobile widths.

Frequently asked questions

Pretext Frontend Motion

File contents

Pretext Frontend Motion

Overview

Required Workflow

Bundled Resources

Validation Checklist

Related skills

Frequently asked questions

How do I install the Pretext Frontend Motion skill?

What does the Pretext Frontend Motion skill do?

Is Pretext Frontend Motion safe to use?

Which AI agents work with Pretext Frontend Motion?

Is Pretext Frontend Motion free to use?

Who published Pretext Frontend Motion?