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 OutlineDriven/odin-claude-plugin --skill frontend-fidelity-rebuildgit clone --depth 1 https://github.com/OutlineDriven/odin-claude-pluginWrote 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/outlinedriven/odin-claude-plugin/frontend-fidelity-rebuild)<a href="https://agentmods.dev/skills/outlinedriven/odin-claude-plugin/frontend-fidelity-rebuild"><img src="https://agentmods.dev/badge/skills/outlinedriven/odin-claude-plugin/frontend-fidelity-rebuild/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/outlinedriven/odin-claude-plugin/frontend-fidelity-rebuild"><img src="https://agentmods.dev/badge/skills/outlinedriven/odin-claude-plugin/frontend-fidelity-rebuild.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00038 | $0.00985 |
| Opus 5 | $0.00019 | $0.00492 |
| Sonnet 5 | $0.00008 | $0.00197 |
| Haiku 4.5 | $0.00004 | $0.00098 |
Grade A, and why
frontend-fidelity-rebuild 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 — 48 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Frontend fidelity rebuild
Contract
| Field | Bound contract |
|---|---|
| Trigger | An authorized reference surface needs a clean-room frontend reconstruction across static, motion, and responsive fidelity. |
| Authority | Human-gated: asks for IP authorization approval via one harness ask/question call before the run starts; otherwise reversible local: writes only named local reconstruction artifacts; rollback is version control. No remote mutation. Prose consent, invocation consent, prior-run consent, and post-start discovery do not approve an effect. |
| Side effect | Authorized frontend reconstruction across static, motion, and responsive fidelity. |
| Done | The clean-room reconstruction passes all three fidelity gates with comparison evidence. |
| Stop | Authorization absent; capture blocked; stagnation. Bound: approved reference, viewports, timelines, tolerances, round cap. |
Inputs
- IP authorization (required): start approval confirming the reconstruction is authorized.
- Reference surface (required): the URL, file, or design artifact to reconstruct from.
- Viewport set (required): the screen sizes at which fidelity is measured (for example, 375px mobile, 768px tablet, 1440px desktop). Named before any reconstruction.
- Timeline set (required): the animation or interaction sequences to measure for motion fidelity (for example, page load, hover transitions, scroll effects). Named before any reconstruction.
- Comparison tolerances (required): the per-gate thresholds that define a pass. Static: pixel difference percentage or visual regression threshold. Motion: timing deviation in ms and property delta. Responsive: layout shift at each viewport breakpoint.
- Round cap (required): the maximum number of reconstruction and measurement cycles allowed before the run ends at its bound. Declared before any reconstruction.
Procedure
- Collect start approval with one harness ask/question call. State the reference surface and the authorized scope. End the run on scope drift. Done when: approval is collected or the run ends on absent authorization.
- Bind the viewports, timelines, tolerances, and round cap. Freeze all before any reconstruction. Done when: the viewport set, timeline set, per-gate tolerances, and round cap are named and frozen.
- Capture the reference surface. For each viewport in the set, capture a full-page screenshot and the rendered DOM. For each timeline in the set, capture a video or frame sequence of the animation or interaction. Record the capture tool, browser, and version. Done when: reference captures exist for every viewport and timeline.
- Reconstruct the surface in a clean-room implementation. Build from the captures, not from the reference source code. Match the static layout, the motion timing, and the responsive behavior. Done when: the reconstruction renders at every viewport and plays every timeline.
- Measure fidelity against the reference. For each viewport, compare the reconstruction screenshot to the reference screenshot using a visual regression tool. Record the pixel difference percentage. For each timeline, compare the reconstruction motion to the reference motion. Record timing deviation and property delta. For each viewport transition, compare the layout shift. Record whether each gate passes its tolerance. Done when: all three fidelity gates have comparison results.
- Stop at success (all three gates pass their tolerances), any non-success terminal, or the bound (round cap reached). Done when: a terminal class is reached and recorded.
- Persist per profiles.persistence.P1 (durable_location
.outline/loops/frontend-fidelity-rebuild/<run_id>/when durable). Emitreceipt.jsonbefore return. Done when: the receipt is written with per-gate comparison evidence, tolerances, and the terminal class.
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.
- 5d ago First seen · 48 lines · 38 tokens per session scan A f076531ae602
frontend-fidelity-rebuild is a skill published in the GitHub repository OutlineDriven/odin-claude-plugin (35 stars, last pushed 2d ago), licensed Apache-2.0. It adds 38 tokens to every session and 985 once invoked, about $0.0002 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-09-06.
Other skills, from other repositories
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.
local-ai-agents
Build local-first AI agents that run entirely on a developer workstation with Microsoft Foundry Local and Qwen function-calling models. Covers Small Language Models (SLMs), the OpenAI-compatible local endpoint, sandboxed local tools, local RAG with Chroma, local MCP servers, hybrid cloud/local routing, and the…
next-cache-components-adoption
Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the cacheComponents flag, work through a flood of blocking-prerender / instant validation errors, run the cache-components-instant-false codemod, or…
insight-error-page
Write or audit an insight-kind error page for the Next.js dev overlay. Use when creating a new errors/ .mdx page, auditing an existing one, or checking that a page matches the framework fix cards. Covers page structure, title alignment, FixCard cards with Copy prompt button, code snippets, terminology verification…
next-cache-components-optimizer
Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then…
next-partial-prefetching-adoption
Turn on Partial Prefetching in a Next.js app and work through the insights it surfaces. Use when the user wants to enable or adopt Partial Prefetching, flip the partialPrefetching flag, opt routes in with export const prefetch = 'partial', audit Link prefetch={true} behavior, preserve existing prefetched UI with…