agentsclimarketplace

Pretext frontend motion

Skill HongMing-Huang/pretext-frontend-motion

Multi-CLI skill bundle and npm CLI for Pretext-driven text layout, typography, and frontend motion.

Install
npx -y skills add HongMing-Huang/pretext-frontend-motion

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 4 stars4 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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

2.0 KB, as published. Nobody here has run it

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.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.