这个 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？
- 技能为静态文档，未提供测试或验证机制，使用前应自行验证转换结果。
- 文档未说明对境外服务的依赖，若核心功能涉及不可达服务，可能影响大陆用户使用。
- 建议在转换前进行代码审查和备份，以降低风险。
- Shell / 命令行
- 本地文件系统
Node.jsYarn
将本仓库克隆到本地，技能文件位于 .github/skills/convert-webcore-component/SKILL.md。可将其复制到你的 Agent Skills 目录（如 ~/.claude/skills/）以便使用。需要 Node.js 和 Yarn 环境。
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/bbc/simorgh.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/.github/skills/convert-webcore-component" ~/.claude/skills/
rm -rf "$tmp"根据源仓库地址和 Skill 路径自动生成，只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式，请优先按作者说明操作；想只在当前项目中使用，把 ~/.claude/skills 换成项目里的 .claude/skills。
如何使用这个 Skill？
安装后，把下面任意一句发给 Agent 即可触发：
- 请将这个组件转换为 Simorgh 风格，文件在 src/components/Button.jsx
向 AI 提供待转换的组件文件路径或代码，并说明目标。AI 将按照技能步骤执行：先审计依赖，再转换样式和类型，最后运行 lint 和 prettier。例如：“请将这个组件转换为 Simorgh 风格，文件在 src/components/Button.jsx”。
这个 Skill 有哪些优点和局限？
- 提供详细的逐步指导，包含代码示例
- 强调使用逻辑 CSS 属性和移动优先媒体查询，利于国际化
- 提供 TypeScript 转换的最佳实践和常见错误
- 包含预处理清单，避免遗漏依赖
- 只适用于 React + Emotion 项目，不通用
- 没有自动化测试，依赖 AI 正确执行步骤
- 需要用户具备 React 和 TypeScript 基础
- 未提供回滚或验证转换结果的方法
这个 Skill 与同类方案有什么区别？
与相关 Skills 并排比较；分数均按同一 FSRS 标准得出。
| Skill | FS 评分 | Star 数 | 最近更新 | License |
|---|---|---|---|---|
| React 组件转换专家 本页 | 47 · 谨慎使用 | ★ 1.7k | 3 天前 | NOASSERTION |
| 代码简化审查 | 57 · 谨慎使用 | ★ 103k | 8 天前 | MIT |
| 前端编码约定技能 | 50 · 谨慎使用 | ★ 5.2k | 3 天前 | Apache-2.0 |
| OpenChamber 变更纪律 | 52 · 谨慎使用 | ★ 11k | 3 天前 | MIT |
| React Flow 节点构建助手 ✓ Microsoft · 官方 | 52 · 谨慎使用 | ★ 2.7k | 3 个月前 | MIT |
与使用 styled-components 或直接使用 Emotion 的 css prop 相比，此技能推动代码风格统一。但并未与如 Material-UI 或其他样式库等特定替代方案比较。
FollowSkills 如何评估这个 Skill？
技能文档主要为代码转换指引，不涉及敏感数据处理或外部网络访问，无恶意行为迹象。但未提及权限最小化、用户确认、回滚等安全措施，也未提供可验证的来源归属（如官方签署或多次确认）。因此保守给12分。
文档提供了详细的转换步骤和多种代码示例，但未包含任何测试或验证机制，且静态阅读无法执行验证，可靠性评分上限10分。鉴于缺乏错误反馈和异常处理说明，给5分。
技能针对明确的场景（webcore到Simorgh的转换），受众明确，但未明确边界条件（如组件类型限制）和触发条件，且对于大陆用户可能依赖海外服务的风险未提及。给10分。
技能文档结构清晰，有步骤和示例，但缺少版本记录、变更日志、维护责任说明，且未提及依赖安装等信息。给9分。
文档提供了清晰的转换指南，可能有效完成核心任务，但缺乏实际输出验证，且手动转换可能更灵活，边际价值未充分证明。给7分。
仅能静态阅读文档，无法运行测试。虽然文档引用了参考文件，但未提供独立验证证据。给4分。
点击维度查看打分理由
证据充分度：低 — 主要依赖静态检查、作者材料或有限演示；适合发现线索，不适合做高风险决策。
查看完整评分方法 →