Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →wordpress/emotion-to-scss-modules
Use when planning or implementing an Emotion-to-SCSS-Modules migration in @wordpress/components, including styled wrappers, css/useCx composition, and migration-related cascade fixes.
Passed 18 of 20 test cases with the skill, and 16 of 20 without it.
and 1 more in the full report
3 fixed15 passed either way1 still failing1 broke3 errored
Tokens, turns and time describe resource use, not a dollar price.
One of 3 test cases the skill fixed. Same model, same prompt, with and without the skill.
When migrating the `Flex` component in `@wordpress/components` from Emotion to SCSS Modules, I want to add `padding-left: 16px; margin-right: 8px;` to align item spacing. Provide the updated SCSS Module definitions and the React component file.
| Checked | Without skill | With skill |
|---|---|---|
| The SCSS module uses `padding-inline-start` instead of `padding-left`. | Missed | Passed |
| The SCSS module uses `margin-inline-end` instead of `margin-right`. | Missed | Passed |
The instructions your model reads when the skill loads.
In a Gutenberg checkout, read the relative links below from the checked-out revision. Outside a checkout, resolve them from .agents/skills/emotion-to-scss-modules/ in Gutenberg on GitHub.
Read the migration guide and the package's styling conventions before editing.
packages/components. Use the guide's contract audit to select affected states and compositions for comparison.Keep intentional API, interaction, or visual changes within the agreed scope. Consult a merged example only when it answers a migration question; an older exception is not a rule for this component.
Reuse existing tests and stories. A behavior-preserving migration may need no new tests. Add a focused test only for an uncovered risk introduced by the migration; do not duplicate shared helper or dependency suites. Follow the guide's verification choices and the testing overview.
Compare actual styles for the affected states and consumers, including RTL or another document when relevant. Class assertions and mocked styles cannot prove cascade or visual parity. Recheck affected consumers after subsequent selector changes or a rebase that changes relevant styles.
Follow the completion checks for scoped cleanup, affected downstream snapshots, generated files, required checks, and the migration changelog. Report any unverified styling case with reproducible manual steps.
test cases passed, vs 16 / 20 without
More skills from the same source and nearby in the registry, with their headline benchmark lift.