Take a UI screen recording (mobile/desktop/web/marketing video) and do one of four things — your pick: (1) just extract the frames as PNGs, (2) analyze the design system shown in the video and list the distinct screens, (3) compare the video against files in your codebase and produce a concrete list of edits to make those files feel like the video, or (4) scaffold a real frontend app (Vite + React + TypeScript + Tailwind) that recreates the UI's behavior — not just its appearance — with working interactions and animations. Option 3 always shows you the proposed changes first and waits for your approval before editing. Requires ffmpeg; mode 4 additionally needs Node.js to run the generated app. Mode 4 reads the frontend-design skill (if installed) before generating to inherit its component-quality and aesthetic guidance.
Install with
Claude CodeCodexCursorGitHub CopilotGemini CLI
Supported by the Atlas install prompt. Skill-specific requirements vary.
Skill stats
Skills1CategoryContent & writingStars0
About this skill
Take a UI screen recording (mobile/desktop/web/marketing video) and do one of four things — your pick: (1) just extract the frames as PNGs, (2) analyze the design system shown in the video and list the distinct screens, (3) compare the video against files in your codebase and produce a concrete list of edits to make those files feel like the video, or (4) scaffold a real frontend app (Vite + React + TypeScript + Tailwind) that recreates the UI's behavior — not just its appearance — with working interactions and animations. Option 3 always shows you the proposed changes first and waits for your approval before editing. Requires ffmpeg; mode 4 additionally needs Node.js to run the generated app. Mode 4 reads the frontend-design skill (if installed) before generating to inherit its component-quality and aesthetic guidance.
Quick start
Copy the install prompt. Use the green button above this README.
Send it to your agent. Paste it into your coding agent’s chat and send.
Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.
Take a UI screen recording (mobile/desktop/web/marketing video) and do one of four things — your pick: (1) just extract the frames as PNGs, (2) analyze the design system shown in the video and list the distinct screens, (3) compare the video against files in your codebase and produce a concrete list of edits to make those files feel like the video, or (4) scaffold a real frontend app (Vite + React + TypeScript + Tailwind) that recreates the UI's behavior — not just its appearance — with working interactions and animations. Option 3 always shows you the proposed changes first and waits for your approval before editing. Requires ffmpeg; mode 4 additionally needs Node.js to run the generated app. Mode 4 reads the `frontend-design` skill (if installed) before generating to inherit its component-quality and aesthetic guidance.
About this listing
Category
Content & writing
Reported license
MIT
Listing language (estimated)
English
Review status
Not individually reviewed
Agent compatibility
Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.
Claude Code
Codex
Cursor
GitHub Copilot
Gemini CLI