---
name: ant-design-skill-067461db1f44
description: Front-end design skill for building React UIs with Ant Design (antd): component patterns, layout, forms, tables, and theming/tokens via ConfigProvider.
---

# Ant Design (React) — Practical Front-end Design Skill

Use this skill when you are building a React UI with **Ant Design (antd)** and want **consistent, non-ugly** screens fast.

## When to use
- The project uses **React** + **Ant Design**
- You need to design/implement pages with: **Layout**, **Menu**, **Form**, **Table**, **Modal**, **Drawer**, **Steps**, **Tabs**, **Pagination**
- You need to implement **theme tokens** (colors, radius, typography, spacing)
- You want predictable UI patterns (CRUD screens, dashboards, settings pages)

## Default workflow (do this order)
1) Confirm stack: React + antd version (v5+ assumed).
2) Choose page pattern:
   - CRUD list (Table) + filters (Form) + actions (Modal/Drawer)
   - Wizard (Steps)
   - Settings (Form + Cards)
   - Dashboard (Grid + Cards + Charts)
3) Build layout skeleton first:
   - `Layout` + `Sider` + `Header` + `Content`
   - Navigation with `Menu`
4) Build the main interaction component:
   - Forms: `Form`, `Form.Item`, `Input`, `Select`, `DatePicker`, `Switch`
   - Tables: `Table` + column definitions + row actions
5) Add feedback loop:
   - `message`, `notification`, `Modal.confirm`
6) Apply theming/tokens via `ConfigProvider` (global) and component-level overrides.
7) Verify:
   - Empty states
   - Loading states
   - Error states
   - Mobile responsiveness (at least: 360px layout sanity)

## Component patterns (copy/paste mental models)
### Layout
- Use `Layout` with `Sider` (collapsible), `Header` for top actions, `Content` scroll.
- Put page title + primary CTA in a `Flex` (or `Space`) row.

### Forms
- Keep forms vertical; align labels consistently.
- Use `Form` + `Form.Item` rules for validation; avoid custom validation unless necessary.
- Use `Form.useForm()` and `form.setFieldsValue()` for edit flows.

### Tables (CRUD)
- Columns:
  - left: identifier/name
  - middle: important attributes
  - right: actions (Edit/Delete)
- Use `rowKey` always.
- Use server-side pagination for real apps.

### Modals/Drawers
- **Modal** for short forms.
- **Drawer** for longer forms or when you want context kept.

## Theming / Tokens (AntD v5)
Ant Design v5 uses **Design Tokens** and CSS-in-JS.

### Global theme
Wrap your app in `ConfigProvider`:

```tsx
import { ConfigProvider, theme } from 'antd';

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <ConfigProvider
      theme={{
        algorithm: theme.defaultAlgorithm,
        token: {
          colorPrimary: '#1677ff',
          borderRadius: 10,
          fontSize: 14,
        },
        components: {
          Button: { controlHeight: 40 },
          Layout: { headerBg: '#ffffff' },
        },
      }}
    >
      {children}
    </ConfigProvider>
  );
}
```

### Dark mode
Use `theme.darkAlgorithm` and keep tokens consistent:

```tsx
const isDark = true;

<ConfigProvider
  theme={{
    algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm,
    token: { colorPrimary: '#7c3aed' },
  }}
/>
```

### Component-level overrides
Use `components.<ComponentName>` for specific tweaks (Button, Input, Table, etc.).

## References
- Read **README.md** for the full “how-to” (setup + patterns + examples).
- Use `protocols/` when you want LLM-first contracts (describe UIs as data, then generate code deterministically).
- Read `references/tokens.md` for a tokens cookbook.
- Read `references/components.md` for practical page recipes (CRUD, Settings, Wizard).
- Use `examples/` when you want ready-to-copy AntD screens.
- Use `starter/` when you need a runnable Vite + React + AntD skeleton.

## Guardrails
- Assume Ant Design v5+ (tokens). If project is v4 (Less variables), stop and ask.
- Prefer built-in components and patterns over custom CSS.
- Avoid over-theming: set a small set of tokens and only override components when needed.


---
Source attribution: kbarbel640-del
Original project: https://github.com/kbarbel640-del/skills/blob/e7e336ac628c3e3bd771aff1aaa469c93778f94a/skills/felipeoff/ant-design-skill/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Mega AI Hub.

## Upstream license notice

MIT License

Copyright (c) 2026 clawdbot

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Mega AI Hub resource metadata

Creator / publisher: kbarbel640-del
Original project: https://github.com/kbarbel640-del/skills/blob/e7e336ac628c3e3bd771aff1aaa469c93778f94a/skills/felipeoff/ant-design-skill/SKILL.md
Attribution basis: Source repository record

Fields of work: Design, Development & Engineering
Roles: Frontend Developer, Product Designer, UX Designer
Specialties: Cross Platform, Frontend
Tools: Antd, React
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: c48a90bdea547a29cdf4fdc26fd154cae7b1cc9715c240e3ce7a57b6fdee0911