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 jiushiwon/wg-skills --skill html-frontend-templategit clone --depth 1 https://github.com/jiushiwon/wg-skillsWrote 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/jiushiwon/wg-skills/html-frontend-template)<a href="https://agentmods.dev/skills/jiushiwon/wg-skills/html-frontend-template"><img src="https://agentmods.dev/badge/skills/jiushiwon/wg-skills/html-frontend-template/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/jiushiwon/wg-skills/html-frontend-template"><img src="https://agentmods.dev/badge/skills/jiushiwon/wg-skills/html-frontend-template.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00029 | $0.00888 |
| Opus 5 | $0.00015 | $0.00444 |
| Sonnet 5 | $0.00006 | $0.00178 |
| Haiku 4.5 | $0.00003 | $0.00089 |
Grade A, and why
html-frontend-template 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 6d 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.
What it actually says
HTML Frontend Template
纯 HTML + 原生 JS 管理后台模板，为自媒体运营平台提供完整的前端解决方案。
使用场景
- 自媒体运营平台需要管理后台
- 不想引入 Vue/React 等框架
- 需要快速搭建原型或 MVP
功能特性
页面模块
| 页面 | 功能 |
|---|---|
| 热点管理 | 热点列表、手动添加、筛选过滤 |
| 创作中心 | 选择热点 → 选择平台 → AI 生成文章 |
| 文章库 | 文章列表、编辑、删除、状态管理 |
| 素材库 | 图片/文案素材管理 |
| 发布中心 | 一键复制、导出、平台格式适配 |
技术特点
- 纯原生：无任何框架依赖
- 响应式：支持桌面和移动端
- 深色模式：支持明暗主题切换
- 本地存储：数据存 localStorage（可选）
- API 对接：可配置对接后端 API
项目结构
html-frontend-template/
├── SKILL.md
├── index.html # 主入口
├── assets/
│ ├── css/
│ │ └── style.css # 样式文件
│ └── js/
│ ├── app.js # 主逻辑
│ ├── api.js # API 调用
│ ├── router.js # 简单路由
│ └── store.js # 状态管理
└── pages/
├── trends.html # 热点管理
├── create.html # 创作中心
├── articles.html # 文章库
├── materials.html # 素材库
└── publish.html # 发布中心
使用方法
1. 快速开始
直接用浏览器打开 index.html 即可预览：
# 可以用任意静态服务器
python -m http.server 8080
# 或直接双击打开
2. 配置 API
在 assets/js/api.js 中配置后端地址：
const API_BASE = "http://localhost:8000";
3. 页面功能
热点管理
- 查看热点列表（按热度排序）
- 手动添加热点
- 筛选来源（知乎/微博/手动）
- 删除热点
创作中心
- 选择热点话题
- 选择目标平台
- 选择风格和长度
- AI 生成初稿
- 人工编辑修改
- 保存到文章库
文章库
- 查看所有文章
- 按平台筛选
- 按状态筛选（草稿/已发布）
- 编辑文章
- 删除文章
素材库
- 上传/添加素材
- 分类管理
- 搜索素材
发布中心
- 选择文章
- 复制到剪贴板
- 导出为 Markdown
- 平台格式预览
主题切换
点击页面右上角主题按钮切换明暗主题，主题偏好会保存到 localStorage。
扩展开发
添加新页面
- 在
pages/目录创建新 HTML - 在
assets/js/router.js注册路由 - 在导航菜单添加链接
添加新功能
在对应页面的 <script> 标签中编写逻辑，使用 store.js 进行状态管理。
注意事项
- 纯前端版本数据存在 localStorage，换浏览器会丢失
- 生产环境建议对接后端 API 实现数据持久化
- 如需登录功能，需自行扩展
What ships with it
5 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.
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.
- 6d ago First seen · 133 lines · 29 tokens per session scan A 9366507a015f
html-frontend-template is a skill published in the GitHub repository jiushiwon/wg-skills (102 stars, last pushed 2d ago), licensed Apache-2.0. It adds 29 tokens to every session and 888 once invoked, about $0.0001 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-09-06.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
visual-ralph
Visual Ralph orchestration for frontend UI from generated references, static references, or live URL targets, using $ultragoal with built-in visual verdict and pixel-diff evidence until the implementation matches and leaves a reproducible design system.
frontend-visual-qa
Audits already-rendered web, landing-page, HTML deck/slide, browser tool/game, dashboard/admin, design-system, and desktop UIs using real-browser or native-app journeys, inspected screenshots, DOM geometry, responsive or projection viewports, and a bundled Playwright sweep. Use after UI implementation to find…
prototype-web
A clickable, high-fidelity web product prototype with navigation, a hero section, feature cards, steps, social proof, and optional pricing. It is designed to resemble a finished landing page while remaining a prototype.
waitlist-page
A simple waitlist page for collecting email addresses from people interested in a new product or early-access release.
refactoring-ui
Audit and fix visual hierarchy, spacing, color, and depth in web UIs. Use when the user mentions "my UI looks off" (or amateur/unprofessional), "fix the design", "Tailwind styling", "color palette", "visual hierarchy", "design system", "spacing scale", or "component styling". Also trigger when building consistent…