generatePreview

此技能基于 skeleton 工具，分析 React 组件的结构，生成结构化描述的 JSON 文件和可视化目录树的 Markdown 文档，作为组件智能拆分的预览阶段。

重要：此技能仅做结构提取，不涉及业务逻辑判断或拆分决策。

工作原理

1. 使用 skeleton 工具解析输入的 .tsx 文件
2. 提取组件的 AST（抽象语法树）结构信息
3. 分析组件的子组件、props、状态、hooks 调用
4. 生成结构化 JSON 描述（遵循 FORMAT.md 规范）
5. 生成可视化 Markdown 目录树
6. 输出临时文件（强制使用 .temp. 中缀）

使用方法

输入 React 组件文件路径，技能将自动分析组件结构并生成预览文档。

输入参数：

• component-path – React 组件文件路径（.tsx）

处理流程：

1. 解析组件的 AST 结构
2. 提取子组件、props、状态等信息
3. 生成结构化 JSON 和可视化 Markdown
4. 保存为 .temp. 中缀文件

示例输出： 对于 src/components/UserProfile.tsx，生成：

• src/components/UserProfile.temp.json
• src/components/UserProfile.temp.md

输出

生成两个临时文件在组件所在目录：

• {ComponentName}.temp.json：结构化描述（供 AI 解析）
• {ComponentName}.temp.md：可视化目录树（供人阅读）

文件命名规范：

• 必须使用 .temp. 中缀，例如 UserProfile.temp.json
• 目的：明确标识为 AI 中间产物，避免与源码混淆
• 禁止使用其他命名方式

呈现结果

JSON 文件包含：

• 组件名称和路径
• 子组件列表及其依赖关系
• Props 结构和类型
• 状态信息和 hooks 调用
• 复杂度评估
• 初步拆分建议（基于结构分析）

Markdown 文件包含：

• 目录树结构可视化
• 组件关系图（文本形式）
• 结构复杂度指标
• 拆分建议提示

故障排除

• 确保输入文件是有效的 .tsx 文件
• 检查 skeleton 工具是否正确安装
• 验证输出目录有写入权限
• 如果解析失败，检查组件语法是否正确

参考文档

• REQUIREMENTS.md – 拆分要求和原则
• FORMAT.md – JSON 格式规范
• EXAMPLES.md – 实际拆分示例