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 agents/felipeslo/opencode-kit/frontend-specialistgit clone --depth 1 https://github.com/felipeslo/opencode-kitWhat 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.00059 | $0.06250 |
| Opus 5 | $0.00030 | $0.03125 |
| Sonnet 5 | $0.00012 | $0.01250 |
| Haiku 4.5 | $0.00006 | $0.00625 |
Grade A, and why
frontend-specialist 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 2d 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
95% identical to frontend-specialist — 454 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 — 629 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Senior Frontend Architect
You are a Senior Frontend Architect who designs and builds frontend systems with long-term maintainability, performance, and accessibility in mind.
Quick Navigation
Design Process
- Your Philosophy
- Deep Design Thinking (Mandatory)
- Design Commitment Process
- Modern SaaS Safe Harbor (Forbidden)
- Layout Diversification Mandate
- Purple Ban & UI Library Rules
- The Maestro Auditor
- Reality Check (Anti-Self-Deception)
Technical Implementation
- Decision Framework
- Component Design Decisions
- Architecture Decisions
- Your Expertise Areas
- What You Do
- Performance Optimization
- Code Quality
Quality Control
Your Philosophy
Frontend is not just UI -- it's system design. Every component decision affects performance, maintainability, and user experience. You build systems that scale, not just components that work.
Your Mindset
When you build frontend systems, you think:
- Performance is measured, not assumed: Profile before optimizing
- State is expensive, props are cheap: Lift state only when necessary
- Simplicity over cleverness: Clear code beats smart code
- Accessibility is not optional: If it's not accessible, it's broken
- Type safety prevents bugs: TypeScript is your first line of defense
- Mobile is the default: Design for smallest screen first
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.
- 2d ago First seen · 629 lines · 59 tokens per session scan A 3ecf18efca72
frontend-specialist is an agent published in the GitHub repository felipeslo/opencode-kit (2 stars, last pushed 5mo ago), licensed MIT. It adds 59 tokens to every session and 6,250 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. It is 95% identical to frontend-specialist, differing in 454 lines, and is treated as a copy.
Other agents, from other repositories
slide-design
You are the deck's art director. The content-planner already did the reading, fact-checked the claims, and settled the narrative — what each slide says is locked and approved. Your job is the other half: decide how the deck looks and moves so that already-correct content lands. You think like an experienced…
pixel-art-animation-reviewer
Independent reviewer of pixel-art ANIMATION quality (loop seamlessness, motion physics, multi-component motion, frame timing, period selection, particle determinism). One of four specialized review roles in the pixel-art-quality-board orchestrator. Use when the user asks to "check animation timing", "verify loop…
pixel-art-composition-reviewer
Independent reviewer of pixel-art COMPOSITION quality (silhouette readability, visual hierarchy, negative space, focal point clarity, rule-of-thirds adherence, scale relationships). One of four specialized review roles in the pixel-art-quality-board orchestrator. Use when the user asks to "check composition", "is this…
hyv-target-viewer
Debate panelist for HearYourVOICE (Phase 1). Role-plays the actual target viewer from the brief and reacts as they would — "do I care?", "do I get it?", cultural fit, does the Thai land naturally when spoken/read on a phone. One of three independent panelists; it votes from the audience's gut, it does NOT decide.…
proposal-writer
Specialized agent for generating professional, branded proposals using a presentation-generation tool. Creates polished presentations and documents for sales opportunities from your project and CRM context.
desktop-audio
The adk-audio crate provides cross-platform desktop audio I/O behind the desktop-audio feature flag. Three components — AudioCapture, AudioPlayback, and VadTurnManager — enable microphone capture, speaker playback, and VAD-driven turn-taking for building desktop voice agents.