Frontend Doctor

What This Skill Does

The Frontend Doctor is a specialized AI diagnostic tool designed to act as your senior frontend engineer and lead debugger. It streamlines the troubleshooting process for complex web development issues by leveraging a structured diagnostic protocol. Rather than guessing at solutions, the skill helps you methodically isolate errors ranging from silent white screens to intricate hydration mismatches in React or Vue applications. It supports developers working across the modern stack, including Vite, Webpack, Next.js, and Nuxt, by helping analyze console logs, network traffic, and build configurations.

Installation

To integrate this skill into your OpenClaw environment, execute the following command in your terminal:

clawhub install openclaw/skills/skills/727155455/frontend-doctor

Use Cases

• Debugging Blank Pages: When your application renders nothing, this skill guides you through checking your root DOM node, bundle loading, and environment variable injection.
• Resolving Hydration Mismatches: If your React or Vue app displays inconsistent content between server-rendered HTML and the client-side bundle, the skill provides steps to reconcile the state.
• CSS and Layout Remediation: If your flexbox or grid layouts are breaking across different viewports, the skill helps identify z-index conflicts or overflow issues.
• Browser Extension Troubleshooting: When a browser extension icon fails to trigger a popup, the skill helps inspect background scripts and manifest configurations.

Example Prompts

1. "My React app is showing a blank screen after deployment. I checked the network tab and the main.js file is returning a 200, but there's an 'Uncaught TypeError' in the console. Help me diagnose this."
2. "I am getting a hydration mismatch error in Next.js. The server-rendered content differs from the client-side content. How can I debug which component is causing the sync issue?"
3. "My CSS grid layout breaks specifically on Safari mobile when scrolling. Here is my snippet; can you check if there's an issue with the viewport units or overflow settings?"

Tips & Limitations

• Provide Context: The quality of the diagnosis is directly proportional to the context you provide. Always include framework versions, error stack traces, and relevant code snippets.
• Safety: This skill performs analysis on code provided by you. Avoid pasting sensitive API keys or credentials into the chat session.
• Limitations: While the Frontend Doctor is excellent at identifying logic and configuration errors, it cannot access your private local environment directly without the proper hooks or data being pasted into the conversation.