Loading the repository README…
Showing 39 of 39 collected skills.
Change what Design Agent knows and does. Teach it a new deliverable with a runtime skill, change its instructions, design doctrine or checks, connect MCP servers and tools, or change models and cost caps. Use when someone wants it to make something new,…
Design doctrine to weigh on any visual. Hierarchy, typography, colour, layout, platform sizes, chart and diagram principles, and the review rubric critics score against.
Direct and review motion built in HyperFrames, from a sting to a film. The idea and its turn, timing on a grid, craft, named moves, sound on the picture, and the review rubric.
On-brand still images built as HTML and rendered in a real browser, such as ads and banners in several sizes, social images, carousels, and paged PDFs (one-pagers, booklets, static decks). Not for charts or diagrams (data-viz), thumbnails or motion.
Put Design Agent in a team's Slack. Deploy it to Managed Deep Agents (one command, managed Slack app) or self-host it with Docker Compose, verify it with a real request, ship updates, and keep a separate test copy. Use when someone wants the agent running for…
Diagnose Design Agent when something fails. Setup, a render, a deploy, Slack or a model call. Run doctor and the connection tests, read logs and traces, match the symptom to its fix, and never print credentials. Use when a command errors, a reply never comes,…
Bring a fork or clone of Design Agent up to date with the upstream repository while keeping the team's brand, skills and edits, rebuild what changed, and redeploy safely. Use when someone asks to update, upgrade or pull the latest Design Agent.
Run the release gates before tagging a Design Agent release: hygiene, secrets, licenses, docs, tests, and the human reviews.
Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns…
Move a vendored upstream (HyperFrames, LangSmith skills, Deep Agents skills) to a newer pin, re-vendor its skills unmodified, verify them, and update everything that depends on the pin.
Find out whether a change made Design Agent better or worse. Run the eval set or a few tasks before and after against the same model, read the reports, look at the files, and turn a real request that went wrong into a task. Use after changing instructions,…
Install and configure Design Agent, add a brand, connect Paper, choose MDA or self-hosting, and diagnose setup without exposing credentials.
Build the active brand pack in workspace/brand/ from a brand guide, website, files or a Paper file, validate it, and have a person review it.
Charts, stat cards, flywheels and diagrams (flows, architectures, hierarchies) rendered on brand from a JSON spec to PNG and SVG. Use for any visual whose job is numbers or relationships, including restyling an attached chart or diagram.
Visual judgment for a new asset or a restyle of a supplied one. The concept gate, choosing ground, accent and type from the brand pack, and preserving a supplied reference.
Turn a vague or multi-asset design ask into a brief. Pull what is already known, ask at most two questions with reasons, decide the rest and say what you decided.
Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog.…
Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept…
Measure a film someone hands you (cuts, contact sheets, motion energy, beat grid, colours) and compare a recreation against it frame by frame. Use for "recreate this", "make one like this", "what makes this work", "match this pacing" or "time it to this…
Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform…
Edit animated GIFs and screen-recording GIFs with ffmpeg and sharp (reframe to exact dimensions, swap on-frame text, retime, trim or reorder the loop, add a zoom-and-pan camera, encode small). Still images go to image-ops.
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API,…
Use the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, cloudrun, feedback, lambda, doctor, browser, info, upgrade,…
The HyperFrames composition contract — build one renderable project. Use for composition structure, the `data-*` timing attributes, `class="clip"`, tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and…
Mandatory entry point: read this first for any request to make, create, edit, animate, or render a video, animation, or motion graphic, including a promo, explainer, captioned clip, title card, overlay, slideshow or interactive deck, Remotion port, or any…
Generate original imagery with the generate_image host tool, such as illustrations, scenes, textures, hero objects, look plates for storyboards and transparent cut-outs. Not for layouts, logos, exact copy, charts or product UI.
Deterministic pixel work on an existing image with sharp, Photoshop's image menu in code (resize, crop, rotate, tint, trim, flatten, pad, composite with blend modes, convert, compress, read metadata). Not for new pictures or branded layouts.
Direct and produce a 30 s to 3 min launch film, teaser or recreation with helpers, from brief and storyboard approval through parallel acts, reviews, the final render and cut-downs.
Route any design or motion request to the right pipeline and skill, from a single still to a launch film. Use first for every new ask.
Agent Media OS for a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-ready block + ledger record (one verb, `resolve`); generate via TTS / music / image models when the catalog…
A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location),…
Turn a music track (an audio file, a video to pull audio from, or a track generated from a mood brief) into a beat-synced video — lyric video, slideshow, or kinetic promo. The music drives all pacing; any user-supplied images/videos are cut onto the same beat…
Draft on the shared Paper canvas when paper_ tools are present (layouts, storyboard twins, thumbnails people will nudge), read a Paper brand file, and what to do when Paper is not connected.
Turn a GitHub pull request (a PR URL, owner/repo#N, or 'this PR' in a checked-out repo) into a code-change explainer video — changelog, feature reveal, fix, or refactor walkthrough built from the diff, commits, and files: the input is a code change, not a…
Study a film someone supplies, frame by frame, to learn what makes it work. Measure it, write a teardown, and propose observations or skill edits for a person to approve.
Sound for a film or animation, covering voiceover, music bed, sound effects, UI cues, mixing and mastering to -14 LUFS. Use when a video needs sound, a voiceover, or a silent render needs a score.
Plan a new film or animation before it is built, from the argument to a beat sheet, a handoff sheet and on-brand pose frames on one contact sheet for sign-off. Not for revisions to an approved or delivered video.
Video thumbnails and A/B thumbnail sets, including refreshes of an older video's thumbnail, with small-size legibility checks. A thumbnail is a still; banners and social images go to stills.
Look at your own renders before delivery and fix what is off. A restyle beside its source, a pixel-level fix as zoomed before/after crops, a video as a filmstrip of key frames.
Copy this prompt into the AI assistant you're using.
Follow https://skillsmp.com/skill-install/prompt.md to install Agent Skills from https://github.com/langchain-ai/design-agent.Repository README source: README.md
Read the source README