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.
npx skills add pieable/dragon-ball-agent --skill frontend-designgit clone --depth 1 https://github.com/pieable/dragon-ball-agentWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/pieable/dragon-ball-agent/frontend-design)<a href="https://agentmods.dev/skills/pieable/dragon-ball-agent/frontend-design"><img src="https://agentmods.dev/badge/skills/pieable/dragon-ball-agent/frontend-design/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/pieable/dragon-ball-agent/frontend-design"><img src="https://agentmods.dev/badge/skills/pieable/dragon-ball-agent/frontend-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00079 | $0.02101 |
| Opus 5.5 | $0.00032 | $0.00840 |
| Sonnet 5.5 | $0.00016 | $0.00420 |
| Haiku 4.5 | $0.00008 | $0.00210 |
Grade A, and why
frontend-design 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 23d 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.
This is a copy
100% identical to frontend-design — 70 lines differ, which has more behind it and is treated as the original. This page carries a canonical link to it rather than competing with it.
How it starts
The opening of the file, as written. The whole thing — 74 lines — stays where its author put it; the contents beside it link to each section on GitHub.
前端设计与信息展示
从使用者要理解的内容和要完成的任务出发，把真实内容、视觉设计、操作行为和实现组织成可读、可用的成品。营销页面围绕主要行动建立识别与信任，工作台支持发现、比较和处理对象，教学页面支持关系理解、观察与尝试。形式、密度、动效和实现投入服从当前用途。
当前依据与任务
先取得当前页面、项目结构、组件与样式约定、真实内容、用户情景及交付入口。简报未说明主体、受众或主要任务时，从已有材料确定具体对象与页面职责，披露会影响结果的自行选择。已有用户偏好与历史设计可作线索，本次明确要求作为当前依据。
存在设计系统时先读其使用说明与 tokens，再按需要读取组件、样式和真实素材。尺寸、颜色、字体与状态精确保留来源值，5px 就保留 5px。已有体系决定已确认部分，设计探索用于仍开放的部分。局部修改从当前文件出发，保留其他视觉关系和来源不明的已有内容。
真实价格、评价、客户身份和统计数字来自实际材料，缺失信息使用明确的待填标记。标志与身份素材取自真实来源，普通图标沿用已有体系。制作过程与检查记录写在任务说明与交流中，成品内容服务使用者。作品本身用于讲解设计或比较方案时，保留理解这些内容所需的理由与条件。
设计与制作
新建或调整整体视觉方向时，先查看已有成熟完整页面、组件实现与成套素材。需要发现或复用这些原件时，读取 设计原件库，按当前用途查看实际画面并读取相应源码。匹配的完整模板可以直接适配真实内容，保留字体、色彩、图片、组件和布局之间的关系。已有项目的小改从当前实现出发。
先用真实代表内容确定结构、阅读或操作顺序、字体角色、色彩角色与主要状态，再核对这些选择是否符合当前任务。结构、编号、分隔、层级与留白表达真实的内容关系。内容为顺序过程时才用序号表示先后。
整体视觉方向尚未确定且影响完整作品时，制作足以比较结构、字体、配色或密度的可见方向，说明各自适用情境与取舍。低保真足以支持决定时先用低保真，候选名称在迭代中保持稳定。已有风格或任务明确时沿当前依据制作。需要品牌识别、新风格或鲜明视觉方向时，读取 审美方向与视觉身份。
选择符合项目与交付条件的工具和实现。已有项目继续使用实际 HTML、CSS、框架、组件与运行入口。需要可编辑设计稿或 Figma 操作时读取相应 Figma Skill，制作图片时读取 imagegen。参照、资产、图片编辑和实现交接按 视觉素材与页面制作 执行。
在展开完整作品前，用真实中文、主图和代表性交互检查关键页面是否容纳内容。制作中查看当前结果，解决层级、溢出、字距、状态和操作问题。CSS 选择器的优先级应清楚，核对类与元素规则是否覆盖了本应保留的间距或样式。改后查看受影响的完整场景。
需要判断整体视觉质量、解释用户所说的“平、乱、挤、像模板”，或对当前页面作实质视觉调整时，读取 视觉评审与打磨。以当前简报和真实画面定位问题。只请求评审时交回发现与依据，已授权修改时修正受影响的结构与样式。普通局部修改检查对应元素及其周围关系。
按当前场景读取细则
按任务读取相关文件，并将要求落实到成品与检查。普通小改覆盖受影响部分，需要的规则已经读过且仍有效时沿用。
| 当前场景 | 读取材料 |
|---|---|
| 文字、主题、布局、触控区域、中文与地区格式 | 视觉质量与具体检查 |
| 键盘、弹窗、辅助技术、拖动、缩放、认证与动态反馈 | 可访问交互 |
| 收集信息、多步骤事务、保存返回、校验与复核 | 表单与任务流程 |
| 导航查找、表格、搜索筛选、分页、集合选择与批量动作 | 工作台交互 |
| 图表、关系图、时间轴、模拟与跨视图联动 | 信息可视化 |
| 共享品牌变量、主题、组件和使用说明 | 设计系统的整理与使用 |
| 寻找成熟完整页面、组件源码、字体图片与成套素材 | 设计原件库 |
| 补齐页面行为、多人交接或设计转实现 | 界面设计交接 |
| 页面实际显示、资源依赖、操作反馈、离线或运行验收 | 运行体验与完成检查 |
| 整体视觉评审、层级与节奏修正、设计细节打磨 | 视觉评审与打磨 |
| 界面文案的必要性、表达与实际行为审查 | 界面文案审查 |
What ships with it
18 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.
- agents/openai.yaml 348 B
- assets/design-comparison.html 30 KB
- LICENSE.txt 9.9 KB
- references/accessibility-interaction.md 6.7 KB
- references/aesthetic-direction.md 6.1 KB
- references/claude-design-license.txt 9.3 KB
- references/claude-design-sources.md 6.2 KB
- references/design-handoff.md 5.7 KB
- references/design-resource-library.md 3.0 KB
- references/design-system.md 4.5 KB
- references/form-workflows.md 8.9 KB
- references/information-visualization.md 9.8 KB
- references/interface-copy.md 8.2 KB
- references/runtime-quality.md 6.9 KB
- references/visual-critique.md 6.0 KB
- references/visual-production.md 6.5 KB
- references/visual-quality.md 10 KB
- references/workspace-interactions.md 8.7 KB
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.
- 23d ago Changed · +18 lines · +39 tokens per session e604f3a5672e
- 1mo ago First seen · 56 lines · 40 tokens per session scan A 1608ea77fbb6
frontend-design is a skill published in the GitHub repository pieable/dragon-ball-agent (11 stars, last pushed 23d ago), licensed MIT. It adds 79 tokens to every session and 2,101 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. It is 100% identical to frontend-design, differing in 70 lines, and is treated as a copy.
frontend-design compared with skills from other repositories
| Mod | Type | Stars | Last push | Licence | Scan | Tokens | Works with |
|---|---|---|---|---|---|---|---|
| frontend-designpieable/dragon-ball-agent | Skill | 11 | 23d ago | MIT | A | 79 | Codex |
| anti-slop-designsickn33/agentic-awesome-skills | Skill | 49k | today | MIT | A | 34 | Claude Code |
| chakra-ui-builderchakra-ui/chakra-ui | Skill | 41k | 2d ago | MIT | A | 214 | Claude Code, Codex |
| visual-ralphYeachan-Heo/oh-my-codex | Skill | 34k | today | MIT | A | 52 | Codex |
| open-design-setupcompozy/compozy | Skill | 2.9k | today | MIT | A | 67 | Claude Code, Codex |
| frontend-visual-qadaymade/claude-code-skills | Skill | 1.5k | yesterday | MIT | A | 125 | Claude Code, Codex |
| prototype-webnexu-io/html-anything | Skill | 9.4k | today | Apache-2.0 | A | 24 | Claude Code, Codex |