antd-style-to-tailwind

Migrate existing antd-style CSS-in-JS (createStyles) components to Tailwind CSS utility classes with full dark mode support, following the project's style system transition strategy. Use when the user asks to migrate, convert, or rewrite antd-style components to Tailwind, or when working on new components in files that already use antd-style.

Quality

88%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

Securityby

Passed

No findings from the security scan

Quality

Content

77%

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

A highly actionable, well-sequenced migration guide with strong validation checkpoints, but it is over-inclusive of basic Tailwind/TS knowledge Claude already has and does not split its large reference tables into the referenced (and currently missing) external file.

Suggestions

Trim or remove the basic CSS→Tailwind mappings Claude already knows (e.g. display:flex→flex, font-weight→font-*, position→relative/absolute) from the 'Translate CSS properties' table to recover tokens.

Move general TypeScript/React linting advice (@ts-ignore vs @ts-expect-error, stale-closure useMemo) out of this skill or into a separate reference, since it is not specific to antd-style→Tailwind migration.

Create the referenced color-mapping.md (or remove the broken link) and relocate the large token/hex/dark-mode mapping tables there so SKILL.md stays a lean overview with one-level-deep references.

Dimension	Reasoning	Score
Conciseness	Mostly efficient project-specific reference tables, but it repeats basic Tailwind mappings Claude already knows (e.g. 'display: flex' → 'flex', 'font-weight: 600' → 'font-semibold') and includes general TS/React linting guidance (@ts-ignore vs @ts-expect-error, stale-closure useMemo) that is not migration-specific; it could be tightened.	2 / 3
Actionability	Provides fully executable guidance — concrete diff blocks, exact import paths, an executable `rg "from.*ComponentName/styles"` audit command, and copy-paste-ready cn() class strings — matching the level-3 anchor.	3 / 3
Workflow Clarity	A clearly sequenced 13-step migration flow with explicit validation checkpoints (import audit via rg, a Dark Mode Verification Checklist with search patterns, and a comprehensive finishing checklist) and error-recovery feedback loops.	3 / 3
Progressive Disclosure	Sections are well organized, but the ~670-line body is largely monolithic with detailed mapping tables kept inline, and its only external reference — color-mapping.md — does not exist in the bundle, so navigation is incomplete.	2 / 3
	Total	10 / 12 Passed

Description

100%

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong, third-person description that states concrete capabilities and provides an explicit 'Use when' trigger clause with natural user keywords. It is specific, complete, and unlikely to conflict with other skills.

Dimension	Reasoning	Score
Specificity	Lists multiple concrete actions — 'Migrate existing antd-style CSS-in-JS (createStyles) components to Tailwind CSS utility classes with full dark mode support' — naming the source/target systems and dark-mode support, matching the level-3 anchor for multiple specific concrete actions.	3 / 3
Completeness	Explicitly answers what ('Migrate ... components to Tailwind CSS utility classes with full dark mode support') and when via a clear 'Use when the user asks to migrate, convert, or rewrite ...' clause.	3 / 3
Trigger Term Quality	Covers natural user phrasing — 'migrate, convert, or rewrite antd-style components to Tailwind' plus the technical signal 'createStyles' — giving good coverage of terms users would actually say.	3 / 3
Distinctiveness Conflict Risk	A narrow, specific niche (antd-style createStyles → Tailwind) with distinct triggers unlikely to fire for unrelated skills; not a level-2 'works with document files' style overlap.	3 / 3
	Total	12 / 12 Passed

Validation

87%

Warnings & errors only

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 14 / 16 Passed

Validation for skill structure

Criteria	Description	Result
skill_md_line_count	SKILL.md is long (673 lines); consider splitting into references/ and linking	Warning
relative_links	Relative link issues: 1 missing	Warning

	Total	14 / 16 Passed

Repository: dtyq/magic
Path: frontend/magic-web/.agents/skills/antd-style-to-tailwind/SKILL.md
Commit: 41d7ef4

Reviewed: about 13 hours ago

Table of Contents

Discovery Implementation Validation

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.