A senior frontend engineering assistant designed to diagnose and fix critical UI, runtime, and layout errors in modern web applications.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install frontend-doctor
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install frontend-doctor using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Frontend Doctor?
Frontend Doctor serves as an expert diagnostic layer for web developers, providing senior-level insights into the most frustrating frontend bugs. It specializes in resolving complex issues like the infamous white screen of death, React or Vue hydration mismatches, and browser extension failures. By integrating this skill into your workflow via Openclaw Skills, you gain access to a structured protocol that moves from symptom to solution with high technical precision.
The skill analyzes your framework context, build tools, and error logs to provide actionable code fixes. Whether you are dealing with legacy Webpack configurations or modern Vite-based SPAs, it offers tailored solutions for resource loading failures, CSP violations, and CSS layout misalignment, ensuring your production builds remain stable and performant.
Frontend Doctor Use Cases
- Troubleshooting white screen errors in production builds for Next.js and Vite apps.
- Resolving React or Vue hydration mismatches where server and client HTML do not align.
- Fixing CORS and Content Security Policy (CSP) issues when loading fonts or scripts from a CDN.
- Debugging Chrome Extension Manifest V3 popups that fail to render or display blank screens.
- Correcting flexbox overflow, z-index stacking context, and mobile viewport height issues.
How Frontend Doctor Works
- The user provides the symptom, framework (e.g., React, Vue), and environment logs to the agent.
- The skill performs a context-gathering phase to identify build tools, browser versions, and network status.
- A targeted diagnostic checklist is triggered based on the problem type, such as checking for missing root elements or async race conditions.
- The agent identifies the root cause by cross-referencing error patterns with known framework behaviors and common pitfalls.
- A minimal, concrete code fix is generated along with verification steps to ensure the problem is resolved.
- Prevention tips are provided to help the developer avoid similar issues in future Openclaw Skills sessions.
Frontend Doctor Setup
To use this diagnostic tool, ensure you have Node.js installed as it is required for local environment checks. Add the skill to your agent configuration using the following steps:
# Verify your environment
node --version
# Enable the skill in your project
openclaw add frontend-doctor
Frontend Doctor Data Schema & Taxonomy
Frontend Doctor organizes its diagnostic data through a structured taxonomy of error categories and metadata triggers. The following table outlines how the skill classifies frontend issues:
| Data Type | Key Attributes | Diagnostic Focus |
|---|---|---|
| Runtime | Stack traces, JS exceptions | Logic errors and uncaught promises |
| Network | Status codes, CORS, CSP | Asset loading and security headers |
| Hydration | Server/Client HTML diff | SSR and SSG mismatch detection |
| Layout | Computed styles, box model | CSS Flexbox, Grid, and Z-index issues |
Frontend Doctor Advanced Features
- Multi-framework support covering React, Vue, Svelte, Nuxt, and Next.js.
- Deep-dive diagnostic checklists for Browser Extension (MV3) architecture.
- Automated generation of React Error Boundaries and Vue errorCaptured hooks.
- Intelligent detection of Vite and Webpack publicPath or assetPrefix misconfigurations.
- Dynamic viewport height (dvh) and mobile-specific CSS troubleshooting patterns.
- Seamless integration with the broader library of Openclaw Skills for full-stack debugging.
SKILL.md
Loading
Related Openclaw Skills
Marcus Investment Analyst
An AI-driven A-share investment analyst utilizing Chan Theory, MACD, and RSI indicators for precise technical analysis and strategy backtesting.
Pastoral Prayer
A specialized tool for generating dignified, theologically sound pastoral prayers for diverse ministry settings.
Lingji Operation Ticket Analysis Skill
An automated data analysis tool for Lingji operation tickets that generates professional PDF reports and evaluates maintenance efficiency.
ClawMemory Hub AI Skill
A GitHub-style version control platform for AI memories that enables agents to save, search, and fork conversation snapshots across sessions.
Database Designer
An expert-level AI skill for designing, optimizing, and migrating scalable database schemas with zero-downtime strategies.
RAG Architect
A comprehensive toolkit for building, scaling, and optimizing production-grade Retrieval-Augmented Generation pipelines.
Featured*
