agentleFS
kuker24kuker24/OpenCodeBestFriend/skills/scroll-world/SKILL.md

scroll-world

Skill0 starsChanged 2 months agoMITView on GitHub

Build a scroll-scrubbed fly-through landing: as the visitor scrolls, a pre-rendered camera flies into each scene and on to the next with no cuts. Use when: 3D world landing, diorama site, Emons-style isometric world, scroll cinematic, browse-through-the-industry hero, camera-scrub page, or the user runs /scroll-world. Uses native image_gen, image_edit, and image_to_video plus a portable vanilla-JS scrub engine. Load native image tools if present, else DEGRADED before any generate/edit/video call. Not for scroll-led storytelling without a camera world (use scroll-craft), an ordinary landing (use impeccable), photoreal ads/identity with no world page (use visual-studio), or UI chrome motion (use emil-design-eng after Impeccable).

11 other projects use a version of this.

Adopted by

Most recently taken up by

Used with

Projects with it also use design-taste-frontend and writing-plans.

Other files people use alongside this one.

Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
  • AnasX7Skill

    design-taste-frontend

    Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.

    Also in 4 projects that use this

  • OpenAISkill

    writing-plans

    Use when you have a spec or requirements for a multi-step task, before touching code

    Also in 3 projects that use this

The file

We split this skill into the rules it gives an agent

9 rules. 0 are common, 6 are distinctive, and 3 are very specific to this project.

  • 0

    Common

    Most of the 10 edited versions we read keep these.

  • 6

    Distinctive

    This author's own choices. Worth a look.

  • 3

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Before any image_gen, image_edit, image_to_video, or reference_to_video call, load native image tools if the session exposes them.

    line 17
  2. Distinctive:

    Use only native image/video tools or local scripts.

    line 27
  3. Distinctive:

    Do not invent tool parameters.

    line 29
  4. Very specific:

    If PRODUCT.md, DESIGN.md, or an Impeccable pin exists, copy hex, name, type, and forbidden treatments into the pack lock.

    line 32
  5. Distinctive:

    Ask at most four labeled questions, and only for blockers the brief does not already answer.

    line 35
  6. Distinctive:

    Keep the mechanic fixed: continuous fly-through, scroll as scrubber.

    line 37
  7. Distinctive:

    Do not load Emil for stills.

    line 54
  8. Distinctive:

    Ask at most these four, skip any the brief already answered:

    line 75
  9. Very specific:

    Follow the live browser contract: opencode-chromium-cdp start, then browser-act or chrome-devtools-axi attached to that CDP.

    line 113

“Common” is measured: kept by at least 6 in 10 of the 10 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Scroll World

A landing where scroll drives a camera. The camera flies into a scene, then on to the next, as one connected flight. Stills and clips come from native image/video tools. The page only scrubs pre-rendered video by scroll position.

Load first

Before any image_gen, image_edit, image_to_video, or reference_to_video call, load native image tools if the session exposes them; otherwise write prompt files and mark DEGRADED. Tool choice, prompt length, real-people references, shot length, and ffmpeg live there. Do not restate them here.

Paid video generation backends (Monid, Higgsfield, Kling) are not vendored into OpenCodeBestFriend. If native image/video session tools are absent and external video CLIs are not configured, report NOT_CONFIGURED and degrade gracefully: generate prompt packs (.scratch/scroll-world/<slug>/prompts.md) and static scene posters without failing.

Hard rules

  • Boundary: scroll-craft owns 2D timeline/scrollytelling; scroll-world owns continuous 3D camera flight landings. Do not cross the seam.
  • Use only native image/video tools or local scripts. Do not call arbitrary external image/video APIs or unconfigured cloud services.
  • Do not invent tool parameters. There is no end-image lock and no video-to-video. Missing capability uses the fallback in pipeline.md.
  • If PRODUCT.md, DESIGN.md, or an Impeccable pin exists, copy hex, name, type, and forbidden treatments into the pack lock. Do not invent brand facts.
  • Ask at most four labeled questions, and only for blockers the brief does not already answer.
  • Keep the mechanic fixed: continuous fly-through, scroll as scrubber.
  • Match the user's language. Architecture names stay A / B.

Handoff

RequestSkill
Fly-through, diorama, 3D world, camera-scrub landingthis skill
Existing site; world is the herothis skill produces world + engine; impeccable owns chrome, tokens, copy system
Scroll-led storytelling without a camera worldscroll-craft
Ordinary landing without a camera worldimpeccable
Photoreal stills, ads, cinematic, identity, thumbnails (no world page)visual-studio
Photoreal person/creature inside this worldthis skill owns the chain + page; load visual-studio cinematic for those stills/clips
Game sprites, tiles, icon setsgame-asset-core
Deterministic HTML composition rendered to videohyperframes
UI chrome motion (nav, buttons), not the video scrubemil-design-eng after Impeccable

Do not load Emil for stills. Do not load Impeccable to render the video chain. Do not load visual-studio for an ordinary landing.

Run

  1. Interview only what is missing. Write the pack at .scratch/scroll-world/<slug>/. Templates: prompts.md.
  2. Generate stills. One style preamble, byte-for-byte, on every still. Review cohesion before any video.
  3. Pick the architecture the user chose. Default A (walkthrough / locked-iso). B only for diorama / miniature / god's-eye. pipeline.md.
  4. Encode for scrubbing. Mount scrub-engine.js with index-template.html or into the existing site.
  5. QA seams in background Chromium. Save screenshots to files.

Interview

Ask at most these four, skip any the brief already answered:

  1. Subject (open) — business or idea + one-line pitch.
  2. Camera — fly-through (B: dives + aerial hops) / walkthrough (A, default) / locked-iso (A + fixed angle). One-line trade-off each.
  3. Journey — propose 5–7 ordered scenes from the subject's own value chain; let the user edit. Last scene is the hero + CTA.
  4. Mobile — native 9:16 second chain, or desktop only. State the generate count. Never ship a 16:9 centre-crop as "the mobile version."

Art-direction default: clay diorama isometric for B; grounded / photoreal for A. User may override. Palette: design system first; otherwise propose 4–6 named hexes.

Count before generating: A = N stills + N videos. B = N stills + N dives + N−1 connectors. Mobile doubles the video count.

Architectures

A — continuous forward take (default). Each leg starts on the previous leg's actual last frame. No connectors. Wire connectors: [] and a small crossfade (~0.08). Camera never reverses across a seam. Locked-iso is A plus the locked-iso clause in every leg.

B — dive + aerial hop (diorama only). One dive per scene from that scene's still. A connector starts on dive i's actual last frame and flies toward scene i+1. Native tools cannot lock the connector's last frame to the next dive. The engine crossfade covers the near-miss. If a hop is unusable, set that connector to null (direct crossfade). Do not use B on a grounded photoreal walkthrough without saying it will read as a rewind.

Inside one clip the camera may orbit, crane, or push-in. Across a seam it must not reverse. Every A leg ends in a slow forward drift (final second) and the next leg begins by continuing that drift.

QA

Follow the live browser contract: opencode-chromium-cdp start, then browser-act or chrome-devtools-axi attached to that CDP. Never Google Chrome, chrome-direct, --headed, or HEADED=1 unless the user asks to see a window.

  • Screenshot just before and after each seam. Judge composition, not PSNR. A pop means the handoff used a still instead of a rendered frame, or B's crossfade cannot hide a content jump.
  • Confirm video.seekable.end(0) > 0 (blob URLs) and that currentTime tracks scroll.
  • prefers-reduced-motion: stills only, no video, no particles.
  • Mobile opt-in: serve the 9:16 files (videoWidth < videoHeight). Desktop-only: one phone-viewport sanity check; engine hardening is already on.

Deliver

The page (or the mount into the existing site), the asset folder, and short labels (architecture, N, mobile yes/no, what is locked). Do not dump prompts, retries, or tool names unless the user asks.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.