React 组件转换专家
将旧式 styled-components 组件迁移到 Emotion css prop 模式，并遵循编码规范。
技能文档主要为代码转换指引，不涉及敏感数据处理或外部网络访问，无恶意行为迹象。但未提及权限最小化、用户确认、回滚等安全措施，也未提供可验证的来源归属（如官方签署或多次确认）。因此保守给12分。
文档提供了详细的转换步骤和多种代码示例，但未包含任何测试或验证机制，且静态阅读无法执行验证，可靠性评分上限10分。鉴于缺乏错误反馈和异常处理说明，给5分。
技能针对明确的场景（webcore到Simorgh的转换），受众明确，但未明确边界条件（如组件类型限制）和触发条件，且对于大陆用户可能依赖海外服务的风险未提及。给10分。
技能文档结构清晰，有步骤和示例，但缺少版本记录、变更日志、维护责任说明，且未提及依赖安装等信息。给9分。
文档提供了清晰的转换指南，可能有效完成核心任务，但缺乏实际输出验证，且手动转换可能更灵活，边际价值未充分证明。给7分。
仅能静态阅读文档，无法运行测试。虽然文档引用了参考文件，但未提供独立验证证据。给4分。
- 技能为静态文档，未提供测试或验证机制，使用前应自行验证转换结果。
- 文档未说明对境外服务的依赖，若核心功能涉及不可达服务，可能影响大陆用户使用。
- 建议在转换前进行代码审查和备份，以降低风险。
这个 Skill 能做什么，适合哪些场景？
该技能把使用 @emotion/styled 或 styled-components 的 React 组件转换为 BBC Simorgh 的编码标准（采用 Emotion 的 css prop 模式）。它提供从依赖审计、样式转换、TypeScript 迁移到代码检查的逐步指南，并包含丰富的代码示例、规则和常见陷阱。适用于需要统一 React 代码库样式和类型风格的团队。
读取用户的 React 组件代码，识别 styled-components 用法。执行预转换检查，列出缺失的依赖。将 styled 组件转换为单独的 index.styles.ts 文件中的 css() 函数，并适配主题、媒体查询和像素到 rem 的转换。将 .jsx 转换为 .tsx，添加类型定义，处理条件属性、事件处理器。最后运行 yarn lint --fix 和 yarn prettier 命令。
- 正在将 React 组件从 styled-components 迁移到 Emotion 的 css prop 的开发人员
- 需要统一代码风格、避免混用两种样式模式的团队
- 将 JavaScript 组件转换为 TypeScript 并希望获得类型安全指导的开发者
- 处理需要支持 RTL 布局、需使用逻辑 CSS 属性的国际化组件
这个 Skill 有哪些优点和局限？
- 提供详细的逐步指导，包含代码示例
- 强调使用逻辑 CSS 属性和移动优先媒体查询，利于国际化
- 提供 TypeScript 转换的最佳实践和常见错误
- 包含预处理清单，避免遗漏依赖
- 只适用于 React + Emotion 项目，不通用
- 没有自动化测试，依赖 AI 正确执行步骤
- 需要用户具备 React 和 TypeScript 基础
- 未提供回滚或验证转换结果的方法
如何安装这个 Skill？
将本仓库克隆到本地，技能文件位于 .github/skills/convert-webcore-component/SKILL.md。可将其复制到你的 Agent Skills 目录（如 ~/.claude/skills/）以便使用。需要 Node.js 和 Yarn 环境。
如何使用这个 Skill？
向 AI 提供待转换的组件文件路径或代码，并说明目标。AI 将按照技能步骤执行：先审计依赖，再转换样式和类型，最后运行 lint 和 prettier。例如：“请将这个组件转换为 Simorgh 风格，文件在 src/components/Button.jsx”。
这个 Skill 与同类方案有什么区别？
与使用 styled-components 或直接使用 Emotion 的 css prop 相比，此技能推动代码风格统一。但并未与如 Material-UI 或其他样式库等特定替代方案比较。