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/ytvee-dev/webdev-agent-kit/frontend-refactor-surgeonnpx skills add ytvee-dev/webdev-agent-kit --skill frontend-refactor-surgeongit clone --depth 1 https://github.com/ytvee-dev/webdev-agent-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.00055 | $0.01406 |
| Opus 5 | $0.00028 | $0.00703 |
| Sonnet 5 | $0.00011 | $0.00281 |
| Haiku 4.5 | $0.00006 | $0.00141 |
Grade A, and why
frontend-refactor-surgeon 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.
How it starts
The opening of the file, as written. The whole thing — 138 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend Refactor Surgeon
Purpose
Refactor frontend code while preserving behavior, rendered output, and public contracts unless the user explicitly approves a behavior change.
Refactor verification may use a bounded loop for related failures, but the refactor must not expand into feature work or broad rewrite.
When To Use
Use this skill when the user asks to simplify or reorganize frontend code, extract components, hooks, utilities, or styles, tighten TypeScript types, remove duplication within a clear frontend boundary, decompose mixed-responsibility components, or prepare code for a future change without adding the feature yet.
When Not To Use
Do not use this skill for bugfix-first debugging, new feature implementation, design/spec work, visual QA only, broad rewrites without a boundary, backend refactors, package installation, or testing workflow creation.
Use frontend-bugfix-debugger when the primary goal is to fix a defect.
Required Context
- Read
AGENTS.md. - Read
common/prompt-intent-routing-rules.mdwhen workflow level is unclear. - Read
common/refactor-safety-rules.md. - Read
common/approved-patterns.mdfor component decomposition rules. - Read
common/anti-patterns.mdand relevant anti-pattern templates when the refactor touches components. - Read
common/verification-loop-rules.mdandcommon/bounded-retry-rules.mdwhen verification repair is in scope. - Read
common/typescript-discipline.md. - Read relevant boundary docs such as
common/state-ownership-rules.mdwhen the refactor touches state. - Read project overlays and affected source files needed to define the behavior boundary.
Tool Contract
- May inspect affected source, styles, configs, and project overlays.
- May run existing lint, typecheck, build, or preview commands relevant to the refactor.
- May use Browser or Playwright MCP when rendered output must be checked.
- Activate
openai_platform_docsonly when current OpenAI API or ChatGPT Apps SDK behavior affects the preserved contract. - Must not install packages, add testing workflows, change build tooling, add UI libraries, or migrate frameworks without explicit approval.
- Must not change production systems, secrets, or production data.
What ships with it
1 file 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.
- 2d ago First seen · 138 lines · 55 tokens per session scan A 47d5754a6648
frontend-refactor-surgeon is a skill published in the GitHub repository ytvee-dev/webdev-agent-kit (5 stars, last pushed 1mo ago), licensed Apache-2.0. It adds 55 tokens to every session and 1,406 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
playwright-cli
Automates browser interactions for testing and validating your own web applications using playwright-cli. Use when you need terminal-first browser control for navigation, form filling, screenshots, tracing, bound browser sessions, debugging, or generating Playwright test code. Only use against applications you own or…
harness-design
Quality harness for design-dna Phase 3 output with browser-based visual verification. After an agent generates a design from a Design DNA JSON + user content, this skill acts as a verification and scoring layer — collecting all page resources via console/network inspection, performing section-by-section screenshot…
tester
Run end-to-end web quality audits with Playwright and Lighthouse using existing project scripts first. Use when the user says /tester, e2e test, smoke test, Playwright audit, Lighthouse audit, performance audit, accessibility audit, dark mode audit, mobile audit, or asks for 100/100 Lighthouse improvement guidance.
playwright-ci
Production-ready CI/CD configurations for Playwright — GitHub Actions, GitLab CI, CircleCI, Azure DevOps, Jenkins, Docker, parallel sharding, reporting, code coverage, and global setup/teardown.
playwright-pom
Page Object Model patterns for Playwright — when to use POM, how to structure page objects, and when fixtures or helpers are a better fit.
playwright-migration
Step-by-step migration guides for moving to Playwright from Cypress or Selenium/WebDriver — command mappings, architecture changes, and incremental adoption strategies.