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 | TaiCore 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.
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.
Slide/PPT creation skill that provides complete slide creation, editing, and management capabilities. Use when users need to create slides, make presentations, edit slide content, or manage slide projects. CRITICAL - When user message contains [@slide_project:...] mention, you MUST load this skill first before any operations.
|
|
Data analysis dashboard (instrument panel) development skill. Use when users need to develop data dashboards, create/edit Dashboard projects, build large-screen data boards, or perform dashboard data cleaning. Includes dashboard project creation, card plan, data cleaning (data_cleaning.py), card management tools (create_dashboard_cards, update_dashboard_cards, delete_dashboard_cards, query_dashboard_cards), map download tool (download_dashboard_maps), dashboard development, and validation.
Use when the user wants to interact with DingTalk/钉钉 in any way — including but not limited to: reading, querying, searching, sending, replying to, forwarding, or recalling DingTalk/钉钉 chat messages and chat history; managing group chats and conversations; sending DING alerts; querying contacts, org structure, AI search, or coworkers; reading, searching, creating, or editing DingTalk/钉钉 docs, drive files, sheets, AI tables, wiki, mail, calendar events, meeting rooms, AI meeting minutes, attendance, OA approvals, todos, reports/logs, live sessions, AI apps, permissions, or open-platform docs.