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/iwritec0de/app-dev/js-debuggingnpx skills add iwritec0de/app-dev --skill js-debugginggit clone --depth 1 https://github.com/iwritec0de/app-devWhat 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.00120 | $0.05425 |
| Opus 5 | $0.00060 | $0.02712 |
| Sonnet 5 | $0.00024 | $0.01085 |
| Haiku 4.5 | $0.00012 | $0.00543 |
Grade A, and why
js-debugging 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 yesterday.
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 — 749 lines — stays where its author put it; the contents beside it link to each section on GitHub.
JavaScript/TypeScript Debugging Skill for Next.js Applications
Systematic debugging methodology for JavaScript, TypeScript, and Next.js applications. Follows four phases: root cause investigation, pattern analysis, hypothesis testing, and implementation.
Critical Rules
- No fixes without root cause. Never apply a fix unless you understand WHY the error occurs. Guessing wastes time and introduces new bugs.
- Read error messages completely. The full stack trace, including the "Caused by" chain and any nested errors. Do not stop at the first line.
- Check BOTH browser console AND server logs. Next.js runs code on both sides. A client error may originate server-side and vice versa.
- One change at a time. Make a single change, verify the result, then proceed. Batching changes makes it impossible to know what worked.
- Always create a failing test before fixing. If you cannot reproduce it in a test, you do not understand it well enough to fix it.
Phase 1: Root Cause Investigation (JS/TS-Specific)
Reading JavaScript Stack Traces
Stack traces are read top-to-bottom. The top frame is where the error was thrown; the bottom is where execution began.
TypeError: Cannot read properties of undefined (reading 'map')
at UserList (src/components/UserList.tsx:14:23) ← Error thrown here
at renderWithHooks (react-dom.development.js:149)
at mountIndeterminateComponent (react-dom.development.js:258)
at beginWork (react-dom.development.js:312)
Key steps:
- Look at the first frame that references YOUR code (not library code).
- Check the file, line number, and column number. With source maps enabled, these map to your original TypeScript.
- For async stack traces, look for
asyncframes and the... X more framessections — these often contain the real origin.
Checking Browser DevTools Console
Open DevTools (Cmd+Option+I) and check the Console tab:
- Red errors are runtime exceptions
- Yellow warnings often indicate React-specific issues (key prop, deprecated APIs)
- Check the "Preserve log" checkbox to retain errors across navigations
- Filter by "Errors" to cut through noise
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.
- yesterday First seen · 749 lines · 120 tokens per session scan A 687b5c7bcf4e
js-debugging is a skill published in the GitHub repository iwritec0de/app-dev (3 stars, last pushed 4mo ago), licensed MIT. It adds 120 tokens to every session and 5,425 once invoked, about $0.0006 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
dummy-dataset
Generate realistic dummy datasets for testing with customizable columns, constraints, and output formats (CSV, JSON, SQL, Python script). Use when creating test data, building mock datasets, or generating sample data for development and demos.
outcome-roadmap
Transform an output-focused roadmap into an outcome-focused one that communicates strategic intent. Rewrites initiatives as outcome statements reflecting user and business impacts. Use when shifting to outcome roadmaps, making a roadmap more strategic, or rewriting feature lists as outcomes.
release-notes
Generate user-facing release notes from tickets, PRDs, or changelogs. Creates clear, engaging summaries organized by category (new features, improvements, fixes). Use when writing release notes, creating changelogs, announcing product updates, or summarizing what shipped.
retro
Facilitate a structured sprint retrospective — what went well, what didn't, and prioritized action items with owners and deadlines. Use when running a retrospective, reflecting on a sprint, creating action items from team feedback, or learning how to run effective retros.
shipping-artifacts
The durable documentation set that makes an AI-built (vibe-coded) app reviewable before shipping. A small core every app needs — architecture, user/permission flows, permissions, variables/secrets, and a test-coverage map — plus conditional docs added only when they apply: emails, scheduled work, SEO, and embedded…
stakeholder-map
Build a stakeholder map using a power/interest grid, identify communication strategies per quadrant, and generate a communication plan. Use when managing stakeholders, preparing for a launch, aligning cross-functional teams, or planning stakeholder engagement.