How to use the Gamified App Prototype agent skill

What does the gamified-app skill make the agent do?

Agent skills are folders of instructions that an AI agent loads when a task matches them. This skill covers one kind of task: a multi-screen gamified mobile-app prototype. The agent produces one self-contained HTML page showing three phone frames side by side on a dark stage.

Frame 1 is a cover poster with a headline and short value statement. Frame 2 is the hero screen: today's quests as a grid of tiles, each with an XP reward, plus a level bar. Frame 3 is a quest detail screen with a reward stamp, a short checklist and a start button.

The page uses CSS and inline SVG only, with no images, so you can open the result in a browser to preview it.

How do you install the gamified-app skill?

Download the ZIP for the skill from the design-templates/gamified-app page. Then choose one of two routes.

For a personal install, unzip the folder into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder. Alternatively, in the Claude apps, go to Settings, then Capabilities, then Skills, and upload the ZIP there.

• Personal: unzip into ~/.claude/skills/
• Single project: unzip into .claude/skills/ inside the project
• Claude apps: Settings → Capabilities → Skills, then upload the ZIP

How do you trigger the skill with a natural request?

You do not run the skill directly. You describe what you want in plain language, and the agent loads the skill when your request matches its trigger phrases. The skill is written to respond to requests that mention a gamified app, a habit tracker, an RPG-style life app, a level-up app, daily quests, an XP or streak app, or a life management app.

Include the screens you want and the core idea. The skill's own example prompt shows the pattern: a multi-screen mobile prototype with a cover poster, today's quests with XP, and a quest detail screen.

• Name the app type: 'habit tracker' or 'daily quests app'
• Ask for the three screens: cover, quests dashboard, quest detail
• Give a tagline or brand name if you have one

What should you expect in the output?

The skill asks the agent to build a dark showcase page with three 360×780 phone frames in a row, wrapping to a stack on narrow screens. Each phone has a status bar, a bottom tab bar, and screen-specific content. The quest names are generated as realistic examples, such as a strength workout or a focus meditation.

The skill is designed so the three screens serve different purposes rather than repeating the same layout, and so quest tiles use different pastel accents on a shared neutral surface.

• Single HTML document with inline CSS
• No images; gradients and inline SVG icons only
• Preview by opening the HTML file in a browser

What does the skill need, and what about scripts and network?

The skill lists no required dependencies. It does not run scripts and does not use the network, so nothing is downloaded or executed when the skill is applied. The package includes two files: SKILL.md, which holds the instructions, and example.html, an example output.

The skill's instructions ask the agent to read a design system file if one is active. If none is present, expect the agent to rely on the skill's own generic bold, colourful style.

• Requires: nothing listed
• Runs scripts: no
• Uses network: no
• Files: SKILL.md, example.html

What are the limits and safety notes?

This is a static visual prototype. It has no real logic, no data storage and no working interactions beyond what is shown. Do not use it as a basis for a working app without a separate build step.

The skill relies on a generic bold, colourful style and does not check colour contrast or accessibility. If you need brand guidelines or accessibility-verified designs, check the output yourself or provide your own design system.

• Not a working app: output is a static visual
• No contrast or accessibility checks
• Brand fit depends on the brief or a supplied design system

Tips for better results

Give a clear brief. The more specific you are about the audience, tone and quest types, the more useful the quest names and rewards will be. Review the output in a browser and ask for changes to one screen at a time.

• Describe the audience and the value proposition in one or two sentences
• Ask for specific quest themes, such as body, reading or mindfulness
• Iterate on one phone at a time rather than rewriting the whole page