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/krzysztofsurdy/code-virtuoso/frontend-devnpx skills add krzysztofsurdy/code-virtuoso --skill frontend-devgit clone --depth 1 https://github.com/krzysztofsurdy/code-virtuosoWrote 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/krzysztofsurdy/code-virtuoso/frontend-dev)<a href="https://agentmods.dev/skills/krzysztofsurdy/code-virtuoso/frontend-dev"><img src="https://agentmods.dev/badge/skills/krzysztofsurdy/code-virtuoso/frontend-dev.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.1 | $0.00064 | $0.01868 |
| Opus 5 | $0.00032 | $0.00934 |
| Sonnet 5 | $0.00013 | $0.00374 |
| Haiku 4.5 | $0.00006 | $0.00187 |
Grade A, and why
frontend-dev 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.
How it starts
The opening of the file, as written. The whole thing — 167 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Developer
Own the user-facing interface for a feature or project. Translate design specs and requirements into working, accessible, performant UI components that integrate cleanly with backend services.
Role Summary
- Responsibility: Implement UI components, integrate with backend APIs, manage client-side state, ensure accessibility and responsive behavior
- Authority: Component architecture decisions, state management approach, UI implementation patterns within design specs
- Escalates to: Architect when UX requirements conflict with technical feasibility or when cross-cutting concerns (authentication flows, caching strategies) need system-level decisions
- Deliverables: Working UI with tests, component library contributions, integration with backend APIs
When to Use
- Implementing a new UI feature from a design spec or user story
- Building or extending a component library for reuse across the application
- Integrating frontend views with backend API endpoints
- Resolving client-side state management complexity (shared state, caching, optimistic updates)
- Fixing accessibility, responsiveness, or performance issues in the UI layer
- Writing component-level, integration, or end-to-end tests for UI features
Workflow
Phase 1: Plan
Input: Design specs, user stories with acceptance criteria, API contracts
- Break the design into a component tree — identify leaf components, containers, and layout wrappers
- Identify shared state needs — which data is local to a component vs shared across views
- Review available API endpoints and data shapes; flag any gaps or mismatches with the backend team
- Identify reusable components that already exist in the component library
- Estimate complexity per component — simple (stateless, presentational), medium (local state, form handling), complex (shared state, real-time updates)
- Define the implementation order — build leaf components first, compose upward
Output: Component breakdown, state management plan, API integration map, implementation order
What ships with it
3 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.
- 5d ago First seen · 167 lines · 64 tokens per session scan A c90e0a636552
frontend-dev is a skill published in the GitHub repository krzysztofsurdy/code-virtuoso (20 stars, last pushed 3mo ago), licensed MIT. It adds 64 tokens to every session and 1,868 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-30.
Other skills, from other repositories
hermes-diagnostic-review
Use when running a read-only diagnostic review of recent Hermes sessions to find recurring mistakes, failed tool calls, and repeated fixes, then propose suggestion-only improvements and reusable skills. Human-gated; never auto-applies.
instruction-eval
Change one condition an agent runs under (instruction text, the reference material instructions point at, MCP tools and permissions, hooks, skill files), then run the same prompts before and after, several times each, to see what actually changes. Produces an HTML report showing both arms' answers side by side. Use…
worth-building
Decide how elaborate to build something (simple vs. robust) and return a concrete, PoC-shaped proposal at that level — not over- or under-engineered, but right-sized. Use whenever someone is building something and the investment level is unclear: "quick or proper?", "MVP vs. real product", "is this over-engineering?"…
django-ticket-triage
Analyze a Django Trac ticket and produce a triage recommendation report — duplicate search, related PRs, forum threads, and the affected source code. Use when the user gives a Django ticket number, or asks whether a ticket is valid, a duplicate, or ready for a triage stage.
gh-issues
Fetch GitHub issues, spawn sub-agents to implement fixes and open PRs, then monitor and address PR review comments. Usage: /gh-issues [owner/repo] [--label bug] [--limit 5] [--milestone v1.0] [--assignee @me] [--fork user/repo] [--watch] [--interval 5] [--reviews-only] [--cron] [--dry-run] [--model glm-5]…
healthcheck
Host security hardening and risk-tolerance configuration for OpenClaw deployments. Use when a user asks for security audits, firewall/SSH/update hardening, risk posture, exposure review, OpenClaw cron scheduling for periodic checks, or version status checks on a machine running OpenClaw (laptop, workstation, Pi, VPS).