Cinematic Layout

Primary Platforms

This skill is built and maintained for Claude Code and OpenAI Codex as the two primary runtimes.

Claude Code

• Invoke with /cinematic-ui.
• Project memory and Claude-specific notes live in CLAUDE.md.
• Install path (Windows): C:\Users\<your-user>\.claude\skills\cinematic-layout
• Install path (macOS / Linux): ~/.claude/skills/cinematic-ui

OpenAI Codex / ChatGPT

• Codex-specific context lives in CODEX.md.
• Install path: $CODEX_HOME/skills/cinematic-ui

Additional compatibility files:

• GEMINI.md — Gemini / Antigravity-style workflows
• AGENTS.md — shared cross-tool reference
• .github/copilot-instructions.md — GitHub Copilot
• .cursor/rules/cinematic-ui.mdc — Cursor (auto-loaded on clone)
• .windsurf/rules/cinematic-ui.md — Windsurf (auto-loaded on clone)

Design the site like a film production, not like a generic landing page. Treat this as a research-and-translation skill plus a design-library skill. Its job is to study film references, extract usable cinematic signals, then turn those signals into page narrative, section structure, motion direction, and implementable web specs. The core mechanism is fixed: use a director and a specific film to determine the site's emotional language, then translate that language into web structure and implementation. Do not replace this with generic premium-brand logic. Do not confuse the film with the workflow artifact. The film is research input and emotional source material. The computer-operable workflow begins only when those observations are translated into decisions.md, storyboard.md, compiled-spec.md, and implementation.

Start

• Every invocation must complete the start questionnaire before Phase 1 begins.
• Do not enter decisions.md, director selection, film selection, architecture, or visual planning until the questionnaire is complete.
• Mirror the user's language in every question and deliverable.
• Keep questions short and ask only one blocking question at a time.
• Run this start questionnaire on every invocation:
  1. Ask how to start:
  • Screenshot: reverse-engineer a visual reference from an image or URL.
  • Step-by-step: let the user choose genre, director, and film.
  • Surprise me: pick a fresh combination that differs from previous work when project history is available.
  2. Ask whether the design should include image placeholders.
  3. Ask for the site's niche and page list before moving into architecture.
• If the environment supports structured questionnaires or forms, use them.
• If the environment does not support structured questionnaires, ask the same items in plain language.
• If the user pre-answers some items in the initial request, confirm or record those answers and only ask for the missing items.
• Phase 1 starts only after all required start-questionnaire items are answered or explicitly inferred from the user's request.

Demo Uniqueness Protocol

Use this whenever the same user has already used this skill to create one or more other sites, demos, or homepage concepts.

• Treat prior outputs for the same user as design-history context, not as reusable shells.
• Before Phase 1 is complete, inspect the immediately previous outputs when available and record a uniqueness audit in decisions.md.
• Write a Previous-work audit that names the recurring traits most likely to repeat. Examples:
  • left-copy right-object hero
  • top nav plus stacked framed panels
  • repeated rounded premium cards
  • pill metadata row
  • dark luxury palette with thin borders
• Write a Shell-ban list for the new project. These are layout traits that are explicitly forbidden because they would make the new work too similar to prior work.
• Write a Primary composition family for the new project before any page design begins. Examples:
  • full-bleed stage
  • corridor
  • vertical tower
  • archive wall
  • panoramic slab
  • cutaway monolith
• The new project must choose a different primary composition family from the user's most recent comparable output unless the user explicitly asks for an intentional sequel.
• If the user asks for multiple different sites over time, prioritize uniqueness across site shell, hero posture, section rhythm, navigation posture, density pattern, and dominant geometry, not just color or typography.
• A new demo fails if its wireframe would still look like a previous demo after removing color, type styling, and decorative effects.
• If project history is unavailable, state that and still write a Shell-ban list against the most common fallback templates you might otherwise drift toward.

Operating Model

Use four strict phases. Do not skip forward. Keep each phase's output in its own markdown file inside the working project.

1. Phase 1: decisions
2. Phase 2: storyboard
3. Phase 3: compiled spec
4. Phase 4: build and verify

Inside Phases 2 and 3, follow this order without skipping:

1. Define the site-wide cinematic grammar.
2. Write one independent scene thesis for each major page role.
3. Lock one irreplaceable signature composition per page.
4. Derive the shared system only after the page compositions are already clear.

Read references/output-templates.md before creating those files.

Delegation Model

• If the environment supports sub-agents or parallel workers, use them by default after the director and film are locked.
• Keep one lead agent responsible for the site-wide cinematic grammar and final coherence.
• Delegate bounded sidecar tasks such as:
  • film or niche reference research
  • page-role scene exploration for distinct pages
  • compiled-spec drafting for disjoint page roles
  • implementation or verification on separate files
• Do not let multiple agents independently redefine the director, film, or site-wide visual thesis.
• Merge delegated work back into one directed system. The result must still feel like one film, not a committee.
• Do not skip delegation unless the task is too small to benefit from it or the environment does not support sub-agents.

Progressive Loading

Keep SKILL.md lean. Load only the references needed for the current phase.

Always read first

• references/library-index.md
• references/premium-calibration.md

Phase 1: Decisions

• Read references/data/directors-200.md only.
• If sub-agents are available, delegate film research, niche research, or reference breakdown as separate bounded tasks after the user direction is clear.
• If the user has prior sites or demos in the workspace, review them just enough to identify what must not repeat.
• If the user starts from a screenshot or live site, inspect that reference first and infer a likely genre, director, and film. Ask for confirmation before committing.
• When web access is available, research the chosen director and film before finalizing the phase. This is required, not optional.
• Use external sources to gather richer creative input such as:
  • film palette and lighting behavior
  • cinematography patterns, framing logic, and scene rhythm
  • production design or material cues
  • director signature techniques
  • 2-3 premium sites in the same niche
• Prefer primary or authoritative sources when available, then add secondary analysis only to deepen interpretation.
• Record the research sources and a short interpretation note. Do not dump plot summaries or generic trivia.
• If web access is unavailable, say so explicitly and continue with best-effort inference from local libraries. Mark the result as a weaker research pass.
• If the user provides references, do not copy them whole. Read references/reference-protocol.md and decompose each reference into t