开发与工程

新增服务主题(SCSS Modules)

为世界服务语言新增基于 SCSS Modules 和 CSS 自定义属性的主题。

45/ 100
不推荐

当前收益不足以覆盖风险或不确定性。

查看评分依据 ↓
可直接使用于
Codex · Claude Code
Star 数
★ 1.7k
最近更新
3 天前
License
NOASSERTION
scss-modulescss-custom-propertiesthemingbbc-simorgh
+2reacttheming-system

这个 Skill 能做什么,适合哪些场景?

该技能指导在 BBC Simorgh 应用中为新的 World Service 语言/服务创建 SCSS Modules 主题。它使用 Mundo 主题作为参考实现,涵盖步骤:检查参考主题、创建新服务目录、创建 palette.scss、主主题文件、chameleon 徽标以及注册到 loadableConfig.ts。技能强调容易遗漏的步骤,并提供检查清单确保完整性。

读取参考主题(Mundo)的结构和文件,以指导新主题创建。在指定路径创建新服务目录及文件:palette.scss(映射调色板令牌为 CSS 自定义属性)、主 <service>.ts 入口(导入字体、palette 和品牌 SVG 等)、chameleon 徽标 <service>.tsx。修改 loadableConfig.ts 注册新主题,以便动态导入。最终展示并迭代反馈。

适合
  • 开发者需要为新增的 World Service 语言(如新增斯瓦希里语)创建主题时,遵循此技能。
  • 当需要将现有 Emotion 主题迁移到 SCSS Modules 系统时,参考此技能的标准流程。
  • 在 Simorgh 项目中添加新的服务主题,且需要确保所有必要组件(如 chameleon 徽标)不遗漏时使用。
  • 团队成员希望保持主题实现一致性,使用此技能作为规范。

如何安装这个 Skill?

使用前请注意
  • 该技能文档未提及用户确认或对文件修改的显式许可,执行时需谨慎。
  • 技能依赖仓库内的参考文件,但未提供测试,实施前应验证步骤的准确性。
  • 从中国大陆访问 BBC 服务可能受限,使用该技能时需考虑网络可达性。
开始前你需要
Agent 需要具备
  • 本地文件系统

将包含该技能的回购克隆到本地(例如:git clone [email protected]:bbc/simorgh.git),然后进入仓库目录,确保技能位于 .github/skills/add-new-service-theme/ 下。

通用方式:手动安装到 Claude Code(macOS / Linux)
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/bbc/simorgh.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/.github/skills/add-new-service-theme" ~/.claude/skills/
rm -rf "$tmp"

根据源仓库地址和 Skill 路径自动生成,只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式,请优先按作者说明操作;想只在当前项目中使用,把 ~/.claude/skills 换成项目里的 .claude/skills。

如何使用这个 Skill?

试试这样说

安装后,把下面任意一句发给 Agent 即可触发:

  • 为新的服务添加主题

在支持 Agent Skills 的客户端中,当用户请求“为新的服务添加主题”或类似提示时,技能会自动执行步骤:检查 Mundo 主题、创建目录、添加必要文件并注册。也可手动按照 SKILL.md 中的步骤操作。

这个 Skill 有哪些优点和局限?

优点
  • 提供清晰的逐步指南,参考实现明确(Mundo 主题)。
  • 包含检查清单,避免遗漏关键步骤(如 chameleon 徽标和 loadableConfig 注册)。
  • 基于标准 SCSS Modules 和 CSS 自定义属性,与现代前端实践一致。
局限
  • 只针对 BBC Simorgh 代码库,通用性有限。
  • 技能自身没有测试或验证机制,需要开发人员手动检查。
  • 依赖特定项目结构,外部项目可能难以直接应用。

这个 Skill 与同类方案有什么区别?

与相关 Skills 并排比较;分数均按同一 FSRS 标准得出。

Skill FS 评分 Star 数 最近更新 License
新增服务主题(SCSS Modules) 本页 45 · 不推荐 ★ 1.7k 3 天前 NOASSERTION
前端编码约定技能 50 · 谨慎使用 ★ 5.2k 3 天前 Apache-2.0
React 组件转换专家 47 · 谨慎使用 ★ 1.7k 3 天前 NOASSERTION
OpenChamber 性能工程技能 62 · 推荐 ★ 11k 3 天前 MIT
Locale UI Patterns —— OpenChamber 界面文案国际化规范 61 · 推荐 ★ 11k 3 天前 MIT

FollowSkills 如何评估这个 Skill?

FollowSkills 评估 · FSRS-2.0
不推荐
45/ 100 五分制 2.3 / 5
上游仓库在本次评估后已有新提交;当前评分仍对应所示审查版本,可能尚未覆盖最新改动。
1信任安全14 / 25 · 2.8/5

技能文档本身只描述创建主题文件的步骤,未涉及敏感数据、外部写入或危险操作;仓库包含安全政策和 CodeQL 工作流,但没有证据表明该技能特别遵循最小权限或用户确认。因此,未发现红线风险,但权限和确认机制不明确,扣分。

2可靠稳定7 / 20 · 1.8/5

技能步骤清晰,但缺少错误处理和失败反馈。静态评估,无法验证执行;没有针对技能的测试。因此可靠性评分上限为 'happy path plausible but thin' 的 7 分。

3适用触发7 / 15 · 2.3/5

使用场景明确,但未声明能力边界或非适用范围;触发描述较精确,但环境适配(如网络可达性)未提及。因此评分 7,对应 'clear scenario but limited evidence'。

4规范维护7 / 15 · 2.3/5

文档结构清晰,有 purpose、steps、checklist,但缺少版本、变更日志、维护责任和作者信息,且依赖的参考文件未提供。因此评分 7。

5有效结果7 / 15 · 2.3/5

技能旨在添加新主题,步骤详细,但未提供验证输出或示例,边际价值有限。静态评估,无法验证结果,评分上限为 7。

6证据核验3 / 10 · 1.5/5

仅基于源文件,无执行证据,且技能本身没有测试或 CI 覆盖,因此评分低至 3。

1 2 3 4 5 6

点击维度查看打分理由

评估于 2026年8月7日 审查版本 9530e9ef9829 评估证据[1][2][3][4][5][6][7][8]

证据充分度:低 — 主要依赖静态检查、作者材料或有限演示;适合发现线索,不适合做高风险决策。

查看完整评分方法 →

常见问题

这个技能是否适用于其他项目?
主要针对 BBC Simorgh 项目,其路径和结构特定,但方法论可借鉴。
技能中提到的“chameleon 徽标”是什么?
它是一个 SVG 组件,用于代表服务品牌,必须创建,否则主题不完整。
如何验证主题创建是否成功?
按照检查清单核对所有必需文件是否创建并正确注册。

同仓库的其他 Skills

均来自 bbc/simorgh

相关 Skills