Cinematic UI

Direct a website the way a film is made: cast a director and a film, choose the medium the film calls for (photoreal 3D, hand-drawn, ink wash, print, pixel, neon, type, photography…), cast a lead, ask for the assets, write a shot list for every section, then shoot it with a scroll-driven camera, designed cuts, a grade, and a screening pass on rendered frames. Use for Awwwards / Framer-grade landing pages, brand, product, portfolio and studio sites, immersive or WebGL / 3D sites, scrollytelling, "cinematic", "film style", "director style", "電影感", "導演風格", "分鏡", "像拍電影一樣做網站", a director's colour o

90 stars 24 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add akseolabs-seo/cinematic-ui --skill cinematic-ui

Manual install

git clone --depth 1 https://github.com/akseolabs-seo/cinematic-ui.git /tmp/cinematic-ui
mkdir -p ~/.claude/skills
cp -r /tmp/cinematic-ui/. ~/.claude/skills/cinematic-ui

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Cinematic UI 2.0 — Director's Cut

You are the director. The site is a film whose playhead is the scrollbar. A section is a scene, the
viewport is the frame, a scroll is a cut or a camera move, and the visitor is the audience, the editor,
and — once — a participant. You are not decorating a layout. You are deciding what the audience sees, in
what order, from where, in what light, made of what, for how long — and why.

One idea carries the whole skill: **borrow the film's mechanics, never its costume.** A director's style is
a set of decisions (where the camera stands, how long a shot holds, what the light hides, how a cut
lands, what the picture is made of). Those decisions translate into structure, motion, medium and
material. Film titles, characters, props and quotes do not appear in the product's UI unless the user
asks for a homage.

## Sites and apps

| | Site | App |
|---|---|---|
| Playhead | Scroll (and the visitor's other triggers) | The task: routes, selection, filters, the record's state |
| Output | A website people visit | A dashboard, back office, admin panel, console or logged-in product a crew works in all day |
| Rhythm set by | The visitor's hand | The shift: the same few jobs, hundreds of times |
| Read | everything below | **`references/app-mode.md` first**: it replaces stages 1, 6, 7 and 9, the award pass, the loader and the lazy cut, and changes how the rest apply |

Read the full skill on GitHub

Details

Skill name: cinematic-ui
Repository: akseolabs-seo/cinematic-ui
License: MIT
Repo updated: 31 October 2026

FAQ

What does the Cinematic UI skill do?

How do I install the Cinematic UI skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add akseolabs-seo/cinematic-ui --skill cinematic-ui. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Cinematic UI popular?

It lives in akseolabs-seo/cinematic-ui, which has 90 GitHub stars and 24 forks.

Related skills

Frontend Textbooks

108

onepixelaway/frontend-textbooks

Create designed US Letter HTML textbooks, manuals, field guides, business books, and coffee-table books from supplied manuscripts, then verify and export matching PDFs. Use for new manuscript-to-book work, existing HTML book enhancement, print/mobile layout repair, manuscript-preserving diagrams or editorial imagery, and final book production.

Frontend & Design

Anti UI Slop

uizze/uizze

Stop coding agents from shipping generic UI. Use UIZZE's 800,000+ real web and iOS screens to build product-specific interfaces, define a design contract, cover required states, and run a hard finish gate. Use when designing, implementing, redesigning, critiquing, or pre-ship reviewing a web or iOS interface in Codex, Claude Code, Cursor, Copilot, or another coding agent. Trigger with "anti-ui-slop", "stop UI slop", "ground this UI in real screens", or "run the UI finish gate".

Frontend & DesignIn 1 list

Data2motion Lite

nolangz/data2motion

Lightweight, script-driven variant of data2motion for turning data into a smooth, on-brand animated chart (one self-contained HTML) — built for a TEXT-ONLY model that cannot see its own output. You never write HTML/CSS/SVG/animation; you extract the data, pick a chart, fill a small JSON spec, and run one build script that owns 100% of the look and the motion, so the result cannot drift from the house template style or lose its smoothness. Use to turn a number/stat/table/CSV/paragraph into a quick animated chart, data reveal, or KPI when you want guaranteed template fidelity with minimal reason

Frontend & Design11

Nerv UI

mdrbx/nerv-ui

Build original, accessible React command-center interfaces with the published @mdrbx/nerv-ui component library. Use for dashboards, monitoring terminals, operational tools, authentication screens, or sharp industrial HUD-style UI in React, Vite, or Next.js.

Frontend & DesignIn 1 list

Shader for Interfaces

120

v2space-labs/shader-for-interfaces

Decide whether an interface effect should stay in CSS, SVG, or Canvas 2D or needs WebGL or WebGPU, then create, integrate, diagnose, and visually verify focused GPU effects inside product interfaces. Use for contained Three.js/WebGL2/GLSL or vgpu/WebGPU/WGSL surfaces, modest particles, GPU data views, and responsive canvases in TypeScript or React. Do not use for dependent passes, persistent simulations, formal render graphs, adaptive-quality systems, or renderer migrations.

Frontend & Design

Tidyfactor Styler

120

TidyFactor/Styler

Production framework styler and surgical RTL UI polish engine with Contextual Decision Layer (CDL). Operates directly inside existing codebases across React/Next.js, PHP, WordPress, and Vanilla HTML/CSS/JS. Trigger on commands 'brief', 'component', 'section', 'page', 'redesign', 'typography', 'palette', 'layout', 'rtl', 'motion', 'styles', or requests for UI polishing and RTL refactoring.

Frontend & Design11

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.