App Prototype Prompt

app-prototype-prompt.md

Build me an installable, phone-testable mockup of a mobile app and give me a QR code to open it.

APP IDEA:
[describe your app idea briefly and core feature flow here]

DO ALL OF THIS END TO END. Prefer built-in/dedicated tools over shell. Don't install heavy dependencies on the fly unless I ask — if an optional tool is missing, skip that step and tell me, don't force it.

1. DESIGNS — use the Sleek skill (sleek.design).

   • Install the Sleek skill if it isn't already: npx skills add sleekdotdesign/agent-skills@sleek-design-mobile-apps -y (installs into the current project; drop the flags to install interactively) (more info: https://sleek.design). Assume SLEEK_API_KEY is set in the environment (if it's missing, stop and tell me how to add it — keys at https://sleek.design/dashboard/api-keys).
   • Browse Sleek's style references and pick one that fits the app's vibe (ask me if unsure), then seed the design with it. Create a project and generate the core-flow screens in ONE chat message (let Sleek plan the screens — don't over-decompose). Poll the run, then fetch each screen's active-version HTML to disk (curl straight to files; don't pipe large HTML through your output).

2. REAL-APP PROTOTYPE — combine the screens into ONE self-contained index.html.

   • Do NOT use iframes (they cause double scroll and break the top/bottom bars). Instead merge all Sleek screens into a single document: one shared (Tailwind, icons, fonts, and the :root/@theme block — dedupe, since all screens share the same theme), and one
     per screen holding that screen's markup. Show only the active section.
   • Simulate navigation in-page: a showScreen() function toggles the active section with a smooth transition (no iframes, no postMessage needed). Map each screen's real CTA / back / nav-bar buttons to the right target screen, and auto-advance any "loading/processing" screen on a timer. Add native-feeling touches: a booting splash, screen transitions, tap feedback, a toast for dead-end CTAs.
   • You may freely edit the Sleek screen markup to make everything line up in one document (dedupe the per-screen , adjust padding / safe-area handling, etc.).
   • Make the core features ACTUALLY WORK, not just look static — e.g. if there's a camera step, use the real device camera and carry the captured result through the flow; if there's input, capture it. Include sensible fallbacks and degrade gracefully when a capability isn't available.

3. PWA + NATIVE FEEL — installable and edge-to-edge (no browser gaps top or bottom).

   • manifest.json (standalone display, portrait, theme/background colors, name, start_url = index.html) with 192px AND 512px PNG icons (any + maskable). Add apple-touch-icon, apple-mobile-web-app-capable, apple-mobile-web-app-status-bar-style, and a theme-color meta matching the app background.
   • Make it look like a real app once installed — full-bleed, no space at top/bottom:
     • paint html/body the SAME background color as the app (highest-leverage anti-gap trick: a "bottom gap" is only visible when a differently-colored base shows through a safe-area/viewport mismatch — match the color and it disappears)
     • viewport meta with viewport-fit=cover, initial-scale=1, user-scalable=no
     • status-bar style "black-translucent" so the app draws under the status bar
     • respect safe areas with PADDING, not margins: inset content with env(safe-area-inset-top/bottom); let backgrounds fill edge-to-edge; give a fixed bottom nav padding-bottom: env(safe-area-inset-bottom) so it clears the home indicator
     • use 100dvh (not 100vh) for full height
     • kill web tells: overscroll-behavior: none, -webkit-tap-highlight-color: transparent, touch-action: manipulation, user-select: none
   • SLEEK → PWA ADJUSTMENTS (Sleek designs the screen content, not the PWA plumbing — you MUST patch these, don't leave them as-is):
     • Sleek pins bars with a fixed height and no safe-area inset (e.g. a bottom nav as fixed bottom-0 ... h-20). Edit them: any element pinned to the bottom needs padding-bottom: env(safe-area-inset-bottom) and should fill to the edge; anything pinned to the top needs padding-top: env(safe-area-inset-top). Pad the scroll content so it clears these bars.
     • Sleek sizes screens with min-h-screen / h-screen (= 100vh), which mis-behaves in a browser tab. Override it once, after Tailwind loads, in the shared : .min-h-screen{min-height:100dvh}.h-screen{height:100dvh} — fixes every screen at once.
   • Generate a simple on-brand app icon. If a headless browser is available you may render it that way; otherwise use whatever's already installed (sips/ImageMagick), or fall back to a clean SVG/emoji-based icon — DON'T install anything just for the icon.
   • A minimal service worker (network-first, so edits don't cache stale) registered from index.html — this unlocks Android's real "Install app" prompt.

4. PHONE URL + QR.

   • Serve the folder locally, then expose it over HTTPS with a Cloudflare quick tunnel (cloudflared tunnel --url http://127.0.0.1:<port>). HTTPS is required or the phone camera won't work. If cloudflared isn't installed, ask me before installing it (it's the one tool that's genuinely needed for a phone URL).
   • Generate a QR PNG for the tunnel URL (serving index.html) and open it on my machine. Use whatever QR tool is available (e.g. npx qrcode, or qrencode); if none and Node is present, npx is fine.

THEN GIVE ME:

• The phone URL and the QR (already opened on my machine).
• Per-platform install steps (iPhone Safari: Share → Add to Home Screen; Android Chrome: Install app).
• Honest caveats: the trycloudflare URL is temporary and random (dies if the tunnel/ machine stops, changes on restart), and iOS camera-in-installed-PWA can occasionally be finicky (fallback: run it in a Safari tab). Offer to deploy to a permanent host (Cloudflare Pages / Netlify / Vercel) for a stable URL.