Scroll Web Skills
Two skills: prompts for product animation and a scroll-driven product website, with templates and an acceptance checklist
- 242 ★ on the repository
- Last commit
- MIT
Minimal access
Why this level
- The skills are prompts and rules and execute nothing by themselves, but the agent writes site code in your project from them.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/scroll-web-skillsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skills are prompts and rules and execute nothing by themselves, but the agent writes site code in your project from them.
This is third-party code. Review the repository files before installing.
What it does
A set of two skills and templates by the author behind 顾着造. The first, `product-motion-prompts`, helps write a prompt for a video model: it asks for subject continuity, a shot breakdown and steady motion that can be paused and examined. The second, `scroll-product-website`, turns a finished animation or frame sequence into a site where scrolling moves the scene forward and scrolling back rewinds it. `scroll-product-website/SKILL.md` sets constraints: progress comes from the real scroll position, deep links and history return are supported, frames are not loaded into memory all at once, and the reduced motion setting is respected. The web layer also covers loading, an intro animation, a variant picker and mobile layout. Prompt templates can be copied without installing the skills. The examples are built on sneakers and ice cream.
Who it is for. Designers and landing page developers who want a product site with scroll animation and hand prompts and the build to an agent.
Good fit when
- You need a video model prompt to get a continuous product rotation or breakdown from a reference image.
- A finished product video must become a page where scrolling steps frames forward and back.
- A site needs an acceptance checklist covering scroll, stop, rewind and mobile view.
- You just want to copy a prompt template without installing a skill.
Not a fit when
- You need a video generator or ready site source: the set gives rules and templates, not a model or a project.
- You have neither video nor frames: the examples contain no real media.
- You need an ordinary static page: the skill constraints target sites with a scroll-bound scene.
Example request
Use `$product-motion-prompts`: from this sneaker photo write a continuous breakdown prompt for a scroll site, do not make the video yet.Limitations
The repository does not generate video, ships no site source and is not tied to a particular model. The examples contain no video files, voice recordings, third-party reference clips or fonts, and file names and specs are samples rather than generation results. Quality depends on the video model: jump cuts, extra parts and melting have to be fixed by regeneration, page code cannot cure them. The README and skills are written in Chinese. When copying into the skills directory keep the whole folder structure, `SKILL.md` alone is not enough.
How to disable. Delete the `product-motion-prompts` and `scroll-product-website` folders from your agent skills directory, for example `~/.codex/skills`.
FAQ
How do I install the skills?
Clone the repository and copy both folders into the agent skills directory, for example `cp -R -n scroll-web-skills/product-motion-prompts ~/.codex/skills/`.
Can I skip installation?
Yes. Templates sit in `references/prompt-template.md` of each skill and are pasted into chat as an ordinary prompt.
Which video model should I use?
Any model with the needed capabilities: the repository is not tied to one model and offers no API.
What if the skill does not show up in the agent?
Refresh the session the way your tool does it and check that the whole folder was copied, not only `SKILL.md`.
How do I accept the finished site?
Follow `scroll-product-website/references/acceptance.md`: run the site locally, scroll down, stop and scroll back up.
Discussion
No questions or reviews yet.
Related
SkillsThree skills for memorable websites: scroll scenes and 3D, a scroll audit and a landing page strategy.
Scroll Video Website Skill
scroll-video-website-skill
A skill turning video into a site with smooth frame-by-frame scrolling. One-command installation with npx skills
A skill for building premium scroll-driven websites on a real design standard: typography, rhythm, depth, motion and in-browser verification
Web Animation Skills
web-animation-skills
Web animation skills: GSAP, SVG, Lottie, micro-interactions, page transitions, 60 frames per second. Install with npx skills or as a plugin
A skill that builds a landing page with one camera flight through scenes; scrolling moves the clip forward and back.
A skill that builds a landing page where scrolling flies a camera through a generated 3D world
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Repository stars | Main difference |
|---|---|---|---|
| Scroll Web Skills (this card) | no | 242 | |
| Scroll Video Website Skill | no | 69 | scroll-video-website-skill builds the site from video, while this set also has a skill for the animation prompt itself and an acceptance checklist. |
| Scrolline | no | 110 | Scrolline focuses on scrolling, while this set links the video model prompt to the site build. |
README in short
The repository gives two skills and prompt templates: first the product animation, then the scroll site. The examples walk through sneakers and ice cream, MIT license.