The Ai KhanLet's talk

Claude Code · Skill · Guide

scroll-film-site: AI film wali website, ek skill se

By Published Tested 4 min read

1
install command
4
sites built with it
MIT
free, open source

Skip to the prompt for Claude Code ↓

Ye skill ek client website banata hai jiska hero ek chhoti AI film hai (Veo 3 se), jo visitor ke scroll karne pe aage peeche chalti hai. Neeche menu, shop, deals, reviews aur location, aur order seedha WhatsApp pe jata hai, sab item, option, total aur address ke saath likha hua. Free hai, open source hai (MIT), aur isi se maine ye 4 sites banayi hain: Angaar Smash & Grill, GlossWorks, Fatima Toys & Sports aur Meridian.

Pipeline
intake -> scaffold -> photos -> Veo prompt -> build (poster mode) -> audit -> GitHub + Vercel
                                            |  (tum film banate ho)
                 film -> frames -> text retime -> Cloudflare Pages -> redeploy -> live check

Ye cheezein ready rakho

  • Claude Code (ya Cursor, Codex, OpenCode: skill un sab mein chalta hai).
  • ffmpeg: film ko frames mein kaatne ke liye.
  • Python 3 + Pillow: photos WebP mein convert karne ke liye (pip install pillow).
  • Node 18+ aur playwright-core + Chrome: phone aur desktop pe layout check ke liye.
  • gh (GitHub CLI) aur vercel CLI, dono mein login.
  • Veo 3 ka access (Google Flow / Gemini): film tum banaoge, skill tumhe prompt likh ke dega.

Site film ke bagair bhi ban jati hai. Jab tak film nahi aati, hero ek photo pe slowly zoom karta hai ("poster mode").

Skill install karo

Terminal
npx skills add areeb26/scroll-film-site

Bina sawalon ke, sirf Claude Code ke liye, globally:

Terminal
npx skills add areeb26/scroll-film-site -g -a claude-code -y

Ya seedha clone kar lo:

Terminal
git clone https://github.com/areeb26/scroll-film-site.git ~/.claude/skills/scroll-film-site

Phir Claude Code band karke dobara kholo (ya naya session).

Claude ko business batao

Normal zubaan mein bolo, skill khud load ho jata hai:

Claude Code
make a website for a restaurant: desi BBQ aur smash burgers, delivery orders, deals, gallery aur reviews

Claude ek round mein kuch sawal poochega: business kya hai, kaunse features chahiye (cart, booking, quote builder, deals, gallery, reviews), real client hai ya demo brand, aur WhatsApp number. Phir wo site ka folder bana deta hai (scripts/new-site.sh), template copy karke brand ka naam bhar deta hai.

Photos aur Veo prompt

Jab tak client ki asli photos nahi aati, skill Unsplash se free stand-in photos dhoondta hai, unki contact sheet bana ke achi wali chunta hai aur WebP mein convert karta hai.

Phir wo VEO_PROMPT.md likhta hai aur prompt chat mein bhi paste karta hai. Prompt is hisaab se plan hota hai ke film ka subject text ke opposite side pe rahe, aur aakhri second khaali aur dark ho taake closing headline wahan aa sake. Ye prompt Veo 3 mein paste karo aur 8 second ki film bana lo. Abhi nahi banani? Koi baat nahi, site poster mode mein chalegi.

Site build aur check

Claude site banata hai: hero, menu ya catalogue, deals, reviews, location, aur WhatsApp checkout. Customer cart bharta hai, naam, phone aur address daalta hai, aur ek button se WhatsApp khulta hai jisme poora order likha hota hai. Opening hours bhi built-in hain: band time pe site order nahi leti, bata deti hai.

Phir ek headless audit chalta hai 320, 390 aur 1440 pixel width pe. Ye pakadta hai: phone pe page zoom-out hona, kata hua text, aur nav ke neeche chhupa text. Jo flag ho, Claude fix karta hai.

Live karo

Claude Code
ship it

Skill ek private GitHub repo banata hai aur vercel deploy --prod --yes chalata hai. Live URL deploy ke output se padhta hai (kyunki <naam>.vercel.app kisi aur ka bhi ho sakta hai) aur live site pe dobara audit chalata hai.

Film aaye to site pe lagao

Claude Code
here's the Veo video for the restaurant, put it on the site: ~/Downloads/angaar_hero.mp4

Ab skill:

  1. film ko WebP frames mein kaatta hai, do size mein (1920 aur 1280), scripts/make-frames.sh se;
  2. film ki ek grid wali contact sheet padh ke text ke "chapters" ka timing film ke hisaab se set karta hai, aur phone pe crop subject ke saath pan karta hai;
  3. frames ko Cloudflare Pages pe daalta hai (free, bandwidth ki koi limit nahi);
  4. dobara deploy karke live check karta hai ke saare frames load ho rahe hain.

Ab scroll karo: film tumhari ungli ke saath chalti hai.

Common Mistakes

  • Phone pe page zoom-out ho jata hai: koi ek element (ticker, lamba nav label) screen se chaura hai. Fix: html, body { overflow-x: clip }. overflow: hidden mat lagao, wo sticky hero tod deta hai.
  • Drawer ya cart scroll nahi hota: smooth scroll (Lenis) wheel events kha jata hai. Scroll hone wale panel pe data-lenis-prevent lagao.
  • iPhone input pe zoom karta hai: form fields phone pe 16px se chhote na hon.
  • Wrangler 4 pe Pages project nahi banta: deploy script mein --force pehle se hai, wahi use karo.

Safety

  • Client ki sites private repos mein jaati hain.
  • Demo brand pe reviews aur stats sample hote hain, aur README mein "Placeholders to confirm" mein list hote hain. Real client ke liye skill reviews invent nahi karta, asli reviews maangta hai.
  • Skill full agent permissions ke saath chalta hai. Install se pehle repo dekh lo, ye open source isi liye hai.

Checklist

  • Skill install hua (npx skills add areeb26/scroll-film-site)
  • ffmpeg, Pillow, Node, gh, vercel ready
  • Claude ko business aur features bataye
  • Veo prompt se film banayi (ya poster mode mein live kiya)
  • Audit 320 / 390 / 1440 pe clean
  • WhatsApp order ka message test kiya
  • Live URL pe frames load ho rahe hain

Apne business ke liye ye site main bana ke doon? Open a case file. Main 24 ghante mein reply karta hoon.

Using Claude Code or Codex?

Paste this. Let your agent set it up.

Prompt
Install the scroll-film-site skill from https://github.com/areeb26/scroll-film-site
1. Run `npx skills add areeb26/scroll-film-site -a claude-code -y`.
2. Check that ffmpeg, Python 3 with Pillow, Node 18+, gh and the vercel CLI are installed. For anything missing, tell me the install command for my OS and stop.
3. Never read or print .env files, tokens or keys.
4. When it's ready, ask me what business the website is for, and start the skill.

More from the drawer

All guides →

Home