wasm-spa-autofix-react-imports_skill

Overview

This skill detects and fixes missing React/TSX imports, undefined PascalCase components, and common bundler runtime errors in a WASM SPA preview pipeline. It edits source files to add or extend imports, or create minimal stubs when absolutely necessary, so the browser preview rarely triggers the runtime safety net. The goal is surgical, style-matching changes that resolve ReferenceError and bare-specifier issues without altering app behavior.

How this skill works

The skill parses bundler and preview logs to extract ReferenceError lines and safety-net notices, then cross-references the current file and known project libraries to classify each missing symbol (icon, UI component, page/section). It prefers to extend existing imports (for example adding icons to an existing lucide-react import) or add grouped imports from known barrel paths. If no reasonable source can be found and the symbol is a simple presentational element, it will generate a tiny inline stub with a clear TODO comment.

When to use it

• A preview fails with ReferenceError: X is not defined for PascalCase symbols.
• Bundler logs list "safety-net stubs for undeclared components" or similar safety-net messages.
• Bundler reports bare specifiers like 'react' or 'react/jsx-runtime' and the app fails to render.
• You keep applying the same manual import fixes across files when adding TSX components.
• After creating or heavily editing a TSX file before running the browser preview.

Best practices

• Prefer editing existing import lines to keep style and minimize diff size.
• Use known library aliases (e.g. '@/components/sections', 'lucide-react') when available rather than creating stubs.
• Avoid introducing circular imports, renaming components, or changing public APIs.
• Only generate a minimal stub when no import source is discoverable and the component is clearly presentational.
• Do not modify package.json or bundler configuration; leave loader-level fixes to the host.

Example use cases

• Add Mail, Github, and ExternalLink to an existing lucide-react import in About.tsx so <Mail /> and <ExternalLink /> stop throwing ReferenceError.
• Group Services, Portfolio, About into a single import from '@/components/sections' when those components are used but not imported.
• Insert a tiny inline presentational stub for a newly referenced helper component when its source cannot be found and immediate preview is needed.
• Detect bare specifier errors for react/jsx-runtime and add a defensive import of 'react' in files using classic JSX when the runtime is ambiguous.