Menu

Individual skill

cinematic-ui

0upvotes

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 or film look (retro / nostalgic, film grain, neon / futuristic, "復古懷舊", "霓虹", "調色", "美術風格", "海報風格"), premium non-template design. Also directs apps in app mode: dashboards, back offices, admin panels, consoles, internal tools and the signed-in side of a SaaS product ("後台", "管理後台", "儀表板", "控制台", "面板", "dashboard", "admin").

SKILL.md

Read pinned source

Source commit 37651d0f59e83a5236e8773aa915cce93f2e7fc3

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
No
Repository scan complete
No
Skill scan complete
No
Observed behavior
Not checked yet
Last checked
Nov 6, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings)
102
Repository last updated
Oct 31, 2026
License
MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# 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
Back to top