agentsclimarketplace

Craft cinematic demo

Skill workingclassbuddha/codexmaxxing/skills/craft-cinematic-demo

UI skills for Codex: design passes, browser automation, screenshots, responsive checks, and evidence packs.

Install
npx -y skills add workingclassbuddha/codexmaxxing --skill craft-cinematic-demo

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Build visually striking, locally runnable demos, explainers, prototypes, and product storytelling surfaces using real assets, Three.js, Remotion, HyperFrames, or polished web UI. Use when Codex is asked to make an idea impressive, public-facing, interactive, cinematic, explanatory, visual, video-like, or demo-ready.

SKILL.md

2.1 KB, as published. Nobody here has run it

Craft Cinematic Demo

Use this skill to make an idea legible through motion, atmosphere, interaction, and proof that it runs.

First Decisions

  1. Decide the output: interactive web demo, static HTML prototype, Remotion video, HyperFrames composition, Three.js scene, or hybrid.
  2. Define the viewer's first 10 seconds: what they see, understand, and feel.
  3. Choose a concrete visual subject. Avoid abstract gradients when a real product, object, map, model, screenshot, diagram, or generated bitmap can carry the idea.
  4. Establish a visual identity before implementation: palette, type, material, motion, and what not to do.

Build Rules

  • Make the first viewport carry the subject. The project/product/place/idea must be obvious without reading nav text.
  • For landing-style demos, use image, video, generated bitmap, or full-bleed interactive scene as the hero background. Do not use a split text/media card hero.
  • For tools and dashboards, keep the UI useful first and cinematic second.
  • Use Three.js for 3D scenes, and verify the canvas is nonblank, framed correctly, and animated or interactive.
  • Use Remotion or HyperFrames for video compositions; build the end-state layout before animation.
  • Keep run instructions simple: one local command and one expected URL or output file.
  • Verify with screenshot, render, or pixel check before handoff.

Demo Arc

Use this compact structure unless the content demands otherwise:

  1. Hook: one precise visual claim.
  2. Orientation: show the object/system in context.
  3. Transformation: animate the central insight.
  4. Proof: show data, controls, trace, or artifact.
  5. Landing: leave a clear next action.

Read references/visual-demo-patterns.md for public-safe demo patterns and visual structures.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.