6 Skills to Get AI Demos Running: Which One to Install First to Save the Most Hassle

Meng To listed 6 Skills he often uses for demos on X, with links, installation methods, and a demo video. The list isn't long, but it's very specific: target image, pointer response, UI motion, reverse engineering, and live HTML. Each one maps to a bottleneck in the demo workflow.

Original tweet: https://x.com/MengTo/status/2121264403530293624

1. dream-loop: Put the target image and critic agent in a loop

Link: https://github.com/achimala/dream-loop

According to the repo, dream-loop is an agent skill that uses a closed loop to build games, apps, or scenes: the AI first uses image generation to create a high-quality target screenshot, then builds around the target image; another AI critic compares live screenshots with the target image and gives feedback; the builder returns to step 2 and keeps revising until the critic is satisfied. Optionally, it can return to step 1 and generate a better target image based on the current state.

Installation: npx skills add achimala/dream-loop. The agent needs image generation and visual input; sub-agents are optional but strongly recommended. For custom 3D modeling, install Blender—the Blender MCP or scripting interface works better than computer use. The repo says it has currently only been tested on GPT-6 Astra in Codex; strong models like Claude Fable 5.1 may also run it.

In the comments, some focused on the critic agent: generation is already easy; knowing what looks bad is the real skill. Others joked that this pipeline seems to need a small town hall. Meng To replied that dream-loop is underrated. That take is worth noting: demo quality often gets stuck on repeated comparison and revision, not on the first generation.

2. Hairline: Make isometric line art respond to the pointer

Link: https://hairline.lucasmarkes.com

Hairline provides 33 isometric line-art graphics for the web: SVG, dependency-free, usable with React or plain DOM. Install: npm i @lucasmarkes/hairline. Its selling point is that the line art responds to the pointer, making it suitable for illustrations that need interactive feedback, not static decoration. The project is free under MIT and also has a skill for drawing your own graphics.

One commenter said Hairline is great and suitable for anything that needs to respond to the pointer. This positioning is narrow, but once a demo involves mouse movement, hover, or drag, static images start to feel inadequate.

3. Emil Kowalski's design engineering skills

Link: https://emilkowal.ski/skill

The page shows 18 skills arranged by project stage: before starting, there are Animation Vocabulary, Pick a UI Library, and Prototyping; while building the interface, there are Design Engineering, Animate, Choreograph, Apple Design, Gestures, and Mobile Native; for finishing, there are Animation Performance, Break UI, and Review Animations; when looking at the whole app, there are Find Opportunities, Improve Animations, and Remove Animations; plus Animate Expo, Ask Sonner, and Learn Taste.

Install: npx skills@latest add emilkowalski/skills. The page shows 56,647 GitHub stars and 3.5M installs on skills.sh. The course waitlist has 4,619 people, and the page says it reopens on December 8.

A commenter asked Meng To why he doesn't use Impeccable or Taste. Meng To replied that references are the best way to gain taste. That reply is more useful than arguing over which skill is stronger. Design judgment is hard to solve with a single prompt; reference samples still matter.

4. Meng To's own skills

Link: https://github.com/mengto/skills

The description in the tweet is very brief: skills for designers and builders. The source material doesn't go into more detail, so the link is left here for now. It's not on the same level as Emil's list: one leans toward a personal workflow, the other toward systematized interface engineering skills.

5. REA: Reverse-engineer apps and websites

Link: https://rea.tools

The tweet describes it as reverse engineer how any app or site works. In other words, it reverse-engineers how any app or website works. The source material doesn't provide more usage details, but this kind of tool is useful before starting to break down interactions, structure, and implementation paths. Before a demo, figuring out how others did it is more reliable than letting an agent guess.

6. HTML Demo: Run the app directly as live HTML

Link: https://fil.design/skills/html-demo

The tweet describes it as your app working live in HTML. A commenter said the live HTML demo is the most useful because it saves the step of recording a video. Meng To replied that he has been using it for recent videos. This feedback is practical: the demo goes from a screen recording to an openable, clickable page, removing one handoff in both review and sharing.

What You Might Want to Install First: Finishing Tools

What's really interesting about this list is the closed loop and the finishing work. dream-loop strings target image, building, criticism, and revision into a loop; HTML Demo turns a demo from a screen recording into a runnable page; Emil's skills break design engineering into callable steps. Generation capability is getting cheaper; judgment and finishing are not.

Stacking up six Skills isn't hard; the hard part is knowing which one to delete. Before installing, identify the bottleneck: if you lack a target image, try dream-loop; if you lack interactive illustrations, look at Hairline; if you lack judgment for UI motion, install Emil's skills; if you lack a clickable demo, start with HTML Demo.