Skills
.Work. You
Rest

debug-frontend

Official

End-to-end Nuxt 3 admin UI debugging made simple.

Software Engineering#playwright#frontend debugging#console errors#nuxt 3#api tracing#admin interface#ui troubleshooting
Authorbbvch-ai
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill eliminates the guesswork of troubleshooting broken Nuxt 3 admin interfaces, saving developers hours of manual debugging when dealing with rendering issues, console errors, or failing UI API calls.

Core Features & Use Cases

  • Visual & Diagnostic Capture: Uses Playwright MCP to take screenshots, grab DOM snapshots, collect console errors, and trace network requests to fully capture the UI's broken state.
  • Guided Issue Diagnosis: Walks through common frontend failure patterns including auth redirects, missing i18n translations, stale query cache, and unresponsive components, with direct links to relevant source files.
  • Use Case: If your admin dashboard shows a blank page or the agents table fails to load data, this skill walks you through capturing diagnostic evidence and tracing the root cause to the exact component or API endpoint.

Quick Start

Use the debug-frontend skill to investigate why the admin roles page is showing a blank table after your latest code change.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: debug-frontend
Download link: https://github.com/bbvch-ai/aihub-core/archive/main.zip#debug-frontend

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 537,000+ vetted skills library on demand.