Ant Design Skill

---

name: ant_design_skill 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:

import { ConfigProvider, theme } from 'antd';
export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    
      {children}
    
  );
}

Dark mode

Use theme.darkAlgorithm and keep tokens consistent:

const isDark = true;

Component-level overrides

Use components. 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.