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/yerdaulet-damir/vibe-coding-rules/debug-frontendnpx 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.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 | $0.00080 | $0.01594 |
| Opus 5 | $0.00040 | $0.00797 |
| Sonnet 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 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.
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.
- 4d 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 (10 stars, last pushed 4mo ago), licensed MIT. It adds 80 tokens to every session and 1,594 once invoked, about $0.0004 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
nextjs-idioms
Next.js App Router, RSC, Server Actions, ISR. For React see react-idioms. For TypeScript see typescript-idioms.
react-idioms
React hooks, Suspense, Server Components, React 19 patterns. For TypeScript see typescript-idioms.
vercel-react-view-transitions
Guide for implementing smooth, native-feeling animations using React's View Transition API ( component, addTransitionType, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components…
ss-studio
Turn a product brief and optional references into three distinct creative directions, a human-selected StyleSeed interaction plan, generated image/video asset jobs, a working UI prototype, and a verified prototype-first showcase reel. Use for client concepts, app interaction exploration, trendy but coherent UI…
ss-copy
Generate UX microcopy (button labels, error messages, empty states, toasts) following a casual-but-polite voice and tone.
moai-domain-frontend
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.