# iPhone — component for devices & mockups (react) > **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q="` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page. Dark iPhone frame with Dynamic Island and side buttons, a video playing edge to edge on its screen - **Install:** `npx shadcn@latest add @magicui/iphone` - **Registry:** magic-ui · **Framework:** react · **License:** MIT - **Docs and preview:** https://magicui.design/docs/components/iphone - **Source:** https://github.com/magicuidesign/magicui/blob/main/apps/www/registry/magicui/iphone.tsx - **Example:** https://skills.varg.ai/previews/lib-magic-ui-iphone.mp4?v=30305 (Captured from the library’s own demo page (Magic UI)) - **Time:** Static. No motion of its own. Animate position, scale or color from the frame if the shot needs movement. - **Runs:** local render, free - **Aspect:** any ## Prompt that renders it frame-exact Use the iPhone mockup from Magic UI (https://magicui.design/docs/components/iphone, MIT) to present an app screen recording: the phone centred in a 16:9 frame or filling most of a 9:16 frame. The frame is a static SVG with the screen area positioned in percentages, and it takes src (an image) or videoSrc. In a render the screen video must follow the composition clock: in HyperFrames place a framework-owned