guyaga

10d10s Bonus Shoppable Film Site — DevOps skill for Claude Code

DevOps community

Claude Code skill - turn an AI product film into a store you can shop while it plays: frame-by-frame tracked hotspots, stomp titles, a film-clock flash sale, scroll story effects, Netlify deploy.

How to install 10d10s Bonus Shoppable Film Site

This entry records only its repository, not the path inside it, so there is no exact command to give. Open guyaga/10d10s-bonus-shoppable-film-site and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What 10d10s Bonus Shoppable Film Site does

Claude Code skill - turn an AI product film into a store you can shop while it plays: frame-by-frame tracked hotspots, stomp titles, a film-clock flash sale, scroll story effects, Netlify deploy. GPT Image 2.5 + Seedance 2.5 + Gemini tracking. Course bonus for 10 Days 10 Skills.

Alternatives in DevOps

Claude Code Router — Use Claude Code as the foundation for coding infrastructure, allowing you to decide how to interact with the m 30.1k ★
Cloudflare Deploy — Deploy apps to Cloudflare using Workers, Pages, and platform services 14.6k ★
Vinext — Vite plugin that reimplements the Next.js API surface — deploy anywhere 8.7k ★

README

Shoppable Film Site: a Claude Code skill

**Turn an AI product film into a store you can shop while it plays.** Tracked hotspots ride on every piece in the film. Stomp titles travel beside each piece on the beat. A flash sale counts down on the film's own clock. The scroll layer adds a full-bleed hero that settles into the player, a "piece by piece" story where the camera zooms onto each product, a parallax lookbook and a working bag.

Live example: **https://atelier-veyra-runway-shop.netlify.app**

![cover](cover.png)

סקיל ל-Claude Code שהופך סרטון מוצר שנוצר ב-AI לחנות חיה: נקודות שעוקבות אחרי כל פריט בסרטון פריים-אחר-פריים, כרטיס מוצר בלחיצה, כותרות סטומפ בסגנון After Effects, מבצע בזק עם ספירה לאחור שרץ על השעון של הסרטון, ואפקטי גלילה: הירו במסך מלא שמתכווץ לנגן, זום על כל פריט בגלילה, לוקבוק פרלקסה וסל קניות עובד. GPT Image 2.5 לתמונות המוצר → Seedance 2.5 לסרטון → Gemini + optical flow למעקב → site.json אחד → Netlify.

Install

Install the shoppable-film-site skill from https://github.com/guyaga/10d10s-bonus-shoppable-film-site by cloning it
to ~/.claude/skills/shoppable-film-site, running pip install -r requirements.txt and playwright install chromium in
that folder, then check which of these keys I have set (GEMINI_API_KEY, OPENAI_API_KEY, KIE_API_KEY,
NETLIFY_AUTH_TOKEN) and tell me which pipeline steps are available to me.

It also needs ffmpeg on PATH and Node (for `npx http-server`).

Try it in one minute (no API keys)

cd ~/.claude/skills/shoppable-film-site
python scripts/build_site.py examples/atelier-veyra/site.json --out demo
npx -y http-server demo -c-1 -p 8766      # open http://127.0.0.1:8766

The pipeline

Step	Tool	Key
Product stills on the page colour	GPT Image 2 / 2.5 (`gpt2-image` skill)	`OPENAI_API_KEY`
The hero film: one take, clean plate	Seedance 2.5 on kie.ai (`seedance-make-video --v 2.5`)	`KIE_API_KEY`
Frame-by-frame tracking	`scripts/vtrack.py` (Gemini 3