cinematic-scroll
Design and build cinematic websites, interactive portfolios, product stories, and real-time 3D experiences with subject-specific art direction and scroll choreography. Use for new builds, redesigns, motion improvements, scroll audits, or storyboards in standalone HTML and existing apps; includes responsive, reduced-motion, and static fallbacks. Not for ordinary dashboards or unrelated animation.
How do I install this agent skill?
npx skills add https://github.com/mustbesimo/web-design-studio --skill cinematic-scrollIs this agent skill safe to install?
- Gen Agent Trust Hubpass
Web Design Studio is a highly professional and transparent development toolset for building interactive websites. It follows security best practices, including robust secret management for API keys and Subresource Integrity (SRI) for external scripts. All code execution and network operations are well-documented and strictly aligned with the skill's primary purpose.
- Socketwarn
4 alerts: gptAnomaly
- Snykpass
Risk: LOW · No issues
What does this agent skill do?
cinematic-scroll (pointer)
The cinematic-scroll skill gives an agent the taste to build cinematic,
scroll-driven websites: pinned chapters, hero/multi-depth parallax, scroll-linked
3D tilt and camera moves, and environment-morphing backgrounds — from a single
self-contained .html section (Mode A) to a full Next.js release site with
optional AI-generated visuals (Mode B). Reach for it whenever the user asks for a
scroll-driven or cinematic site, pinned/sticky sections, parallax, a product
story page, an editorial microsite, or a release/launch/drop page.
Canonical instructions: ../../../SKILL.md — the single
source of truth. Read it in full before building. This file is only a pointer; do
not duplicate SKILL.md content.
Use the project's existing design system or adapt the bundled token contract:
../../../design.md + ../../../tokens/;
11 visual systems as machine themes in ../../../themes/.
Deep references (../../../references/):
scroll-patterns.md— 12 proven scroll patternsfilm-archetypes.md— 11 visual systems / film archetypescomponent-grammar.md— named, token-driven components (Mode A + Mode B)design-tokens.md— the DTCG token referenceperformance-budget.md— transform/opacity budget + pre-launch checklistmobile-motion.md— mobile motion + reduced-motion degradation
Taste rules: ../../../taste-guardrails.md.
Trigger prompts: ../../../examples/PROMPTS.md.
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/mustbesimo/web-design-studio/cinematic-scroll">View cinematic-scroll on skillZs</a>