核心用法
该技能专为 WASM 单页应用（SPA）的 React/TypeScript 项目设计，用于在浏览器预览前自动检测并修复缺失的导入和未定义组件。它通过解析构建日志中的 ReferenceError、safety-net stubs 和 Bare specifiers 等错误信息，定位缺失的 PascalCase 标识符（如组件名、图标名），然后生成精准的源代码补丁。
主要修复场景包括：
- 图标缺失：自动识别 lucide-react 图标（如 Mail、Github、Send）并扩展现有导入语句
- 组件缺失：根据项目约定的路径别名（如
@/components/ui、@/components/sections）添加对应导入 - JSX 运行时问题：轻量处理
react/jsx-runtime相关的裸导入提示 - 兜底组件生成：仅在无法找到合理导入源时，生成带 TODO 标记的轻量级 stub 组件
显著优点
1. 精准定位：基于实际构建日志而非静态分析，确保修复的是真实运行时问题
2. 最小侵入：优先扩展现有导入行，保持项目代码风格一致性，避免大范围重写
3. 智能分类：自动区分图标库、UI 组件库和项目内部组件，选择最优导入策略
4. 安全优先：不修改 package.json、不安装依赖、不更改现有组件实现、避免循环依赖
5. 可预测输出：严格的 JSON 补丁格式，支持 dry-run 模式，便于审核后再应用
潜在局限
- 依赖项目约定：需要
knownLibraries参数提供项目路径别名信息，对无约定项目效果受限 - 无法处理复杂逻辑：仅修复导入层问题，不处理组件内部逻辑错误或类型定义缺失
- 部分场景需人工判断：对于来源模糊的符号会选择保守策略，列入
remainingIssues而非自动修复 - WASM 环境特化：针对 Tasking.tech 等 WASM 浏览器环境的 bundler 日志格式优化，通用性有限
适合人群
- 使用 Tasking.tech 或其他 WASM 浏览器 IDE 的 React/TSX 开发者
- 需要快速修复预览阶段导入错误的原型开发场景
- 维护基于 lucide-react + 自定义组件库的中小型 SPA 项目团队
常规风险
- 过度依赖兜底机制：若关闭 dry-run 直接应用补丁，可能掩盖真实的架构设计问题（如组件职责混乱）
- 符号误分类：图标名与组件名冲突时（如项目真有名为
Mail的自定义组件），可能错误导入 - 路径别名漂移：项目重构后若未及时更新
knownLibraries，可能生成无效导入路径 - TS 配置不匹配：JSX runtime 相关修复需与 tsconfig.json 保持一致，否则可能引发二次错误