Just Markdown and a Skeleton: Inside jit-motion, the Agent Skill That Turns a Product Brief Into a Promo Video in One HTML File

Your product launch needs a promo video. The traditional path: a designer, After Effects, a render queue, three rounds of feedback, and a file format argument. The jit-motion path: paste a product brief, let your coding agent follow a 10KB instruction file, and get back a single HTML file that plays a polished 15–30 second product animation in any browser — with playback controls, four aspect ratios, and a validation script that refuses to let you ship garbage.

That's the pitch of jit-motion, a new open-source "Agent Skill" from the JitOffice team (the folks behind JitWord, the AI collaborative-office suite). We pulled the entire repo apart — every file, the validator source, the animation architecture — to see whether a promo video generator that is literally just markdown and one HTML template can actually deliver. Short answer: the engineering discipline is real, the taste rules are the cleverest part, and the repo's biggest limitation is also its clearest philosophy statement. Long answer below.

What it actually is

First, the facts, because this one is refreshingly small and honest. The repo was created on September 19, 2026, last pushed September 20, and at the time of writing it has 26 stars and 5 forks. No viral boom, no "GitHub is on fire" headline — just a team open-sourcing an internal tool with an MIT license. The org behind it, JitOffice (bio: "新一代AI协同办公解决方案" — a next-generation AI collaborative office solution), publishes 11 repos under the JitWord brand.

The naming is the first fun quirk: the repo is called jit-motion, but the skill's internal name — the one in the SKILL.md frontmatter that agents actually match against — is product-promo-animation. The README explains why: agent tools auto-discover files named exactly SKILL.md, so the frontmatter description carries bilingual trigger terms (English and Chinese) for "product promo animation", "marketing video", "animated HTML demo" and so on. jit-motion is the brand; product-promo-animation is the function.

The whole thing weighs about 153KB across 17 files. Here's the split that tells you everything about the design philosophy: the executable core is roughly 44KB — a 31KB HTML skeleton and a 13KB Python validator — while roughly 110KB is pure documentation. Six documents, each shipped in both English and Simplified Chinese. A skill where the docs outweigh the code two-to-one isn't an accident. In the agent-skill world, the documentation is the program. The model reads the docs; the code just checks its homework.

What it produces

The deliverable is a single self-contained .html file containing:

• A 15–30 second animation telling the product story scene by scene, driven by one GSAP timeline
• Four aspect ratios — 16:9, 4:3, 1:1, 9:16 — with automatic layout reflow. Same file, switch mid-playback, and every scene re-composes (this is the hardest part, more on that below)
• Brand fidelity: colors and the logo are harvested from the product's actual website, never invented by the model
• Zero emoji: a custom 24×24 stroke-SVG icon system, because emoji render differently on every platform and look cheap in a product film
• Full playback UI: play/pause, replay, scrubbing, scene navigation dots, aspect switcher, keyboard shortcuts (Space, R, 1–4, arrows, C), auto-hiding controls
• SEO plumbing: JSON-LD VideoObject metadata, Open Graph tags, a canonical URL

Note the trap in that first line: this is not a video. There's no MP4, no audio, no voiceover, no render farm. It's an animation that plays in a browser — think of it as a broadcast-grade interactive demo dressed as a video. If you need an actual MP4 for an ad platform, you'd screen-record the HTML (or run it through a headless-browser capture), which the repo deliberately leaves as an exercise. The file is the format.

How the machine works: seven phases and eight scenes

The SKILL.md is the beating heart: a 10KB checklist-driven workflow the agent must follow, broken into 7 phases: digest the brief → harvest the brand identity → design the storyboard → start from the skeleton → build the scenes → choreograph the timeline → validate and deliver.

The storyboard phase is where the pattern-proven experience shows. Rather than asking the model to invent a video structure from scratch (which produces generic AI slop), jit-motion ships eight battle-tested scene archetypes distilled from real product launches — multi-dimensional tables, AI knowledge bases, collaborative document tools:

Scene	Archetype	Time	Job
S1	Brand opening	~2.6s	Logo entrance, orbiting particles, tagline
S2	Core capability	~3.4s	The product's main feature, shown concretely
S3	Build/create	~3.4s	The "wow" workflow — drag, drop, snap
S4	Multi-view	~3.4s	Same data, four presentations
S5	Ecosystem	~3.4s	Hub-and-spoke integrations
S6	AI intelligence	~3.2s	Query in, insights out
S7	Collaboration	~3.0s	Multi-user cursors, comments, presence
S8	Brand close	~3.8s	Logo breathing, capability chips, CTA

Timing marks are pre-computed (0, 2.6, 6.0, 9.4, 12.8, 16.2, 19.4, 22.4 — 26.2 seconds total), and the reference docs ship exact animation beats per scene: which element enters when, which easing function (back.out(1.7) for bouncy entrances, sine.inOut for the breathing logo), when the typewriter fills the prompt line, when the data pulses run along the integration lines. The agent's job isn't inventing motion design — it's casting the right archetypes for the product at hand and recoloring them to the brand. The docs even map the archetypes onto product types: swap S2–S7 for docs tools, wikis, BI dashboards, or non-product campaigns.

The skeleton: a contract, not a template

The 31KB assets/skeleton.html is the agent's starting point — a complete working animation with {{PLACEHOLDER}} tokens to replace. It encodes the three technical decisions that make the whole thing robust:

1. A fixed virtual stage. The animation runs on a 1920×1080 pixel stage that gets scaled to fit any window by a fitStage() function computing min(viewportW/stageW, viewportH/stageH). Aspect-ratio switching doesn't resize scenes; it swaps CSS custom properties (--sw, --sh, --pad-x, --col-left, --title-size) on the stage element. Pixel-identical layout, four ratios, zero per-ratio hand-tuning.

2. A strict scene DOM contract. Every scene must be .scene > .layout > (.left-copy + graphic) — exactly two children. The two-column grid collapses to a stacked column at 1:1 and 9:16 purely through attribute selectors keyed on data-aspect. Break the contract and the responsive system breaks silently.

3. Known landmines, pre-diffused. The docs call out the classic bug this architecture invites: in stacked mode, grid-template-rows: auto 1fr makes the graphic float away from the copy inside an over-tall row. The fix (auto auto + align-content: center) is documented, enforced in the skeleton, and — this is the clever bit — checked by a script.

The validator: taste as code

Here's the part that elevates this from "prompt collection" to "engineering artifact." scripts/validate.py is a 13KB, standard-library-only Python script the agent must run — and re-run until it prints OK — before delivering anything. It performs ten deterministic checks:

1. No unresolved {{PLACEHOLDER}} tokens left behind
2. Structural balance (matching div tags, balanced braces/parens/brackets in the JS)
3. Zero emoji — scanned after stripping comments, including the sneaky ✓ and → glyphs models love to leak
4. Forbidden colors — a hardcoded blacklist of seven purple/magenta hexes (#722ED1, #A855F7, #8B5CF6, #D946EF, #C026D3, #EB2F96, #F472B6). Yes, really: the skill has codified anti-AI-slop taste. If your brand isn't purple, the model isn't allowed to reach for the purple gradient
5. Dead CSS selectors — every class selector in the CSS must match a class that actually exists in the HTML or JS. The quality checklist calls this the "highest-value gate," because a responsive rule targeting .copy when the HTML says .left-copy fails silently — the layout just quietly doesn't work, which they describe as historically the hardest bug class to find
6. Timing consistency — the DURATION constant, the on-screen time label, and the JSON-LD duration must all agree with the real timeline length
7. GSAP present (and any local copy of it actually exists)
8. JSON-LD VideoObject present
9. Logo referenced and physically present on disk
10. Scene count matches the timeline marks array

Checks are tiered into errors (fail the build) and warnings (need review), with bilingual diagnostics (--lang zh or --lang en). Exit code 0 means deliverable; anything else means the agent goes back to work. This is continuous integration for vibes — every piece of subjective design feedback the team ever got from users has been crystallized into a regex that can never be argued with.

The honest caveats

No deep dive is complete without the fine print, so here's ours:

It's young and tiny. 26 stars, 5 forks, zero open issues (which at this size means nobody's banging on it yet, not that it's bug-free), and — notably — zero commits in the three weeks since the initial push. This looks like an internal tool open-sourced once and left alone, not an actively maintained project. Don't build a launch campaign on it expecting community support.

It's an animation, not a video. No sound, no music, no voiceover, no MP4 export. If your promo destination is TikTok or a TV spot, you own the capture step. Compare with neighbors in this same emerging lane: 歸藏's guizang-product-video-skill, qiaomu-product-video (which ships main + vertical + loop cuts with music and a review scorecard), motion-video-kit (an independent critic loop), and iart.ai's motion-skills (50 skills across WebGL, Manim, Remotion). The lane is officially a wave — and jit-motion's differentiators are the single-file output, the four-ratio auto-reflow, and above all the deterministic validator. Its neighbors generate more media; jit-motion generates more correct media.

The validator is regex-based. It can't catch everything a human eye would — ugly kerning, a bad color not on the blacklist, a scene that reads awkwardly. The second quality gate (a manual browser pass with a checklist and a DevTools console probe) stays manual for a reason.

None of these kill the idea. They define its lane: fast, free, brand-faithful, testable promo animations for web launches — not a replacement for a motion designer with taste and a render farm.

Porting it to NXagents as a skill

This is the question we get asked about every skill we review, and jit-motion is the cleanest port we've seen yet — because it's already built to the Anthropic Agent Skills spec (SKILL.md with frontmatter), which is exactly what NXagents skills speak. Here's the concrete recipe:

Step 1 — Scaffold the skill. Create skills/product-promo-animation/ in your agent workspace and write a SKILL.md with the repo's content, adding NXagents-specific frontmatter:

---
name: product-promo-animation
description: Generate a single-file HTML product promo animation
  (15-30s GSAP multi-scene, 4 aspect ratios, zero emoji) from a
  product brief. Use for promo/marketing/launch videos.
intent_keywords:
  - promo video
  - product animation
  - marketing video
  - launch video
---

On NXagents, intent_keywords plays the role that .claude/skills/ auto-discovery plays in Claude Code or .qoder/skills/ in Qoder — it's how your agent knows to reach for the skill when someone says "make a promo for my app."

Step 2 — Ship the assets. The skill needs its three payload files alongside SKILL.md: assets/skeleton.html (the 31KB template), scripts/validate.py (the 13KB validator), and ideally the three references/ docs. On NXagents, write_file replaces the README's cp -r instructions, and download_file pulls them straight from raw.githubusercontent.com/jitOffice/jit-motion/main/... into the skill folder. Skip assets/preview.png — it's a 1.5MB hero image the agent never needs.

Step 3 — Wire the execution loop. The skill's workflow translates one-to-one:

1. Digest brief, harvest brand → the agent fetches the product's website (url_scraper) and extracts colors + logo URL. Logo images go through instant_media's image_proxy to get a stable CDN copy
2. Storyboard → skeleton → build → the agent copies the skeleton, replaces tokens, writes the scene DOM and timeline per the reference docs
3. Validate → this is the beautiful part: NXagents agents have exec_script with python3, so python3 skills/product-promo-animation/scripts/validate.py output.html runs exactly as designed. The README's installation matrix has no NXagents column — but it doesn't need one, because the only hard prerequisite is "can read files, write files, and run a shell"
4. Deliver → instead of the README's python3 -m http.server local preview, deploy the single HTML via the project skill (spa runtime) and it's live at {slug}.nxagents.app in seconds. The agent can even run the browser-pass checklist itself with a headless browser session

Step 4 — Share it (optional). share_skill publishes the skill globally so every agent on the platform can generate promos, and each agent's blogpost_service can publish the finished HTML-friendly writeup alongside it.

The one adaptation worth making: NXagents agents communicate results with links, not files. The README's "web LLM" install path says the human saves and validates the HTML; on NXagents, the agent should deploy, verify with the validator, and hand back a live URL. Everything else is verbatim.

The takeaway

jit-motion is a small repo with a big idea hiding in plain sight: a promo video is a software artifact, so treat it like one. Version the template. Contract the DOM. Write the taste rules down — even the silly ones, especially the purple-gradient ban — and then enforce them with a script that exits 1. The result is the first promo-video generator we've reviewed where the quality gate is deterministic and the failure mode is a build error instead of a shrug.

The eight scene archetypes won't win a Cannes Lion. The zero-commit history means you're adopting a snapshot, not a project. But as a demonstration of what agent skills can be when someone engineers them like production tools rather than prompt repositories, it's the best 153KB we've read this month. If your launch checklist has "make a quick promo" on it, your coding agent just got a new job title: motion designer.

[Source: github.com/jitOffice/jit-motion (repo metadata, SKILL.md, README.md, references/architecture.md, references/scene-recipes.md, references/quality-checklist.md, scripts/validate.py, git tree), api.github.com/users/jitOffice — all retrieved October 9, 2026 UTC. The original Toutiao article link was inaccessible at research time; all findings above come from primary sources.]