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 jackguihx-alt/html2style --skill product-editorial-stylegit clone --depth 1 https://github.com/jackguihx-alt/html2styleWrote 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/jackguihx-alt/html2style/product-editorial-style)<a href="https://agentmods.dev/skills/jackguihx-alt/html2style/product-editorial-style"><img src="https://agentmods.dev/badge/skills/jackguihx-alt/html2style/product-editorial-style/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/jackguihx-alt/html2style/product-editorial-style"><img src="https://agentmods.dev/badge/skills/jackguihx-alt/html2style/product-editorial-style.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.00060 | $0.00525 |
| Opus 5 | $0.00030 | $0.00262 |
| Sonnet 5 | $0.00012 | $0.00105 |
| Haiku 4.5 | $0.00006 | $0.00052 |
Grade A, and why
product-editorial-style 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.
What it actually says
Product Editorial 网页风格
使用这套 Skill 为新产品创建网页和界面。迁移设计逻辑，不复制参考网站的品牌身份、文案、图片、Logo、图标或页面结构。
使用流程
- 开始设计前阅读 完整风格规则。
- 需要精确 Token、视口差异或证据时读取 测量数据。
- 需要视觉确认时在浏览器打开 HTML 风格预览。
- 根据新产品的目标、内容和用户重新设计信息架构。
- 实现后先验证桌面端和移动端的静态构图；存在动效时，再按
STYLE.md验证固定阶段和真实交互。
必须遵守
- 保留
references/STYLE.md中的层级、节奏、密度、颜色角色、形状逻辑、图片策略和响应式规则。 - 使用新项目自己的品牌、内容和已授权资产。
- 不要把“风格迁移”理解为复制原页面；组件和页面结构应服务于新任务。
- 测量证据与推断冲突时，以测量证据为准；证据缺失时明确说明，不要编造精确值。
- 存在 Canvas、WebGL、遮罩、滤镜或重叠媒体时，先恢复渲染图层关系，再调整表面参数。
- 动效验证至少区分静态构图、固定时间或滚动阶段、真实交互；不适用的模式必须明确标记。
- 只有经过实现和验证的经验才能写回为通用规则，并同时记录它的适用边界。
- 参考来源：
https://example.com/fictional-product。
资源
references/STYLE.md：Agent 使用的完整设计规则。references/style-profile.json：机器可读的测量结果。assets/preview.html：供人类查看的自包含 HTML 预览。
What ships with it
4 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.
- 10d ago First seen · 34 lines · 60 tokens per session scan A 93a0401a00af
product-editorial-style is a skill published in the GitHub repository jackguihx-alt/html2style (2 stars, last pushed 1mo ago), licensed MIT. It adds 60 tokens to every session and 525 once invoked, about $0.0003 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
design-to-code
Use this skill when translating UI/UX designs into production-ready frontend code. Handles design source ingestion (Figma, Sketch, Adobe XD, screenshots, design specs), design token extraction, component hierarchy mapping, responsive breakpoint strategy, accessibility-first implementation (WCAG 2.1 AA minimum)…
playwright-e2e-testing
Production-grade Playwright end-to-end testing skill for AI coding agents. Provides specialized guidance for writing, debugging, and maintaining Playwright tests in TypeScript, JavaScript, and Python. Covers the full testing lifecycle: test structure and architecture (Page Object Model, fixtures, custom matchers)…
ss-studio
Turn a product brief and optional references into three distinct creative directions, a human-selected StyleSeed interaction plan, generated image/video asset jobs, a working UI prototype, and a verified prototype-first showcase reel. Use for client concepts, app interaction exploration, trendy but coherent UI…
ss-copy
Generate UX microcopy (button labels, error messages, empty states, toasts) following a casual-but-polite voice and tone.
conversational-ux
Design voice and conversational interfaces — dialog flows, error recovery, and persona. Use when the interface speaks and listens rather than being tapped. For graphical input collection, use form-design.
law-of-similarity
Apply the Law of Similarity — shared colour, shape, or size signals that elements belong to one category. Use when signalling relationships across distance. For grouping by position, use law-of-proximity.