Two design skills for showing off software: one directs slow, close-up 'hero shot' launch films and stills of your real interface, the other drives your running web app and crops tidy, framed screenshots for docs and changelogs.
In short: Two design skills for showing off software: one directs slow, close-up 'hero shot' launch films and stills of your real interface, the other drives your running web app and crops tidy, framed screenshots for docs and changelogs. It is a free skill for people who use Claude Code or Codex and want help with motion graphics.
Checked on · Added
| Agent / tool | Access / cost | Link |
|---|---|---|
| Claude Code | Paid Claude plan or API | claude.com/claude-code |
| Codex | ChatGPT plan or API | openai.com/codex |
| GitHub repo | Open source · ★ 217 | 1weiho/skills |
Real videos made with this skill, credited to their creators. Hover to preview.
LAUNCH0:51The author's 51-second launch reel for cinematic-shot: steep, close camera angles glide over real product pages on a black stage, with a thin band of focus, text typing itself and hard cuts, before ending on the one-line install command.
APP DEMO0:37A 37-second screen recording: the author asks the agent for a screenshot of a slide app's comment mode, picks the clean style, and the skill opens the real app, stages the scene and returns a cropped, shadowed window ready for the docs.
npx skills add 1weiho/skills npx skills add 1weiho/skills --skill cinematic-shot npx skills add 1weiho/skills --skill clean-ui-shot
Install command copied from the project README. Check the README for the latest version.
Two design skills for showing off software: one directs slow, close-up 'hero shot' launch films and stills of your real interface, the other drives your running web app and crops tidy, framed screenshots for docs and changelogs.
This repo holds two skills from a design engineer who builds slide and docs tools. cinematic-shot treats your interface like a film set: steep, low, very close camera angles on the real UI, a thin band of focus, a slow…
Short excerpt from the README of 1weiho/skills. Read the full README on GitHub.
From the original post, credited below.
cinematic-shot covers camera, framing, light and the edit only; it leaves the rendering tool to your agent, so results depend on the stack it picks. clean-ui-shot opens your running app in a real browser, so point it at a local or staging copy, not production with real customer data. The old 1weiho/cinematic-shot link now redirects here.
Two design skills for showing off software: one directs slow, close-up 'hero shot' launch films and stills of your real interface, the other drives your running web app and crops tidy, framed screenshots for docs and changelogs.
It works with Claude Code and Codex. The code is on GitHub at 1weiho/skills.
Free & open source (MIT). No account or API key. Your agent renders the film with whatever video stack you already use; clean-ui-shot needs Playwright.
Run the install command from the README: “npx skills add 1weiho/skills”. Check the README on GitHub for the latest version, then follow the steps on this page.
We read 9 instruction and code files in the repo and found no red flags. That is not a guarantee, so review anything that runs commands on your machine.
All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.
SKILLA clickable library of 192 named effects (motion-graphics moves, camera moves and transitions, UI parts, landing-page effects, photo looks), each with a moving sample and an example request. Its skill opens the gallery, lets you tick the ones you like and sends their specs and reference code straight to your agent.
Claude Code +1★ 849
SKILLA free library of 232 pixel-art effects written as small code files (fire, explosions, magic, weather, UI pops, pickups, transitions) that you can drop into a browser game or export as sprite sheets, plus a Claude Code skill that drafts, renders, looks at and refines new effects until they hold up.
Claude Code★ 147
SKILL0:56Open-source renderer that turns HTML/CSS/JS scenes into frame-exact MP4s; built so coding agents can drive it.
Claude Code +1★ 63.8k
SKILL0:34Type /brag in a project; it reads the code and renders a ~20s launch film with music, captions and share copy.
Claude Code +1★ 16k
SKILL0:28Draws detailed, interactive isometric cutaways of real objects as code; a port also runs in ChatGPT/Codex.
Claude Code +1★ 10.6k
SKILLA Remotion video skill that captures your real product pages, picks shots from a library of 150+ tuned motion recipes, storyboards the film, cuts it to the beat with sound design and hands back an MP4 plus the source you can keep editing.
Claude Code +1★ 13.7kFree newsletter
New AI tools you can use right away, in plain words. Every Friday.