cinematic-ui

To build a cinematic UI, this Skill translates director and film visual research into page narrative, composition, and motion. It requires completing a start questionnaire to extract cinematic grammar before generating the final HTML, CSS, and JS.

The best way to stop generic premium layouts is enforcing a research-to-design pipeline grounded in a specific director and film. A storyboard-first workflow locks decisions, storyboards, and compiled specs before implementation, ensuring a unique, movie-like aesthetic.

You can plan cinematic motion by mapping library-cited entrances and interactions to the storyboard, using optional JS only for JS-required effects. This approach prioritizes CSS and visual composition to achieve a director-driven aesthetic while minimizing unnecessary JavaScript dependencies.

Yes, the director-led design workflow applies to both homepage and multi-page site builds and supports multilingual instructions. It enforces a strict storyboard order—site grammar, per-page thesis, signature composition, and shared system last—to maintain cinematic consistency across all pages.

The storyboard workflow requires four phases: generating decisions.md, producing storyboard.md, compiling compiled-spec.md, and finally implementing the build. This artifact sequence ensures the director-driven visual research is locked into a strict specification before any HTML, CSS, or JS is written.

The Demo Uniqueness Protocol prevents repeated wireframes by running an audit, applying a shell-ban list, and defining a primary composition family. This guardrail ensures each director-led design maintains structural uniqueness rather than drifting into standard layouts.