Add New Service Theme (SCSS Modules)
Create a new World Service language/service theme using SCSS Modules and CSS custom properties.
The skill only describes steps to create theme files, with no sensitive data handling, external writes, or dangerous operations; the repo has security policy and CodeQL, but no evidence that this skill specifically follows least privilege or user confirmation. No red-line risk, but permissions and confirmation mechanisms are unclear; deductions applied.
Steps are clear but lack error handling and failure feedback. Static assessment cannot verify execution; no tests for the skill. Reliability capped at 'happy path plausible but thin' = 7.
Use case is clear but boundaries/non-fit scenarios not declared; trigger description is precise but environment fit (e.g., network reachability) not addressed. Score 7 for 'clear scenario but limited evidence'.
Document is well-structured with purpose, steps, checklist, but lacks versioning, changelog, maintenance ownership, and author info; referenced files not provided. Score 7.
Skill aims to add a new theme; steps are detailed but no verified output or examples; marginal value limited. Static assessment cannot verify results, capped at 7.
Based solely on source files, no execution evidence; no tests or CI coverage for the skill, so score low at 3.
- The skill does not mention user confirmation or explicit permission for file modifications; execute with caution.
- The skill relies on reference files in the repo but provides no tests; verify steps before implementation.
- Access to BBC services from mainland China may be restricted; consider network reachability when using this skill.
What does this skill do, and when should you use it?
This skill guides the creation of a new SCSS Modules theme for a new World Service language/service in the BBC Simorgh application. It uses the Mundo theme as a reference implementation, covering steps: inspect the reference theme, create a new service directory, create palette.scss, the main theme file, the chameleon logo, and register it in loadableConfig.ts. The skill emphasizes often-missed steps and provides a checklist for completeness.
Reads the structure and files of the reference theme (Mundo) to guide the creation of a new theme. Creates a new service directory at a specified path with files like palette.scss (mapping palette tokens to CSS custom properties), the main <service>.ts entry (importing fonts, palette, brand SVG, etc.), and the chameleon logo <service>.tsx. Modifies loadableConfig.ts to register the new theme for dynamic import. Finally, presents the result for feedback and iteration.
- A developer needs to add a theme for a new World Service language (e.g., adding Swahili) — this skill provides the steps.
- When migrating an existing Emotion theme to the SCSS Modules system, this skill references the current standard.
- When adding a new service theme in the Simorgh project and wanting to ensure all necessary components (like chameleon logo) are not missed.
- To maintain consistency across theme implementations by following a documented process.
What are this skill's strengths and limitations?
- Provides a clear step-by-step guide with an explicit reference implementation (Mundo theme).
- Includes a checklist to avoid missing critical steps (like chameleon logo and loadableConfig registration).
- Based on standard SCSS Modules and CSS custom properties, aligning with modern frontend practices.
- Specific to the BBC Simorgh codebase, limiting generalizability.
- No built-in test or validation; developers must manually verify.
- Relies on project-specific structure, may not directly apply outside.
How do you install this skill?
Clone the repository containing the skill (e.g., git clone [email protected]:bbc/simorgh.git), then ensure the skill is in .github/skills/add-new-service-theme/.
How do you use this skill?
In an Agent Skills-compatible client, when the user requests 'add a theme for a new service' or similar, the skill will execute steps: inspect the Mundo theme, create the directory, add necessary files, and register. Alternatively, follow the steps manually as described in SKILL.md.