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 yerdaulet-damir/vibe-coding-rules --skill debug-frontendgit clone --depth 1 https://github.com/yerdaulet-damir/vibe-coding-rulesWrote 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/yerdaulet-damir/vibe-coding-rules/debug-frontend)<a href="https://agentmods.dev/skills/yerdaulet-damir/vibe-coding-rules/debug-frontend"><img src="https://agentmods.dev/badge/skills/yerdaulet-damir/vibe-coding-rules/debug-frontend/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/yerdaulet-damir/vibe-coding-rules/debug-frontend"><img src="https://agentmods.dev/badge/skills/yerdaulet-damir/vibe-coding-rules/debug-frontend.svg" alt="Reviewed on agentmods" width="80" 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.00080 | $0.01594 |
| Opus 5.5 | $0.00032 | $0.00638 |
| Sonnet 5.5 | $0.00016 | $0.00319 |
| Haiku 4.5 | $0.00008 | $0.00159 |
Grade A, and why
debug-frontend 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 1mo 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 — 152 lines — stays where its author put it; the contents beside it link to each section on GitHub.
debug-frontend
Stop. Do not edit any file yet. Work through these 5 steps in order.
Step 1 — Locate the layer
Next.js bugs almost always live in one of 5 layers. Identify which one before touching code.
| Symptom | Likely layer | First grep |
|---|---|---|
| 500 / runtime error in browser | Client component | grep -rn "'use client'" src/features/<domain>/components/ |
| Hydration mismatch | Server vs client divergence | grep -rn "Date()|Math.random|window\." src/features/<domain>/ |
| Wrong data after mutation | Cache invalidation | grep -rn "revalidateTag|revalidatePath" src/features/<domain>/actions.ts |
Server Action returns { error: ... } unexpectedly |
Validation or repo | grep -n "safeParse|throw" src/features/<domain>/actions.ts |
Type error / weird undefined |
Schema / types | grep -rn "z\.infer|as any|@ts-ignore" src/features/<domain>/ |
| Slow page / waterfall | Data fetch shape | grep -n "await " src/app/<route>/page.tsx (count sequential awaits) |
Pick one layer. Do not touch any other layer in this debug pass.
Step 2 — Check the 5 most common Next.js antipatterns
These cause the majority of vibe-coded bugs. Grep for each:
# Antipattern 1: 'use client' on a page or layout (forces 100% client tree)
grep -rn "'use client'" src/app/ | grep -E "(page|layout)\.tsx"
# Antipattern 2: useEffect for data fetching (race conditions, no Suspense)
grep -rn "useEffect.*fetch\|useEffect.*async" src/features/
# Antipattern 3: revalidateTag with magic string (typo = silent miss)
grep -rn "revalidateTag(['\"]" src/ # should find nothing — all should use tags.X()
# Antipattern 4: throw for business errors (breaks errors-as-values)
grep -rn "throw new Error" src/features/*/actions.ts
# Antipattern 5: drizzle-orm leaked outside repository.ts
grep -rn "from 'drizzle-orm" src/features/*/components/ src/features/*/actions.ts
| Result | Root cause | Principle |
|---|---|---|
'use client' on page/layout |
Whole tree client-rendered, no RSC benefits | C4 |
useEffect + fetch |
Race conditions, waterfall, hydration mismatch | C9 / D2 |
Magic-string revalidateTag |
Cache miss in production due to typo | D1 |
throw in Server Action |
Client gets generic error, can't show field hint | C5 |
drizzle-orm in component |
Hexagonal boundary broken | B1 / D6 |
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.
- 1mo ago First seen · 152 lines · 80 tokens per session scan A 3884ba5408d7
debug-frontend is a skill published in the GitHub repository yerdaulet-damir/vibe-coding-rules (34 stars, last pushed 5mo ago), licensed MIT. It adds 80 tokens to every session and 1,594 once invoked, about $0.0003 per session on Opus 5.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
dev-fix
Unified developer workflow for fixing bugs. Analyzes issue-tracker context, cross-checks docs/code, proposes a solution, implements the fix, verifies locally, and delivers a PR/MR.
verify-bug
Post-merge UAT verification workflow. Walks JIRA reproduce steps, performs comparative audits (Before/After), attaches evidence to JIRA, and transitions status on PASS.
cyber-triage
Evidence-led blue incident triage with authorization, runtime gates, and optional isolated lab retest handoff.
incident-hotfix
Mitigate a production incident or urgent regression first, then route to root-cause remediation and a postmortem.
common-performance-engineering
Enforce universal standards for high-performance development. Use when profiling bottlenecks, reducing latency, fixing memory leaks, improving throughput, or optimizing algorithm complexity in any language.
common-debugging
Troubleshoot systematically using the Scientific Method. Use when debugging crashes, tracing errors, diagnosing unexpected behavior, or investigating exceptions.