# 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.

- Skill: `hongming-huang/pretext-frontend-motion` (Agent Skill, multi-file: 12 files)
- Install (CLI): `npx skillmds@latest add hongming-huang/pretext-frontend-motion`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hongming-huang/pretext-frontend-motion/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: HongMing-Huang (https://skillmd.com/u/hongming-huang)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/hongming-huang/pretext-frontend-motion

---


# 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

1. 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 flows
5. 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.