Cinematic Sites
openwarehq/websitepromptsUse when building a premium cinematic website, landing page or hero section whose centrepiece is video — a fullscreen looping hero, a scroll-scrubbed fly-through, a cursor-driven film, or a multi-scene scroll experience. Covers getting the footage (reuse a hosted clip, or generate one with any video model), building it into a React + Vite + Tailwind site, verifying it headlessly, and distilling the result back into a single self-contained build prompt. Keywords: cinematic website, video hero, video background, scroll cinematic, animated landing page, awwwards-style hero.
At a glance
This skill is for Design and helps you build a cinematic website with video, create a fullscreen video hero section, and design a scroll-scrubbed video experience.
git clone --depth 1 https://github.com/openwarehq/websiteprompts
cp -r websiteprompts/skill ~/.claude/skills/skill
cinematicVideo HeroreactTailwindviteAwwwards Style
Other Design skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typog...
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art...
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right,...
Generate multiple radically different interface designs for a module using parallel sub-agents. Use when user wants to design an API, explor...
A hand-drawn wireframe exploration — graph-paper background, marker / pencil tone, multiple tab labels for variants, sticky-note annotations...
An annotated / redline lo-fi wireframe — a desktop landing/marketing page drawn as flat greyboxes inside a browser chrome frame, overlaid wi...