LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage.
Apache-2.0Auto-check passed
Install Gamified App
$ npx skills add sanqiufong/slides-from-anything --skill gamified-app -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install sanqiufong/slides-from-anything gamified-app --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/sanqiufong/slides-from-anything.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/gamified-app .claude/skills/gamified-app && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "gamified-app" agent skill from https://github.com/sanqiufong/slides-from-anything/tree/main/skills/gamified-app into .claude/skills/gamified-app/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gamified-app", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/sanqiufong/slides-from-anything/tree/main/skills/gamified-appType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add sanqiufong/slides-from-anything --skill gamified-app -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install sanqiufong/slides-from-anything gamified-app --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sanqiufong/slides-from-anything.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/gamified-app .agents/skills/gamified-app && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "gamified-app" agent skill from https://github.com/sanqiufong/slides-from-anything/tree/main/skills/gamified-app into .agents/skills/gamified-app/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gamified-app", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add sanqiufong/slides-from-anything --skill gamified-app -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install sanqiufong/slides-from-anything gamified-app --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sanqiufong/slides-from-anything.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/gamified-app .cursor/skills/gamified-app && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "gamified-app" agent skill from https://github.com/sanqiufong/slides-from-anything/tree/main/skills/gamified-app into .cursor/skills/gamified-app/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gamified-app", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/sanqiufong/slides-from-anything.git --path skills/gamified-app--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add sanqiufong/slides-from-anything --skill gamified-app -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install sanqiufong/slides-from-anything gamified-app --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sanqiufong/slides-from-anything.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/gamified-app .gemini/skills/gamified-app && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "gamified-app" agent skill from https://github.com/sanqiufong/slides-from-anything/tree/main/skills/gamified-app into .gemini/skills/gamified-app/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gamified-app", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install sanqiufong/slides-from-anything gamified-appInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add sanqiufong/slides-from-anything --skill gamified-app -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/sanqiufong/slides-from-anything.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/gamified-app .github/skills/gamified-app && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "gamified-app" agent skill from https://github.com/sanqiufong/slides-from-anything/tree/main/skills/gamified-app into .github/skills/gamified-app/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gamified-app", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add sanqiufong/slides-from-anything --skill gamified-app -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install sanqiufong/slides-from-anything gamified-app --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/sanqiufong/slides-from-anything.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/gamified-app .opencode/skills/gamified-app && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "gamified-app" agent skill from https://github.com/sanqiufong/slides-from-anything/tree/main/skills/gamified-app into .opencode/skills/gamified-app/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "gamified-app", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
gamified-app- GitHub stars
- 132
- Used in
- 1 other repo
- Token cost
- ~1.1k tokens
- SKILL.md length
- 453 words
- Files
- 2
- Skills in repo
- 48
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage.
- Works in 9 steps: Read the active DESIGN.md (injected… → Pick the brand + value prop from the… → Stage — full-bleed dark page (near-black… → …
- The brief asks for a gamified app
- SKILL.md covers Workflow and Output contract
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
Gamified App is an agent skill from sanqiufong/slides-from-anything. 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. Use when the brief asks for a "gamified app", "habit tracker", "RPG-style life app", "level-up app", "daily quests", "XP / streak app", or "ELI5-style explainer app".
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file.
The repository describes itself as: Turn anything into slides. The licence is Apache-2.0.
When your agent uses it
- The brief asks for a gamified app
- RPG-style life app
- XP / streak app
- ELI5-style explainer app
Example prompts
- “gamified app”
- “habit tracker”
- “RPG-style life app”
- “/gamified-app”
Workflow steps
9 steps, taken from the first numbered list in SKILL.md.
- Read the active DESIGN.md (injected above). For gamified apps, lean
- Pick the brand + value prop from the brief. Generate real quest
- Stage — full-bleed dark page (near-black #0e0d0c or DS dark token)
- Phones — three 360×780 phone frames in a horizontal row (wraps to
- Phone 1 — cover poster (sales/value prop)
- Phone 2 — today's quests dashboard (the hero screen)
- Phone 3 — quest detail
- Write a single HTML document
- Self-check
What it can do on your machine
Read from SKILL.md and the folder at commit 65da4ac. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
No scripts in the folder and no shell commands in SKILL.md.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Gamified App loads about 1.1k tokens when it runs. Until then it costs about 106 tokens; SKILL.md has 453 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from sanqiufong/slides-from-anything at commit 65da4ac, republished under its Apache-2.0 licence (© sanqiufong). 453 words, ~1,112 tokens.
Download SKILL.mdSave it as
.claude/skills/gamified-app/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- gamified-app
- description
- 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. Use when the brief asks for a "gamified app", "habit tracker", "RPG-style life app", "level-up app", "daily quests", "XP / streak app", or "ELI5-style explainer app".
- triggers
- gamified app, habit tracker, rpg app, level up app, daily quests, xp app, streak app, life management app, 游戏化, 习惯打卡
- od.mode
- prototype
- od.platform
- mobile
- od.scenario
- personal
- od.featured
- 12
- od.example_prompt
- Design a gamified life-management app — multi-screen mobile prototype: cover poster, today's quests with XP, and a quest detail. ‘Daily quests for becoming a…
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
#0e0d0cor 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 color, glyph chip in top-left, title, mini-meta line, "+NN XP" pill in bottom-right.
- Bottom tab bar.
- Phone 3 — quest detail:
- Back arrow + screen title ("Quest").
- Hero block with the quest's accent color, big serif quest title ("Body — strength"), short narrative body, "REWARD +90 XP" stamp.
- Steps checklist (3–4 micro-tasks, one done, two pending).
- Big primary CTA "Start quest" pill at the bottom in accent.
- Write a single HTML document:
<!doctype html>through</html>, CSS inline.- All in CSS — no images. Use
linear-gradientand inline SVG glyphs for tile chips and tab icons. data-od-idon stage, each phone, each frame's regions.
- Self-check:
- Three frames, each with a distinct purpose. Not three copies of the same screen.
- Tile colors don't overpower — each quest tile uses a different pastel against the same neutral surface.
- Reads as gamified and adult — playful, not childish.
Show full SKILL.md (13 more words)Show less
Output contract
Emit between <artifact> tags:
<artifact identifier="game-slug" type="text/html" title="Mobile — App Name">
<!doctype html>
<html>...</html>
</artifact>One sentence before the artifact, nothing after.
© sanqiufong, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in skills/gamified-app of sanqiufong/slides-from-anything.
- SKILL.md
- example.html
Open the folder on GitHubat commit 65da4ac
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in sanqiufong/slides-from-anything, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Gamified App next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Gamified App this skillsanqiufong/slides-from-anything | 132 | 1 repos | ~1.1k | Automated safety check: Pass | Apache-2.0 | |
| LobeHub Interactive Prototypelobehub/lobehub | 83k | — | ~1.6k | Automated safety check: Pass | Custom licence | |
| PrototypeDonchitos/Claude-Code-Game-Studios | 26k | — | ~1.3k | Automated safety check: Notes | MIT | |
| PrototypeEpicenterHQ/epicenter | 4.8k | — | ~767 | Automated safety check: Pass | Custom licence | |
| PhoneBlockRunAI/ClawRouter | 6.6k | — | ~2.4k | Automated safety check: Pass | MIT | |
| Compound Engineering PrototypeEveryInc/compound-engineering-plugin | 25k | — | ~1.9k | Automated safety check: Pass | MIT |
Similar skills
Prototype
Donchitos/Claude-Code-Game-Studios
Concept prototype before GDDs — throwaway HTML, Engine or Paper build, PROCEED/PIVOT/KILL/NOT ASSESSED.
Prototype
EpicenterHQ/epicenter
Build a throwaway prototype to answer a focused logic, state-model, or UI question before committing to production design.
Phone
BlockRunAI/ClawRouter
Verify phone numbers (carrier + SIM-swap fraud signals) and place AI-powered outbound voice calls via BlockRun's gateway (Twilio + Bland.ai).
Compound Engineering Prototype
EveryInc/compound-engineering-plugin
Builds a throwaway prototype at just the fidelity needed to settle a specific how-it-should-work-or-feel question, before committing to an approach other work will treat as fixed.
Prototype
vinvcn/mattpocock-skills-zh-CN
构建一次性原型来回答一个设计问题。适用于用户想验证某个 state model 或 logic 是否感觉对，或探索 UI 应该长什么样时。
More from sanqiufong/slides-from-anything
All 48 skills in this repoPPTX HTML Fidelity Audit
sanqiufong/slides-from-anything
Audit a python-pptx export against its source HTML deck, identify layout/content drift (footer overflow, cropped content, missing italic/em, lost styling, off-rhythm spacing), and re-export with…
Mobile App
sanqiufong/slides-from-anything
A mobile-app screen rendered inside a pixel-accurate iPhone 15 Pro frame on the page.
Replit Deck
sanqiufong/slides-from-anything
Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery.
Live Artifact
sanqiufong/slides-from-anything
Create refreshable, auditable Open Design artifacts backed by connector or local data.
Open Design Landing
sanqiufong/slides-from-anything
Produce a world-class single-page editorial landing site in the Atelier Zero visual language (Monocle / Apartamento / Études editorial collage) — the same aesthetic Open Design uses for its own…
Web Prototype
sanqiufong/slides-from-anything
General-purpose desktop web prototype. An agent skill from sanqiufong/slides-from-anything.
Questions about Gamified App
What does Gamified App do?
A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage. Gamified App is an agent skill from sanqiufong/slides-from-anything. A multi-frame gamified mobile-app prototype — three phone frames on a dark showcase stage.
When should I use Gamified App?
Gamified App fits situations like: the brief asks for a gamified app; RPG-style life app; XP / streak app; ELI5-style explainer app.
How do I install Gamified App in Claude Code?
Run `npx skills add sanqiufong/slides-from-anything --skill gamified-app -a claude-code`. Or copy the skill folder (skills/gamified-app in sanqiufong/slides-from-anything) into .claude/skills/gamified-app in your project. Claude Code loads it when a task matches its description.
How do I install Gamified App in Codex?
Run `npx skills add sanqiufong/slides-from-anything --skill gamified-app -a codex`. Or copy the skill folder (skills/gamified-app in sanqiufong/slides-from-anything) into .agents/skills/gamified-app in your project. Codex loads it when a task matches its description.
Can I use Gamified App in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add sanqiufong/slides-from-anything --skill gamified-app -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/gamified-app, .gemini/skills/gamified-app, .github/skills/gamified-app and .opencode/skills/gamified-app in your project.
What does Gamified App need to run?
SKILL.md names no scripts, command-line tools or credentials: Gamified App is instructions for the agent only.
Does Gamified App access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Gamified App safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Gamified App use?
Gamified App is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Gamified App use?
About 1.1k tokens (SKILL.md is roughly 4.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Gamified App?
Skills that share tags, products or a category with Gamified App: LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Prototype (Donchitos/Claude-Code-Game-Studios, 26k stars), Prototype (EpicenterHQ/epicenter, 4.8k stars) and Phone (BlockRunAI/ClawRouter, 6.6k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Gamified App?
sanqiufong (a GitHub user) maintains it in sanqiufong/slides-from-anything, which has 132 GitHub stars. The repository holds 48 skills in this directory. The repository was last updated on October 10, 2026.
Source: sanqiufong/slides-from-anything on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.