app-ui-mockups
From the author
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 each action, text size as a share of frame height, and theme colors from MIT theme sources, from Charm VHS, Screen Studio, Emil Kowalski, Apple HIG and Netflix timing rules. Use when someone wants a fake text or Slack conversation, a terminal or Claude Code demo, a code walkthrough or an exploded UI shot in a video. NOT for recording a real screen or for real people's messages presented as genuine.
Install
npx skills add hashgraph-online/awesome-codex-plugins --skill app-ui-mockups -a claude-code
Installs to .claude/skills/app-ui-mockups/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 88
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- create-chatgpt-mockupgooseworks-ai/goose-skillsRender pixel-accurate ChatGPT mobile (iOS) screen mockups in light mode from a thread JSON. Supports user text bubbles, user image attachments, assistant markdown prose, citation chips, the OpenAI spiral logo, the Apps-SDK GPT chip in the composer, and three header styles (model-tag, plain title, "Get Plus"). Fixed 9:16 viewport. Outputs HTML + PNG.Media★ 1.3K
- ui-mockupmvschwarz/openrigCreate UI mockups at three fidelity levels — ASCII wireframes for quick iteration, standalone HTML mockups for delivery with requirements, and live prototypes for interaction testing.Design★ 8.3K
- create-imessage-mockupgooseworks-ai/goose-skillsRender pixel-accurate iMessage screenshot mockups (DM or group) from a thread JSON. Supports minimal, with-keyboard, and full iPhone 15 Pro frame variants. Outputs HTML + PNG.Media★ 1.3K
- onetakefeitangyuan/onetakeMake short product / skill motion videos (10–30 s, narrated feature demos up to ~60 s) the way high-end launch clips are made — kinetic type, real UI as the material, a hand that causes every reaction, beats that carry into each other instead of replacing each other, hard cuts only where they mean something — without HyperFrames or Remotion. A single HTML composition where every value is a pure function of time, built from a library of measured moves (springs, entrances, carries, contact, camera), rendered frame by frame with real shutter motion blur (1080p30 drafts, 4K60 final), with synthesised sound effects that share one room and an oracle that fails a slideshow before a human has to watch it. Use for 做个动效短片 / 产品宣传片 / 介绍视频 / 发布视频 / 15 秒 launch video / 给 skill 或 app 做个视频 / promo / teaser, for turning real pages or screen recordings into a cut, for product feature demos (产品功能演示 / 功能展示动效) where the UI is rebuilt in HTML from screenshots instead of screen-recorded (不录屏 / 复刻界面 / 截图还原 UI), for narrated cuts witDesign★ 3.5K
- code-animation-promptsXiaoyeCodes/code-animation-prompts使用 341 种风格提示词和参考静帧制作代码动画、HTML 动效或视频。适用于按风格编号选型、组合视觉风格、把内容转成可编辑动画并渲染成片。Media★ 113
- frontend-mockup-loopBlackBeltTechnology/pi-agent-dashboardPlan, build, and iterate UX-friendly frontend mockups via a ground→contract→mockup→test→fix→learn loop, acting as an expert UX designer who grounds every decision in externally documented public design rules (Nielsen heuristics, Laws of UX, WCAG, GOV.UK/USWDS/Material). Uses the bundled serve_mockup, score_mockup, and init_ui_contract tools plus a ui-contract.md design control plane to keep screens consistent. Works in any React/Tailwind/shadcn (or plain HTML) project. Use when designing new screens, adapting existing UI, enforcing cross-screen consistency, or doing a UX review. Triggers: "design a screen", "mockup this UI", "wireframe", "make the UI consistent", "adapt the existing design", "improve this layout", "UX review", "is this good UX".Design★ 338
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in