From aj-geddes-useful-ai-prompts-4
Debugs client-side web issues using browser DevTools: JavaScript errors, styling/layout problems, performance bottlenecks, network requests, and user interactions.
npx claudepluginhub joshuarweaver/cascade-code-languages-misc-1 --plugin aj-geddes-useful-ai-prompts-4This skill uses the workspace's default tool permissions.
- [Overview](#overview)
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
Browser debugging tools help identify and fix client-side issues including JavaScript errors, layout problems, and performance issues.
Minimal working example:
Chrome DevTools Tabs:
Elements/Inspector:
- Inspect HTML structure
- Edit HTML/CSS in real-time
- View computed styles
- Check accessibility tree
- Modify DOM
Console:
- View JavaScript errors
- Execute JavaScript
- View console logs
- Monitor messages
- Clear errors
Sources/Debugger:
- Set breakpoints
- Step through code
- Watch variables
- Call stack view
- Conditional breakpoints
Network:
- View all requests
// ... (see reference guides for full implementation)
Detailed implementations in the references/ directory:
| Guide | Contents |
|---|---|
| Browser DevTools Fundamentals | Browser DevTools Fundamentals |
| Debugging Techniques | Debugging Techniques |
| Common Issues & Solutions | Common Issues & Solutions |
| Performance Debugging | Performance Debugging |