Cinematic UI skill
A skill that makes the agent cast a director, storyboard a site, shoot the page with scroll and screen the frames.
- 104 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Node scripts launch a browser and may download clips from open libraries into the project.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/cinematic-uiDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Node scripts launch a browser and may download clips from open libraries into the project.
This is third-party code. Review the repository files before installing.
What it does
Cinematic UI, a version 2.8 skill, leads the agent from idea to site like a film production. The agent picks a director and the medium of the picture (ink, pixel, print, neon, photography, 3D), writes a screenplay and a shot list for each section, builds a page with a scroll-driven timeline and checks the result on rendered frames at three viewport sizes. A separate app mode sets rules for dashboards and back offices, where cinema takes a small part of the frame. The bundle has JS modules in `kit/`, 44 text effects and a `find-footage.mjs` script that searches open libraries for video and records sources in `CREDITS.md`.
Who it is for. Front-end developers and designers who build landing pages, portfolios and dashboards in Claude Code or Codex and want to move away from a templated look.
Good fit when
- A coffee subscription landing page should look like an authored project and not a set of cards.
- A client brought a film reference, and its mood moves into the site: color, rhythm, material.
- An admin panel or dashboard gets one recognizable signature in place of the usual row of metrics.
- A finished site is screened frame by frame at three viewport sizes and returns a fix list.
Not a fit when
- A standard page on a ready theme must come in one pass: ten production stages are excessive.
- The task is not a site or web app: the skill directs browser interfaces.
- The brand style is specified in detail and must not change.
Example request
/cinematic-ui a homepage for a coffee subscription, pick the director and medium yourself.Limitations
The screening and render scripts need `playwright-core` in the project and an installed Chrome or Edge, and video needs ffmpeg. The agent asks for assets once: the user supplies them, they come from a free library, they are generated or the shot changes. Clips from open libraries arrive with sources listed in `CREDITS.md`. The live demos on the author's site were made for fictional brands. The skill runs a ten-stage process, which feels heavy for a small edit. The repository is MIT licensed.
How to disable. Delete the `~/.claude/skills/cinematic-ui` folder (or `~/.codex/skills/cinematic-ui`). If you added `playwright-core` for screening, remove it from the project dependencies separately.
FAQ
How do I run the skill?
With `/cinematic-ui` and a page description. The agent picks the director, medium and shot list itself and asks only when the product is unclear, assets are missing or before publishing.
Does it suit back offices?
Yes. App mode covers dashboards and consoles: cinema takes a small part of the frame and screens are checked in eight states by `app-screening.mjs`.
Does it work in Codex?
Yes, clone the folder into `~/.codex/skills/cinematic-ui`. For other agents it is enough to point at `SKILL.md`.
Can a site be recorded as video?
Yes: `node scripts/render-film.mjs ./site --tour 30 --out tour.mp4`, ffmpeg is required.
Do film titles appear in the interface?
No, unless a homage is requested. Techniques are borrowed: camera position, rhythm, light and material.
Discussion
No questions or reviews yet.
Related
SkillsA skill for Claude Code and other agents that builds websites directed like films: art direction before code, local CLI asset generation and an anti-slop linter
Three skills for memorable websites: scroll scenes and 3D, a scroll audit and a landing page strategy.
A skill for Claude Code and Codex that turns AI video and frames into web animation driven by scroll, cursor, touch or device tilt
A skill that builds a landing page with one camera flight through scenes; scrolling moves the clip forward and back.
A skill that builds a landing page where scrolling flies a camera through a generated 3D world
A free Claude skill that writes a build spec, picks cinematic media, builds a landing page and checks it with screenshots
README in short
The README describes ten production stages from idea to report, ten live demos on cinematicskill.com and how it differs from prompts like make it premium: the director is chosen by the product's dramatic problem and the result is checked on rendered frames.