frontend-debug

Diagnose and fix vanilla JS console, rendering, routing, and WebSocket issues in SPAs.

4|Updated Dec 5, 2025

Search Tags:#debugging #frontend #xss #i18n #spa #websocket #vanilla-js

Ready to run

npx skills add https://github.com/aaaa47080/stock_agent --skill frontend-debug-aaaa47080

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: frontend-debug
Source: https://github.com/aaaa47080/stock_agent/tree/main/.opencode/skills/frontend-debug
Command: npx skills add https://github.com/aaaa47080/stock_agent --skill frontend-debug-aaaa47080

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend debugging often involves chasing console errors, rendering glitches, and navigation issues across vanilla JS apps. This Skill provides structured patterns and workflows to quickly identify and fix defects in plain JS without frameworks.

Core Features & Use Cases

Console error diagnosis and resolution patterns for vanilla JS.
SPA navigation and dynamic content debugging using the SPA router and module loading patterns.
i18n and WebSocket issue troubleshooting, plus XSS risk assessment and prevention.
Real-world workflow templates for debugging UI components and dashboards.

Quick Start

Reproduce the issue in the browser and follow the debugging workflow to identify root causes and implement fixes.

Frequently Asked Questions about frontend-debug

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I debug vanilla JS issues in an SPA without using frameworks?▼

Debug vanilla JS SPA issues by applying structured patterns to diagnose console errors, routing glitches, and DOM interactions without relying on external frameworks.

What is the best way to troubleshoot WebSocket streams and i18n in vanilla JavaScript?▼

Troubleshoot WebSocket streams and i18n in vanilla JavaScript by following specific debugging workflows designed to identify root causes in real-time data and multi-language rendering modules.

Can I use these debugging patterns for complex dashboards with multiple modules?▼

Yes, you can use these debugging patterns for complex dashboards, as they are specifically designed to resolve rendering and navigation issues across pages with multiple vanilla JS modules.

How do I identify and prevent XSS risks when debugging vanilla JavaScript frontend code?▼

Identify and prevent XSS risks during frontend debugging by applying built-in security assessment patterns that evaluate DOM interactions and dynamic content rendering for vulnerabilities.

Why does my vanilla JS SPA router fail during dynamic content navigation?▼

SPA router failures during dynamic content navigation often stem from module loading errors or rendering glitches, which you can resolve using structured console and routing debugging workflows.

Do I need any external libraries to use these frontend debugging workflows?▼

No, you do not need external libraries, as these debugging workflows rely entirely on vanilla JavaScript utilities and built-in patterns without requiring any additional dependencies.