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 agentmods add skills/waybarrios/opencode-power-pack/frontend-designnpx skills add waybarrios/opencode-power-pack --skill frontend-designgit clone --depth 1 https://github.com/waybarrios/opencode-power-packWrote 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/waybarrios/opencode-power-pack/frontend-design)<a href="https://agentmods.dev/skills/waybarrios/opencode-power-pack/frontend-design"><img src="https://agentmods.dev/badge/skills/waybarrios/opencode-power-pack/frontend-design.svg" alt="Measured on agentmods" 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 | $0.00076 | $0.02628 |
| Opus 5 | $0.00038 | $0.01314 |
| Sonnet 5 | $0.00015 | $0.00526 |
| Haiku 4.5 | $0.00008 | $0.00263 |
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 5d 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
86% identical to frontend-design — 20 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 — 102 lines — stays where its author put it; the contents beside it link to each section on GitHub.
This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices, then audit it against the self-critique rubric before returning.
The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
Scope and requirements
Before design thinking, classify the request and plan the appropriate ownership boundary. Ask only about missing information that materially changes structure, behavior, integration, or accessibility; when requirements are sufficient, proceed without a round trip.
- Page or application: Plan the user journey, information architecture, content hierarchy, navigation and route context, page-level states, full-viewport responsive composition, and one coherent visual concept.
- Isolated or reusable component: Plan its responsibility, public inputs and content, events, variants, loading/empty/error/disabled/selected states where applicable, host context, intrinsic sizing, keyboard and focus semantics, tokens, and composition boundaries.
- Hybrid work: Plan both layers and keep page-owned requirements out of reusable component internals.
A component must not invent an unrelated page shell, global landmarks, document-level <h1>, global typography or background, or viewport metadata. A page must not collapse planning into individual components without first establishing page hierarchy, navigation, content flow, and responsive behavior.
All three tracks converge into the design thinking, implementation, anti-generic guidance, self-critique, and optional validation below; do not duplicate those stages per track.
Design Thinking
Before coding, understand the context and commit to a BOLD aesthetic direction:
- Purpose: What problem does this interface solve? Who uses it?
- Tone: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- Constraints: Technical requirements (framework, performance, accessibility).
- Differentiation: What makes this UNFORGETTABLE? What's the one thing someone will remember?
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.
- 5d ago First seen · 102 lines · 76 tokens per session scan A c14bd59559b3
frontend-design is a skill published in the GitHub repository waybarrios/opencode-power-pack (490 stars, last pushed 2d ago), licensed MIT. It adds 76 tokens to every session and 2,628 once invoked, about $0.0004 per session on Opus 5. A static security scan graded it A with 0 findings. It is 86% identical to frontend-design, differing in 20 lines, and is treated as a copy.
Other skills, from other repositories
make_plan
For external plan request scenarios, guides the Agent to request a clear, actionable, step-by-step plan from a stronger Agent via listagents and chatwithagent, emphasizing that the plan is executed by the requester, not by the consulted Agent.
当用户需要对PDF文件进行任何操作时，请使用此技能。包括从 PDF 中读取或提取文本/表格、合并多个 PDF、拆分 PDF、旋转页面、添加水印、创建新PDF、填写PDF表单、加密/解密 PDF、提取图片，以及对扫描版 PDF 进行 OCR 使其可搜索。如果用户提到 .pdf 文件或要求生成 PDF，请使用此技能。.
wiki-status
Show the current state of the wiki — what's been ingested, what's pending, and the delta between sources and wiki content. Use this skill when the user asks "what's the status", "how much is ingested", "what's left to process", "show me the delta", "what changed since last ingest", "wiki dashboard", or wants an…
hermes-history-ingest
Ingest Hermes agent history into the Obsidian wiki. Use this skill when the user wants to mine their past Hermes sessions for knowledge, import their /.hermes folder, extract insights from previous Hermes conversations, or says things like "process my Hermes history", "add my Hermes memories to the wiki", "ingest…
wiki-context-pack
Produce a token-bounded, citation-ready context slice from an existing Obsidian vault for a downstream agent or task. Use for "/wiki-context-pack", "use my vault as context", "context slice for X", "pack the wiki for my agent", or "bounded context for Y".
microsoft-graph-webhooks
Receive and verify Microsoft Graph change notifications (webhooks). Use when setting up a Microsoft Graph webhook / subscription handler, completing the validationToken endpoint validation handshake, validating clientState, decrypting rich notifications (includeResourceData), handling lifecycle events…