feat: Add Pixel 8 PNG mockup for Android phone screenshots

[thecoffeehog]

Summary

• Adds a Pixel 8 PNG mockup (android-mockup.png) for the Android phone device frame, replacing the CSS-only approach
• Updates the AndroidPhone component in SKILL.md to use PNG + pre-measured screen overlay — same pattern as the iPhone Phone component
• Adds AMK_RATIO constant and pre-measured screen coordinates from MockUPhone's device data
• Adds /android-mockup.png to IMAGE_PATHS for base64 preloading

Why

The CSS-only Android frame works functionally, but it lacks the realistic bezel detail, device-specific character, and visual fidelity that the iPhone mockup PNG provides. Users who generate screenshots for both platforms notice the quality gap.

This brings Android phone screenshots to visual parity with iPhone — same approach (PNG frame + absolute-positioned screen overlay), same reliability during html-to-image export.

Mockup source & license

The Pixel 8 frame is from MockUPhone and licensed under CC BY 3.0 — commercial use and redistribution allowed with attribution. Attribution is added in both README.md and SKILL.md.

See MockUPhone's attribution page for details.

If you'd prefer not to ship the PNG

Even if you choose not to merge this, consider pointing users to MockUPhone as a source for high-quality device frames — they have CC BY 3.0 licensed mockups for all major Android devices.

Test plan

• Generate Android phone screenshots with the new PNG mockup
• Compare visual quality against the CSS-only frame
• Verify html-to-image export works correctly with the PNG preloaded
• Confirm attribution is visible in README

🤖 Generated with Claude Code

[ParthJadhav]

Interesting, can you please attach example run with this?

[thecoffeehog]

Sure, here is an approved app: https://play.google.com/store/apps/details?id=app.wishday&hl=en_IN&pli=1

[ParthJadhav]

Hmm, the screen and ratio looks quite outdated. What would be the current common device which is used in adroid screenshots? Can we use that?

[thecoffeehog]

Fair point — I looked into this. Here's what I found:

Canvas/export size: You're right that 1080×1920 (16:9) is outdated. Modern Android screenshots should be 1080×2400 (19.5:9) to match current phones. The Pixel 8 mockup's aspect ratio (978×2100 ≈ 9:19.3) is already modern — so this is really a canvas size fix, which I can apply in this PR. Updating AW/AH constants to 1080/2400 aligns with current Play Store guidance.

Device choice: Pixel 8 (late 2023) is actually the most recent Pixel available under CC BY 3.0 from both MockUPhone and WebMobileFirst — neither has Pixel 9/10 yet. Newer mockups (Pixel 9 Pro) exist on Freepik/Good Mockups but are PSD-only or have restrictive licensing that wouldn't work for open-source redistribution.

Options:

1. Keep Pixel 8 but update canvas to 1080×2400 (fixes the ratio concern, device is still a 2023 Pixel — not ancient)
2. Swap to Samsung Galaxy S24 Ultra — MockUPhone has it under CC BY 3.0, released 2024 so newer, but has the distinctive Samsung/Note design (squared corners, S-Pen) rather than the "universal Android" Pixel look
3. You or a contributor sources a Pixel 9/10 with proper licensing from elsewhere — I can update this PR to use it once available

My recommendation is #1 — it addresses the actual aspect ratio issue, and the Pixel 8 is still a visually current device (same form factor family as Pixel 9/10). Happy to also add the S24 Ultra as a second option (toggleable via a device=pixel|galaxy variant) if that's useful.

Let me know which direction you'd prefer!

[eralpozcan]

I think the general assumption here seems to be that people are using the Pixel 8. When I looked into this a bit, I found that this is generally everyone’s preference. Of course, there are also those who use the Galaxy, but I suppose the general consensus is the Google Play Store.

I also tested that it provides a more vibrant and premium look compared to plain CSS. For other cases, we can still stick with CSS.