mockup-device-3d

This skill is a static device-showcase template that renders iPhone and MacBook mockups in a 3D-style composition with real HTML content embedded on their screens. It solves a common product-presentation problem: showing an app or web UI inside realistic device frames without depending on external mockup images or heavy 3D tooling. Everything is drawn with CSS and SVG, so the output is a single self-contained HTML file.

The template specifies a fixed 1920x1080 composition on a dark radial-gradient background with a mirrored floor reflection. An iPhone 15 Pro frame (titanium-silver border, rounded screen) is positioned with CSS 3D transforms and hosts the user's content in a mobile 375x812 viewport, while an optional MacBook Pro frame hosts a scaled desktop viewport. It adds simulated glass-lens highlights, a floor reflection via scaleY flip and gradient masking, an optional product-slug badge and caption, and an optional CSS turntable animation that respects prefers-reduced-motion. Strict rules require drawing all device chrome with CSS/SVG (never external mockup image URLs), using Tailwind for on-screen UI at realistic mobile type sizes, avoiding nested srcdoc iframes, and filling screens with real user data rather than lorem ipsum. It ships with example Markdown and example HTML. Front matter marks it a product-scenario web prototype pointing to an upstream html-anything project, with bilingual metadata.

The target users are product marketers, designers, and developers preparing product launches, app demos, or design showcases. Use cases include hero images for landing pages, app-store-style previews, and presentation slides. It is a purely visual template with no system operations.