Skip to content
SkillCheatSheet Sign in

html-demo

An AI agent skill from MengTo/Skills, scored 85 out of 100 by code and Verified.

85/ 100AVerified

Code score by group

  • Spec20/20
  • Description14/20
  • Procedure12/15
  • Done criteria15/15
  • Resources9/10
  • Scripts5/8
  • Safety7/7
  • Upkeep3/5

It loses the most points in Description (6), the group that checks whether the description says what the skill does and when to use it.

What the author says it does

Show an app working on a web page by drawing it live in HTML instead of recording it. A Mac-style window plays the app step by step, and every frame is a pure function of one clock, View(t), drawn on a fixed 1200 × 750 stage that one CSS scale fits to any width. The pointer is scripted, labels and pictures come from the real app, a steps bar sits under the window, it plays only while on screen, and reduced motion gets designed end frames. Use when someone wants a product demo, an animated app window or hero, a feature walkthrough, "the UI animated and simulated in HTML", "like a screen record…

This is the description in the skill's own SKILL.md, written by its author, not by SkillCheatSheet.

Repository
MengTo/Skills
Folder
agent-skills/web-design/html-demo
License
MIT
GitHub stars
7,374
SKILL.md lines
118
Other files
16

Add html-demo to your agent

npx skills add MengTo/Skills --skill html-demo

The command uses the open skills CLI. A skill is instructions and scripts your agent will follow, so read it first: open the folder on GitHub at the commit that was scored.

Labelled for

More skills from MengTo/Skills

  1. browser-video-recording

    Create polished 60 fps 4:3 4K browser screen-recording style videos from Codex in-app browser captures, with browser-only crop, natural macOS cursor styling, deliberate click chor…

    Verified87A
  2. html-reel

    Turn a tweet, a video, a YouTube video or a landing page into a 9:16 reel (Instagram Reels, TikTok, Shorts) that says what the source says and looks like it, with every cut on a w…

    87A
  3. illustration-bold-pop

    Draws hand-authored SVG spot illustrations in a bold pop-geometric style for design and coding scenes. Identifying traits: a thick navy outline on every shape, solid navy extrusio…

    Verified85A
  4. illustration-framed-panel

    Draws original design-and-coding scenes as SVG cards (480x360) in a framed-panel cartoon style. Identifying traits are a soft pastel card with a periwinkle-violet panel framed in…

    Verified84B
  5. html-explainer-video

    Turn a product, a feature or an idea into a finished one-minute explainer video in any look: a script (hook, benefit, quick tutorial, try it), a voice whose words are the clock, H…

    Verified83B
  6. illustration-isometric-mono

    Draws true-isometric diorama illustrations of developer and design workspaces in one green ramp, generated as SVG with a bundled scene kit. Traits: one rounded off-white slab with…

    Verified83B
  7. daily-ui-inspiration-capture

    Create a recurring daily UI inspiration capture. Use when the user asks to run, refresh, package, or validate dated UI inspiration bundles, especially for `articles/YYYY-MM-DD-ui-…

    Verified82B
  8. illustration-outlined-cartoon

    Draws original hand-authored SVG spot illustrations in an outlined cartoon style for design and coding subjects. Identifying traits: a warm near-black ink outline on every flat fi…

    Verified82B

All skills in MengTo/Skills

Scores come from a snapshot of 300 public GitHub repositories taken on 12 November 2026. Every score is the result of fixed checks run by code; no AI is involved. How scoring works.