skills.rest
Auto-one-Family
Auto-one-FamilyCOMMUNITY
Explore all skills by this author →
GitHub

frontend-debug

Debug Vue 3 frontend failures and WebSocket authentication issues in Vite projects.

Updated Aug 23, 2026
Search Tags:#vite#vue3#websocket#auth#pinia#axios#frontend-debug
One-click install
npx skills add https://github.com/Auto-one-Family/Automation-One --skill frontend-debug-auto-one-family
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-debug
Source: https://github.com/Auto-one-Family/Automation-One/tree/main/.claude/skills/frontend-debug
Command: npx skills add https://github.com/Auto-one-Family/Automation-One --skill frontend-debug-auto-one-family

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a compact, actionable knowledge base to find and fix frontend failures in a Vite + Vue 3 TypeScript application that uses Pinia, Axios, and a WebSocket service, reducing time to resolution for token refresh loops, missing event handlers, build/type errors, and runtime exceptions.

Core Features & Use Cases

  • WebSocket debugging: catalog of 26+ event types, reconnect/backoff rules, message queue limits, and subscription cleanup guidance to resolve missing or duplicated event handling.
  • API & Auth troubleshooting: Axios interceptors, 401 refresh flow, infinite-loop guard, and retry/queue semantics for diagnosing token refresh and auth-related failures.
  • State & UI flows: overview of 13 Pinia stores (esp + shared), component hierarchy and two-level dashboard navigation to trace state-origin issues and UI update regressions.
  • Build, test, and run: Vite build chain and TypeScript strict settings, Vitest unit tests and Playwright E2E flows, and Docker dev container practices for reproducible debugging.
  • Use case: reproduce a token-refresh race that causes repeated WebSocket reconnects by running the frontend in the Docker dev container, triggering the auth refresh path, and capturing Playwright traces and logs for the failing flows.

Quick Start

Start the frontend dev server, reproduce the failing WebSocket or token-refresh scenario, and collect logs, Playwright traces, and console errors to pinpoint the root cause.

Frequently Asked Questions about frontend-debug

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

FAQPage Schema
How do I fix an infinite token refresh loop in a Vue 3 and Axios application?▼

To fix an infinite token refresh loop in a Vue 3 and Axios application, diagnose the Axios interceptors and 401 refresh flow to apply infinite-loop guards and retry queue semantics. This resolves repeated WebSocket reconnects and authentication failures.

Why does my WebSocket service keep dropping events in a Vite and Vue 3 project?▼

WebSocket services drop events in Vite and Vue 3 projects due to missing event handlers or subscription cleanup failures. Debug by checking the 26+ event types, reconnect backoff rules, and message queue limits to resolve duplicated or missing event handling.

How do I trace state-origin UI regressions across multiple Pinia stores?▼

Trace state-origin UI regressions across Pinia stores by mapping the 13 Pinia store states, component hierarchy, and two-level dashboard navigation. This process isolates state mutation issues causing UI update regressions in Vue 3.

Can I use Docker dev containers and Playwright to reproduce Vue 3 runtime errors?▼

You can use Docker dev containers and Playwright to reproduce Vue 3 runtime errors by running the frontend, triggering the failing WebSocket or auth refresh path, and capturing Playwright traces and console logs to pinpoint the root cause.

What is the best way to debug Vite build and TypeScript strict mode errors?▼

The best way to debug Vite build and TypeScript strict mode errors is to analyze the Vite build chain configurations and TypeScript strict settings. This resolves build failures and type errors before running Vitest unit tests.

Related Skills

Explore More Software Engineering Skills→
BurburtonBurburton

vue-setup

Configure Vue 3 + Vite + TypeScript projects with Composition API, Pinia, and Vue Router.

Community
Advanced
eventua11yeventua11y
1

writing-tests

Automate E2E and unit test setup and execution with Playwright and Vitest.

Official
Intermediate
dart-langdart-lang
428

dart-fix-runtime-errors

Trace Dart runtime stack traces to failing lines and apply fixes.

Official
Advanced
ncksolncksol
1

chrome-devtools

Control and inspect live Chrome via DevTools Protocol for automation, debugging, and profiling.

Community
Advanced