skills.rest
aaaa47080
aaaa47080COMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/aaaa47080/stock_agent --skill frontend-debug-aaaa47080
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
pacphipacphi
14

Chrome DevTools

Debug web pages via Chrome DevTools MCP with performance, network, and DOM inspection.

Community
Advanced
AJV009AJV009
1

drupal-contrib-mgmt

Coordinate patch-based upgrades for Drupal contributed modules with Composer and validate compatibility before deployment.

Community
Advanced
AIDotNetAIDotNet
84

code-review

Analyze code for bugs, security vulnerabilities, and code smells.

Official
Intermediate
anouar1991anouar1991
1

state-inspector

Detect frontend frameworks and snapshot component state for diffing.

Community
Advanced