Skip to content
Get packs

Gamified App Mockup

Generates three dark-themed phone-screen mockups for an RPG-style habit-tracking app.

Source Download skill
Repository
nexu-io/html-anything
Stars
9,376
Licence
Apache-2.0
Files
2 files

What it does

This skill is a layout template that tells an AI agent to produce a dark showcase page with three phone-shaped screens designed as a gamified habit app: a cover poster, a list of today's quests with XP and level progress, and a quest detail screen with subtasks and rewards. Once installed, when you ask for an app concept in this style, the agent follows the template's structure and visual cues (gradient quest tiles, level ribbon, bottom tab bar) instead of inventing its own layout. The included example.html shows what the finished output looks like.

Great for

  • Designers pitching a habit-tracking or RPG-style app concept to stakeholders
  • Product teams who want quick visual mockups of quest-based onboarding or progress screens
  • Anyone wanting a ready-made dark phone-mockup layout as a starting point

Skip it if

  • Producing a working app: the skill only generates static HTML mockups, not functional code or logic (no real data or XP system is built)
  • Teams needing a non-gamified or brand-specific design system, since the template fixes the style and layout

Try asking

  • “Make a three-screen mockup of a habit app where you level up by completing daily quests”
  • “Design a dark RPG-style quest app with a cover, today's tasks with XP, and a task detail screen”
  • “Create a gamified fitness tracker concept with quest tiles and a level bar”
Step-by-step guide: how to use Gamified App MockupInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 2 original files, the Apache-2.0 licence and an attribution note.

    gamified-app.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip gamified-app.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip gamified-app.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name your app, colours, and sample quests in the request so the mockup feels specific rather than generic.
  • Mention if you want the screens in English or Chinese, since the skill's original metadata is in Chinese.
  • Open the generated HTML in a browser and review it; adjust wording or styling with follow-up requests.

What's inside

  • example.html
  • SKILL.md

Redistributed unmodified from nexu-io/html-anything under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.