dynamic-markup

Recreate and verify dynamic web page behavior using deterministic Playwright-based gates for breakpoints, scrolling, animations, and interactions.

22|1|Updated Mar 30, 2026
One-click install
npx skills add https://github.com/mizchi/vlmkit --skill dynamic-markup-mizchi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: dynamic-markup
Source: https://github.com/mizchi/vlmkit/tree/main/.apm/skills/vlmkit/workflows/dynamic-markup
Command: npx skills add https://github.com/mizchi/vlmkit --skill dynamic-markup-mizchi

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve? Pixel-perfect screenshots alone cannot prove a page behaves correctly: animations may never fire, panels may grow instead of scrolling, breakpoints may orphan a width, and interactive controls may be keyboard-inaccessible. This Skill recreates pages with dynamic behavior from target screenshots plus a motion brief, then proves the behavior with deterministic gates instead of unreliable visual diffs. ## Core Features & Use Cases - Dynamic gate suite: Runs check breakpoints, scan scroll, check animation, check motion, and check interactions to detect boundary spikes, dead scrollports, no-visible-effect animations, reduced-motion violations, and pointer-only controls. - Reference-free defect sweep: check integrity scans 1280/768/375 viewports for overflow, text collisions, clipped content, and broken resources without needing any target image. - Behavior carriers: Uses motion briefs, interaction briefs, copy manifests, and per-state screenshots as the contract for behavior that pixels cannot express. - Use Case: Recreate a landing page that must animate on load, scroll within a fixed sidebar, and reflow at 768px — converge static pixels first via the auto-markup pipeline, then run the four dynamic gates until every suspect is fixed or explained. ## Quick Start Ask the agent to recreate the page from the target screenshots and motion brief, then run vlmkit verify markup against the targets and iterate until the verdict reports DONE.

Frequently Asked Questions about dynamic-markup

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

FAQPage Schema
How do I verify CSS animations match a motion brief?

Run check animation on the attempt page and compare its evaluated animations list against the brief line by line: count, target selector, duration, iterations, and leg time for oscillating animations. It flags no-visible-effect animations, missing reduced-motion overrides, and uncontrolled motion from rAF scripts or videos.

How to test responsive breakpoints for overflow bugs?

Use check breakpoints to render at B-1, B, and B+1 for every discovered breakpoint, catching boundary spikes, gaps, and overflow-at-boundary defects. Add --sweep to fuzz the full width range for fixed-width-child bugs that boundary checks never render.

Does this require an API key or external VLM service?

No API key is required. All gates are deterministic Playwright plus pixel and DOM math; the agent's own vision reads the target screenshots. Keys are only needed for optional vlmkit features like heal markup or check copy --vlm.

Can it detect keyboard accessibility problems?

Yes, check interactions Tab-walks the page, fires each role's canonical keys, and records ARIA transitions, focus traps, and popup behavior. The --handlers flag also finds pointer-only controls that have click handlers but no role or keyboard support.

Why does my page pass pixel diffs but still fail verification?

Pixel diffs cannot see behavior bugs: a panel that grew instead of scrolling, an animation that never fires, or a dead aria-expanded attribute. The dynamic gates (scan scroll, check animation, check interactions) detect exactly these classes, which is why the done condition requires both converged composition and clean gates.

When should I use dynamic-markup instead of auto-markup?

Use dynamic-markup when the task specifies how the page behaves — resizes, scrolls, animates, or responds to keyboard input — not just how one screenshot looks. Static pixel convergence itself is delegated to the auto-markup pipeline as Phase A.