Build-time (typecheck/bundle/lint) vs runtime (browser) vs network (API/CORS).
Find the root location
Trace to the first meaningful stack frame in the app code.
Identify the minimal fix
Fix the root cause (typing, nullability, missing import, hook rule violation).
Apply the change
Keep diffs small and localized.
Verify
Re-run the build/typecheck.
Re-test the UI flow that triggered the issue.
Harden (only if justified)
Add defensive guards only where the error occurs (avoid broad "optional chaining everywhere").
Outputs
Fixed code change (minimal scope)
Verification notes (what command/run confirmed the fix)
Safety Notes
Avoid "fixing" by weakening types (any, @ts-ignore) unless explicitly approved.
Preserve existing behavior; do not refactor unrelated areas.
Related Skills
frontend-dev-guidelines
error-tracking (in repo/)
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
1---2name: willyu1007-ai-first-template-frontend-error-fixer3description: Frontend Error Fixer4---56# Frontend Error Fixer78This workflow diagnoses and fixes frontend errors (build-time or runtime) with minimal, targeted changes.910---1112## Purpose & Scope1314Use this workflow when you see:15- TypeScript compile errors16- Lint errors (if applicable)17- Browser runtime errors (console, error boundaries)18- Network/API integration errors surfaced in the UI1920Out of scope:21- Large refactors (use refactoring workflows)2223---2425## Inputs & Preconditions2627Inputs:28- Full error message + stack trace29- File/line locations (if available)30- Steps to reproduce (if runtime)3132Preconditions:33- Confirm the error is reproducible.34- Identify whether it is build-time or runtime.3536---3738## Steps39401. **Classify the error**41 - Build-time (typecheck/bundle/lint) vs runtime (browser) vs network (API/CORS).422. **Find the root location**43 - Trace to the first meaningful stack frame in the app code.443. **Identify the minimal fix**45 - Fix the root cause (typing, nullability, missing import, hook rule violation).464. **Apply the change**47 - Keep diffs small and localized.485. **Verify**49 - Re-run the build/typecheck.50 - Re-test the UI flow that triggered the issue.516. **Harden (only if justified)**52 - Add defensive guards only where the error occurs (avoid broad "optional chaining everywhere").5354---5556## Outputs5758- Fixed code change (minimal scope)59- Verification notes (what command/run confirmed the fix)6061---6263## Safety Notes6465- Avoid "fixing" by weakening types (`any`, `@ts-ignore`) unless explicitly approved.66- Preserve existing behavior; do not refactor unrelated areas.6768---6970## Related Skills7172- `frontend-dev-guidelines`73- `error-tracking` (in repo/)7475---76> Converted and distributed by [TomeVault](https://tomevault.io/claim/willyu1007) — claim your Tome and manage your conversions.77<!-- tomevault:4.0:skill_md:2026-04-14 -->
Run npx skillmds@latest add tomevault-io/willyu1007-ai-first-template-frontend-error-fixer in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Frontend Error Fixer It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.
tomevault-io