Skip to content
Get packs

Device 3D Showcase

Builds a 3D iPhone/MacBook product mockup with your UI shown on the screens, in one HTML file.

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
3 files

What it does

When installed, the agent produces a single-page 16:9 HTML slide that shows an iPhone and optionally a MacBook floating in a dark studio-style scene, with your real content (an app screen, a web page, or text turned into a mock app screen) rendered on the device displays. The devices are drawn entirely with CSS and SVG, with glossy highlights, a slow rotating turntable animation, and a faint reflection on the floor. It is meant for product launches, app demos, and design presentations.

Great for

  • Product marketers preparing a launch visual or app announcement
  • Designers who want to present a UI mockup in a device frame without using stock images
  • Anyone who needs a quick, good-looking hero image built from HTML

Skip it if

  • Production software where pixel-accurate device frames matter, since the devices are stylised CSS approximations rather than real product renders
  • Users who need the output to be a static image file; the skill outputs HTML that must be opened in a browser or converted separately

Try asking

  • “Make a 3D iPhone and MacBook showcase slide for my new app launch, using the screenshot HTML I pasted”
  • “Turn this product description into a mock app screen shown on an iPhone in a 16:9 poster”
  • “Create a dark charcoal product presentation with a rotating device mockup for our release”
Step-by-step guide: how to use Device 3D ShowcaseInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the Apache-2.0 licence and an attribution note.

    mockup-device-3d.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip mockup-device-3d.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip mockup-device-3d.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Give the agent real content (text or HTML) to fill the screens; the skill forbids placeholder text such as lorem ipsum.
  • Specify a background palette (charcoal, pearl, midnight blue or mocha) and whether you want the MacBook included, since both are optional.
  • Open the generated HTML in a modern browser to check the animation and layout, as the skill relies on CSS 3D transforms and newer HTML features.

What's inside

  • example.html
  • example.md
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.