antd-style-to-tailwind
This Claude Code skill automates the conversion of Ant Design's CSS-in-JS styled components (using `createStyles`) to Tailwind CSS utility classes while preserving dark mode functionality. Use it when migrating existing antd-style components to Tailwind, building new features in files that currently use `createStyles`, or when encountering references to `styles.ts` and the `cx()` function.
git clone --depth 1 https://github.com/dtyq/magic /tmp/antd-style-to-tailwind && cp -r /tmp/antd-style-to-tailwind/frontend/magic-web/.agents/skills/antd-style-to-tailwind ~/.claude/skills/antd-style-to-tailwindSKILL.md
# antd-style → Tailwind CSS Migration
## When to apply
- User asks to migrate / rewrite / convert a component's styles to Tailwind
- A new feature is being built in a file that currently uses `createStyles`
- User references `styles.ts`, `createStyle`, `useXxxStyles`, or `cx()`
- Component contains antd `Button` — replace with shadcn Button during migration
## Prerequisites
Always read these files before starting:
- The target component (`index.tsx` or equivalent)
- Its `styles.ts`
- `tailwind.config.js` and `src/index.css` if token mapping is unclear
## Migration Steps
### 1. Audit the `styles.ts`
Identify:
- Styles used **only** by this component → remove from `styles.ts`
- Styles shared with **other** components → keep `createStyles` for those
Also check if the styles file is imported anywhere else before deleting:
```bash
rg "from.*ComponentName/styles" --type tsx --type ts
```
### 2. Replace `createStyles` wiring
```diff
- import { useXxxStyles } from "./styles"
+ import { cn } from "@/opensource/lib/utils"
const targetComponent = observer((props) => {
- const { styles, cx } = useXxxStyles()
```
Use `cn()` everywhere `cx()` was used.
Do **not** build class strings with `+` concatenation. Prefer:
```tsx
const segmentedClassName = cn(
"rounded-md border border-border p-1",
"[&_.magic-segmented-group]:gap-0.5",
"[&_.magic-segmented-item-label]:text-xs",
)
```
### 3. Z-index semantic tokens
Prefer semantic z-index classes over arbitrary `z-[N]` values.
| Value | Tailwind class | CSS variable |
| ----- | -------------- | -------------------- |
| 1000 | `z-tooltip` | `--z-index-tooltip` |
| 1000 | `z-popup` | `--z-index-popup` |
| 1000 | `z-dropdown` | `--z-index-dropdown` |
| 1000 | `z-dialog` | `--z-index-dialog` |
| 1000 | `z-drawer` | `--z-index-drawer` |
Choose by context: use `z-tooltip` for tooltips, `z-dropdown` for menus, `z-dialog` for modals.
### 4. Translate CSS properties
| CSS | Tailwind |
| ---------------------------------------- | -------------------------------------- |
| `width: 100%` | `w-full` |
| `width: fit-content` | `w-fit` |
| `height: fit-content` | `h-fit` |
| `padding: 12px 0` | `py-3` |
| `padding: 10px` | `p-2.5` |
| `padding: 6px` | `p-1.5` |
| `padding: 4px 8px` | `px-2 py-1` |
| `padding: 4px 6px` | `px-1.5 py-1` |
| `padding: 0 4px` | `px-1` |
| `padding: 0 6px` | `px-1.5 py-0` |
| `margin-top: 6px` | `mt-1.5` |
| `margin-top: 10px` | `mt-2.5` |
| `margin-left: auto` | `ml-auto` |
| `display: flex` | `flex` |
| `display: inline-flex` | `inline-flex` |
| `flex-direction: column` | `flex-col` |
| `align-items: center` | `items-center` |
| `align-self: flex-end` | `self-end` |
| `justify-content: flex-end` | `justify-end` |
| `gap: 4px` | `gap-1` |
| `gap: 6px` | `gap-1.5` |
| `gap: 10px` | `gap-2.5` |
| `font-size: 12px; line-height: 16px` | `text-xs leading-4` |
| `font-size: 10px; line-height: 13px` | `text-[10px] leading-[13px]` |
| `font-size: 14px; line-height: 1.4` | `text-sm leading-[1.4]` |
| `font-weight: 600` | `font-semibold` |
| `font-weight: 400` | `font-normal` |
| `cursor: pointer` | `cursor-pointer` |
| `cursor: default` | `cursor-default` |
| `cursor: not-allowed` | `cursor-not-allowed` |
| `position: relative` | `relative` |
| `position: absolute` | `absolute` |
| `flex: none` | `flex-none` |
| `flex-shrink: 1` | `shrink` (default, often omit) |
| `white-space: nowrap` | `whitespace-nowrap` |
| `white-space: pre-wrap` | `whitespace-pre-wrap` |
| `overflow: hidden` | `overflow-hidden` |
| `text-overflow: ellipsis` | `text-ellipsis` |
| `min-width: 0` | `min-w-0` |
| `border-radius: 8px` | `rounded-md` (= 8px via `--radius-md`) |
| `border-radius: 12px` | `rounded-[12px]` |
| `border-radius: 0 4px 4px 0` | `rounded-r-[4px]` |
| `box-shadow: 0 1px 2px rgba(0,0,0,0.05)` | `shadow-sm` |
### 5. Map design tokens
Prefer semantic Tailwind vars — they auto-adapt to dark mode.
| antd-style token | TaiQuery the list of all agents (employees) available to the current user. Use when generating code that requires a real agentId, or when the user asks "which agents/employees do I have".
|
Open and operate webpages in a real browser: navigate, read rendered content, inspect interactive elements, click, type, submit forms, press keys, select options, check boxes, hover, scroll, upload files, wait for page changes, manage pages, take and save screenshots, analyze visual layout, and inspect page errors and network activity.
Core canvas design skill covering project management, multimedia principles, AI image generation, web image search, and design marker processing. Load for any canvas design task. CRITICAL - When user message contains [@design_canvas_project:...] or [@design_marker:...] mentions, or when the user wants to generate video/animation/clip on a canvas project, you MUST load this skill first before any operations.
Use when details may have been lost after context compaction, or when the Agent needs to inspect earlier compacted messages or previously created sub-agents.
Manage persistence for user-installed third-party CLI tools in the Super Magic sandbox. Use when the user wants to install, configure, adopt, restore, inspect, or remove a CLI, or when an external skill, webpage, or installer asks to run CLI install commands such as curl|sh, npm install -g, pipx install, uv tool install, go install, cargo install, or brew install. Do not persist runtime-provided CLIs.
Expert code review of current git changes with a senior engineer lens. Detects SOLID violations, security risks, and proposes actionable improvements.
Summarize and compress the current conversation history into a structured context snapshot, then call compact_chat_history to save it. Read this skill only when the user explicitly asks to compact/summarize — system-triggered compaction injects the instructions directly without requiring a skill read.