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.mdstoryboard.mdcompiled-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.