Decides when a physical device frame earns its place in a marketing still and directs the shot when it does - flat-on at 0 degrees or a precise 30-45 degree three-quarter, one shadow direction per frame, soft contact shadow at every support point, screen brightness matched about 1 stop below the key highlights. Use when someone asks "should this screenshot go inside an iPhone frame", "our device mockups look like stock templates", "how do I show the mobile app without a cheesy floating phone", or "what angle and shadow should the laptop mockup use". Do NOT use for the pixel work of placing UI onto the screen - use screen-compositing-craft instead; for frameless UI stills, use marketing-screenshot-craft; for lighting a physical product shoot, use studio-lighting-design.
---
name: device-mockup-direction
description: Decides when a physical device frame earns its place in a marketing still and directs the shot when it does - flat-on at 0 degrees or a precise 30-45 degree three-quarter, one shadow direction per frame, soft contact shadow at every support point, screen brightness matched about 1 stop below the key highlights. Use when someone asks "should this screenshot go inside an iPhone frame", "our device mockups look like stock templates", "how do I show the mobile app without a cheesy floating phone", or "what angle and shadow should the laptop mockup use". Do NOT use for the pixel work of placing UI onto the screen - use screen-compositing-craft instead; for frameless UI stills, use marketing-screenshot-craft; for lighting a physical product shoot, use studio-lighting-design.
---
# device-mockup-direction
The floating, angled 3D device with a fake blurred screen is the universal stock-template look; premium launches show flat, real, legible UI. A device frame is a claim, not a decoration - and the costly mistake is spending device-mockup budget to make the product LESS legible than the plain screenshot it wraps. This skill decides whether the device belongs at all, then specs the shot with the physics that keep it from reading as a render.
## Operating procedure
Run the steps in order: the earn-its-place test comes before any styling, because the best device mockup is often no device - angle, shadow, and luminance work is wasted on a frame that should not exist.
### Step 1: Gather the claim and the charter
Ask for the client's charter block, in the format defined in premium-design-foundations. Paste the charter block if one exists. If the client has a charter but the foundations pack is not installed, elicit the needed values directly and label them provisional. If no charter exists at all, halt and route to premium-design-foundations - never substitute worked-example values. Then elicit:
1. The **claim** this still must prove, in one sentence.
2. Whether the device itself **carries information** - an iOS-app claim, a hand-held context, a hardware story - or is decoration. Ask directly; this answer decides Step 2.
3. Target **surface and size**: hero, store, social, deck.
4. The **page theme** the shot sits on, so set and canvas agree.
5. The **framed screenshot** from marketing-screenshot-craft the device would wrap.
If any input is a guess, label it a guess and move on.
… install to load the full skill