Show Me Once

Show it once. They’ve got it forever. Record a phone task once, and AI turns it into a spotlight tour parents can follow alone.

Comment

Inspiration

My grandmother kept calling me to ask how to send a photo to our family WhatsApp group. I would explain it over the phone, she would get it once, and a week later she would forget. Apps never teach older users, so I built something that teaches it once and stays with her.

What it does

Show Me Once turns one phone screen recording into a guided tour. A helper records a task once; AI picks the real steps, finds what was tapped, and writes simple instructions. The parent opens a link and follows a spotlight on real screenshots of their own app: one step at a time, large text, each step read aloud, and a gentle "Tap the glowing circle" if they tap the wrong place. No accounts; each guide has an unlisted link and can be deleted anytime.

Try a real guide: https://smo-nu.vercel.app → "See an example guide"

How I built it

I planned first with the Devpost Learn skills (scope.md, prd.md and spec.md are in the repo), then built it with Claude Code. Next.js, TypeScript and Tailwind on Vercel; Supabase for the database and private storage; Claude's vision API to read the frames. Frames are extracted in the browser, and the voice uses the browser's built-in speech, so it works on both iPhone and Android with nothing to install.

Challenges

  • Guides were coming out with only 4 steps even when the recording had more. I assumed the AI was skipping steps, but the cause was my duplicate-frame filter: it threw away small but real changes, like a highlighted row or a ticked photo, before the AI ever saw them.
  • iPhone recordings use a video format some browsers can't read, so I added a screenshot upload as a fallback.

What I learned

  • Planning before coding pays off: the spec step caught a security bug where my first database rule would have exposed the secret edit keys.
  • A schema guarantees the AI's output has the right shape, not that it's correct. I added meaning checks (valid frames, boxes on screen, short plain instructions) and a retry loop with the exact errors as feedback.
  • Check the data before blaming the model.

Built With

Share this project:

Updates

Submission history