frontend-doctorDiagnose and fix common frontend issues — white screen, JS errors, resource loading failures, React/Vue hydration, browser extension popup, and CSS layout bugs.
Install via ClawdBot CLI:
clawdbot install 727155455/frontend-doctorGrade Good — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://github.com/openclaw/clawhubAudited Apr 17, 2026 · audit v1.0
Generated Mar 21, 2026
An online retailer's product page shows a blank screen after a recent React update, causing lost sales. The issue is likely due to a JS bundle loading failure or missing root element in the HTML, requiring diagnosis of build tools and console errors.
A business analytics dashboard built with Vue and Vite throws runtime JS errors post-deployment, disrupting user workflows. Common causes include undefined property access or import path issues, needing stack trace analysis and optional chaining fixes.
A media company's news site fails to load fonts and images on mobile browsers, leading to poor UX. This is often due to CORS misconfigurations or incorrect publicPath settings in the build, requiring network tab checks and header adjustments.
A marketing website using Next.js experiences hydration mismatches after server-side rendering, causing client-side errors. The root cause may be browser-only API usage in components, necessitating dynamic imports or useEffect wrappers.
A productivity browser extension's popup does not appear when clicked, hindering user access. This could stem from manifest.json misconfigurations or CSP blocking scripts, requiring validation of popup declarations and inline script handling.
Offer on-demand debugging sessions for frontend issues, charging hourly or per-fix rates. This targets small businesses and startups lacking in-house expertise, with revenue from direct client payments.
Develop a cloud-based tool that scans frontend codebases for common issues like white screens or hydration errors, providing automated reports. Monetize through subscription tiers for teams and enterprises.
Conduct workshops and online courses teaching developers to diagnose and fix frontend problems using the skill's protocols. Revenue comes from course fees, corporate training packages, and certification programs.
💬 Integration Tip
Integrate this skill into CI/CD pipelines to catch issues early, and use it alongside monitoring tools like Sentry for real-time error tracking.
Scored May 15, 2026
Use when building UI with shadcn/ui components, Tailwind CSS layouts, form patterns with react-hook-form and zod, theming, dark mode, sidebar layouts, mobile navigation, or any shadcn component question.
Tailwind reference tool. Use when working with tailwind in frontend contexts.
A product creation skill based on the "Bee Website Builder" Open API. It is used to create a new product under a specified site language and product group, w...
A product update skill based on the "Bee Website Builder" Open API. It is used to update an existing product under a specified site language and supports upd...
Build WCAG 2.1 AA compliant websites with semantic HTML, proper ARIA, focus management, and screen reader support. Includes color contrast (4.5:1 text), keyboard navigation, form labels, and live regions. Use when implementing accessible interfaces, fixing screen reader issues, keyboard navigation, or troubleshooting "focus outline missing", "aria-label required", "insufficient contrast".
Use when building Vue 3 applications with Composition API, Nuxt 3, or Quasar. Invoke for Pinia, TypeScript, PWA, Capacitor mobile apps, Vite configuration.