Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/willnie9/agent-skillsnpx agentmods add skills/willnie9/agent-skills/frontend-page-designWrote 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/willnie9/agent-skills/frontend-page-design)<a href="https://agentmods.dev/skills/willnie9/agent-skills/frontend-page-design"><img src="https://agentmods.dev/badge/skills/willnie9/agent-skills/frontend-page-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/willnie9/agent-skills/frontend-page-design"><img src="https://agentmods.dev/badge/skills/willnie9/agent-skills/frontend-page-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.00113 | $0.03629 |
| Opus 5 | $0.00056 | $0.01814 |
| Sonnet 5 | $0.00023 | $0.00726 |
| Haiku 4.5 | $0.00011 | $0.00363 |
Grade A, and why
frontend-page-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 10d 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.
How it starts
The opening of the file, as written. The whole thing — 269 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend-Page-Design · 模块组装器
Auto Mode(无确认模式)
触发:用户输入含任一关键词 → 全跑 / 一气呵成 / auto / yolo / 别问 / 自动,或被 module-flow / master-go-to-code 委托(auto 透传)。
行为:
- 跳过 Step 2 文件清单预览(不弹"将创建 N 个,确认?")
- Step 9
vue-tsc失败不阻断(verdict=warn 也继续,落 issues) scan-perm-todos.mjs扫到占位 → 写进 stage-c-report.json 不阻断stage-c-finalize.mjs跑完产出stage-c-report.json(stage-gate 用)
保留:
- 文件冲突时仍弹三选(覆盖/重命名/跳过)
- 铁律 1-8 不变
本 skill 读取
.claude/skills/project.config.json获取项目结构/约定/参考页,以下<config.xxx>占位指向该配置。Step 0 同时做"现场探测兜底"。
决策树
mode 参数(由 module-flow 传入)
│
├─ "new" (默认,场景 1/2) → 新建全套:Step 1-9
├─ "incremental" (场景 3 增量) → 跳 Step 7-8(路由/菜单),Step 4 改"加新子组件 + 在现有 Index.vue 加 import"
├─ "iterate" (场景 4 迭代) → 跳 Step 3-4,只精准 Edit 现有 Vue 局部
└─ "refactor" (场景 5 重构) → 跳 Step 7-8,Step 4 改"替换现有 Index.vue 内容"(保留文件路径)
数据来源
│
├─ 有 define.ts + api.ts(来自 yapi-to-code 或现有) → Step 6 集成真接口
├─ 仅 dom-tree.json,无 API → Step 6 用静态数据填充
├─ dataStrategy=mock → 生成 mock.ts
└─ mode=iterate/refactor + 现有 api.ts 存在 → 默认复用,字段对得上接,接不上写默认数据
5 种模式的行为差异
| new (1/2) | incremental (3) | iterate (4) | refactor (5) | |
|---|---|---|---|---|
| Step 3 建目录 | 建 <viewsDir>/<module>/ |
跳过(用现有) | 跳过 | 跳过 |
| Step 4 主页面 | 新建 Index.vue | 加新子组件 + 改现有 Index.vue 加 import | 精准 Edit 现有 Vue 局部 | 替换 Index.vue 内容(保留路径) |
| Step 5 子组件 | 按需建 | 主要工作在这里 | 看需要改的是否子组件 | 重写所有子组件 |
| Step 6 API | 用 yapi-to-code 新建 | yapi 新建(如果有新接口) | 默认复用现有,字段对不上写默认数据 | 同 iterate |
| Step 7 路由 | 新建 + 注册 3 处 | ❌ 跳过 | ❌ 跳过 | ❌ 跳过 |
| Step 8 菜单 | +1 项 | ❌ 跳过 | ❌ 跳过 | ❌ 跳过 |
| Step 9 验证 | 全部 | 全部 | 全部 | 全部 |
yapi 复用规则(mode=iterate/refactor)
检测现有 <config.cacheDir>/<currentModule>/api.ts 存在吗?
│
├─ 不存在 → 写默认数据 + // TODO: 对接接口
│
└─ 存在 → 读 define.ts,分析字段:
│
├─ DSL 新设计稿里的字段名/类型 vs api.ts 现有字段
│ │
│ ├─ 全对得上 → 默认复用,直接 import 用
│ ├─ 部分对不上 → 优先用现有,字段缺的写默认数据,产 issues.md
│ └─ 完全对不上 → 用默认数据,警告"现有 api.ts 跟新设计稿字段不匹配,需要后端同步"
What ships with it
9 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.
- references/code-style.md 13 KB
- references/common-pitfalls.md 3.9 KB
- references/component-catalog.md 3.2 KB
- references/issues-template.md 3.5 KB
- references/module-code-policy.md 3.1 KB
- references/page-templates.md 7.3 KB
- references/routing-patterns.md 3.3 KB
- scripts/scan-perm-todos.mjs 1.6 KB runs code
- scripts/stage-c-finalize.mjs 3.4 KB runs code
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.
- 10d ago First seen · 269 lines · 113 tokens per session scan A 7fe9cbe97a6c
frontend-page-design is a skill published in the GitHub repository willnie9/agent-skills (2 stars, last pushed 2mo ago), licensed MIT. It adds 113 tokens to every session and 3,629 once invoked, about $0.0006 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-31.
Other skills, from other repositories
bun-nuxt
Use when running Nuxt 3 with Bun runtime, building Vue/Nuxt apps with Bun, or configuring Nuxt projects to use Bun for development and production.
bun-sveltekit
Use when building or running SvelteKit apps on Bun, including SSR, adapters, and Bun-specific APIs.
animation-framework-integration
Standards for integrating GSAP into React, Vue, and Svelte while ensuring clean memory management.
nuxt-development
CIEL's framework for Nuxt 4 development, hydration safety, and route-level rendering.
shadcn-svelte
Pre-built shadcn-svelte components for json-render Svelte apps. Use when working with @json-render/shadcn-svelte, adding standard UI components to a Svelte catalog, or building Svelte web UIs with shadcn-svelte + Tailwind CSS components.
create-site
Creates a new Power Pages code site (SPA) using React, Angular, Vue, or Astro. Guides through the full process from initial concept to deployed site: requirements discovery, scaffolding, component planning, design, implementation, validation, and deployment. Use when the user wants to create, build, or scaffold a new…