Device Showcase Stage
Responsive device presentation with bounded tilt. Adapted from a pinned OpenDesign source with a standalone brief workflow, local assets, retained licensing and actual generated evidence.
A little less setup
Make this part of your toolkit.
Give your agent this prompt. You’ll approve access in your browser before it installs a Skill.
Read https://skilly.uk/install/skills/device-showcase-stage.md and follow the instructions to install this Skill for my agent.REAL SAMPLE / RELEASED PACKAGE
RELEASED v1.0.0A closer look at the actual output.
Actual output from the included structured brief. Sample brands and stories are fictional; the review report uses intentionally faulty and fixed local fixtures.
THE COMPLETE TEMPLATE
Try it. Make yourself at home.
Scroll inside, explore the pages, and try the controls. Choose Open for downloads, printing, or external links.
1440 × 900 canvas · scaled evenly to fitUse the preview’s own scroll and keyboard controls.
Inside this template
4 sections- Introduction
- Phone preview
- Notebook preview
- Screen content transcript
A GUIDED LOOK
The whole story, in motion.
A screen recording of this working demo, covering 4 sections. This is a guided preview, not a video exported by the Skill.
In this walkthrough
- Good ideas deserve a place to land.
- A small collection of good things
- A small collection of good things
- A small collection of good things
- Tested runtime
- Node.js 24.19.0 · macOS arm64 · Chrome 154
- Pinned dependency
- Native HTML/CSS/JavaScript with local fonts
- Checks completed
- Normal and edge briefs, generator safety, narrow/desktop document width, keyboard and motion behavior. See bundled evidence for per-package scope.
Actual generated output, browser checks and independent Codex workflow.
Explicit Codex workflow tested with a new brief. Browser checks use local Chromium and emulated viewports, not real-device or full accessibility certification.
From a good brief to a better result.
Responsive device presentation with bounded tilt. Adapted from a pinned OpenDesign source with a standalone brief workflow, local assets, retained licensing and actual generated evidence. The published package has its own version, tested environments, and included outputs listed alongside this overview. Any earlier draft samples below retain their original verification scope.
What you bring
- A structured brand, story or review brief
- Your approved content and destinations
What you’ll make
- Generic CSS phone and notebook product stage
- Keyboard/touch tilt control and readable screen transcript
- Editable structured screen content
The intended workflow
- Shape the task-specific brief
- Generate into a new folder
- Review the measured behavior and final presentation