Pick the pipeline from what the person will receive, then open its skill.
| They will receive | Pipeline | Skill |
|---|---|---|
| One image, an ad set in several sizes, a social card, a banner, a paged PDF | HTML still rendered in the browser, every size recomposed | stills |
| A deck | HyperFrames slideshow (animated) or HTML-to-PDF (static) |
stills, slideshow |
| A chart, stat card or diagram | JSON spec through ECharts or D2 with brand tokens | data-viz |
| An edited image: crop, resize, cut-out, composite, format | img.mjs operations on the file |
image-ops |
| A generated image, texture or plate | generate_image, then image-ops |
image-generation |
| A GIF | a short render or clip, palette-optimized | gif-edit |
| Thumbnails | a set of stills with legibility checks | thumbnails |
| A storyboard | frames from HTML or HyperFrames snapshots, one contact sheet | storyboard |
| A video, animation or motion graphic | storyboard, animatic, HyperFrames composition, render | storyboard, motion-direction, hyperframes |
| A 1-3 minute launch film | the launch_film pipeline (run_pipeline) |
launch-film |
| Voice, music or sound | host audio tools, then the mixer | sound |
| A teardown of a reference film | cuts, timing and audio measured, then compared | film-breakdown |
| What to learn from a film someone shares | a frame-by-frame study written to workspace/references/ |
reference-study |
If the ask is vague, use content-brief first: at most two questions, each with its reason;
otherwise decide and say what you decided.
Judgment sits beside every pipeline: brand-design for the concept gate, ground, accent and type,
and for keeping a supplied reference's structure; design-wiki for hierarchy, typography, colour,
layout, platform specs and the review rubric. For a job with several outputs or a hard requirement,
write artifact-contract.json from
brand-design's example and check it
with artifact-contract.mjs at plan and final.
Where work lives
Each job gets /workspace/projects/<slug>/ with BRIEF.md (the ask in your words), PLAN.md
for anything longer than a few minutes, sources, compositions, renders/ and review/. Files
people drop in the thread are in /workspace/attachments/.
Before you deliver
node /workspace/tools/brand-lint.mjs <composition.html>passes (exit 0). Exit 1 means fix the composition; exit 2 means the gate could not run, which you report, not ignore.- Look at every output yourself (
lookwith the files and one question;visual-verifysays how). Fix what is off. - Check outputs against the ask:
node /workspace/tools/artifact-contract.mjs --expect <file>:<W>x<H> .... - Deliver with
upload_files, then reply in one or two lines naming the calls you made.
Motion adds node /workspace/tools/video-gate.mjs <index.html> and hyperframes check (it lints
too) before any render, and a storyboard sign-off before production.
The sandbox has no network. Copy what a composition loads next to it: GSAP from
/opt/design-agent/render/node_modules/gsap/dist/gsap.min.js, the brand's tokens.css and logos
from /workspace/brand/. Upstream HyperFrames examples load libraries from a CDN; that fails here.
Paper
When Paper is connected and the work is something people will want to nudge (layouts,
storyboards, thumbnails), draft it on the canvas as well (paper-design). The thread always gets
an image people can approve, whether or not Paper is connected.