HTML To Interaction Prompts
Turns a web page into a screenshot-backed article of reusable interaction prompts
- Repository
- MengTo/Skills
- Stars
- 7,187
- Licence
- MIT
- Files
- 6 files
What it does
Once installed, the agent can take an HTML page or a live website you point it to, identify its main animations and interactions, and write a set of reusable prompts describing them. It also captures screenshots and, for daily inspiration workflows, motion frames and video, inserts them under each prompt in an article, checks that the article renders, and commits the intended files to git. The skill text is cut off in the files provided, so some steps beyond the visible text are unverified.
Great for
- Designers and front-end developers collecting landing-page animation references for AI builders
- Content creators who publish daily UI inspiration articles with prompts and visual evidence
Skip it if
- Copying a site's design or content for commercial reuse, since it captures and describes third-party pages and the skill does not address licensing or permission
- Quick one-off questions about a page, because the workflow is heavy and expects a git repository and capture tooling
Try asking
- “Convert this exported generated-page.html into an article with five interaction prompts and screenshots under each one”
- “Capture a full-page screenshot and section crops of this Framer template's live preview and write an AI-builder prompt for each section”
- “Extract the scroll and hover animations from this HTML file and create reusable prompts for each”
Install in 3 steps
- 1
Download the skill
The ZIP contains the 6 original files, the MIT licence and an attribution note.
html-to-interaction-prompts.zip - 2
Add it to your agent
Claude Code (all projects)
mkdir -p ~/.claude/skills && unzip html-to-interaction-prompts.zip -d ~/.claude/skills/Claude Code / Agent SDK (this project only)
mkdir -p .claude/skills && unzip html-to-interaction-prompts.zip -d .claude/skills/Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.
- 3
Ask for the task
No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.
Get better results
- Give the skill the real HTML file or live URL, since it asks the agent to read the source code and treat it as the truth rather than guessing from screenshots
- Review the commit scope before the agent commits, because the workflow stages files in a dirty worktree
- Confirm you have permission to capture and republish any third-party website before running the live-capture workflow
What's inside
- agents/openai.yaml
- demo/expected-output.md
- demo/index.html
- demo/input.md
- demo/PROMPT.md
- SKILL.md
Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.