Device Mockup Preview
When to use: Presenting UI in context: marketing pages, portfolio shots, app-store screenshots, investor decks, and design handoff previews in device frames.
npx skills add mockup-device-previewgit clone https://github.com/skillhub-community/mockup-device-preview.gitDescription
A device mockup kit that renders your UI inside realistic hardware frames. Devices: iPhone (15-style with Dynamic Island, multiple colors), Android (Pixel-style), iPad, MacBook (screen + base with the classic light bar), iMac, and a browser-chrome frame. Each DeviceFrame accepts a URL (renders the live site via iframe) or a screenshot, with configurable bezel color, screen glare, and shadow. Includes a Stage component for multi-device showcases (phone + laptop side by side) and a 3D-style tilt presentation with CSS 3D transforms and glass-lens refraction effects.
Export options: capture the framed preview as a PNG (great for app-store screenshots and portfolio shots), or render a responsive 'family' row (all devices at once) for hero sections. All frames are vector SVG shells so they scale crisply. Covers the practical details: browser frame shows the URL bar + tab + favicon, phone frames support notch/Dynamic Island variants, and there's a drop-shadow/reflection toggle to make screenshots look 'designed'. Zero external assets — everything ships inline.
AI Hub
Need a model endpoint?
AI Hub is an OpenAI-compatible endpoint for Cursor, Claude Code, and Agent workflows.
Open AI Hub