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

96%

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

92%Weight 40%Scale 1-5

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

The content is highly actionable and well-sequenced with strong validation checkpoints, but it is a single large monolith with no bundle files and a dangling reference to a non-existent color-mapping.md, capping progressive disclosure at the mid anchor.

Suggestions

Move the large CSS-property, token, hex, and dark-mode mapping tables into a dedicated reference file (e.g. references/mappings.md) and link to it from the body, keeping SKILL.md as a lean overview of the migration workflow.

Create the referenced color-mapping.md (or remove the 'Additional resources' link) so the single external reference resolves to a real file rather than dangling.

Consider extracting the antd→shadcn Button/Input and component-override mappings into a second reference file to further reduce the inlined reference bulk.

Dimension	Reasoning	Score
Conciseness	Despite its length, the body is dense reference material (tables, diffs, code) with no padded explanations of concepts Claude already knows — every section delivers actionable migration guidance, matching the 'every token earns its place' 5 anchor.	5 / 5
Actionability	Provides copy-paste-ready diffs, cn() patterns, rg audit commands, and exhaustive token/CSS mapping tables that directly cover the common migration cases, matching the 5 anchor.	5 / 5
Workflow Clarity	Clear numbered migration sequence (steps 1–13) plus prerequisite reads and a finishing checklist, with explicit dark-mode verification steps and rg audit patterns serving as validation checkpoints and feedback loops, matching the 5 anchor.	5 / 5
Progressive Disclosure	Well-organized with clear section headers, but it is a 670-line monolithic file with large token-mapping tables inlined that arguably belong in separate reference files, and the lone referenced 'color-mapping.md' does not exist in the bundle — matching the 'content that should be separate is inline' 3 anchor.	3 / 5
	Total	18 / 20 Passed

Description

100%Weight 40%Scale 1-5

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

The description is third-person, concise, and clearly states both what the skill does and when to use it with concrete trigger phrases. It hits every anchor at the top of the scale with no padding or over-claims.

Dimension	Reasoning	Score
Specificity	Names the domain and multiple concrete actions: 'Migrate existing antd-style CSS-in-JS (createStyles) components to Tailwind CSS utility classes with full dark mode support', covering migration, token mapping, and dark mode — comprehensive coverage matching the 5 anchor.	5 / 5
Completeness	Explicitly answers both what ('Migrate ... components to Tailwind CSS utility classes with full dark mode support') and when ('Use when the user asks to migrate, convert, or rewrite ...') with concrete trigger phrases, matching the 5 anchor.	5 / 5
Trigger Term Quality	Includes natural phrases users would say — 'migrate, convert, or rewrite antd-style components to Tailwind', 'createStyles', and 'new components in files that already use antd-style' — with good synonym coverage matching the 5 anchor.	5 / 5
Distinctiveness Conflict Risk	A clear niche (antd-style → Tailwind migration) with distinct triggers and minimal overlap risk with unrelated skills, matching the 5 anchor.	5 / 5
	Total	20 / 20 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: f9973c5

Reviewed: 2 days 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.