Guide · Agent skill
How to use the Device 3D Showcase agent skill (mockup-device-3d)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Device 3D Showcase is an agent skill named mockup-device-3d. When your agent uses it, it builds a single-page 16:9 HTML slide showing an iPhone and optionally a MacBook on a dark studio-style background, with your real content on the device screens. This guide is for people who have never installed an agent skill; by the end you will know how to install it, how to phrase a request, and what the output can and cannot do.
Device 3D Showcasenexu-io/html-anything · Apache-2.0 Download the skill Quick start
- 1Download the ZIP. Download the mockup-device-3d skill ZIP from this page.
- 2Unzip into a skills folder. Place the mockup-device-3d folder in ~/.claude/skills/ or in your project's .claude/skills/ folder.
- 3Or upload in Claude apps. In the Claude apps, go to Settings → Capabilities → Skills and upload the skill.
- 4Describe the device slide. Ask for an iPhone, MacBook or both, and name the background palette you want.
- 5Provide real content. Paste the app screen text, data or HTML that should appear on the device screens.
- 6Open the HTML file. View the generated single HTML file in a browser and check the content and caption.
What the skill makes the agent do
Without the skill, an agent answering a request for a device mockup has no fixed template to follow. With the skill installed, the agent follows the Device 3D Showcase template: a 1920×1080 canvas, an iPhone placed left or centre, an optional MacBook on the right, and a faint reflection on the floor.
The devices are drawn entirely with CSS and SVG, with glossy highlights and a slow turntable animation. Your content fills the screens. If you give text or data, the agent turns it into a mock app screen with a status bar, title, body and bottom tab bar. If you give HTML, it is placed directly into the screen area and scaled to fit.
The output is one HTML file. It is meant for product launches, app demos and design presentations.
Install the mockup-device-3d skill
Download the skill ZIP from this page and unzip it. The package contains SKILL.md, example.html and example.md.
Option A, personal skill: unzip the folder into ~/.claude/skills/ so the agent can use it in any project.
Option B, project skill: unzip the folder into the .claude/skills/ folder inside your project.
Option C, Claude apps: upload the skill under Settings → Capabilities → Skills.
- Make sure the folder containing SKILL.md is the one placed in the skills folder.
- Restart or start a new session if the agent does not pick up the new skill.
~/.claude/skills/mockup-device-3d/SKILL.mdAsk for a device mockup in plain language
You do not need a special command. Describe what you want to show and mention the device. The agent should load the skill when your request matches its purpose, which is a device showcase, product launch visual or app demo.
Useful details to include: which device or devices (iPhone, MacBook, or both), the content for the screen, and the mood of the background. The skill offers four background palettes: charcoal, pearl, midnight blue and mocha.
- "Make a 16:9 product launch slide with an iPhone showing my app's home screen. Use the midnight blue background."
- "Show my web page on a MacBook and an iPhone side by side for an app announcement."
- "Turn this list of features into a mock app screen on an iPhone, charcoal background."
Give the agent the content for the screens
The screen content must be real. The skill tells the agent to use your actual data and never to fill screens with placeholder text such as lorem ipsum or "Your text here". Paste your real text, data or HTML into the request.
If you provide HTML, the agent embeds it in the screen. If you provide text, the agent builds a mock app interface around it. Either way, the screen text uses mobile-sized type rather than oversized display text.
Review and open the output
The result is an HTML file. Open it in a browser to view it. The skill does not produce a static image, so if you need a PNG or JPG you must convert the page yourself with a separate tool.
The turntable animation rotates the devices between about -12 and 12 degrees. It is switched off for users who have reduced-motion turned on in their system settings.
- Check that the caption, logo and tagline match your product.
- Confirm the screen text is the content you intended.
- Remember the devices are stylised approximations, not real product renders.
What the skill needs and safety notes
The skill lists no required dependencies. It does not run scripts and does not use the network. The example and template avoid external mockup images: the skill says devices must be drawn with CSS and SVG, not pulled from image URLs like stock photo sites.
Because it runs no scripts and makes no network calls, the skill itself adds no outside connections. Review any HTML you embed, since it becomes part of the page you open in a browser.
Tips for better results
Keep the screen content short and specific. Mobile screens show little text, so a clear headline and two or three UI items work better than long paragraphs.
Pick one device for simple slides. Add the MacBook only when you need a desktop view next to the phone.
Use the example.html file as a reference for what a finished slide looks like before you make your own request.
What people use it for
- A product marketer creates a launch visual for an app announcement.
- A designer shows a UI mockup in a device frame without using stock images.
- A team builds a quick hero image for a landing page as HTML.
- A presenter shows a web page on a MacBook beside a phone for a design review.
Frequently asked questions
How do I install the Device 3D Showcase agent skill?
Download the skill ZIP from this page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Does the mockup-device-3d skill need anything else installed?
The source lists no required dependencies. The skill runs no scripts and uses no network access.
Is the Device 3D Showcase skill free to use?
The skill is published under the Apache-2.0 licence. This page does not list any price, so check the licence terms in the source repository for details.
Can the skill output a PNG or JPG image?
No. The skill outputs a single HTML file that must be opened in a browser. If you need an image file, convert the page with a separate tool.
Are the iPhone and MacBook real product images?
No. The devices are drawn with CSS and SVG as stylised approximations, so they are not pixel-accurate. Use a real product render if exact device detail matters.
What should I use instead if I need accurate device photos?
If you need real product photography or pixel-accurate device frames, use official product renders or a dedicated design tool instead. This skill is meant for quick, good-looking hero visuals.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you need a quick, good-looking HTML hero slide with an iPhone or MacBook and your real screen content, without stock images. Pick something else if you need pixel-accurate device frames, a static image file, or production-grade product renders.
Download the skill