cinematic-ui

Translate film research into storyboard-first website direction with motion guardrails.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents AI from producing generic, template-like websites by forcing a director + specific film research loop and a storyboard-first workflow that translates cinematic grammar into page structure, composition, and motion.

Core Features & Use Cases

  • Director + film-driven design: Extracts lighting logic, framing discipline, scene rhythm, and material cues from a chosen film to determine the site’s emotional language.
  • Storyboard-first, artifact-based workflow: Produces decisions.md → storyboard.md → compiled-spec.md before any UI coding, ensuring coherent direction across pages.
  • Demo Uniqueness Protocol: Audits prior outputs and enforces a shell-ban list plus a primary composition family to keep successive demos visually distinct.
  • Cinematic motion with guardrails: Limits interaction budgets, enforces entrance variety, requires library source IDs for major visual moves, and supports reduced-motion.

Quick Start

Use the cinematic-ui skill to design a director- and film-inspired homepage: choose a director and a specific film, complete the start questionnaire, then generate decisions, storyboard, and compiled spec before building the HTML/CSS/JS.

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 web experience that avoids generic marketing templates?▼

To design a cinematic web experience, input director and specific film research to extract lighting logic, framing discipline, and scene rhythm, enforcing a storyboard-first workflow that translates cinematic grammar into unique page structures and prevents generic template outputs.

What is a storyboard-first workflow for movie-style landing pages?▼

A storyboard-first workflow for movie-style landing pages requires generating decisions, storyboards, and compiled specs before any UI coding, ensuring coherent direction across multiple page roles and enforcing uniqueness audits and anti-convergence constraints.

Can I implement constrained motion behavior for cinematic UI compositions?▼

Yes, you can implement constrained cinematic motion by applying interaction budgets, enforcing entrance variety, requiring library source IDs for major visual moves, and supporting reduced-motion guardrails to maintain cinematic UI compositions.

How do I audit visual uniqueness across multiple cinematic web demos?▼

You audit visual uniqueness across cinematic web demos by applying a Demo Uniqueness Protocol that enforces a shell-ban list and defines a primary composition family, keeping successive outputs visually distinct and avoiding convergence.

What do I need to start building film-inspired website direction?▼

To start building film-inspired website direction, you need to choose a specific director and film, then complete a start questionnaire to extract material cues and scene rhythm before generating the storyboard artifacts.

When should I not use a cinematic director approach for web design?▼

You should not use a cinematic director approach if your project requires standard marketing layouts rather than storyboard-driven scenes, as the workflow enforces anti-convergence constraints and shell-ban lists that actively prevent generic UI composition.