Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add devinilabs/pro-skill --skill html-to-interaction-promptsgit clone --depth 1 https://github.com/devinilabs/pro-skillWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/devinilabs/pro-skill/html-to-interaction-prompts)<a href="https://agentmods.dev/skills/devinilabs/pro-skill/html-to-interaction-prompts"><img src="https://agentmods.dev/badge/skills/devinilabs/pro-skill/html-to-interaction-prompts.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00077 | $0.03072 |
| Opus 5 | $0.00039 | $0.01536 |
| Sonnet 5 | $0.00015 | $0.00614 |
| Haiku 4.5 | $0.00008 | $0.00307 |
Grade A, and why
html-to-interaction-prompts scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 8d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
This is a copy
100% identical to html-to-interaction-prompts — 0 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 134 lines — stays where its author put it; the contents beside it link to each section on GitHub.
HTML To Interaction Prompts
Goal
Turn an HTML reference into an article-ready prompt pack: identify the important interactions, capture the right visual evidence, write flexible prompts, insert screenshots under each prompt title, verify the article renders, and commit only the intended files.
Daily UI Inspiration Capture Contract
When this skill is used for a daily UI inspiration workflow:
- Each daily inspiration article must contain exactly 5 inspirations, not 20.
- Do not ship a screenshot gallery or append 20 shallow prompts.
- Each of the 5 inspirations must include a representative local still image, an embedded local MP4 video, multiple local screenshots or motion frames, motion/interaction notes, source metadata, and one super detailed AI-builder prompt.
- If the source is a Framer template or any other live website, record the actual landing page or preview URL while scrolling through the website itself. A marketplace cover image, thumbnail, screenshot pan, or static asset slideshow is not acceptable live-video evidence.
- For Framer, inspect the marketplace detail page for
Full Live Previewor the embeddedpreviewUrl, save that URL aspageUrl, and record the MP4 from that page. - For live websites, save one full landing-page scroll screenshot as a single tall image. Then cut section-by-section screenshots from that exact full image so the article includes both the whole page and each section separately.
- Section crops must be contiguous and pixel-complete relative to the full-page image. Do not miss pixels between sections, do not use arbitrary viewport screenshots as section substitutes, and only allow overlap when sticky elements make it unavoidable.
- Include as many section crops as the page has meaningful sections. At minimum include the hero, each major middle section in page order, and the footer. Use purpose-based labels when possible, such as
proof,features,process,gallery,pricing,faq, orfinal-cta; otherwise use ordered labels likesection-02. - In
content.md, match the established daily capture article structure from recent examples. Use### Full-Page And Section Evidence, render the full-page screenshot as a normal Markdown image, then use#### Section Cropsand render each crop as a normal Markdown image in top-to-bottom order. Do not rename this block toLocal Evidence, do not use text links, filename lists, Markdown tables, raw HTML grids, or crop-coordinate captions for this block. - Do not put crop-coordinate captions under screenshots in
content.md; keep crop coordinate details inmanifest.json. - Extract multiple motion frames from the live website video. The frames should show real page states across scroll, not repeated crops of the same cover image.
- If live capture is blocked, prefer replacing the candidate with another live website. Only create a local fallback video from still evidence when replacement is impossible or the source is image-only, and state the fallback reason in
content.mdandmanifest.json. - The prompt for each inspiration should be long enough to paste into an AI builder directly. It should include reference boundaries, anti-patterns, core idea, design system, layout rules, motion system, section-by-section anatomy, conversion/footer, responsive behavior, accessibility, performance, and reduced-motion guidance.
- Each prompt must describe the landing page section by section. Cover the global shell, header/navigation, hero, proof strip, feature/service modules, product/demo/media section, process/how-it-works, gallery/case-study/work section when present, testimonials/social proof, pricing/package/comparison when present, FAQ, final CTA, footer, and mobile behavior.
- For every major section, specify the purpose, layout anatomy, visual details, animation, interaction states, scroll behavior, recommended implementation library/API, and reduced-motion fallback.
- For Framer/live websites, each prompt must include a
Live-site evidencenote explaining that the still, MP4, and frames were captured from the actualpageUrl, not from a cover image. - The manifest must have
itemCount: 5and exactly 5items. - Keep all media inside
articles/YYYY-MM-DD-ui-inspiration-capture/.
What ships with it
6 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 8d ago First seen · 134 lines · 77 tokens per session scan A 59b800616a70
html-to-interaction-prompts is a skill published in the GitHub repository devinilabs/pro-skill (23 stars, last pushed 25d ago), licensed MIT. It adds 77 tokens to every session and 3,072 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. It is 100% identical to html-to-interaction-prompts, differing in 0 lines, and is treated as a copy.
Other skills, from other repositories
webgl-holographic-foil
A self-contained WebGL2 hero: thin-film interference over a crushed-foil surface whose palette shifts with the viewing angle; move the cursor to tilt the film.
general-video
Author or edit a custom HyperFrames composition when no specialized workflow fits, or when BRIEF.md sets flow: companion. Use for longer or multi-scene pieces, brand and sizzle reels, montages, static loops, static title cards, footage remixes, and freeform builds. Use motion-graphics instead for a short unnarrated…
html-ppt-hermes-cyber-terminal
OpenDesign + BYOK: choosing and wiring your own model, hands-on — cost, quality, and the routing decision. Built as a decision-grade AI literacy deck for engineers, IT, applied-AI teams.
html-ppt-taste-brutalist
16:9 HTML deck in tactical-telemetry / CRT-terminal taste. Deactivated-CRT charcoal slides, white-phosphor monospace, hazard-red accent, scanline overlay, ASCII syntax, density over decoration. Distilled from Leonxlnx/taste-skill brutalist-skill (Tactical Telemetry mode).
diagnostic-stem-delivery
Audio production with diagnostic analysis, timecode parsing from documents, and verified export workflow.
chengfeng-check-updates
An environment manager for a video-editing system. It checks whether its skills and runtime—the software needed to run them—are installed and compatible.