cinematic-ui

Enforce a four-phase cinematic website design workflow from questionnaire to compiled spec.

1|1|Updated Apr 4, 2026
One-click install
npx skills add https://github.com/Boboegg/cinematic-ui --skill cinematic-ui-boboegg
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cinematic-ui
Source: https://github.com/Boboegg/cinematic-ui/tree/main
Command: npx skills add https://github.com/Boboegg/cinematic-ui --skill cinematic-ui-boboegg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents AI-generated websites from feeling generic, template-driven, or under-directed by forcing a film-and-director research workflow that turns cinematic grammar into implementable page structure, composition, and motion.

Core Features & Use Cases

  • Director + Film research to emotional design inputs: selects a specific director and film, then extracts lighting, framing, rhythm, materiality, and motion behavior as the source of the UI language.
  • Storyboard-first planning: produces decisions.md, storyboard.md, compiled-spec.md, and only then generates implementation from a compiled, library-cited spec.
  • Demo Uniqueness Protocol: audits prior outputs and enforces a wireframe-level uniqueness guardrail using a shell-ban list and primary composition family separation.
  • Anti-garbage and premium calibration: runs constraints that reject common AI design degeneration (feed-like grids, repeated entrances, effect-sampler motion, generic hero gradients).
  • When to use: use for cinematic landing pages, movie-style UI direction, director-inspired product storytelling, and requests framed around film/noir, sci-fi, romance, thriller, action, animation aesthetics.

Quick Start

Use cinematic-ui to design a homepage where you pick a director and a specific film, complete the start questionnaire, then generate decisions.md, storyboard.md, and compiled-spec.md before writing any frontend code.

Frequently Asked Questions about cinematic-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design a cinematic landing page using film director research?▼

Cinematic landing page design translates film director research into implementable website structure by extracting lighting, framing, rhythm, and motion behavior. It enforces a four-phase workflow: decisions, storyboard, compiled spec, then build.

How do I prevent AI-generated websites from looking generic and template-driven?▼

To prevent generic AI websites, apply anti-garbage calibration constraints that reject common degeneration like feed-like grids, repeated entrances, and generic hero gradients. Use director-led storyboard planning to enforce cinematic grammar.

What is the storyboard-first workflow for premium web animation design?▼

Storyboard-first workflow produces decisions.md, storyboard.md, and compiled-spec.md before generating any frontend code. This ensures cinematic composition and motion behavior are planned and library-cited before implementation.

Can I use screenshots and URLs as inputs for cinematic UI composition?▼

Yes, cinematic UI composition accepts screenshots and URLs as inputs. It extracts cinematic composition, motion, and interaction grammar from these references while enforcing demo uniqueness constraints and anti-garbage quality checks.

Does cinematic web design work for specific film genres like noir or sci-fi aesthetics?▼

Cinematic web design applies to film genres including noir, sci-fi, romance, thriller, action, and animation aesthetics. It selects a specific director and film to extract the source UI language for director-inspired product storytelling.

What are the limitations of director-led cinematic design for websites?▼

Director-led cinematic design requires completing a start-questionnaire gate before any workflow begins, enforces strict phase ordering, and audits prior outputs for wireframe-level uniqueness using a shell-ban list to prevent repetitive compositions.