Design & Motion · nexu-io/html-anything
gamified-app
Three screens: Cover / Today's quests with XP / Quest details, dark stage
L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
The three-screen narrative structure is hardcoded in the body: Cover → Today's quests (XP ribbon + level bar) → Quest detail (subtasks + rewards).
next/src/lib/templates/skills/gamified-app/SKILL.md
- Frame 2: Today's quests + XP ribbon + level bar
Delivered as three screens in one go, functioning as an 'app showcase graphic' rather than a single page—the model allocates information density across three frames.
The 'dark stage' is implemented in the example as a dark showcase background with `--stage: #0e0d0c`, featuring three phone frames side by side.
next/src/lib/templates/skills/gamified-app/example.html
--stage: #0e0d0c;
The example additionally establishes a stage-bar and screen-by-screen tabbars, offering a visual presentation far richer than the 4-line specification in the text.
Level/XP semantics are standardized into reusable tags: LEVEL / Level 14 / +N XP.
next/src/lib/templates/skills/gamified-app/example.html
<div class="meta"><div class="label">LEVEL</div><div class="name">Level 14</div></div>
The example implements all gamification vocabulary (LEVEL, XP, quest, step), allowing the model to adopt the naming conventions directly.
The template itself is the prompt: The body of SKILL.md is read by the loader, assembled with the shared prelude and user content, and passed to the local agent CLI for execution.
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
No code from the template directory is executed at runtime: /api/convert only accepts {agent, templateId, content}, uses loadSkill(templateId) to extract the SKILL.md body as the prompt body, and passes it to the logged-in local agent CLI; HTML streams back to the frontend via stdout.
The skill directory consists purely of text assets: The loader reads SKILL.md from disk, and no executable code within the directory is ever loaded.
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
Skills in the filesystem are plain text: The loader reads SKILL.md across directories, extracts frontmatter as picker metadata, and returns the body; no modules in this template directory are imported or executed.
The shared prelude is injected before the template, establishing the highest priority rule: 'The template only defines layout/style/color palette/fonts/component library; quantity is determined by user content.'
next/src/lib/templates/shared.ts
【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】
Injected before the template body, the shared prelude stipulates that 'the template only defines layout/style/color palette/fonts/component library; quantity is determined by user content'—thus, the layout list in this template functions as a 'reusable layout pool' rather than a hard limit on page or frame count.
The shared prelude is injected before the template, establishing the highest priority rule: 'The template only defines layout/style/color palette/fonts/component library; quantity is determined by user content.'
next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
The prelude strictly prohibits filesystem tools and requires raw HTML to stream directly from the response body, leaving disk writes to the frontend—ensuring zero disk write operations on the skill side.
The skill directory consists purely of text assets: The loader reads SKILL.md from disk, and no executable code within the directory is ever loaded.
next/src/lib/templates/loader.ts
const exampleHtml = safeRead(path.join(dir, "example.html"));
The example.html in the directory serves as a golden sample distributed with the repository; the preview route reads and serves it directly from disk (no build, no compilation), functioning both as a quality baseline and detail page asset.
2Core Capabilities
01Three-screen phone frames (Cover / Quest panel / Quest detail)
02XP ribbon and level progress bar
03Two-column quest tile grid
04Subtask steps with done state and per-item XP rewards
05Bottom tab bars (one each for panel and detail)
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
- SKILL.md: Pure prompt instructions and rule text, without script execution or external side effects
Audit Notes: 🟢 Green. Target of assessment = the skill's own directory: The only URLs appearing in the directory are https://fonts.googleapis.com, https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap, and https://fonts.gstatic.com—all located within example.html (artifact example) or frontmatter provenance references, with zero outbound runtime calls specified in the SKILL.md body. The directory contains only SKILL.md and example.html, featuring zero scripts, zero executable code, zero network endpoints, zero credential reads, and zero disk write instructions—executing according to SKILL.md yields an HTML text output from the host model without any outbound or disk-writing side effects. Behaviors of the host shell and artifact consumption are not factored into the rating and are noted solely in verdict.risks: the shared.ts prelude requires artifacts to reference Tailwind CDN (https://cdn.tailwindcss.com) and Google Fonts, the runtime spawns the logged-in local agent CLI (envFor transparently passes process.env), and the preview iframe uses sandbox="allow-scripts allow-same-origin".
5Second-Pass Verification
- [ok] 规范↔示例：覆盖率 — 正文 4 行（三屏 + quest tile 渐变/等级 ribbon/tab bar）在示例中全部落地：stage-bar + 3 台 phone + level-ribbon + quests 双列网格 + steps + 两个 tabbar。
- [discrepancy] 示例自述的 [theme] 切换 — 示例 tip 写「Toggle [theme] in the toolbar to switch theme & layout」，但全文件无 toolbar 控件、无 <script>——照抄该提示会出现做不到的说明。
- [ok] 「暗色舞台」措辞核对 — 示例 `--stage: #0e0d0c;` 与深色 body 底色落地了正文的 dark showcase stage 描述。
- [discrepancy] 示例规模 vs 规范强度 — 正文只有 4 行规范，示例却是 16KB 完整三屏（含示例自创的 stage-bar/tabbar/steps 命名）——规范未覆盖的实现细节全部由示例单方面定义，两次生成差异可能较大。
- [ok] 目录资产面普查 — glob 全量：SKILL.md、example.html；无 scripts/、无 references/、无数据文件、无包管理器清单。
- [ok] 可执行代码普查 — example.html 内 <script> 计数 = 0，fetch/XMLHttpRequest/WebSocket 命中 0；SKILL.md 全篇无脚本或可执行代码。
- [ok] 外链端点普查 — 目录内 URL：https://fonts.googleapis.com、https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap、https://fonts.gstatic.com（皆为 example.html 产物示例或 frontmatter 出处标注；正文未要求运行期外发）
- [ok] official_desc 逐字核对 — meta.official_desc 与 SKILL.md frontmatter 的 description 逐字一致。
6Verdict & Scenarios
Best for: Habit-tracking/RPG product concept drafts, app 3-screen showcase graphics, and 'gamification' UI samples in portfolios; loose specifications paired with a concrete example give the model creative freedom over layouts.
Not for: Scenarios requiring functional interactive prototypes (example has no scripts), strict brand consistency (specifications are too loose to enforce constraints), or stable multilingual font rendering (depends on Google Fonts).
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload gamified-app.tar.gz
sha256:
Option B · Copy Guide for Agentf8255d49dbd0de8f…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.