What does this skill do, and when should you use it?
This skill converts React components using @emotion/styled or styled-components to BBC Simorgh's coding standard using Emotion's css prop pattern. It provides a step-by-step guide covering dependency audit, style conversion, TypeScript migration, and linting, with code examples and best practices. Ideal for teams aiming to standardize their React codebase.
Analyzes React component files, detects styled-components usage. Runs a pre-conversion checklist to find missing dependencies. Converts styled components to css() functions in index.styles.ts files, handling theme, media queries, and pixel-to-rem. Transforms .jsx to .tsx, adding type definitions, event handlers, and conditional props. Finally, runs yarn lint --fix and yarn prettier commands.
- Developers migrating React components from styled-components to Emotion css prop
- Teams enforcing a single styling pattern across a codebase
- Developers converting JavaScript components to TypeScript with proper typing
- Projects needing logical CSS properties for RTL support
How do you install this skill?
- Skill is static documentation, no tests or verification; verify conversion results yourself.
- No mention of dependency on overseas services; if core functionality depends on unreachable services, mainland users may be affected.
- Recommend code review and backup before conversion to mitigate risk.
- Shell / CLI
- Local filesystem
Node.jsYarn
Clone the repository; the skill is located at .github/skills/convert-webcore-component/SKILL.md. Copy it to your agent skills directory (e.g., ~/.claude/skills/) for use. Requires Node.js and 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"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Convert this Button component to Simorgh style, file at src/components/Button.jsx
Provide the component file path or code to the AI, then ask to convert it. The AI follows the skill's steps: check dependencies, convert styles and types, then run lint and prettier. Example prompt: 'Convert this Button component to Simorgh style, file at src/components/Button.jsx'.
What are this skill's strengths and limitations?
- Detailed step-by-step guidance with code examples
- Promotes logical CSS properties and mobile-first queries for internationalization
- Includes TypeScript best practices and common pitfalls
- Pre-conversion checklist prevents missing dependencies
- Limited to React + Emotion projects, not generic
- No automated tests; relies on AI correct execution
- Requires familiarity with React and TypeScript
- No rollback or verification steps
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| React Component Conversion Expert this page | 47 · Use with care | ★ 1.7k | 3d ago | NOASSERTION |
| Code Clarity Refactor | 57 · Use with care | ★ 103k | 8d ago | MIT |
| Frontend Conventions Skill | 50 · Use with care | ★ 5.2k | 3d ago | Apache-2.0 |
| OpenChamber Change Discipline | 52 · Use with care | ★ 11k | 3d ago | MIT |
| React Flow Node Builder ✓ Microsoft · Official | 52 · Use with care | ★ 2.7k | 3mo ago | MIT |
Compared to using styled-components directly or using Emotion's css prop without a standard, this skill enforces consistency. No specific alternatives like Material-UI are mentioned.
How did FollowSkills review this skill?
The skill is mainly code conversion guidance, no sensitive data handling or external network access, no malicious intent. However, it does not mention least privilege, user confirmation, rollback, or verifiable source attribution. Hence conservative 12.
Document provides detailed steps and examples but lacks tests or verification, and static review cannot execute. No error handling or failure feedback mentioned. Give 5.
Clear scenario (webcore to Simorgh) and audience, but boundaries and trigger conditions not explicit. Potential overseas service dependency for mainland users not addressed. Give 10.
Well-structured with steps and examples, but lacks versioning, changelog, maintenance responsibility, and install dependencies. Give 9.
Provides clear conversion guide, likely completes core task, but no output validation, and manual conversion may be more flexible, marginal value not proven. Give 7.
Only static reading possible, no execution. References given but no independent verification. Give 4.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →