miniapp-dev

A development guide for BitFun MiniApps, which are small applications that run inside BitFun. It covers creating new MiniApps as well as maintaining the MiniApp framework.

In plain words
What is it for?
Creating or maintaining MiniApps, choosing visual references, defining their style, using the app bridge, preparing placeholder data, and checking light/dark and Chinese/English versions.
Why use it?
It gives MiniApp work consistent design, permission, language, and testing rules. It also requires an early preview so the interface can be reviewed before it is finished.

Skill for Claude CodeCodex

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/gcwing/bitfun/miniapp-dev
Any agent
npx skills add GCWing/BitFun --skill miniapp-dev
Clone the repo
git clone --depth 1 https://github.com/GCWing/BitFun

Made for: Claude Code, Codex.

Per session 143 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 6,952 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00143 $0.06952
Opus 5 $0.00072 $0.03476
Sonnet 5 $0.00029 $0.01390
Haiku 4.5 $0.00014 $0.00695

Measured 2d ago against content hash 7a1e2db469d6, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

miniapp-dev scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

MiniApp/Skills/miniapp-dev/SKILL.md · 444 lines

How it starts

The opening of the file, as written. The whole thing — 444 lines — stays where its author put it; the contents beside it link to each section on GitHub.

BitFun MiniApp V2 指南

本 Skill 服务两类工作

  • 维护框架本身 → 阅读下方"代码架构 / Bridge / 权限模型 / window.app API"等章节。
  • 生成一个新的 MiniApp必读 design-playbook.md,并遵循下方"生成新 MiniApp 必读(速查)"章节的硬约束。详细 API 见 api-reference.md

生成新 MiniApp 必读(速查)

完整指南见 design-playbook.md。这里是不可妥协的硬约束,AI 在用 InitMiniApp 工具创建骨架后必须遵守。

流程

  1. 先问,再做:用户的目标 / 受众 / 是否需要 node mode / 权限边界 / 是否需要 Tweaks 变体 / 是否多语言 / 是否有视觉参考——任何一项含糊就用 AskUserQuestion 问。不要替用户决定
  2. 找设计上下文:先读 MiniApp/Demo/src/crates/contracts/product-domains/src/miniapp/builtin/assets/最贴近形态的内置应用,复刻它的视觉语言(间距 / 圆角 / 卡片密度 / motif)。从零 mock 是最后选择
  3. 声明设计系统style.css 顶部用注释钉住 palette / typography / radius / motif(参见 playbook §1.3 模板),后续全应用复用。
  4. 占位先行 → 早预览:第一版用占位文本 / 占位图框 / fixture 数据,先在 Toolbox 里跑给用户看,再迭代。
  5. 验证:light/dark × zh/en 共 4 套截图都过;过 playbook §8 的 QA Checklist。

反 AI 味(默认禁用,除非用户明确要求)

  • ❌ 蓝紫渐变 / "Aurora" 风背景
  • ❌ Emoji 当主图标(用描边 SVG 或字母圆形容器)
  • ❌ 左侧色条 + 圆角卡片组合
  • ❌ 标题下加 1-2px 装饰横线
  • ❌ 硬画复杂插画 SVG(用占位框,标注 "Image TBD")
  • ❌ Inter / Roboto 兜底就完事(用 var(--bitfun-font-sans) 优先)
  • ❌ 12px 以下文字 / hit target < 32px
  • ❌ 圆角混用 4/8/12/16(钉 1-2 档全应用统一)
  • ❌ 用装饰性 stats / icon / sparkline 填空白(空白是排版问题,不是内容问题)

颜色与字体

  • 首选 var(--bitfun-*) 系列 + fallback,与宿主主题协同(见下文"主题集成"章节的完整变量清单)。
  • 一个颜色占视觉权重 60-70%(dominant),1-2 个 supporting,1 个 accent——禁止给所有色块同等权重
  • 字号:标题 18-22px / Section 14-15px / 正文 13-14px / Caption 11-12px。

Tweaks 变体(推荐做法)

对外观/密度/字号/布局的多种合理选择,做成运行时可切换、写入 app.storage('tweaks')、右下角浮动小面板"Tweaks"——一份代码服务多种偏好是 MiniApp 的天然优势。详细约定见 playbook §4。

占位优于劣质实现

没图标 / 没数据 / 没素材时,用明确的占位(标注尺寸或 "TBD"),并在 README 里登记待补清单——不要硬画一个糟糕的真实物

工具型 vs 展示型

绝大多数 BitFun MiniApp 是工具型——信息密集、操作短、配色冷静,仿照 regex-playground / coding-selfie / git-graph 的克制感。只有用户明确要"对外展示 / 灵感型 / 作品集"时才放飞视觉。

内容守则

  • 不为填空白而加内容——空白说明结构应被简化。
  • 每个元素都要能回答"为什么在这里",回答不了就删掉。
  • 加新 section / page / 功能前先问用户——你不比用户更懂他的目标。

Read the full file on GitHub · 444 lines

Files

What ships with it

3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 2d ago First seen · 444 lines · 143 tokens per session scan A 7a1e2db469d6

Subscribe to this mod's changes

miniapp-dev is a skill published in the GitHub repository GCWing/BitFun (1,871 stars, last pushed 2d ago), licensed MIT. It adds 143 tokens to every session and 6,952 once invoked, about $0.0007 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

git-delegation

将所有 git 操作委托给 Manager 执行。Worker 无法直接访问 git credentials,因此任何需要认证的 git 操作(clone、push、fetch 等)都需要通过此机制委托给 Manager。.

agentscope-ai/AgentTeams · 51 tokens

agentteams-migrate

Analyze current OpenClaw setup and generate a migration package (ZIP) for importing into AgentTeams as a managed Worker.

agentscope-ai/AgentTeams · 28 tokens

workerflow-internal-workflow

Use when a QwenPaw-backed Worker needs to decide whether to do work directly, use native subagents for internal parallelism, or create a temporary QwenPaw agent with a custom AGENTS.md and skills.

agentscope-ai/AgentTeams · 52 tokens

find-skills

Discover and install agent skills from the open ecosystem. Use when you encounter an unfamiliar domain, framework, or workflow that you lack specialized knowledge about, or when your coordinator suggests searching for skills before starting a task.

agentscope-ai/AgentTeams · 46 tokens

higress-gateway-management

Manage the Higress AI Gateway via its Console API (consumers, routes, AI providers, MCP servers). Use when creating consumers, configuring routes, or managing AI gateway settings.

agentscope-ai/AgentTeams · 43 tokens

worker-management

Use when admin requests hand-creating or resetting a Worker, starting/stopping a Worker, managing Worker skills, enabling peer mentions, or opening a QwenPaw console. Use agentteams-find-worker only as a helper for Nacos-backed market import or when task assignment needs you to discover a suitable Worker.

agentscope-ai/AgentTeams · 65 tokens