Ant Design Skill

Skill for efficiently building React UIs using Ant Design v5+ with layouts, forms, tables, modals, theming via ConfigProvider, and consistent component patte...

Security Scan

This is a coherent Ant Design (React) UI guidance + starter project: it requests no credentials, has no automatic install steps, and the instructions match the skill name and files.

Purpose & Capability

The SKILL.md and included files focus on building React UIs with Ant Design (patterns, theming, examples, and a starter Vite project). Required env/binaries are empty and nothing requested appears unrelated to the stated purpose.

Instruction Scope

Runtime instructions describe UI patterns, layout, forms, tables, tokens, and where to find examples; they do not instruct the agent to read arbitrary host files, access secrets, or transmit data to external endpoints beyond normal development references. The guidance is scoped to AntD UI work.

Install Mechanism

There is no install specification (instruction-only), so nothing will be written/installed automatically. However, the skill bundle includes a starter project with package.json and package-lock.json — if you or the agent run npm/yarn locally, dependencies will be fetched. Review dependencies and scripts before running installs.

Credentials

The skill declares no required environment variables, credentials, or config paths. No sensitive environment access appears necessary for the described functionality.

Persistence & Privilege

The skill does not set always:true. disableModelInvocation is not set (default allows model invocation), meaning the model could call it when eligible. Given the skill has no credentials or install steps, this is low risk, but be aware it is model-invocable by default.

Assessment

This skill appears to be what it says: UI patterns and a starter Ant Design project. Before using: (1) inspect README and package.json/package-lock.json to review dependencies and any npm scripts, (2) verify the Ant Design version (the skill assumes v5+ and will behave differently for v4), (3) run any bootstrap/install commands in a sandbox or dev machine (do not run unknown scripts on production hosts), (4) check licenses of included packages if that matters, and (5) if you allow the agent to invoke skills automatically, note this skill is model-invocable by default but it doesn't request secrets.

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 (
    <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:

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.