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 LerianStudio/ring --skill planning-frontend-refactorgit clone --depth 1 https://github.com/LerianStudio/ringWrote 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/lerianstudio/ring/planning-frontend-refactor)<a href="https://agentmods.dev/skills/lerianstudio/ring/planning-frontend-refactor"><img src="https://agentmods.dev/badge/skills/lerianstudio/ring/planning-frontend-refactor.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.00100 | $0.01213 |
| Opus 5 | $0.00050 | $0.00607 |
| Sonnet 5 | $0.00020 | $0.00243 |
| Haiku 4.5 | $0.00010 | $0.00121 |
Grade C, and why
ring:planning-frontend-refactor scanned grade C with 1 finding 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 4d 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.
Hidden instructionshighPrompt injection
Directives inside HTML comments, invisible characters or bidirectional overrides are read by the model and not by the person reviewing the file.
<!-- Replace @your-org/design-system with your organization's design system package. --> How it starts
The opening of the file, as written. The whole thing — 135 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Dev Refactor Frontend
When to use
- User wants to refactor existing frontend project to follow standards
- Legacy React/Next.js codebase needs modernization
- Frontend project audit requested
Skip when
- Greenfield project → Use /ring:planning-small-features or /ring:planning-large-features instead
- Single file fix → Use ring:running-dev-cycle-frontend directly
- Backend-only project → Use ring:planning-backend-refactor instead
Sequence
Runs before: ring:running-dev-cycle-frontend
Analyzes existing frontend codebase against Ring/Lerian standards and generates refactoring tasks for ring:running-dev-cycle-frontend.
You orchestrate. Agents analyze. NEVER use Bash/Grep/Read to analyze code — dispatch agents.
Gap Principle
Every divergence from Ring standards = a mandatory gap. No exceptions.
All divergences → FINDING-XXX → REFACTOR-XXX task → ring:running-dev-cycle-frontend input.
Architecture Pattern Applicability
| Project Type | Apply Frontend Standards? |
|---|---|
| Full React/Next.js App | ✅ YES — all frontend.md sections |
| Design System Library | ✅ YES |
| Landing page / static | ⚡ PARTIAL — directory + styling only |
| Utility / config package | ❌ NO |
Standards Loading
Pre-fetch before any step:
WebFetch: https://raw.githubusercontent.com/LerianStudio/ring/main/CLAUDE.md
WebFetch: https://raw.githubusercontent.com/LerianStudio/ring/main/dev-team/docs/standards/frontend.md
WebFetch: testing-accessibility.md, testing-visual.md, testing-e2e.md, testing-performance.md
STOP if any fetch fails.
Execution Steps
Step 1: Validate Prerequisites
- Check
docs/PROJECT_RULES.mdexists → STOP if missing - Detect UI library mode: read
package.json@your-org/design-system→design-system- Otherwise →
fallback-only
- If
go.modand no React → STOP: usering:planning-backend-refactor
Step 2: Generate Codebase Report
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.
- 4d ago First seen · 135 lines · 100 tokens per session scan C 84c5709d91c2
ring:planning-frontend-refactor is a skill published in the GitHub repository LerianStudio/ring (211 stars, last pushed 19d ago), licensed Apache-2.0. It adds 100 tokens to every session and 1,213 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it C with 1 finding (hidden instructions). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-09-03.
Other skills, from other repositories
react-web
React web development with hooks, React Query, Zustand.
react-native
React Native mobile patterns, platform-specific code.
spotpatch
A development workflow for React that connects a selected page element to its JSX or TSX source code and gathers context for review.
recipe-front-review
Reviews completed frontend implementation for governing-source compliance, scope economy, repository quality, and security, and applies user-approved React corrections.
frappe-frontend
Frappe frontend guidance for Vue and React, including desk pages, www pages, frappe-ui, Doppio-style frontends, client scripts, and external SPA integrations. Use when building or reviewing Frappe UI work.
ui-scaffold
Scaffold a new Blazor page with proper layering — service interface, page component (markup + code-behind split), DTO, validation, error handling, and bUnit test. Enforces architecture-principles + blazor-fluent-ui conventions. Use when adding any new UI surface to a Blazor Server app.