← All skills
app-ui-mockups
85 / 100 · Low risk
Fine to try.
By vargHQ/skills (GitHub) · media · 25 stars · scanned at commit 72e8109
Ten animated UI mockups for product, launch and dev-tool videos, rebuilt as HTML instead of screen recordings: phone message thread, team chat channel, coding-agent terminal session, terminal command run, desktop terminal window, desktop notification banner, code editor walkthrough, 3D code slab, exploded UI panels and an amber CRT console. Presets give typing speed (12-20 characters per second with seeded gaps), reading holds from character count, entrance easing and scale, camera lead before …
Works with any agent that supports SKILL.md skills.
What this skill can do
Downloads and installs other software
The author does not mention this.
Found in 27 places.
Show 17 more
- app-ui-mockups/examples/demo/README.md, line 20
PATH=$HOME/.nvm/versions/node/v22.19.0/bin:$PATH npx --yes hyperframes@0.8.206 render -o app-ui-mockups.mp4 --fps 30 --crf 20 - app-ui-mockups/examples/demo/package.json, line 6
"dev": "npx --yes hyperframes@0.8.206 preview", - app-ui-mockups/examples/demo/package.json, line 7
"check": "npx --yes hyperframes@0.8.206 check", - app-ui-mockups/examples/demo/package.json, line 8
"render": "npx --yes hyperframes@0.8.206 render", - app-ui-mockups/examples/demo/package.json, line 9
"publish": "npx --yes hyperframes@0.8.206 publish" - app-ui-mockups/references/agent-terminal-session.md, line 34
1. Window: start from HyperFrames `code-terminal-run` (prompt typing behind a deterministic caret) and `terminal-simulator` (streamed logs); build the transcrip - app-ui-mockups/references/amber-booth-console.md, line 30
1. Start from HyperFrames `terminal-simulator` for the boot log, `code-terminal-run` for typed commands, `svg-stroke-trace` for the vector end card and `vignett - app-ui-mockups/references/code-editor-walkthrough.md, line 32
1. Start from HyperFrames `code-snippet-dark-2026` (full Dark 2026 workbench with per-character typing), then add `code-scroll` (camera scrolls a long file to a - app-ui-mockups/references/code-editor-walkthrough.md, line 36
5. Remotion: the Code Hike template (`npx create-video@latest --code-hike`) gives snippet-to-snippet transitions; wrap each step in a `<Sequence>`. [50] - app-ui-mockups/references/code-slab-3d.md, line 35
1. Start from HyperFrames `code-3d-extrude` (WebGL slab with real depth and lighting that rotates and settles to a readable rest, 8 s). `npx hyperframes add cod - app-ui-mockups/references/desktop-notification-banner.md, line 34
1. Start from HyperFrames `native-notification-pop` (system-faithful spring, iOS or macOS geometry, blur, exit none/fade/up) or the `macos-notification` block ( - app-ui-mockups/references/desktop-terminal-window.md, line 32
1. Start from HyperFrames `code-snippet-apple-terminal-pro` (black profile, grey text, lime cursor, per-character typing) or `code-terminal-run`. `npx hyperfram - app-ui-mockups/references/exploded-ui-panels.md, line 32
1. Start from HyperFrames `exploded-stack` (isometric plates explode with a label per layer, hold, collapse back) or `ui-3d-reveal` (perspective 3D reveal of UI - app-ui-mockups/references/phone-message-thread.md, line 39
1. Start from HyperFrames `chat-thread` (full scene: status bar, header pill, real tails, receipt, link card, typing dots) or `message-thread-reveal` (9:16, 25. - app-ui-mockups/references/team-chat-channel.md, line 34
1. Start from HyperFrames `thread-message-stack` (editable incoming/outgoing stack, 16:9) for the column, `slack-notification-ad` (9:16 lock-screen escalation) - app-ui-mockups/references/terminal-command-run.md, line 34
1. Start from HyperFrames `code-terminal-run` (one command: deterministic typing behind an integer-cycle caret, output per cue, fresh prompt) or `terminal-simul - app-ui-mockups/references/terminal-command-run.md, line 35
2. Script as data: `[{type:"cmd", text:"npx create-thing my-app"}, {type:"out", lines:[…], gap:0.06}, {type:"progress", from:0, to:100, dur:2.4}]`.
and 7 more places
Install
Paste this into your terminal. It downloads exactly the version we scanned, not whatever is newest.
if [ -e ~/.agents/skills/'app-ui-mockups' ] || [ -L ~/.agents/skills/'app-ui-mockups' ]; then echo 'A skill folder named app-ui-mockups already exists — not replacing it' >&2; false; else d=$(mktemp -d) && git clone --quiet --filter=blob:none --no-checkout 'https://github.com/vargHQ/skills' "$d" && git -C "$d" checkout --quiet '72e8109188e3366ba8d365902a84d6b237dec1d7' -- 'app-ui-mockups' && mkdir -p ~/.agents/skills && cp -R "$d"/'app-ui-mockups' ~/.agents/skills/'app-ui-mockups' && rm -rf "$d"; fi
Codex reads ~/.agents/skills directly. For Claude Code, Cursor, Copilot, Gemini CLI, Antigravity or OpenCode, also link it. For Claude Code: ln -s ~/.agents/skills/'app-ui-mockups' ~/.claude/skills/'app-ui-mockups' (other agents: ~/.cursor/skills, ~/.copilot/skills, ~/.gemini/skills, ~/.gemini/config/skills, ~/.config/opencode/skills). Or install through the finder skill, which does both.
Badge for your README
The badge for vargHQ/skills shows the score of its lowest-scoring skill.
[](https://zalavijaysinh.github.io/skilltrust/repos/vargHQ/skills/)
Score history
| Date | Version | Score |
|---|
| 2026-11-07 | 72e8109 | 85 |