skill

cinematic-ui

A reasoning-first cinematic web design skill. Makes AI think like a film director — research a real film, extract its visual language, translate it into page narrative and composition. Not a style pic

akseolabs-seo/cinematic-uicommunitylistedunreviewednot running here yet

Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below; one-click install arrives with accounts.

README

synced Oct 14, 2026

Cinematic UI

Demo

What It Is

cinematic-ui is a skill package for AI coding agents (Claude Code, Codex, Cursor, Windsurf, Gemini, Copilot). It guides the agent through a structured workflow for building websites:

Pick a director and a specific film
Research that film's visual language (cinematography, lighting, rhythm, material)
Translate the research into web artifacts: decisions.md, storyboard.md, compiled-spec.md
Implement HTML / CSS / JS from the spec

The film is research input, not a spec sheet. The agent's job is to extract structural patterns from cinema and translate them into layout, composition, motion, and typography.

Workflow

Phase	Work	Output
Phase 1	Start questionnaire, choose director + film, uniqueness audit, research	`decisions.md`
Phase 2	Site-wide cinematic grammar, per-page scene thesis, signature composition	`storyboard.md`
Phase 3	Camera, interaction, composition, texture, typography per storyboard	`compiled-spec.md`
Phase 4	Implement, add reduced-motion + responsive, run anti-garbage checks	HTML / CSS / JS

Phase 2 internal order is fixed: site-wide grammar → per-page thesis → per-page composition → shared system.

Supported Tools

Tool	Entry File	Install Path
Claude Code	`CLAUDE.md`	`~/.claude/skills/cinematic-ui`
Codex / ChatGPT	`CODEX.md`	`$CODEX_HOME/skills/cinematic-ui`
Cursor	`.cursor/rules/cinematic-ui.mdc`	Auto-loaded on clone
Windsurf	`.windsurf/rules/cinematic-ui.md`	Auto-loaded on clone
GitHub Copilot	`.github/copilot-instructions.md`	Auto-loaded on clone
Gemini / Antigravity	`GEMINI.md`	Read at project startup
Cross-tool	`AGENTS.md`	Universal reference

Installation

Claude Code

Windows:

git clone https://github.com/akseolabs-seo/cinematic-ui "$env:USERPROFILE\.claude\skills\cinematic-ui"

macOS / Linux:

git clone https://github.com/akseolabs-seo/cinematic-ui ~/.claude/skills/cinematic-ui

Invoke with /cinematic-ui inside Claude Code.

Codex / ChatGPT

git clone https://github.com/akseolabs-seo/cinematic-ui $CODEX_HOME/skills/cinematic-ui

Cursor / Windsurf / GitHub Copilot

git clone https://github.com/akseolabs-seo/cinematic-ui

The relevant rule files are already in place. No additional config needed.

Suggested Prompt

Use cinematic-ui to build a homepage.
Pick the director and film yourself.
Research the director and film first if web access is available.
Run the Demo Uniqueness Protocol.
Do not reuse shells from previous demos.

References Library

All reference data lives in references/, organized by phase. Load only what the current phase needs.

Core Rule Files

File	Purpose
`references/library-index.md`	Which files to read per phase
`references/premium-calibration.md`	Self-check after director brief
`references/anti-garbage.md`	Common AI design degradation patterns
`references/anti-convergence.md`	Hash-based selection to prevent repeated shells
`references/implementation-guardrails.md`	Phase 3–4 build rules
`references/reference-protocol.md`	How to decompose a reference site without copying
`references/output-templates.md`	Standard format templates per phase

Data Libraries

File	Contents
`references/data/directors-200.md`	200+ directors with films and visual style
`references/data/hero-archetypes.md`	30 hero skeletons
`references/data/narrative-beats.md`	25 narrative beats + 18 director arc templates
`references/data/section-functions.md`	50 functional section types
`references/data/section-archetypes.md`	91+ section skeletons
`references/data/dna-index.tsv`	Design DNA index of 1,486 sites
`references/data/design-dna-db.txt`	Site-level DNA data
`references/data/camera-shots-50.md`	55 entrance and reveal behaviors
`references/data/interaction-effects-50.md`	55+ hover / click / scroll interactions
`references/data/compositions.md`	80 layout compositions
`references/data/visual-elements.md`	40 visual decoration elements
`references/data/background-techniques.md`	50+ hero background techniques
`references/data/typography-cinema.md`	40+ text treatments
`references/data/color-grades.md`	40+ film palette to UI token translations
`references/data/font-moods.md`	30+ font pairings by tone
`references/data/textures.md`	30+ surface techniques

Repository Structure

cinematic-ui/
├── SKILL.md                        ← main skill logic
├── skill.json                      ← universal skill manifest
├── CLAUDE.md                       ← Claude Code
├── AGENTS.md                       ← cross-tool shared reference
├── CODEX.md                        ← Codex / ChatGPT
├── GEMINI.md                       ← Gemini / Antigravity
├── .cursor/rules/                  ← Cursor rules (auto-loaded)
├── .windsurf/rules/                ← Windsurf rules (auto-loaded)
├── .github/copilot-instructions.md ← GitHub Copilot (auto-loaded)
├── agents/openai.yaml              ← OpenAI skill metadata
├── docs/                           ← banner, demo assets
└── references/
    ├── library-index.md
    ├── premium-calibration.md
    ├── anti-garbage.md
    ├── anti-convergence.md
    ├── implementation-guardrails.md
    ├── reference-protocol.md
    ├── output-templates.md
    └── data/                       ← 18 design data libraries

Contributing

See CONTRIBUTING.md.

License

MIT. See LICENSE.