Menu

Not in the top 1,000 by GitHub stars

akseolabs-seo/cinematic-ui

An agent skill that directs websites and apps the way films are made: cast a director, write a shot list, shoot it, screen the rendered frames. For Claude Code, Codex and any agent. 讓 AI 像導演一樣拍網站與後台。Live demos: cinematicskill.com

DesignMarketing

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

SKILL.md

Week of Nov 2, 2026 · Line counts unavailable

Before Not checked yet → After Network or broad shell

First observation → 37651d0f59e8

No earlier version was observed for comparison.

Compare on GitHub

View on GitHubAdd to my skills

Verified commit 37651d0f59e83a5236e8773aa915cce93f2e7fc3

101GitHub stars
17stars in 7 days
1skill in this repository
2commits in 30 days

Heat

7.0
  • Star growth, last 7 daysNot available
  • Star growth, last 24 hoursNot available
  • Rank movement, last 7 daysNot available
  • Commits, last 30 daysNot available
  • Accounts asking about it through MCP, last 7 daysNot available
  • Hot votes this weekNot available

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Oct 25, 2026Nov 6, 2026101

30-day change not yet available: not enough history.

Individual skills in this repository

How it works

cinematic-ui

When your agent uses it

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").

What it loads into context

Frontmatter

310 tokens

Always available to the agent

SKILL.md

6,897 tokens

When the skill is activated

Reference documents

92,477 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

  1. Sites and apps
  2. The crew — what each film job means here
  3. The production
  4. The director's rules
  5. The lazy cut — refuse it
  6. The kit and the tools
  7. References — read when the stage calls for it
  8. Working with the user

Scripts executed separately

  • kit/app.js
  • kit/fixtures.js
  • kit/grade.js
  • kit/looks.js
  • kit/plane.js
  • kit/props.js
  • kit/reel.js
  • kit/stage.js
  • kit/type-fx.js
  • scripts/app-screening.mjs
  • scripts/copy-check.mjs
  • scripts/find-footage.mjs
  • scripts/generate-image.mjs
  • scripts/grade-from-stills.mjs
  • scripts/lib.mjs
  • scripts/render-film.mjs
  • scripts/screening.mjs

Files

  • .gitignoreasset145 bytes
  • CHANGELOG.mddoc26,851 bytes
  • LICENSEasset1,056 bytes
  • README.mddoc14,181 bytes
  • README.zh-TW.mddoc13,662 bytes
  • SKILL.mdcore28,795 bytes
  • SKILL.mdcore28,795 bytes
  • docs/demos/beichen-er.jpgasset67,066 bytes
  • docs/demos/latent-film-lab.jpgasset62,442 bytes
  • docs/demos/lattice-kiki.jpgasset250,106 bytes
  • docs/demos/lattice-matrix.jpgasset82,391 bytes
  • docs/demos/lockwork.jpgasset116,000 bytes
  • docs/demos/lull.jpgasset95,708 bytes
  • docs/demos/odd-lot.jpgasset92,628 bytes
  • docs/demos/purser.jpgasset119,813 bytes
  • docs/demos/retour.jpgasset52,082 bytes
  • docs/demos/tieout.jpgasset121,546 bytes
  • docs/launch-film-en.jpgasset115,414 bytes
  • docs/launch-film.jpgasset87,119 bytes
  • docs/looks.jpgasset324,232 bytes
  • kit/README.mddoc30,832 bytes
  • kit/app-shell.htmlasset37,209 bytes
  • kit/app.jsruns34,824 bytes
  • kit/fixtures.jsruns15,874 bytes
  • kit/grade-assets/CREDITS.mddoc442 bytes
  • kit/grade-assets/fog.jpgasset113,540 bytes
  • kit/grade-assets/fog.mp4asset849,670 bytes
  • kit/grade-assets/photo.jpgasset376,504 bytes
  • kit/grade.htmlasset17,195 bytes
  • kit/grade.jsruns24,411 bytes
  • kit/looks.jsruns23,442 bytes
  • kit/plane.jsruns16,671 bytes
  • kit/props.jsruns8,460 bytes
  • kit/reel.cssasset3,971 bytes
  • kit/reel.jsruns15,569 bytes
  • kit/site-dom.htmlasset6,193 bytes
  • kit/site.htmlasset7,621 bytes
  • kit/stage.jsruns18,546 bytes
  • kit/type-fx.htmlasset14,668 bytes
  • kit/type-fx.jsruns111,418 bytes
  • references/app-mode.mddoc23,491 bytes
  • references/art-direction.mddoc19,284 bytes
  • references/award-reel.mddoc20,201 bytes
  • references/directors.mddoc19,921 bytes
  • references/editing-and-motion.mddoc19,798 bytes
  • references/film-grammar.mddoc19,049 bytes
  • references/film-research.mddoc10,274 bytes
  • references/grades.mddoc23,078 bytes
  • references/looks.mddoc18,730 bytes
  • references/production-design.mddoc21,642 bytes
  • references/screening.mddoc17,273 bytes
  • references/storyboard.mddoc18,764 bytes
  • references/type-motion.mddoc20,825 bytes
  • references/vfx-threejs.mddoc19,340 bytes
  • scripts/app-screening.mjsruns29,318 bytes
  • scripts/copy-check.mjsruns3,876 bytes
  • scripts/find-footage.mjsruns17,156 bytes
  • scripts/generate-image.mjsruns3,836 bytes
  • scripts/grade-from-stills.mjsruns15,033 bytes
  • scripts/lib.mjsruns5,547 bytes
  • scripts/render-film.mjsruns18,097 bytes
  • scripts/screening.mjsruns43,837 bytes
Read 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
View the complete source on GitHub

Skills included

  • cinematic-ui

Repository facts

License
MIT
Created
Apr 3, 2026
Last pushed
Oct 31, 2026
Forks
25
Open issues
0
Project activity
Active

Before you install

Network or broad shell

Automated signals, not a guarantee

Checked Nov 6, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 1 note
  • SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
Show all 165 signals by file

CHANGELOG.md

  • Network accessline 5
    Public release of Cinematic UI 2.0 — Director's Cut. Live demos: https://cinematicskill.com/gallery/

README.md

  • Network accessline 9
    **[Website](https://cinematicskill.com/)** · **[Live demos](https://cinematicskill.com/gallery/)** · **[Docs](https://cinematicskill.com/docs/)** · English · [繁體中文](README.zh-TW.md)
  • Network accessline 12
    git clone https://github.com/akseolabs-seo/cinematic-ui ~/.claude/skills/cinematic-ui
  • Network accessline 19
    [![Watch the Cinematic UI 2.0 launch film](docs/launch-film-en.jpg)](https://github.com/akseolabs-seo/cinematic-ui/releases/download/v2.8.0/cinematic-ui-2.0-launch.mp4)
  • Network accessline 21
    **[Watch the launch film](https://github.com/akseolabs-seo/cinematic-ui/releases/download/v2.8.0/cinematic-ui-2.0-launch.mp4)** · 1:30, MP4, with sound, on-screen text in Traditional Chinese
  • Network accessline 25
    Ten live sites at **[cinematicskill.com](https://cinematicskill.com/gallery/)**, each made by an agent with this
  • Network accessline 26
    skill. Every brand is fictional; the output is real. Click a frame to open the site. Each one also has its treatment: the director, medium, lead and grade it chose, and why. The site lists the English productions in the [gallery](https://ci
  • Network accessline 27
    treatment: the director, medium, lead and grade it chose, and why. The site lists the English productions in the [gallery](https://cinematicskill.com/gallery/) and the Traditional Chinese ones in the [zh-TW gallery](https://cinematicskill.c
  • Network accessline 28
    [gallery](https://cinematicskill.com/gallery/) and the Traditional Chinese ones in the
  • Network accessline 29
    [zh-TW gallery](https://cinematicskill.com/zh-tw/gallery/).
  • Network accessline 31
    <table> <tr> <td width="50%"><a href="https://cinematicskill.com/demos/lockwork/"><img src="docs/demos/lockwork.jpg" alt="Lockwork"></a><br><b>Lockwork</b>, AI ops agents<br>Robert Wise, <i>The Andromeda Strain</i><br>A live typeset monitor
  • Network accessline 32
    <tr> <td width="50%"><a href="https://cinematicskill.com/demos/lockwork/"><img src="docs/demos/lockwork.jpg" alt="Lockwork"></a><br><b>Lockwork</b>, AI ops agents<br>Robert Wise, <i>The Andromeda Strain</i><br>A live typeset monitor wall ·
  • Network accessline 33
    <td width="50%"><a href="https://cinematicskill.com/demos/lockwork/"><img src="docs/demos/lockwork.jpg" alt="Lockwork"></a><br><b>Lockwork</b>, AI ops agents<br>Robert Wise, <i>The Andromeda Strain</i><br>A live typeset monitor wall · <a hr
  • Network accessline 34
    <td width="50%"><a href="https://cinematicskill.com/demos/purser/"><img src="docs/demos/purser.jpg" alt="Purser"></a><br><b>Purser</b>, business spend cards<br>Billy Wilder, <i>The Apartment</i><br>Monochrome CSS 3D office · <a href="https:
  • Network accessline 35
    </tr> <tr> <td><a href="https://cinematicskill.com/demos/lull/"><img src="docs/demos/lull.jpg" alt="Lull"></a><br><b>Lull</b>, incident response<br>Edgar Wright, <i>Baby Driver</i><br>The product UI as the world · <a href="https://cinematic
  • Network accessline 36
    <tr> <td><a href="https://cinematicskill.com/demos/lull/"><img src="docs/demos/lull.jpg" alt="Lull"></a><br><b>Lull</b>, incident response<br>Edgar Wright, <i>Baby Driver</i><br>The product UI as the world · <a href="https://cinematicskill.
  • Network accessline 37
    <td><a href="https://cinematicskill.com/demos/lull/"><img src="docs/demos/lull.jpg" alt="Lull"></a><br><b>Lull</b>, incident response<br>Edgar Wright, <i>Baby Driver</i><br>The product UI as the world · <a href="https://cinematicskill.com/g
  • Network accessline 38
    <td><a href="https://cinematicskill.com/demos/odd-lot/"><img src="docs/demos/odd-lot.jpg" alt="Odd Lot"></a><br><b>Odd Lot</b>, design studio portfolio<br>Jean-Luc Godard, <i>Pierrot le Fou</i><br>Flat primaries and set type · <a href="http
  • Network accessline 39
    </tr> <tr> <td><a href="https://cinematicskill.com/demos/lattice-matrix/"><img src="docs/demos/lattice-matrix.jpg" alt="Lattice, Matrix cut"></a><br><b>Lattice (Matrix cut)</b>, LLM gateway<br>The Wachowskis, <i>The Matrix</i><br>Glyph stre
  • Network accessline 40
    <tr> <td><a href="https://cinematicskill.com/demos/lattice-matrix/"><img src="docs/demos/lattice-matrix.jpg" alt="Lattice, Matrix cut"></a><br><b>Lattice (Matrix cut)</b>, LLM gateway<br>The Wachowskis, <i>The Matrix</i><br>Glyph streams of
  • Network accessline 41
    <td><a href="https://cinematicskill.com/demos/lattice-matrix/"><img src="docs/demos/lattice-matrix.jpg" alt="Lattice, Matrix cut"></a><br><b>Lattice (Matrix cut)</b>, LLM gateway<br>The Wachowskis, <i>The Matrix</i><br>Glyph streams of its
  • Network accessline 42
    <td><a href="https://cinematicskill.com/demos/lattice-kiki/"><img src="docs/demos/lattice-kiki.jpg" alt="Lattice, Miyazaki cut"></a><br><b>Lattice (Miyazaki cut)</b>, the same product<br>Hayao Miyazaki, <i>Kiki's Delivery Service</i><br>Gou
  • Network accessline 43
    </tr> <tr> <td><a href="https://cinematicskill.com/demos/latent-film-lab/"><img src="docs/demos/latent-film-lab.jpg" alt="Latent Film Lab"></a><br><b>Latent Film Lab</b>, film lab (zh-TW)<br>Michelangelo Antonioni, <i>Blow-Up</i><br>Archiva
  • Network accessline 44
    <tr> <td><a href="https://cinematicskill.com/demos/latent-film-lab/"><img src="docs/demos/latent-film-lab.jpg" alt="Latent Film Lab"></a><br><b>Latent Film Lab</b>, film lab (zh-TW)<br>Michelangelo Antonioni, <i>Blow-Up</i><br>Archival phot
  • Network accessline 45
    <td><a href="https://cinematicskill.com/demos/latent-film-lab/"><img src="docs/demos/latent-film-lab.jpg" alt="Latent Film Lab"></a><br><b>Latent Film Lab</b>, film lab (zh-TW)<br>Michelangelo Antonioni, <i>Blow-Up</i><br>Archival photograp
  • Network accessline 46
    <td><a href="https://cinematicskill.com/demos/beichen-er/"><img src="docs/demos/beichen-er.jpg" alt="Beichen Animal ER"></a><br><b>Beichen Animal ER</b>, 24-hour animal hospital (zh-TW)<br>David Fincher, <i>Zodiac</i><br>One continuous draw
  • Network accessline 47
    </tr> <tr> <td><a href="https://cinematicskill.com/demos/tieout/"><img src="docs/demos/tieout.jpg" alt="Tieout"></a><br><b>Tieout</b>, accounting SaaS (zh-TW)<br>Hideaki Anno, <i>Shin Godzilla</i><br>Typeset accounting documents · <a href="
  • Network accessline 48
    <tr> <td><a href="https://cinematicskill.com/demos/tieout/"><img src="docs/demos/tieout.jpg" alt="Tieout"></a><br><b>Tieout</b>, accounting SaaS (zh-TW)<br>Hideaki Anno, <i>Shin Godzilla</i><br>Typeset accounting documents · <a href="https:
  • Network accessline 49
    <td><a href="https://cinematicskill.com/demos/tieout/"><img src="docs/demos/tieout.jpg" alt="Tieout"></a><br><b>Tieout</b>, accounting SaaS (zh-TW)<br>Hideaki Anno, <i>Shin Godzilla</i><br>Typeset accounting documents · <a href="https://cin
  • Network accessline 50
    <td><a href="https://cinematicskill.com/demos/retour/"><img src="docs/demos/retour.jpg" alt="Retour"></a><br><b>Retour</b>, fragrance launch (zh-TW)<br>Céline Sciamma, <i>Portrait of a Lady on Fire</i><br>Real-time 3D glass by one candle ·
  • Network accessline 129
    git clone https://github.com/akseolabs-seo/cinematic-ui ~/.claude/skills/cinematic-ui
  • Network accessline 135
    git clone https://github.com/akseolabs-seo/cinematic-ui ~/.codex/skills/cinematic-ui
  • Network accessline 224
    Built on [GSAP](https://gsap.com), [Three.js](https://threejs.org) and [Lenis](https://lenis.darkroom.engineering).

README.zh-TW.md

  • Network accessline 7
    **[官網](https://cinematicskill.com/zh-tw/)** · **[線上 Demo](https://cinematicskill.com/zh-tw/gallery/)** · **[文件](https://cinematicskill.com/zh-tw/docs/)** · [English](README.md) · 繁體中文
  • Network accessline 10
    git clone https://github.com/akseolabs-seo/cinematic-ui ~/.claude/skills/cinematic-ui
  • Network accessline 17
    [![觀看 Cinematic UI 2.0 宣傳片](docs/launch-film.jpg)](https://github.com/akseolabs-seo/cinematic-ui/releases/download/v2.8.0/cinematic-ui-2.0-launch.mp4)
  • Network accessline 19
    **[觀看宣傳片](https://github.com/akseolabs-seo/cinematic-ui/releases/download/v2.8.0/cinematic-ui-2.0-launch.mp4)** · 1 分 30 秒，MP4，有聲音
  • Network accessline 23
    **[cinematicskill.com](https://cinematicskill.com/zh-tw/gallery/)** 上有十個可以實際操作的網站，全部由代理使用這個 skill 做出來。品牌都是虛構的，成品是真的。點畫面就能開啟網站；每個 Demo 也附上企劃書，寫明它選了哪位導演、什麼媒材、什麼主角和調色，以及為什麼這樣選。官網的[中文作品集](https://cinematicskill.com/zh-tw/gallery/)收中文作品，[英文作品集](
  • Network accessline 25
    <table> <tr> <td width="50%"><a href="https://cinematicskill.com/demos/latent-film-lab/"><img src="docs/demos/latent-film-lab.jpg" alt="潛影沖洗所"></a><br><b>潛影沖洗所</b>，底片沖洗<br>安東尼奧尼《春光乍現》<br>在暗房裡顯影的真實檔案照片 · <a href="https://cinematicskill.com/z
  • Network accessline 26
    <tr> <td width="50%"><a href="https://cinematicskill.com/demos/latent-film-lab/"><img src="docs/demos/latent-film-lab.jpg" alt="潛影沖洗所"></a><br><b>潛影沖洗所</b>，底片沖洗<br>安東尼奧尼《春光乍現》<br>在暗房裡顯影的真實檔案照片 · <a href="https://cinematicskill.com/zh-tw/gal
  • Network accessline 27
    <td width="50%"><a href="https://cinematicskill.com/demos/latent-film-lab/"><img src="docs/demos/latent-film-lab.jpg" alt="潛影沖洗所"></a><br><b>潛影沖洗所</b>，底片沖洗<br>安東尼奧尼《春光乍現》<br>在暗房裡顯影的真實檔案照片 · <a href="https://cinematicskill.com/zh-tw/gallery/
  • Network accessline 28
    <td width="50%"><a href="https://cinematicskill.com/demos/beichen-er/"><img src="docs/demos/beichen-er.jpg" alt="北辰動物急診醫院"></a><br><b>北辰動物急診醫院</b>，24 小時動物急診<br>大衛．芬奇《索命黃道帶》<br>一條連續手繪的線 · <a href="https://cinematicskill.com/zh-tw/gallery/bei
  • Network accessline 29
    </tr> <tr> <td><a href="https://cinematicskill.com/demos/tieout/"><img src="docs/demos/tieout.jpg" alt="勾稽"></a><br><b>勾稽</b>，會計 SaaS<br>庵野秀明《正宗哥吉拉》<br>排版成型的會計文件 · <a href="https://cinematicskill.com/zh-tw/gallery/tieout/">企劃書</a></td>
  • Network accessline 30
    <tr> <td><a href="https://cinematicskill.com/demos/tieout/"><img src="docs/demos/tieout.jpg" alt="勾稽"></a><br><b>勾稽</b>，會計 SaaS<br>庵野秀明《正宗哥吉拉》<br>排版成型的會計文件 · <a href="https://cinematicskill.com/zh-tw/gallery/tieout/">企劃書</a></td> <td><a hre
  • Network accessline 31
    <td><a href="https://cinematicskill.com/demos/tieout/"><img src="docs/demos/tieout.jpg" alt="勾稽"></a><br><b>勾稽</b>，會計 SaaS<br>庵野秀明《正宗哥吉拉》<br>排版成型的會計文件 · <a href="https://cinematicskill.com/zh-tw/gallery/tieout/">企劃書</a></td>
  • Network accessline 32
    <td><a href="https://cinematicskill.com/demos/retour/"><img src="docs/demos/retour.jpg" alt="回眸"></a><br><b>回眸</b>，香水新品發表<br>瑟琳．席安瑪《燃燒女子的畫像》<br>只靠一支燭火照明的即時 3D 玻璃瓶 · <a href="https://cinematicskill.com/zh-tw/gallery/retour/">企劃書</a></td>
  • Network accessline 33
    </tr> <tr> <td><a href="https://cinematicskill.com/demos/lockwork/"><img src="docs/demos/lockwork.jpg" alt="Lockwork"></a><br><b>Lockwork</b>，AI 營運代理（英文）<br>Robert Wise《The Andromeda Strain》<br>即時排版的監控牆 · <a href="https://cinematicskill.com
  • Network accessline 34
    <tr> <td><a href="https://cinematicskill.com/demos/lockwork/"><img src="docs/demos/lockwork.jpg" alt="Lockwork"></a><br><b>Lockwork</b>，AI 營運代理（英文）<br>Robert Wise《The Andromeda Strain》<br>即時排版的監控牆 · <a href="https://cinematicskill.com/galle
  • Network accessline 35
    <td><a href="https://cinematicskill.com/demos/lockwork/"><img src="docs/demos/lockwork.jpg" alt="Lockwork"></a><br><b>Lockwork</b>，AI 營運代理（英文）<br>Robert Wise《The Andromeda Strain》<br>即時排版的監控牆 · <a href="https://cinematicskill.com/gallery/lo
  • Network accessline 36
    <td><a href="https://cinematicskill.com/demos/purser/"><img src="docs/demos/purser.jpg" alt="Purser"></a><br><b>Purser</b>，企業費用卡（英文）<br>Billy Wilder《The Apartment》<br>單色 CSS 3D 辦公室 · <a href="https://cinematicskill.com/gallery/purser/">企劃書<
  • Network accessline 37
    </tr> <tr> <td><a href="https://cinematicskill.com/demos/lull/"><img src="docs/demos/lull.jpg" alt="Lull"></a><br><b>Lull</b>，事故應變與待命（英文）<br>Edgar Wright《Baby Driver》<br>以產品介面當作整個世界 · <a href="https://cinematicskill.com/gallery/lull/">企劃書</
  • Network accessline 38
    <tr> <td><a href="https://cinematicskill.com/demos/lull/"><img src="docs/demos/lull.jpg" alt="Lull"></a><br><b>Lull</b>，事故應變與待命（英文）<br>Edgar Wright《Baby Driver》<br>以產品介面當作整個世界 · <a href="https://cinematicskill.com/gallery/lull/">企劃書</a></td
  • Network accessline 39
    <td><a href="https://cinematicskill.com/demos/lull/"><img src="docs/demos/lull.jpg" alt="Lull"></a><br><b>Lull</b>，事故應變與待命（英文）<br>Edgar Wright《Baby Driver》<br>以產品介面當作整個世界 · <a href="https://cinematicskill.com/gallery/lull/">企劃書</a></td>
  • Network accessline 40
    <td><a href="https://cinematicskill.com/demos/odd-lot/"><img src="docs/demos/odd-lot.jpg" alt="Odd Lot"></a><br><b>Odd Lot</b>，設計工作室作品集（英文）<br>Godard《Pierrot le Fou》<br>平塗原色與排版文字 · <a href="https://cinematicskill.com/gallery/odd-lot/">企劃書</
  • Network accessline 41
    </tr> <tr> <td><a href="https://cinematicskill.com/demos/lattice-matrix/"><img src="docs/demos/lattice-matrix.jpg" alt="Lattice Matrix cut"></a><br><b>Lattice（Matrix cut）</b>，LLM 閘道（英文）<br>The Wachowskis《The Matrix》<br>由產品流量組成的字元串流 · <a hre
  • Network accessline 42
    <tr> <td><a href="https://cinematicskill.com/demos/lattice-matrix/"><img src="docs/demos/lattice-matrix.jpg" alt="Lattice Matrix cut"></a><br><b>Lattice（Matrix cut）</b>，LLM 閘道（英文）<br>The Wachowskis《The Matrix》<br>由產品流量組成的字元串流 · <a href="htt
  • Network accessline 43
    <td><a href="https://cinematicskill.com/demos/lattice-matrix/"><img src="docs/demos/lattice-matrix.jpg" alt="Lattice Matrix cut"></a><br><b>Lattice（Matrix cut）</b>，LLM 閘道（英文）<br>The Wachowskis《The Matrix》<br>由產品流量組成的字元串流 · <a href="https://
  • Network accessline 44
    <td><a href="https://cinematicskill.com/demos/lattice-kiki/"><img src="docs/demos/lattice-kiki.jpg" alt="Lattice Miyazaki cut"></a><br><b>Lattice（Miyazaki cut）</b>，同一個產品（英文）<br>宮崎駿《Kiki's Delivery Service》<br>水粉風格的繪製背景板 · <a href="https://c
  • Network accessline 106
    git clone https://github.com/akseolabs-seo/cinematic-ui ~/.claude/skills/cinematic-ui
  • Network accessline 112
    git clone https://github.com/akseolabs-seo/cinematic-ui ~/.codex/skills/cinematic-ui
  • Network accessline 193
    建構於 [GSAP](https://gsap.com)、[Three.js](https://threejs.org) 與 [Lenis](https://lenis.darkroom.engineering)。

kit/app.js

  • Executable scriptline 1
    Executable file

kit/fixtures.js

  • Executable scriptline 1
    Executable file
  • Network accessline 159
    const LONGS = ['Wolfeschlegelsteinhausenbergerdorff-Pneumonoultramicroscopicsilicovolcanoconiosis-Supercalifragilistic',   'The Honourable Maximilian Alexander von Hohenzollern-Sigmaringen of the Greater Metropolitan District Council for Wa
  • Network accessline 160
    [Credential-related source omitted]
  • Network accessline 161
    [Credential-related source omitted]
  • Possible obfuscationline 162
    const UNI = ['🧪 Test Kitchen 🍜', 'مؤسسة النور للتجارة', 'עמית כהן', 'Ñandú Ünïcödé Dž', '👨<U+200D>👩<U+200D>👧<U+200D>👦 Family Co', 'zero<U+200B>width<U+200B>break', 'Zażółć gęślą jaźń', 'Ａｂｃ　Ｆｕｌｌｗｉｄｔｈ'];

kit/grade-assets/CREDITS.md

  • Network accessline 3
    | File | Title | Author | Source | Licence | |---|---|---|---|---| | photo.jpg | Lavender at sunrise with a hint mist, Lavender Valley Farms, Oregon | Bonnie Moreland | https://www.flickr.com/photos/66741228@N05/51423070554 | Public Domain
  • Network accessline 4
    |---|---|---|---|---| | photo.jpg | Lavender at sunrise with a hint mist, Lavender Valley Farms, Oregon | Bonnie Moreland | https://www.flickr.com/photos/66741228@N05/51423070554 | Public Domain Mark 1.0 | | fog.mp4, fog.jpg | Morning Fog o
  • Network accessline 5
    | photo.jpg | Lavender at sunrise with a hint mist, Lavender Valley Farms, Oregon | Bonnie Moreland | https://www.flickr.com/photos/66741228@N05/51423070554 | Public Domain Mark 1.0 |
  • Network accessline 6
    | fog.mp4, fog.jpg | Morning Fog on Lake BRoll 10s | Alabama Extension | https://commons.wikimedia.org/wiki/File:Morning_Fog_on_Lake_BRoll_10s.webm | CC0 1.0 |

kit/grade.js

  • Executable scriptline 1
    Executable file
  • Network accessline 94
    const NS = 'http://www.w3.org/2000/svg';

kit/looks.js

  • Executable scriptline 1
    Executable file
  • Network accessline 313
    *  .boil { filter: var(--boil); }   Reduced motion holds one frame. */ export function boil({ frames = 4, fps = 8, scale = 2.2, frequency = 0.022 } = {}) {   const ns = 'http://www.w3.org/2000/svg', svg = document.createElementNS(ns, 'svg')
  • Network accessline 314
    export function boil({ frames = 4, fps = 8, scale = 2.2, frequency = 0.022 } = {}) {   const ns = 'http://www.w3.org/2000/svg', svg = document.createElementNS(ns, 'svg');   svg.setAttribute('aria-hidden', 'true'); svg.style.cssText = 'posit
  • Network accessline 315
    const ns = 'http://www.w3.org/2000/svg', svg = document.createElementNS(ns, 'svg');

kit/plane.js

  • Executable scriptline 1
    Executable file

kit/props.js

  • Executable scriptline 1
    Executable file

kit/reel.js

  • Executable scriptline 1
    Executable file

kit/site-dom.html

  • Network accessline 84
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  • Network accessline 85
    <script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.min.js"></script>

kit/site.html

  • Network accessline 79
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  • Network accessline 80
    <script src="https://cdn.jsdelivr.net/npm/lenis@1.3.26/dist/lenis.min.js"></script>
  • Network accessline 81
    <script type="importmap"> { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.186.1/build/three.module.min.js",
  • Network accessline 82
    { "imports": {   "three": "https://cdn.jsdelivr.net/npm/three@0.186.1/build/three.module.min.js",   "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.186.1/examples/jsm/"
  • Network accessline 83
    "three": "https://cdn.jsdelivr.net/npm/three@0.186.1/build/three.module.min.js",
  • Network accessline 84
    "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.186.1/examples/jsm/"

kit/stage.js

  • Executable scriptline 1
    Executable file

kit/type-fx.html

  • Network accessline 12
    The clock lives here, in the player — the library never reads time itself. --> <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 13
    --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 14
    <link rel="preconnect" href="https://fonts.googleapis.com">
  • Network accessline 15
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  • Network accessline 16
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@500;700;800;900&display=block">

kit/type-fx.js

  • Executable scriptline 1
    Executable file
  • Network accessline 106
    return e; } const SVGNS = 'http://www.w3.org/2000/svg';
  • Network accessline 107
    } const SVGNS = 'http://www.w3.org/2000/svg'; function s(tag, attrs = {}, parent) {
  • Network accessline 108
    const SVGNS = 'http://www.w3.org/2000/svg';

references/looks.md

  • Access to secretsline 174
    [Credential-related source omitted]

references/screening.md

  • Network accessline 182
    **Calibrating the eye.** When the brief names a quality bar ("Awwwards level") or reference sites, shoot them with the same script (`node scripts/screening.mjs https://… --out refs/<name>`) and put your contact
  • Network accessline 183
    them with the same script (`node scripts/screening.mjs https://… --out refs/<name>`) and put your contact

scripts/app-screening.mjs

  • Executable scriptline 1
    #!/usr/bin/env node

scripts/copy-check.mjs

  • Executable scriptline 1
    #!/usr/bin/env node

scripts/find-footage.mjs

  • Executable scriptline 1
    #!/usr/bin/env node
  • Access to secretsline 17
    [Credential-related source omitted]
  • Network accessline 27
    const args = parseArgs(process.argv.slice(2), { type: 'photo', count: 24, out: 'casting', to: 'assets', width: 1920, 'min-width': 1280, 'allow-sharealike': 'true' }); const UA = 'cinematic-ui/2.0 (https://github.com/akseolabs-seo/cinematic-
  • Network accessline 28
    const UA = 'cinematic-ui/2.0 (https://github.com/akseolabs-seo/cinematic-ui; footage research)'; // Wikimedia asks for a contactable User-Agent
  • Network accessline 34
    }; const get = async (url, headers = {}) => {   const r = await fetch(url, { headers: { 'user-agent': UA, ...headers } });
  • Network accessline 35
    const get = async (url, headers = {}) => {   const r = await fetch(url, { headers: { 'user-agent': UA, ...headers } });   if (!r.ok) throw new Error(`${r.status} ${url.slice(0, 80)}`);
  • Network accessline 36
    const r = await fetch(url, { headers: { 'user-agent': UA, ...headers } });
  • Network accessline 48
    const kind = type === 'audio' ? 'audio' : 'images';     const extra = type === 'photo' ? `&category=photograph${args.wide ? '&aspect_ratio=wide' : ''}` : '';     const d = await get(`https://api.openverse.org/v1/${kind}/?q=${encodeURICompon
  • Network accessline 49
    const extra = type === 'photo' ? `&category=photograph${args.wide ? '&aspect_ratio=wide' : ''}` : '';     const d = await get(`https://api.openverse.org/v1/${kind}/?q=${encodeURIComponent(q)}&license_type=commercial&page_size=${Math.min(n,
  • Network accessline 50
    const d = await get(`https://api.openverse.org/v1/${kind}/?q=${encodeURIComponent(q)}&license_type=commercial&page_size=${Math.min(n, 20)}${extra}`); // anonymous Openverse refuses page_size > 20 (401)
  • Network accessline 57
    if (type === 'audio') return [];     const ft = type === 'video' ? 'filetype:video' : 'filetype:bitmap';     const d = await get(`https://commons.wikimedia.org/w/api.php?action=query&format=json&generator=search&gsrsearch=${encodeURICompone
  • Network accessline 58
    const ft = type === 'video' ? 'filetype:video' : 'filetype:bitmap';     const d = await get(`https://commons.wikimedia.org/w/api.php?action=query&format=json&generator=search&gsrsearch=${encodeURIComponent(`${q} ${ft}`)}&gsrnamespace=6&gsrl
  • Network accessline 59
    const d = await get(`https://commons.wikimedia.org/w/api.php?action=query&format=json&generator=search&gsrsearch=${encodeURIComponent(`${q} ${ft}`)}&gsrnamespace=6&gsrlimit=${Math.min(n, 40)}&prop=imageinfo&iiprop=url|size|mime|extmetadata&
  • Network accessline 69
    const query = `(${q}) AND mediatype:movies AND (collection:prelinger OR collection:fedflix)`;     const d = await get(`https://archive.org/advancedsearch.php?q=${encodeURIComponent(query)}&fl[]=identifier&fl[]=title&fl[]=creator&fl[]=year&f
  • Network accessline 70
    const d = await get(`https://archive.org/advancedsearch.php?q=${encodeURIComponent(query)}&fl[]=identifier&fl[]=title&fl[]=creator&fl[]=year&fl[]=licenseurl&rows=${Math.min(n, 30)}&output=json`);
  • Network accessline 71
    return d.response.docs.map((r) => ({ source: 'archive', type, id: r.identifier, title: `${r.title}${r.year ? ` (${r.year})` : ''}`, author: [].concat(r.creator || 'Prelinger Archives')[0],       licence: r.licenseurl ? (/publicdomain\/mark/
  • Network accessline 72
    licence: r.licenseurl ? (/publicdomain\/mark/.test(r.licenseurl) ? 'Public Domain Mark' : /zero/.test(r.licenseurl) ? 'CC0' : r.licenseurl) : 'Public domain (Prelinger / FedFlix) — verify', licenceUrl: r.licenseurl,       page: `https://arc
  • Network accessline 73
    page: `https://archive.org/details/${r.identifier}`, thumb: `https://archive.org/services/img/${r.identifier}` }));
  • Network accessline 75
    async nasa(q, type, n) {     if (type === 'audio') return [];     const d = await get(`https://images-api.nasa.gov/search?q=${encodeURIComponent(q)}&media_type=${type === 'video' ? 'video' : 'image'}&page_size=${Math.min(n, 40)}`);
  • Network accessline 76
    if (type === 'audio') return [];     const d = await get(`https://images-api.nasa.gov/search?q=${encodeURIComponent(q)}&media_type=${type === 'video' ? 'video' : 'image'}&page_size=${Math.min(n, 40)}`);     return d.collection.items.map((it
  • Network accessline 77
    const d = await get(`https://images-api.nasa.gov/search?q=${encodeURIComponent(q)}&media_type=${type === 'video' ? 'video' : 'image'}&page_size=${Math.min(n, 40)}`);
  • Network accessline 78
    return d.collection.items.map((it) => { const m = it.data[0]; return { source: 'nasa', type, id: m.nasa_id, title: m.title, author: `NASA${m.center ? ' ' + m.center : ''}`,       licence: 'NASA media (generally not copyrighted; no endorseme
  • Network accessline 79
    licence: 'NASA media (generally not copyrighted; no endorsement implied)', licenceUrl: 'https://www.nasa.gov/nasa-brand-center/images-and-media/', page: `https://images.nasa.gov/details/${m.nasa_id}`, thumb: it.links?.[0]?.href, manifest: i
  • Network accessline 81
    async pixabay(q, type, n) {     const key = keyFrom('PIXABAY_API_KEY'); if (!key || type === 'audio') return [];     const base = type === 'video' ? 'https://pixabay.com/api/videos/' : 'https://pixabay.com/api/';
  • Network accessline 82
    [Credential-related source omitted]
  • Access to secretsline 82
    [Credential-related source omitted]
  • Network accessline 83
    const base = type === 'video' ? 'https://pixabay.com/api/videos/' : 'https://pixabay.com/api/';
  • Network accessline 84
    const d = await get(`${base}?key=${key}&q=${encodeURIComponent(q)}&per_page=${Math.min(Math.max(n, 3), 50)}&safesearch=true${type === 'photo' ? '&image_type=photo' + (args.wide ? '&orientation=horizontal' : '') : ''}`);     return d.hits.ma
  • Network accessline 85
    return d.hits.map((h) => { const v = h.videos?.large?.url ? h.videos.large : h.videos?.medium;       return { source: 'pixabay', type, id: String(h.id), title: h.tags, author: h.user, licence: 'Pixabay Content License', licenceUrl: 'https:/
  • Network accessline 86
    return { source: 'pixabay', type, id: String(h.id), title: h.tags, author: h.user, licence: 'Pixabay Content License', licenceUrl: 'https://pixabay.com/service/license-summary/', page: h.pageURL,
  • Network accessline 89
    async unsplash(q, type, n) {     const key = keyFrom('UNSPLASH_ACCESS_KEY'); if (!key || type !== 'photo') return [];     const d = await get(`https://api.unsplash.com/search/photos?query=${encodeURIComponent(q)}&per_page=${Math.min(n, 30)}
  • Network accessline 90
    const key = keyFrom('UNSPLASH_ACCESS_KEY'); if (!key || type !== 'photo') return [];     const d = await get(`https://api.unsplash.com/search/photos?query=${encodeURIComponent(q)}&per_page=${Math.min(n, 30)}${args.wide ? '&orientation=lands
  • Network accessline 91
    [Credential-related source omitted]
  • Network accessline 92
    return d.results.map((r) => ({ source: 'unsplash', type, id: r.id, title: strip(r.alt_description || r.description || ''), author: r.user?.name, licence: 'Unsplash License (hotlink + attribute)', licenceUrl: 'https://unsplash.com/license',
  • Network accessline 131
    const download = async (url, file) => {   for (let attempt = 0; ; attempt++) { // libraries rate-limit bursts: honour Retry-After, back off, try a few times     const r = await fetch(url, { headers: { 'user-agent': UA } });
  • Network accessline 132
    for (let attempt = 0; ; attempt++) { // libraries rate-limit bursts: honour Retry-After, back off, try a few times     const r = await fetch(url, { headers: { 'user-agent': UA } });     if (r.ok) { fs.writeFileSync(file, Buffer.from(await r
  • Network accessline 133
    const r = await fetch(url, { headers: { 'user-agent': UA } });
  • Network accessline 148
    if (c.url) return c.url;   if (c.source === 'archive') {     const m = await get(`https://archive.org/metadata/${c.id}`);
  • Network accessline 149
    if (c.source === 'archive') {     const m = await get(`https://archive.org/metadata/${c.id}`);     const files = m.files.filter((f) => /\.(mp4|m4v)$/i.test(f.name));
  • Network accessline 150
    const m = await get(`https://archive.org/metadata/${c.id}`);
  • Network accessline 152
    const best = files.find((f) => /h\.264/i.test(f.format) && !/ia\.mp4$/.test(f.name)) || files.find((f) => /h\.264|mpeg4/i.test(f.format)) || files[0];     if (!best) throw new Error(`no mp4 in archive item ${c.id}`);     return `https://arc
  • Network accessline 153
    if (!best) throw new Error(`no mp4 in archive item ${c.id}`);     return `https://archive.org/download/${c.id}/${encodeURIComponent(best.name)}`;   }
  • Network accessline 154
    return `https://archive.org/download/${c.id}/${encodeURIComponent(best.name)}`;

scripts/generate-image.mjs

  • Executable scriptline 1
    #!/usr/bin/env node
  • Access to secretsline 9
    [Credential-related source omitted]
  • Access to secretsline 19
    [Credential-related source omitted]
  • Access to secretsline 21
    [Credential-related source omitted]
  • Access to secretsline 24
    [Credential-related source omitted]
  • Network accessline 26
    [Credential-related source omitted]
  • Network accessline 27
    [Credential-related source omitted]
  • Network accessline 30
    return json.data || []; }; const download = async (url, file) => { const r = await fetch(url); if (!r.ok) throw new Error(`download failed ${r.status}`); fs.mkdirSync(path.dirname(file), { recursive: true }); fs.writeFileSync(file, Buffer.f
  • Network accessline 32
    const download = async (url, file) => { const r = await fetch(url); if (!r.ok) throw new Error(`download failed ${r.status}`); fs.mkdirSync(path.dirname(file), { recursive: true }); fs.writeFileSync(file, Buffer.from(await r.arrayBuffer()))

scripts/grade-from-stills.mjs

  • Executable scriptline 1
    #!/usr/bin/env node

scripts/lib.mjs

  • Executable scriptline 1
    Executable file
  • Network accessline 34
    const rootDir = path.resolve(dir);   const server = http.createServer((req, res) => {     let rel = decodeURIComponent(new URL(req.url, 'http://x').pathname);
  • Network accessline 35
    const server = http.createServer((req, res) => {     let rel = decodeURIComponent(new URL(req.url, 'http://x').pathname);     if (rel.endsWith('/')) rel += 'index.html';
  • Network accessline 36
    let rel = decodeURIComponent(new URL(req.url, 'http://x').pathname);
  • Network accessline 55
    });   });   return new Promise((resolve) => server.listen(0, '127.0.0.1', () => resolve({ server, origin: `http://127.0.0.1:${server.address().port}`, close: () => server.close() })));
  • Network accessline 56
    });   return new Promise((resolve) => server.listen(0, '127.0.0.1', () => resolve({ server, origin: `http://127.0.0.1:${server.address().port}`, close: () => server.close() }))); }
  • Network accessline 57
    return new Promise((resolve) => server.listen(0, '127.0.0.1', () => resolve({ server, origin: `http://127.0.0.1:${server.address().port}`, close: () => server.close() })));

scripts/render-film.mjs

  • Executable scriptline 1
    #!/usr/bin/env node

scripts/screening.mjs

  • Executable scriptline 1
    #!/usr/bin/env node

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Declared and executed: 13 facts
  • Contacts www.w3.org, which SKILL.md, the README and the plugin manifest do not mentionkit/grade.js:94High confidence
  • Contacts www.w3.org, which SKILL.md, the README and the plugin manifest do not mentionkit/looks.js:315High confidence
  • Contacts www.w3.org, which SKILL.md, the README and the plugin manifest do not mentionkit/type-fx.js:108High confidence
  • Contacts api.openverse.org, which SKILL.md, the README and the plugin manifest do not mentionscripts/find-footage.mjs:50High confidence
  • Contacts commons.wikimedia.org, which SKILL.md, the README and the plugin manifest do not mentionscripts/find-footage.mjs:59High confidence
  • Contacts archive.org, which SKILL.md, the README and the plugin manifest do not mentionscripts/find-footage.mjs:70High confidence
  • Contacts images-api.nasa.gov, which SKILL.md, the README and the plugin manifest do not mentionscripts/find-footage.mjs:77High confidence
  • Contacts www.nasa.gov, which SKILL.md, the README and the plugin manifest do not mentionscripts/find-footage.mjs:79High confidence
  • Contacts images.nasa.gov, which SKILL.md, the README and the plugin manifest do not mentionscripts/find-footage.mjs:79High confidence
  • Contacts pixabay.com, which SKILL.md, the README and the plugin manifest do not mentionscripts/find-footage.mjs:83High confidence
  • Contacts api.unsplash.com, which SKILL.md, the README and the plugin manifest do not mentionscripts/find-footage.mjs:91High confidence
  • Contacts unsplash.com, which SKILL.md, the README and the plugin manifest do not mentionscripts/find-footage.mjs:92High confidence
  • Contacts api.runware.ai, which SKILL.md, the README and the plugin manifest do not mentionscripts/generate-image.mjs:27High confidence
Signal confidence: 152 facts

and 102 more

Works with

Agent compatibility, from the files in this repository
AgentStatusEvidenceInstall to
Claude CodeCompatibleStandard SKILL.md SKILL.md.claude/skills/<skill-name>/
CodexCompatibleStandard SKILL.md SKILL.md.agents/skills/<skill-name>/
CursorCompatibleStandard SKILL.md SKILL.md.cursor/skills/<skill-name>/
Gemini CLICompatibleStandard SKILL.md SKILL.md.gemini/skills/<skill-name>/
GitHub CopilotCompatibleStandard SKILL.md SKILL.md.github/skills/<skill-name>/
OpenCodeCompatibleStandard SKILL.md SKILL.md.opencode/skills/<skill-name>/
  • Native The repository ships a manifest, folder or frontmatter field for this agent.
  • Compatible A standard SKILL.md that this agent can read.
  • Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

You might also use

juliobsz/skills

An agent skill that builds award-caliber websites from one line

1.2kGitHub stars

Shelpuk-AI-Technology-Consulting/agent-skill-tdd

TDD + requirements workflow skill for AI coding agents (Claude Code, Codex, Antigravity, Cursor, Windsurf, etc.). Part of the Shelpuk agentic suite alongside Serena, Kindly Web Se…

31GitHub stars

frankzch/ai-news-skill

Agent skill for Claude Code, Codex, OpenClaw & Antigravity: ask for today's AI news in plain language — 370+ curated sources incl. ~310 AI builders on X, Reddit/HN, YouTube, GitHu…

22GitHub stars

alchaincyf/huashu-design

花叔Design——用HTML做高保真原型、幻灯片、动画、可视化与专家评审。任何新设计100%先出三个方向初稿给用户选（指定风格/品牌也不豁免），选定后才执行。触发词：做原型、PPT、幻灯片、动画、…

28.9kGitHub stars

oil-oil/oil-ui

设计、改进和评审网站、App、后台与组件的界面：探索设计方向、生成多风格同屏对比页，并基于真实截图打磨视觉层级；按请求交付对比页、设计说明、设计稿或可运行界面。只负责设计判断，不用于…

2.8kGitHub stars

oil-oil/beautify-github-readme

Redesign GitHub README homepages or create project-native pure SVG, hybrid SVG-composed PNG/WebP, and opt-in animated GIF assets. Use when a user asks to beautify, redesign, rebra…

2kGitHub stars