React Component Conversion Expert
Migrate legacy styled-components to Emotion's css prop pattern with step-by-step guidance.
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.
- 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.
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
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 do you install this skill?
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.
How do you use this skill?
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'.
How does this skill compare with similar options?
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.