Web Design Studio

What Web Design Studio does

Formerly named Cinematic Scroll, the skill guides a coding agent through building a site rather than running as a dependency in the finished result. It packages reusable art direction and motion patterns, explicit requirements for mobile, reduced-motion, no-JS and renderer-failure fallbacks, and a five-profile browser verification workflow that reports failures and missing evidence instead of only claiming success. The repository ships 28 live examples across 11 visual systems and nine components to adapt rather than build from a blank page.

An interaction toolkit of six text treatments, magnetic and depth surfaces, and four original shader families runs on a shared scroll, pointer and proximity runtime, with React and Three.js adapters that add demand rendering, adaptive quality and context recovery. A separate experimental WebGPU/TSL preview falls back to WebGL2. It installs through either the OpenClaw/ClawHub skill installer or the generic skills installer, and the README lists Claude Code, Cursor, Hermes, Kimi Code and Gemini CLI among the agents it works with.

Key features

• 28 live examples across 11 visual systems and nine components
• Explicit mobile, reduced-motion, no-JS and renderer-failure fallback requirements
• Five-profile browser verification workflow that reports failures and missing evidence
• Six text treatments, magnetic and depth surfaces, and four shader families
• React and Three.js adapters with demand rendering and adaptive quality
• Separate experimental WebGPU/TSL preview with a WebGL2 fallback

When to use it

• Turning a product-reveal brief into a one-page animated story
• Checking that a generated site still works with reduced motion or JavaScript disabled
• Adapting one of the 28 examples to a new brand instead of writing motion code from scratch

Who it is for: Developers using a coding agent to build distinctive marketing or portfolio websites with motion and 3D.

How it fits with Hermes Agent

Listed as compatible with Hermes Agent among other agents such as Claude Code, Cursor, Kimi Code and Gemini CLI, installed through the same skills installer.

How to install Web Design Studio

These commands are copied from the project's README. Check the repository for the latest steps before you run them.

npx skills add MustBeSimo/web-design-studio

Requirements: No account, Pro purchase, TasteHQ key or image-generation key required; Node.js for the optional Next.js template

Note: The product was renamed from Cinematic Scroll, and its npm package, ClawHub listing and skill identifier still use the older name.

FAQ