A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage. Frame 1: cover / poster, Frame 2: today's quests with XP ribbons and a level bar, Frame 3: quest detail. Vivid quest tiles, level ribbon, bottom tab bar.
NewMaintained
Automatic
◆Frontend / UI pack
Last verified 8/2/2026
What it changes
Passed 0 of 22 test cases with the skill, and 20 of 22 without it.
Without skill92%
With skill0%
0 fixed1 passed either way11 still failing10 broke
Pass-rate lift
-92 pp
Tokens
+23%
Agent turns
0%
Response time
-2%
Model gemini-3.6-flashMeasured 8/2/2026v11 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
What's inside
The instructions your model reads when the skill loads.
SKILL.md73 linessingle file
Gamified App Skill
Produce a multi-screen mobile prototype on a single dark showcase page.
Three phone frames side-by-side, each one its own moment in the journey.
Workflow
Read the active DESIGN.md (injected above). For gamified apps, lean
on bold display type for headlines and a brighter, broader palette than
most products — quests look like quests because the colors do.
Pick the brand + value prop from the brief. Generate real quest
names (e.g. "Body — 20-min strength: pushups & planks", "Read — Four
Thousand Weeks", "Listen — Huberman Lab · Sleep Architecture",
"Nourish — Cook a high-protein lunch", "Mind — 10-min focus
meditation", "Watch — The Bear · S3 E4").
Stage — full-bleed dark page (near-black #0e0d0c or DS dark token)
with a soft top spotlight gradient. Above the phones, a small caption
row: "HI-FI PROTOTYPE · IPHONE" left, brand wordmark right, both in mono.
Phones — three 360×780 phone frames in a horizontal row (wraps to
stack on narrow viewports). Each phone:
12px black bezel, 44px corner radius, dynamic-island notch.
Status bar (time / signal / battery).
Phone-specific content (below).
Bottom tab bar with 5 icons (Today, Library, Stats, ⊕ central CTA,
Profile). Active tab in accent.
Phone 1 — cover poster (sales/value prop):
Status bar.
HI-FI PROTOTYPE · IPHONE eyebrow.
Big display headline ("Daily quests for becoming a better human."),
accent on "becoming".
1–2 sentence body in muted serif/sans.
Mono tip line ("Tap quests to open detail. Toggle [theme] in the
toolbar to switch theme & layout.")
Subtle scrolling teaser of the next screen at the bottom edge.
Phone 2 — today's quests dashboard (the hero screen):
Greeting "Good morning, Sam" + small XP-bell ringing.
Level ribbon — "LV 14 · Level 14 · 1648 / 2480 XP" with a progress
bar inside a glassmorphic ribbon.
Sub-line: "8 quests waiting · earn 430 XP today".
3×2 grid of quest tiles. Each tile: rounded corner, pastel accent