Web Design Studio skill
Three skills for memorable websites: scroll scenes and 3D, a scroll audit and a landing page strategy.
- 51 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- The skill creates and edits project pages and runs a browser for checks.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/web-design-studioDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- The skill creates and edits project pages and runs a browser for checks.
This is third-party code. Review the repository files before installing.
What it does
Web Design Studio is made of three skills. `cinematic-scroll` builds a distinctive scroll-driven, 3D or motion website in your brand, preparing mobile, reduced-motion and no-JavaScript states from the start. `scroll-audit` scores the scroll experience of any page for pacing, performance, accessibility and emotional arc and returns a remediation plan. `launch-page-strategy` answers what a launch page must say and prove before design: one action, answered objections and proof beside each claim. The repository also holds an optional set of three React motion components that install by URL and pick up the host theme. An agent discovery index lives in `llms.txt`. The project was formerly called Cinematic Scroll and the identifier and npm package are unchanged.
Who it is for. Web developers and designers who build landing and promo sites with scroll animation through an agent.
Good fit when
- You need a promo site with scroll scenes and 3D in your brand style.
- A finished page must be checked for scroll pacing, speed and accessibility.
- Before designing a landing page you must define the action, objections and proof.
- You must confirm the page works without JavaScript and with reduced motion.
Not a fit when
- You need a store or admin panel with no emphasis on impression.
- The page is static and needs no scroll animation.
- You cannot check the result in a browser.
Example request
Use scroll-audit on the homepage and show a score for pacing, performance and accessibility with a remediation plan.Limitations
Installing through `npx skills` requires Node.js 22 or newer, while the npm installer also runs on Node.js 18. Strong scroll and 3D effects tax the device, so check the result on a weak phone and with reduced motion. The skills offer method and audit, but accessibility and speed still need measurements on your own page. The React components are optional and install separately. Showy solutions do not suit every audience, so judge them against the page goal.
How to disable. Remove the installed skills with `npx skills remove` or by deleting their folders from the agent skills directory. React components are removed from the project manually.
FAQ
How do I install the skills?
Run `npx skills add MustBeSimo/web-design-studio` and pick one or all three skills.
Which agents does the set work with?
Claude Code, Cursor, Codex, Hermes, Kimi Code, Gemini CLI, OpenClaw and other agents the skills CLI supports.
What does scroll-audit do?
Scores a page scroll experience for pacing, performance, accessibility and emotional arc and writes a remediation plan.
Why does the package say cinematic-scroll?
It is the former project name. The skill identifier, npm package and ClawHub listing are unchanged.
Are the React components required?
No. The set of three motion components is optional and described in `docs/registry`.
Discussion
No questions or reviews yet.
Related
SkillsA skill for building premium scroll-driven websites on a real design standard: typography, rhythm, depth, motion and in-browser verification
Two skills: prompts for product animation and a scroll-driven product website, with templates and an acceptance checklist
A skill that makes the agent cast a director, storyboard a site, shoot the page with scroll and screen the frames.
Eight skills for 3D and animated websites: three.js scenes from code, scroll films, transparent video, exploded machine views
A skill that builds a landing page where scrolling flies a camera through a generated 3D world
A free Claude skill that writes a build spec, picks cinematic media, builds a landing page and checks it with screenshots
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Web Design Studio (this card) | no | 51 | |
| Design Skills for AI Agents | no | 126 | a general set of interface design skills |
| Frontend Design (Ilm-Alan) | no | 166 | a general frontend design skill without a scroll focus |
README in short
Three skills cover page strategy, a build with scroll animation and an audit of the result. Optional React components and an agent index come alongside.
README badge
Original SKILL.md
---
name: cinematic-scroll
description: 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, including entrance reveals, pinned chapters, scroll-scrubbed video, tilt cards, magnetic controls, kinetic text, Gaussian-splat scenes, and baked simulation or frame sequences in story pages, built on the host's own stack (GSAP, Motion, Anime.js, Lenis, Three.js, Rive, Lottie, physics engines); includes responsive, reduced-motion, and static fallbacks. Not for ordinary dashboards, video production, or unrelated animation.
metadata:
version: 3.0.1
openclaw:
emoji: "🎬"
homepage: https://github.com/MustBeSimo/web-design-studio
hermes:
tags: [Animation, Frontend, Design, 3D, Motion, GSAP, Parallax, WebGL]
---
# Web Design Studio
Build a distinctive experience whose motion explains the subject. The craft comes
from this skill; the visual identity comes from the user's brief and project. This
text-only edition needs no account, key, paid service, or specific animation library.
## Choose one route
For an audit-only request, use the scroll-audit skill when it is installed;
otherwise inspect and return findings without building. For direction or
storyboard only, use [story direction](references/story-direction.md).
Otherwise, read the [recipe catalog](references/recipe-catalog.md), then read **one** recipe:
- [Editorial story](references/editorial-story.md) for an image-led narrative,
portfolio, longread, or campaign.
- [Product reveal](references/product-reveal.md) for a launch, mechanism,
comparison, or object-focused story.
- [Real-time 3D](references/real-time-3d.md) for a GLB, procedural object,
orbit, or camera flight.
When the brief or the host project names a library, engine, editor or production
tool, check the [stack shelf](references/stack-shelf.md) before adding a
dependency. Captured splat scenes and baked simulation or frame sequences have
their own references, reached from the catalog.
Companion skills: launch-page-strategy decides what the page must say and prove
before motion; scroll-audit scores an existing page.
For a repair, use the closest recipe only for the affected behavior. Do not tour
other references unless the chosen recipe identifies a concrete need. Preserve the
host framework, routes, styling, dependencies, content, and working interactions.
Prefer supplied assets and installed packages. Do not publish, deploy, install
packages, or send project content to a service unless that action is within the