Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
Detects and fixes missing React/TSX imports, undefined components, and bundler runtime errors in a WASM-based SPA preview pipeline. It parses bundler logs for ReferenceErrors and safety-net messages, classifies each missing symbol by type, and generates surgical source-level patches to the affected files.
It patches import errors at the source rather than at runtime, so stubs don't accumulate and real missing dependencies stay visible.
When to use it
- Fixing ReferenceError: X is not defined thrown in a WASM browser preview
- Resolving safety-net stubs being injected for undeclared React components
- Auto-completing lucide-react icon imports after editing a TSX file
- Correcting bare specifier errors for react/jsx-runtime in SPA builds
- Catching missing section component imports before the preview iframe loads
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: My WASM preview throws ReferenceError: Mail is not defined and safety-net stubs are injected for Card and Button
- 1Parse bundler logs for ReferenceError messages and safety-net stub lists
- 2Classify Mail as a lucide-react icon and Card, Button as UI components
- 3Inspect current file imports to locate existing lucide-react and UI import lines
- 4Generate patches that extend existing import statements with the missing symbols
- 5Return patches with a plain-language summary and a list of any unresolvable issues
Patch applied: Mail added to lucide-react import line; Card and Button added to @/components/ui import; preview loads without runtime stubs