{"id":"134dd378-4c91-4f68-8440-35ceaea7b04c","shortId":"bTBfkE","kind":"skill","title":"gamified-app","tagline":"A multi-frame gamified mobile-app prototype — three phone frames on a dark\nshowcase stage. Frame 1: cover / poster, Frame 2: today's quests with XP\nribbons and a level bar, Frame 3: quest detail. Vivid quest tiles, level\nribbon, bottom tab bar. Use when the brief asks for a \"gami","description":"# Gamified App Skill\n\nProduce a multi-screen mobile prototype on a single dark showcase page.\nThree phone frames side-by-side, each one its own moment in the journey.\n\n## Workflow\n\n1. **Read the active DESIGN.md** (injected above). For gamified apps, lean\n on bold display type for headlines and a brighter, broader palette than\n most products — quests look like quests because the colors do.\n2. **Pick the brand + value prop** from the brief. Generate real quest\n names (e.g. \"Body — 20-min strength: pushups & planks\", \"Read — Four\n Thousand Weeks\", \"Listen — Huberman Lab · Sleep Architecture\",\n \"Nourish — Cook a high-protein lunch\", \"Mind — 10-min focus\n meditation\", \"Watch — The Bear · S3 E4\").\n3. **Stage** — full-bleed dark page (near-black `#0e0d0c` or DS dark token)\n with a soft top spotlight gradient. Above the phones, a small caption\n row: \"HI-FI PROTOTYPE · IPHONE\" left, brand wordmark right, both in mono.\n4. **Phones** — three 360×780 phone frames in a horizontal row (wraps to\n stack on narrow viewports). Each phone:\n - 12px black bezel, 44px corner radius, dynamic-island notch.\n - Status bar (time / signal / battery).\n - Phone-specific content (below).\n - Bottom tab bar with 5 icons (Today, Library, Stats, ⊕ central CTA,\n Profile). Active tab in accent.\n5. **Phone 1 — cover poster (sales/value prop)**:\n - Status bar.\n - HI-FI PROTOTYPE · IPHONE eyebrow.\n - Big display headline (\"Daily quests for becoming a better human.\"),\n accent on \"becoming\".\n - 1–2 sentence body in muted serif/sans.\n - Mono tip line (\"Tap quests to open detail. Toggle [theme] in the\n toolbar to switch theme & layout.\")\n - Subtle scrolling teaser of the next screen at the bottom edge.\n6. **Phone 2 — today's quests dashboard** (the hero screen):\n - Greeting \"Good morning, Sam\" + small XP-bell ringing.\n - Level ribbon — \"LV 14 · Level 14 · 1648 / 2480 XP\" with a progress\n bar inside a glassmorphic ribbon.\n - Sub-line: \"8 quests waiting · earn 430 XP today\".\n - 3×2 grid of quest tiles. Each tile: rounded corner, pastel accent\n color, glyph chip in top-left, title, mini-meta line, \"+NN XP\" pill\n in bottom-right.\n - Bottom tab bar.\n7. **Phone 3 — quest detail**:\n - Back arrow + screen title (\"Quest\").\n - Hero block with the quest's accent color, big serif quest title\n (\"Body — strength\"), short narrative body, \"REWARD +90 XP\" stamp.\n - Steps checklist (3–4 micro-tasks, one done, two pending).\n - Big primary CTA \"Start quest\" pill at the bottom in accent.\n8. **Write** a single HTML document:\n - `` through ``, CSS inline.\n - All in CSS — no images. Use `linear-gradient` and inline SVG glyphs\n for tile chips and tab icons.\n - `data-od-id` on stage, each phone, each frame's regions.\n9. **Self-check**:\n - Three frames, each with a distinct purpose. Not three copies of the\n same screen.\n - Tile colors don't overpower — each quest tile uses a different pastel\n against the same neutral surface.\n - Reads as gamified and adult — playful, not childish.\n\n## Output contract\n\nEmit between `` tags:\n\n```\n\n\n...\n\n```\n\nOne sentence before the artifact, nothing after.","tags":["gamified","app","open","design","nexu-io","agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design"],"capabilities":["skill","source-nexu-io","skill-gamified-app","topic-agent-skills","topic-ai-agents","topic-ai-design","topic-byok","topic-claude","topic-claude-code-for-design","topic-claude-design","topic-coding-agents","topic-design-systems","topic-design-tools","topic-desktop-app","topic-figma-alternative"],"categories":["open-design"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/nexu-io/open-design/gamified-app","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add nexu-io/open-design","source_repo":"https://github.com/nexu-io/open-design","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 36607 github stars · SKILL.md body (3,329 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-11T06:52:20.058Z","embedding":null,"createdAt":"2026-05-01T18:52:32.515Z","updatedAt":"2026-05-11T06:52:20.058Z","lastSeenAt":"2026-05-11T06:52:20.058Z","tsv":"'+90':435 '0e0':178 '1':22,89,266,292 '10':159 '12px':228 '14':349,351 '1648':352 '2':26,122,293,329,374 '20':137 '2480':353 '3':38,168,373,409,440 '360':212 '4':209,441 '430':370 '44px':231 '5':252,264 '6':327 '7':407 '780':213 '8':366,460 '9':500 'accent':263,289,384,423,459 'activ':92,260 'adult':539 'app':3,11,58,98 'architectur':150 'arrow':413 'artifact':552 'ask':53 'back':412 'bar':36,48,239,250,272,358,406 'batteri':242 'bear':165 'becom':285,291 'bell':344 'better':287 'bezel':230 'big':279,425,449 'black':177,229 'bleed':172 'block':418 'bodi':136,295,429,433 'bold':101 'bottom':46,248,325,402,404,457 'bottom-right':401 'brand':125,203 'brief':52,130 'brighter':108 'broader':109 'caption':195 'central':257 'check':503 'checklist':439 'childish':542 'chip':387,484 'color':120,385,424,519 'content':246 'contract':544 'cook':152 'copi':513 'corner':232,382 'cover':23,267 'css':467,471 'cta':258,451 'd0c':179 'daili':282 'dark':18,70,173,182 'dashboard':333 'data':489 'data-od-id':488 'design.md':93 'detail':40,306,411 'differ':528 'display':102,280 'distinct':509 'document':465 'done':446 'ds':181 'dynam':235 'dynamic-island':234 'e.g':135 'e4':167 'earn':369 'edg':326 'emit':545 'eyebrow':278 'fi':199,275 'focus':161 'four':143 'frame':7,15,21,25,37,75,215,497,505 'full':171 'full-ble':170 'gami':56 'gamifi':2,8,57,97,537 'gamified-app':1 'generat':131 'glassmorph':361 'glyph':386,481 'good':338 'gradient':189,477 'greet':337 'grid':375 'headlin':105,281 'hero':335,417 'hi':198,274 'hi-fi':197,273 'high':155 'high-protein':154 'horizont':218 'html':464 'huberman':147 'human':288 'icon':253,487 'id':491 'imag':473 'inject':94 'inlin':468,479 'insid':359 'iphon':201,277 'island':236 'journey':87 'lab':148 'layout':315 'lean':99 'left':202,391 'level':35,44,346,350 'librari':255 'like':116 'line':301,365,396 'linear':476 'linear-gradi':475 'listen':146 'look':115 'lunch':157 'lv':348 'medit':162 'meta':395 'micro':443 'micro-task':442 'min':138,160 'mind':158 'mini':394 'mini-meta':393 'mobil':10,65 'mobile-app':9 'moment':84 'mono':208,299 'morn':339 'multi':6,63 'multi-fram':5 'multi-screen':62 'mute':297 'name':134 'narrat':432 'narrow':224 'near':176 'near-black':175 'neutral':533 'next':321 'nn':397 'notch':237 'noth':553 'nourish':151 'od':490 'one':81,445,548 'open':305 'output':543 'overpow':522 'page':72,174 'palett':110 'pastel':383,529 'pend':448 'phone':14,74,192,210,214,227,244,265,328,408,495 'phone-specif':243 'pick':123 'pill':399,454 'plank':141 'play':540 'poster':24,268 'primari':450 'produc':60 'product':113 'profil':259 'progress':357 'prop':127,270 'protein':156 'prototyp':12,66,200,276 'purpos':510 'pushup':140 'quest':29,39,42,114,117,133,283,303,332,367,377,410,416,421,427,453,524 'radius':233 'read':90,142,535 'real':132 'region':499 'reward':434 'ribbon':32,45,347,362 'right':205,403 'ring':345 'round':381 'row':196,219 's3':166 'sales/value':269 'sam':340 'screen':64,322,336,414,517 'scroll':317 'self':502 'self-check':501 'sentenc':294,549 'serif':426 'serif/sans':298 'short':431 'showcas':19,71 'side':77,79 'side-by-sid':76 'signal':241 'singl':69,463 'skill':59 'skill-gamified-app' 'sleep':149 'small':194,341 'soft':186 'source-nexu-io' 'specif':245 'spotlight':188 'stack':222 'stage':20,169,493 'stamp':437 'start':452 'stat':256 'status':238,271 'step':438 'strength':139,430 'sub':364 'sub-lin':363 'subtl':316 'surfac':534 'svg':480 'switch':313 'tab':47,249,261,405,486 'tag':547 'tap':302 'task':444 'teaser':318 'theme':308,314 'thousand':144 'three':13,73,211,504,512 'tile':43,378,380,483,518,525 'time':240 'tip':300 'titl':392,415,428 'today':27,254,330,372 'toggl':307 'token':183 'toolbar':311 'top':187,390 'top-left':389 'topic-agent-skills' 'topic-ai-agents' 'topic-ai-design' 'topic-byok' 'topic-claude' 'topic-claude-code-for-design' 'topic-claude-design' 'topic-coding-agents' 'topic-design-systems' 'topic-design-tools' 'topic-desktop-app' 'topic-figma-alternative' 'two':447 'type':103 'use':49,474,526 'valu':126 'viewport':225 'vivid':41 'wait':368 'watch':163 'week':145 'wordmark':204 'workflow':88 'wrap':220 'write':461 'xp':31,343,354,371,398,436 'xp-bell':342","prices":[{"id":"27fbaf98-ee8f-42e7-93b6-505ec9513a08","listingId":"134dd378-4c91-4f68-8440-35ceaea7b04c","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"nexu-io","category":"open-design","install_from":"skills.sh"},"createdAt":"2026-05-01T18:52:32.515Z"}],"sources":[{"listingId":"134dd378-4c91-4f68-8440-35ceaea7b04c","source":"github","sourceId":"nexu-io/open-design/gamified-app","sourceUrl":"https://github.com/nexu-io/open-design/tree/main/skills/gamified-app","isPrimary":false,"firstSeenAt":"2026-05-01T18:52:32.515Z","lastSeenAt":"2026-05-11T06:52:20.058Z"},{"listingId":"134dd378-4c91-4f68-8440-35ceaea7b04c","source":"skills_sh","sourceId":"nexu-io/open-design/gamified-app","sourceUrl":"https://skills.sh/nexu-io/open-design/gamified-app","isPrimary":true,"firstSeenAt":"2026-05-07T20:42:46.891Z","lastSeenAt":"2026-05-07T22:41:47.518Z"}],"details":{"listingId":"134dd378-4c91-4f68-8440-35ceaea7b04c","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"nexu-io","slug":"gamified-app","github":{"repo":"nexu-io/open-design","stars":36607,"topics":["agent-skills","ai-agents","ai-design","byok","claude","claude-code-for-design","claude-design","coding-agents","design-systems","design-tools","desktop-app","figma-alternative","generative-ai","hermes-agent","local-first","nextjs","no-code","prototyping","ui-generator","vibe-coding"],"license":"apache-2.0","html_url":"https://github.com/nexu-io/open-design","pushed_at":"2026-05-11T06:48:43Z","description":"🎨 Local-first, open-source alternative to Anthropic's Claude Design. ⚡ 19 Skills · ✨ 71 brand-grade Design Systems 🖼 Generate web · desktop · mobile prototypes · slides · images · videos · HyperFrames 📦 Sandboxed preview · HTML/PDF/PPTX/MP4 export 🤖 Runs on Claude Code / Codex / Cursor / Gemini / OpenCode / Qwen / Copilot / Hermes / Kimi CLI.","skill_md_sha":"e0cdcf34e126847e12eb616f1c19928a6e8ef618","skill_md_path":"skills/gamified-app/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/nexu-io/open-design/tree/main/skills/gamified-app"},"layout":"multi","source":"github","category":"open-design","frontmatter":{"name":"gamified-app","description":"A multi-frame gamified mobile-app prototype — three phone frames on a dark\nshowcase stage. Frame 1: cover / poster, Frame 2: today's quests with XP\nribbons and a level bar, Frame 3: quest detail. Vivid quest tiles, level\nribbon, bottom tab bar. Use when the brief asks for a \"gamified app\",\n\"habit tracker\", \"RPG-style life app\", \"level-up app\", \"daily quests\",\n\"XP / streak app\", or \"ELI5-style explainer app\"."},"skills_sh_url":"https://skills.sh/nexu-io/open-design/gamified-app"},"updatedAt":"2026-05-11T06:52:20.058Z"}}