Skip to content

/debug-frontend

Systematic 5-step debugging flow for Next.js 15 + React 19 + TypeScript apps. Load when a UI bug is reported, hydration error appears, Server Action returns wrong data, or cache invalidation fails. Forces layer isolation (server vs client, action vs component, cache vs render)

shell
$ npx -y skills add yerdaulet-damir/vibe-coding-rules --skill debug-frontend --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.
  • You can call itInvoke it directly when you want it.
  • Slash command/debug-frontend
How auto-invocation works

Context preview

The summary Claude sees to decide when to auto-load this skill.

Systematic 5-step debugging flow for Next.js 15 + React 19 + TypeScript apps. Load when a UI bug is reported, hydration error appears, Server Action returns wrong data, or cache invalidation fails. Forces layer isolation (server vs client, action vs component, cache vs render)
Ships withvibe-coding-rules

54 production architecture principles your AI coding agent (Claude Code, Cursor) follows automatically. Drop-in CLAUDE.md, .cursor/rules/, and .claude/skills/ for FastAPI, Next.js 15, and Go 1.22+. MIT.

Get the whole plugin, auto-invoked
Stats
8
Stars
0
Views
0
Forks
Maintained
Maintenance
TypeScript
Language
MIT
License
2mo ago
Last commit
3mo ago
Created

Repo: yerdaulet-damir/vibe-coding-rules

Other skills on vibe-coding-rules.