cinematic-ui
CommunityPlan and build film-inspired websites with a director workflow.
Design & Creative#web development#storyboard#motion planning#cinematic ui#ai coding agents#director-led design#uniqueness protocol
Authorakseolabs-seo
Version1.0.0
Installs0
System Documentation
What problem does it solve?
It prevents AI-generated websites from drifting into generic “premium” layouts by forcing a research-to-design pipeline grounded in a specific director and film.
Core Features & Use Cases
- Director + film research to extract cinematic grammar: turns cinematography, lighting, rhythm, framing, and materiality into a site-wide visual system.
- Storyboard-first artifact workflow: produces decisions.md, storyboard.md, compiled-spec.md, and then implementation from the locked spec.
- Uniqueness guardrails across demos: runs a Demo Uniqueness Protocol (audit, shell-ban list, primary composition family) to reduce repeated wireframes over time.
- Cinematic motion and interaction planning: maps camera/reveal/interaction library entries to entrances, interactions, and (when required) JavaScript.
Quick Start
Use cinematic-ui to build a homepage by completing the start questionnaire, choosing a director and a specific film, then producing decisions.md, storyboard.md, compiled-spec.md, and implementing the final HTML/CSS/JS from the compiled spec.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: cinematic-ui Download link: https://github.com/akseolabs-seo/cinematic-ui/archive/main.zip#cinematic-ui Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.