Merge branch 'master' into guidelines

- Introduced spacing design tokens for consistent padding and margin values.
- Added typography design tokens for font sizes, weights, and line heights.
- Created a template for component guidelines to standardize documentation.
- Developed an overview of components and icons, detailing usage and best practices.

guidelines/Guidelines.md

@@ -0,0 +1,115 @@
+# Ant Design Guidelines for Figma Make
+
+This project uses **Ant Design (antd)**, a comprehensive React UI component library and design system. Files in the `guidelines` directory show how to use Ant Design components and design tokens correctly.
+
+## Always Read First
+
+Before writing any code, you MUST read these files in order:
+
+1. **All files with names starting with `overview-`** in the guidelines directory:
+   - `overview-components.md` - Component overview and usage patterns
+   - `overview-icons.md` - Icon system and usage
+
+2. **All files in the `design-tokens/` folder**:
+   - `design-tokens/colors.md` - Color token system
+   - `design-tokens/typography.md` - Typography tokens
+   - `design-tokens/spacing.md` - Spacing and size tokens
+
+## Component Usage Guidelines - READ THIS FIRST
+
+**IMPORTANT**: Always prefer to use components from Ant Design if they exist. For example, prefer to use a `Button` component from `antd`, rather than regular HTML button elements.
+
+**IMPORTANT**: Follow these steps IN ORDER before writing any code:
+
+### Step 1: Read Overview Files (REQUIRED)
+
+Read ALL files with a name that starts with "overview-" in the guidelines directory:
+
+- `overview-components.md`
+- `overview-icons.md` (And any other `overview-*.md` files)
+
+### Step 2: Read Design Tokens (REQUIRED)
+
+Read ALL files in the `design-tokens/` folder. Do NOT skip this step. Design tokens are essential for creating consistent, themeable UI.
+
+### Step 3: Plan What Components You Need to Use (REQUIRED)
+
+Before using ANY component, check if Ant Design provides it. Common components include:
+
+- Form controls: Button, Input, Select, Checkbox, Radio, Switch, etc.
+- Data display: Table, List, Card, Tag, Badge, etc.
+- Feedback: Modal, Message, Notification, Alert, etc.
+- Navigation: Menu, Tabs, Breadcrumb, Pagination, etc.
+- Layout: Layout, Grid, Space, Divider, etc.
+
+### Step 4: Read Component Guidelines BEFORE Using Components (REQUIRED)
+
+BEFORE using ANY component, you MUST read its guidelines file first:
+
+- Using Button? → Read `guidelines/components/button.md` FIRST
+- Using Input? → Read `guidelines/components/input.md` FIRST
+- Using Form? → Read `guidelines/components/form.md` FIRST
+- Using Table? → Read `guidelines/components/table.md` FIRST
+
+If a component guideline file doesn't exist, check the component's documentation in `components/[component-name]/index.en-US.md` or `components/[component-name]/index.zh-CN.md`.
+
+### Step 5: Plan What Icons You Need to Use (REQUIRED)
+
+Before using ANY icon, you must check if that icon exists in the `@ant-design/icons` package. If it doesn't, pick a different icon and verify the new icon exists.
+
+**DO NOT write code using a component until you have read its specific guidelines.**
+
+## Import Pattern
+
+Always import components from `antd`:
+
+```typescript
+import { SearchOutlined, UserOutlined } from '@ant-design/icons';
+import { Button, Form, Input, Table } from 'antd';
+```
+
+## Design Token Usage
+
+**NEVER hardcode colors, sizes, spacing, or typography values.** Always use design tokens from Ant Design's theme system. Access tokens through:
+
+1. **Theme configuration** via `ConfigProvider`:
+
+```typescript
+import { ConfigProvider } from 'antd';
+
+<ConfigProvider
+  theme={{
+    token: {
+      colorPrimary: '#1890ff',
+      borderRadius: 6,
+    },
+  }}
+>
+  {/* Your app */}
+</ConfigProvider>
+```
+
+2. **CSS Variables** (when enabled):
+
+```css
+.my-component {
+  color: var(--ant-color-primary);
+  padding: var(--ant-padding-md);
+}
+```
+
+3. **useToken hook** in component styles:
+
+```typescript
+import { theme } from 'antd';
+
+const { token } = theme.useToken();
+// Use token.colorPrimary, token.paddingMD, etc.
+```
+
+## Additional Resources
+
+- Component source code: `components/[component-name]/`
+- Component documentation: `components/[component-name]/index.en-US.md`
+- Design tokens interface: `components/theme/interface/`
+- Design specifications: `docs/spec/`

guidelines/components/affix.md

@@ -0,0 +1,33 @@
+# Affix Component
+
+**Purpose**: Make elements stick to viewport when scrolling.
+
+## When to Use
+
+- Sticky navigation
+- Fixed elements during scroll
+- Keep important elements visible
+
+## Basic Usage
+
+```typescript
+import { Affix } from 'antd';
+
+<Affix offsetTop={10}>
+  <Button type="primary">Affix top</Button>
+</Affix>
+```
+
+## Common Props
+
+| Property       | Description        | Type              | Default      |
+| -------------- | ------------------ | ----------------- | ------------ |
+| `offsetTop`    | Offset from top    | number            | -            |
+| `offsetBottom` | Offset from bottom | number            | -            |
+| `target`       | Target container   | () => HTMLElement | () => window |
+
+## Best Practices
+
+1. **Navigation** - Use for sticky navigation
+2. **Important elements** - Keep important elements visible
+3. **Appropriate offset** - Set appropriate offset values

guidelines/components/alert.md

@@ -0,0 +1,84 @@
+# Alert Component
+
+**Purpose**: Display warning messages that require attention. Used for inline important messages.
+
+## When to Use
+
+- Show alert messages to users
+- Display persistent static containers that are closable
+- Show important information, warnings, or errors
+- Display banner messages at the top of pages
+
+## Basic Usage
+
+```typescript
+import { Alert } from 'antd';
+
+<Alert message="Success Text" type="success" />
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `message` | Alert content | ReactNode | - |
+| `description` | Additional content | ReactNode | - |
+| `type` | Alert type | `'success'` \| `'info'` \| `'warning'` \| `'error'` | `'info'` |
+| `closable` | Show close button | boolean | false |
+| `showIcon` | Show icon | boolean | false |
+| `icon` | Custom icon | ReactNode | - |
+| `banner` | Show as banner | boolean | false |
+| `action` | Custom action | ReactNode | - |
+| `onClose` | Close handler | (e: MouseEvent) => void | - |
+
+## Examples
+
+### Different Types
+
+```typescript
+<Alert message="Success" type="success" />
+<Alert message="Info" type="info" />
+<Alert message="Warning" type="warning" />
+<Alert message="Error" type="error" />
+```
+
+### With Description
+
+```typescript
+<Alert
+  message="Success"
+  description="Detailed description and advice about successful copywriting."
+  type="success"
+  showIcon
+/>
+```
+
+### Closable
+
+```typescript
+<Alert
+  message="Alert"
+  type="info"
+  closable
+  onClose={() => console.log('Closed')}
+/>
+```
+
+### Banner
+
+```typescript
+<Alert
+  message="Banner Alert"
+  type="warning"
+  banner
+  closable
+/>
+```
+
+## Best Practices
+
+1. **Appropriate type** - Use correct type for message severity
+2. **Clear messages** - Provide clear, actionable messages
+3. **Descriptions** - Use description for additional context
+4. **Closable for dismissible** - Make alerts closable when users can dismiss them
+5. **Banner for important** - Use banner mode for important page-level messages

guidelines/components/anchor.md

@@ -0,0 +1,36 @@
+# Anchor Component
+
+**Purpose**: Anchor navigation for jumping to different sections on the same page.
+
+## When to Use
+
+- Navigate to different sections on a long page
+- Create table of contents
+- Quick navigation within a page
+
+## Basic Usage
+
+```typescript
+import { Anchor } from 'antd';
+
+<Anchor
+  items={[
+    { key: 'part-1', href: '#part-1', title: 'Part 1' },
+    { key: 'part-2', href: '#part-2', title: 'Part 2' },
+  ]}
+/>
+```
+
+## Common Props
+
+| Property    | Description     | Type         | Default |
+| ----------- | --------------- | ------------ | ------- |
+| `items`     | Anchor items    | AnchorItem[] | -       |
+| `affix`     | Fixed position  | boolean      | true    |
+| `offsetTop` | Offset from top | number       | 0       |
+
+## Best Practices
+
+1. **Long pages** - Use for pages with multiple sections
+2. **Fixed position** - Use affix for always-visible navigation
+3. **Smooth scrolling** - Ensure smooth scroll behavior

guidelines/components/app.md

@@ -0,0 +1,29 @@
+# App Component
+
+**Purpose**: App-level container for message, notification, and modal context.
+
+## When to Use
+
+- Use message, notification, or modal hooks
+- Need context for static methods
+- App-level container
+
+## Basic Usage
+
+```typescript
+import { App } from 'antd';
+
+function MyApp() {
+  return (
+    <App>
+      <YourComponent />
+    </App>
+  );
+}
+```
+
+## Best Practices
+
+1. **Wrap app** - Wrap app when using hooks like useModal, useMessage
+2. **Context provider** - Provides context for static methods
+3. **Single instance** - Usually one App component per application

guidelines/components/avatar.md

@@ -0,0 +1,34 @@
+# Avatar Component
+
+**Purpose**: Avatar display for users or entities.
+
+## When to Use
+
+- Display user avatars
+- Show entity images
+- Fallback to initials or icons
+
+## Basic Usage
+
+```typescript
+import { Avatar } from 'antd';
+
+<Avatar src="image.jpg" />
+<Avatar>U</Avatar>
+<Avatar icon={<UserOutlined />} />
+```
+
+## Common Props
+
+| Property | Description  | Type                                            | Default     |
+| -------- | ------------ | ----------------------------------------------- | ----------- |
+| `src`    | Image source | string                                          | -           |
+| `icon`   | Icon         | ReactNode                                       | -           |
+| `size`   | Avatar size  | number \| `'large'` \| `'small'` \| `'default'` | `'default'` |
+| `shape`  | Avatar shape | `'circle'` \| `'square'`                        | `'circle'`  |
+
+## Best Practices
+
+1. **Fallback** - Provide fallback (initials or icon)
+2. **Consistent sizing** - Use consistent sizes
+3. **Accessible** - Include alt text or aria-label

guidelines/components/back-top.md

@@ -0,0 +1,30 @@
+# BackTop Component
+
+**Purpose**: Back to top button for long pages.
+
+## When to Use
+
+- Long pages that need quick scroll to top
+- Improve navigation on long content
+- Quick return to top
+
+## Basic Usage
+
+```typescript
+import { BackTop } from 'antd';
+
+<BackTop />
+```
+
+## Common Props
+
+| Property           | Description                 | Type              | Default      |
+| ------------------ | --------------------------- | ----------------- | ------------ |
+| `visibilityHeight` | Show button after scrolling | number            | 400          |
+| `target`           | Target element to listen    | () => HTMLElement | () => window |
+
+## Best Practices
+
+1. **Long pages** - Use for pages with long content
+2. **Visibility height** - Set appropriate visibility height
+3. **Smooth scroll** - Provides smooth scroll to top

guidelines/components/badge.md

@@ -0,0 +1,64 @@
+# Badge Component
+
+**Purpose**: Small numerical value or status descriptor for UI elements. Typically displays unread messages count.
+
+## When to Use
+
+- Display notification count on icons or avatars
+- Show status indicators
+- Display small numerical values
+- Show unread message counts
+
+## Basic Usage
+
+```typescript
+import { Badge } from 'antd';
+
+<Badge count={5}>
+  <Avatar shape="square" size="large" />
+</Badge>
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `count` | Number to show | ReactNode | - |
+| `dot` | Show red dot instead of count | boolean | false |
+| `overflowCount` | Max count to show | number | 99 |
+| `showZero` | Show when count is zero | boolean | false |
+| `offset` | Badge offset | [number, number] | - |
+| `color` | Custom badge color | string | - |
+| `status` | Status badge | `'success'` \| `'processing'` \| `'default'` \| `'error'` \| `'warning'` | - |
+
+## Examples
+
+### Dot Badge
+
+```typescript
+<Badge dot>
+  <NotificationOutlined />
+</Badge>
+```
+
+### Status Badge
+
+```typescript
+<Badge status="success" text="Success" />
+<Badge status="error" text="Error" />
+```
+
+### Overflow Count
+
+```typescript
+<Badge count={1000} overflowCount={999}>
+  <Avatar />
+</Badge>
+```
+
+## Best Practices
+
+1. **Use for notifications** - Use badges for unread counts and notifications
+2. **Overflow handling** - Set appropriate overflowCount
+3. **Status indicators** - Use status prop for status badges
+4. **Don't overuse** - Use badges sparingly to maintain visual hierarchy

guidelines/components/breadcrumb.md

@@ -0,0 +1,36 @@
+# Breadcrumb Component
+
+**Purpose**: Breadcrumb navigation to show the current page location and path.
+
+## When to Use
+
+- Show the current page location within a website hierarchy
+- Navigate back to parent pages
+- Display the navigation path
+
+## Basic Usage
+
+```typescript
+import { Breadcrumb } from 'antd';
+
+<Breadcrumb
+  items={[
+    { title: 'Home' },
+    { title: 'Application' },
+    { title: 'An Application' },
+  ]}
+/>
+```
+
+## Common Props
+
+| Property    | Description      | Type             | Default |
+| ----------- | ---------------- | ---------------- | ------- |
+| `items`     | Breadcrumb items | BreadcrumbItem[] | -       |
+| `separator` | Custom separator | ReactNode        | `/`     |
+
+## Best Practices
+
+1. **Show hierarchy** - Display the full path from home to current page
+2. **Clickable items** - Make parent items clickable for navigation
+3. **Current page** - Don't make the current page clickable

guidelines/components/button.md

@@ -0,0 +1,206 @@
+# Button Component
+
+**Purpose**: Trigger operations and actions. Buttons are the primary way users interact with the interface.
+
+## When to Use
+
+- **Primary Button**: Use for the main action in a section. There should be at most one primary button per section.
+- **Default Button**: Use for a series of actions without priority.
+- **Dashed Button**: Commonly used for adding more actions.
+- **Text Button**: Use for the most secondary actions.
+- **Link Button**: Use for external links or navigation.
+
+## Basic Usage
+
+```typescript
+import { Button } from 'antd';
+
+// Primary button (main action)
+<Button type="primary">Primary</Button>
+
+// Default button
+<Button>Default</Button>
+
+// Dashed button
+<Button type="dashed">Dashed</Button>
+
+// Text button
+<Button type="text">Text</Button>
+
+// Link button
+<Button type="link">Link</Button>
+```
+
+## Button Types and Variants
+
+### Type vs Variant & Color
+
+In Ant Design 5.21.0+, you can use either `type` (syntactic sugar) or `variant` + `color`:
+
+```typescript
+// These are equivalent:
+<Button type="primary">Click</Button>
+<Button color="primary" variant="solid">Click</Button>
+```
+
+**IMPORTANT**: If both `type` and `variant`/`color` are provided, `variant` and `color` take precedence.
+
+### Variants
+
+- **`solid`**: Solid filled button (default for primary)
+- **`outlined`**: Outlined button with transparent background
+- **`dashed`**: Dashed border button
+- **`filled`**: Filled button with background
+- **`text`**: Text-only button
+- **`link`**: Link-style button
+
+### Colors
+
+- **`default`**: Default button color
+- **`primary`**: Primary brand color
+- **`danger`**: Danger/destructive action color
+- **Preset colors**: `'blue'`, `'purple'`, `'cyan'`, `'green'`, `'magenta'`, `'pink'`, `'red'`, `'orange'`, `'yellow'`, `'volcano'`, `'geekblue'`, `'lime'`, `'gold'`
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `type` | Button type (syntactic sugar) | `'primary'` \| `'default'` \| `'dashed'` \| `'text'` \| `'link'` | `'default'` |
+| `variant` | Button variant | `'solid'` \| `'outlined'` \| `'dashed'` \| `'filled'` \| `'text'` \| `'link'` | - |
+| `color` | Button color | `'default'` \| `'primary'` \| `'danger'` \| PresetColors | - |
+| `size` | Button size | `'small'` \| `'middle'` \| `'large'` | `'middle'` |
+| `shape` | Button shape | `'default'` \| `'circle'` \| `'round'` | `'default'` |
+| `icon` | Icon component | ReactNode | - |
+| `iconPosition` | Icon position | `'start'` \| `'end'` | `'start'` |
+| `loading` | Loading state | boolean \| { delay: number, icon: ReactNode } | false |
+| `disabled` | Disabled state | boolean | false |
+| `danger` | Danger status | boolean | false |
+| `ghost` | Ghost button (transparent background) | boolean | false |
+| `block` | Block button (full width) | boolean | false |
+| `htmlType` | HTML button type | `'button'` \| `'submit'` \| `'reset'` | `'button'` |
+| `onClick` | Click handler | (event) => void | - |
+
+## Examples
+
+### With Icons
+
+```typescript
+import { Button } from 'antd';
+import { SearchOutlined, DownloadOutlined } from '@ant-design/icons';
+
+<Button icon={<SearchOutlined />}>Search</Button>
+<Button icon={<DownloadOutlined />} iconPosition="end">Download</Button>
+<Button icon={<SearchOutlined />} />  // Icon-only button
+```
+
+### Sizes
+
+```typescript
+<Button size="small">Small</Button>
+<Button size="middle">Middle</Button>
+<Button size="large">Large</Button>
+```
+
+### Shapes
+
+```typescript
+<Button shape="default">Default</Button>
+<Button shape="round">Round</Button>
+<Button shape="circle" icon={<SearchOutlined />} />  // Circle button (icon only)
+```
+
+### Loading State
+
+```typescript
+<Button loading>Loading</Button>
+<Button loading={{ delay: 1000 }}>Delayed Loading</Button>
+```
+
+### Danger Buttons
+
+```typescript
+<Button danger>Danger</Button>
+<Button type="primary" danger>Danger Primary</Button>
+```
+
+### Block Button
+
+```typescript
+<Button block>Full Width Button</Button>
+```
+
+### Ghost Button
+
+```typescript
+<Button ghost>Ghost Button</Button>
+<Button type="primary" ghost>Ghost Primary</Button>
+```
+
+## Best Practices
+
+1. **One primary action per section** - Use primary button for the main action only
+2. **Clear hierarchy** - Use button types to establish visual hierarchy
+3. **Appropriate sizing** - Use `middle` (default) for most cases, `large` for prominent actions, `small` for compact UI
+4. **Loading states** - Show loading state during async operations to prevent multiple submissions
+5. **Disabled states** - Disable buttons when actions are not available
+6. **Icon placement** - Icons should be on the left (start) by default, use `iconPosition="end"` only when appropriate
+7. **Danger actions** - Use `danger` prop for destructive actions like delete
+8. **Don't override styles** - Use component props instead of custom CSS when possible
+
+## Common Patterns
+
+### Button Groups
+
+```typescript
+import { Button, Space } from 'antd';
+
+<Space>
+  <Button>Cancel</Button>
+  <Button type="primary">Submit</Button>
+</Space>
+```
+
+### Form Actions
+
+```typescript
+<Form onFinish={handleSubmit}>
+  {/* Form fields */}
+  <Form.Item>
+    <Space>
+      <Button onClick={handleCancel}>Cancel</Button>
+      <Button type="primary" htmlType="submit" loading={loading}>
+        Submit
+      </Button>
+    </Space>
+  </Form.Item>
+</Form>
+```
+
+### Icon-Only Buttons
+
+```typescript
+<Button shape="circle" icon={<SearchOutlined />} aria-label="Search" />
+```
+
+## Accessibility
+
+- Buttons are keyboard accessible by default
+- Use `aria-label` for icon-only buttons
+- Ensure sufficient color contrast
+- Don't rely solely on color to convey meaning
+
+## Styling
+
+**IMPORTANT**: Do not override button styles with `className` unless absolutely necessary. Instead:
+
+- Use `variant` and `color` props for styling
+- Use `ConfigProvider` theme customization for global changes
+- Use design tokens for custom styling
+
+```typescript
+// ✅ CORRECT - Using props
+<Button variant="outlined" color="primary">Button</Button>
+
+// ❌ WRONG - Overriding with className
+<Button className="custom-button">Button</Button>
+```

guidelines/components/card.md

@@ -0,0 +1,74 @@
+# Card Component
+
+**Purpose**: A container for displaying information. Used to display content related to a single subject.
+
+## When to Use
+
+- Display content related to a single subject
+- Group related information together
+- Create visual containers for content sections
+- Display cards in grids or lists
+
+## Basic Usage
+
+```typescript
+import { Card } from 'antd';
+
+<Card title="Card Title">
+  Card content
+</Card>
+```
+
+## Common Props
+
+| Property    | Description                 | Type                     | Default     |
+| ----------- | --------------------------- | ------------------------ | ----------- |
+| `title`     | Card title                  | ReactNode                | -           |
+| `extra`     | Content in top-right corner | ReactNode                | -           |
+| `actions`   | Action list at bottom       | ReactNode[]              | -           |
+| `cover`     | Card cover image            | ReactNode                | -           |
+| `loading`   | Loading state               | boolean                  | false       |
+| `hoverable` | Lift up when hovering       | boolean                  | false       |
+| `bordered`  | Show border                 | boolean                  | true        |
+| `size`      | Card size                   | `'default'` \| `'small'` | `'default'` |
+
+## Examples
+
+### With Cover
+
+```typescript
+<Card
+  cover={<img alt="example" src="..." />}
+  actions={[<SettingOutlined />, <EditOutlined />]}
+>
+  <Card.Meta title="Card Title" description="Card description" />
+</Card>
+```
+
+### Loading Card
+
+```typescript
+<Card loading={loading} title="Card Title">
+  Content
+</Card>
+```
+
+### Grid Cards
+
+```typescript
+<Row gutter={16}>
+  <Col span={8}>
+    <Card title="Card 1">Content</Card>
+  </Col>
+  <Col span={8}>
+    <Card title="Card 2">Content</Card>
+  </Col>
+</Row>
+```
+
+## Best Practices
+
+1. **Single subject** - Each card should focus on a single subject
+2. **Clear hierarchy** - Use title, description, and actions appropriately
+3. **Loading states** - Show loading state while fetching data
+4. **Hoverable for interaction** - Use hoverable for clickable cards

guidelines/components/carousel.md

@@ -0,0 +1,39 @@
+# Carousel Component
+
+**Purpose**: Carousel/slider for cycling through content.
+
+## When to Use
+
+- Image carousels
+- Content sliders
+- Rotating content display
+
+## Basic Usage
+
+```typescript
+import { Carousel } from 'antd';
+
+<Carousel>
+  <div>
+    <h3>1</h3>
+  </div>
+  <div>
+    <h3>2</h3>
+  </div>
+</Carousel>
+```
+
+## Common Props
+
+| Property   | Description      | Type    | Default |
+| ---------- | ---------------- | ------- | ------- |
+| `autoplay` | Auto play        | boolean | false   |
+| `dots`     | Show dots        | boolean | true    |
+| `infinite` | Infinite loop    | boolean | true    |
+| `speed`    | Transition speed | number  | 500     |
+
+## Best Practices
+
+1. **Image carousels** - Use for image galleries
+2. **Auto play** - Use autoplay sparingly
+3. **Navigation** - Provide clear navigation controls

guidelines/components/cascader.md

@@ -0,0 +1,33 @@
+# Cascader Component
+
+**Purpose**: Cascading selector for hierarchical data selection.
+
+## When to Use
+
+- Select from hierarchical data
+- Multi-level selection
+- Region, category selection
+
+## Basic Usage
+
+```typescript
+import { Cascader } from 'antd';
+
+<Cascader options={options} onChange={onChange} placeholder="Please select" />
+```
+
+## Common Props
+
+| Property     | Description        | Type                             | Default |
+| ------------ | ------------------ | -------------------------------- | ------- |
+| `options`    | Cascader options   | CascaderOption[]                 | -       |
+| `value`      | Selected value     | string[]                         | -       |
+| `onChange`   | Change handler     | (value, selectedOptions) => void | -       |
+| `showSearch` | Enable search      | boolean                          | false   |
+| `multiple`   | Multiple selection | boolean                          | false   |
+
+## Best Practices
+
+1. **Form integration** - Always use within Form.Item
+2. **Search for many options** - Enable search for large option sets
+3. **Clear labels** - Provide clear option labels

guidelines/components/checkbox.md

@@ -0,0 +1,38 @@
+# Checkbox Component
+
+**Purpose**: Checkbox input for selecting one or multiple options.
+
+## When to Use
+
+- Select one or multiple options
+- Use Checkbox.Group for multiple related options
+- Form inputs for boolean or multiple selections
+
+## Basic Usage
+
+```typescript
+import { Checkbox } from 'antd';
+
+<Checkbox>Checkbox</Checkbox>
+
+<Checkbox.Group
+  options={['Apple', 'Pear', 'Orange']}
+  onChange={handleChange}
+/>
+```
+
+## Common Props
+
+| Property         | Description         | Type        | Default |
+| ---------------- | ------------------- | ----------- | ------- |
+| `checked`        | Checked state       | boolean     | false   |
+| `defaultChecked` | Default checked     | boolean     | false   |
+| `disabled`       | Disabled state      | boolean     | false   |
+| `indeterminate`  | Indeterminate state | boolean     | false   |
+| `onChange`       | Change handler      | (e) => void | -       |
+
+## Best Practices
+
+1. **Form integration** - Always use within Form.Item
+2. **Group for multiple** - Use Checkbox.Group for related options
+3. **Indeterminate** - Use for parent checkboxes with mixed children states

guidelines/components/collapse.md

@@ -0,0 +1,40 @@
+# Collapse Component
+
+**Purpose**: Collapsible panels for showing and hiding content.
+
+## When to Use
+
+- Show/hide content sections
+- Accordion-style content
+- FAQ sections
+
+## Basic Usage
+
+```typescript
+import { Collapse } from 'antd';
+
+<Collapse
+  items={[
+    {
+      key: '1',
+      label: 'This is panel header 1',
+      children: <p>Content</p>,
+    },
+  ]}
+/>
+```
+
+## Common Props
+
+| Property           | Description                  | Type               | Default |
+| ------------------ | ---------------------------- | ------------------ | ------- |
+| `items`            | Collapse items               | CollapseItem[]     | -       |
+| `activeKey`        | Active panel keys            | string \| string[] | -       |
+| `defaultActiveKey` | Default active keys          | string \| string[] | -       |
+| `accordion`        | Accordion mode (single open) | boolean            | false   |
+
+## Best Practices
+
+1. **Clear labels** - Provide clear panel labels
+2. **Accordion mode** - Use accordion for single-open behavior
+3. **Organized content** - Group related content in panels

guidelines/components/color-picker.md

@@ -0,0 +1,33 @@
+# ColorPicker Component
+
+**Purpose**: Color picker for selecting colors.
+
+## When to Use
+
+- Select colors
+- Color customization
+- Theme color selection
+
+## Basic Usage
+
+```typescript
+import { ColorPicker } from 'antd';
+
+<ColorPicker defaultValue="#1677ff" onChange={onChange} />
+```
+
+## Common Props
+
+| Property       | Description     | Type                          | Default |
+| -------------- | --------------- | ----------------------------- | ------- |
+| `value`        | Selected color  | string                        | -       |
+| `defaultValue` | Default color   | string                        | -       |
+| `format`       | Color format    | `'hex'` \| `'rgb'` \| `'hsb'` | `'hex'` |
+| `onChange`     | Change handler  | (color, colorString) => void  | -       |
+| `showText`     | Show color text | boolean                       | false   |
+
+## Best Practices
+
+1. **Form integration** - Always use within Form.Item
+2. **Color format** - Choose appropriate color format
+3. **Show text** - Use showText for better UX

guidelines/components/config-provider.md

@@ -0,0 +1,43 @@
+# ConfigProvider Component
+
+**Purpose**: Global configuration for Ant Design components. Provides theme, locale, and other global settings.
+
+## When to Use
+
+- Configure global theme
+- Set locale for internationalization
+- Customize design tokens globally
+- Configure component defaults
+
+## Basic Usage
+
+```typescript
+import { ConfigProvider } from 'antd';
+
+<ConfigProvider
+  theme={{
+    token: {
+      colorPrimary: '#00b96b',
+    },
+  }}
+  locale={zhCN}
+>
+  <App />
+</ConfigProvider>
+```
+
+## Common Props
+
+| Property        | Description          | Type                                 | Default |
+| --------------- | -------------------- | ------------------------------------ | ------- |
+| `theme`         | Theme configuration  | ThemeConfig                          | -       |
+| `locale`        | Locale configuration | Locale                               | -       |
+| `direction`     | Text direction       | `'ltr'` \| `'rtl'`                   | `'ltr'` |
+| `componentSize` | Component size       | `'small'` \| `'middle'` \| `'large'` | -       |
+
+## Best Practices
+
+1. **Wrap app** - Wrap your entire app with ConfigProvider
+2. **Theme customization** - Use theme prop for global customization
+3. **Locale** - Set locale for internationalization
+4. **Nested providers** - Can nest providers for different sections

guidelines/components/date-picker.md

@@ -0,0 +1,35 @@
+# DatePicker Component
+
+**Purpose**: Date picker for selecting dates.
+
+## When to Use
+
+- Select dates
+- Date range selection
+- Form date inputs
+
+## Basic Usage
+
+```typescript
+import { DatePicker } from 'antd';
+
+<DatePicker onChange={onChange} />
+<RangePicker onChange={onChange} />
+```
+
+## Common Props
+
+| Property       | Description           | Type                       | Default        |
+| -------------- | --------------------- | -------------------------- | -------------- |
+| `value`        | Selected date         | dayjs                      | -              |
+| `defaultValue` | Default date          | dayjs                      | -              |
+| `format`       | Date format           | string                     | `'YYYY-MM-DD'` |
+| `onChange`     | Change handler        | (date, dateString) => void | -              |
+| `disabledDate` | Disable date function | (current) => boolean       | -              |
+
+## Best Practices
+
+1. **Form integration** - Always use within Form.Item
+2. **Date format** - Set appropriate date format
+3. **Range picker** - Use RangePicker for date ranges
+4. **Disabled dates** - Use disabledDate to restrict dates

guidelines/components/descriptions.md

@@ -0,0 +1,35 @@
+# Descriptions Component
+
+**Purpose**: Display read-only fields in groups. Key-value pairs.
+
+## When to Use
+
+- Display read-only information
+- Show key-value pairs
+- Detail views and information display
+
+## Basic Usage
+
+```typescript
+import { Descriptions } from 'antd';
+
+<Descriptions title="User Info">
+  <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
+  <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
+  <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
+</Descriptions>
+```
+
+## Common Props
+
+| Property   | Description        | Type      | Default |
+| ---------- | ------------------ | --------- | ------- |
+| `title`    | Descriptions title | ReactNode | -       |
+| `column`   | Number of columns  | number    | 3       |
+| `bordered` | Show border        | boolean   | false   |
+
+## Best Practices
+
+1. **Read-only data** - Use for displaying read-only information
+2. **Key-value pairs** - Perfect for key-value data display
+3. **Appropriate columns** - Set columns based on screen size

guidelines/components/divider.md

@@ -0,0 +1,62 @@
+# Divider Component
+
+**Purpose**: Content divider for separating sections.
+
+## When to Use
+
+- Separate content sections
+- Divide different types of content
+- Create visual separation between elements
+
+## Basic Usage
+
+```typescript
+import { Divider } from 'antd';
+
+<Divider />
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `type` | Divider type | `'horizontal'` \| `'vertical'` | `'horizontal'` |
+| `orientation` | Text orientation | `'left'` \| `'right'` \| `'center'` | `'center'` |
+| `orientationMargin` | Margin for text | number \| string | - |
+| `dashed` | Dashed line | boolean | false |
+| `plain` | Plain text (no border) | boolean | false |
+
+## Examples
+
+### With Text
+
+```typescript
+<Divider>Text</Divider>
+<Divider orientation="left">Left Text</Divider>
+<Divider orientation="right">Right Text</Divider>
+```
+
+### Dashed
+
+```typescript
+<Divider dashed>Dashed</Divider>
+```
+
+### Vertical
+
+```typescript
+<Space>
+  <span>Text</span>
+  <Divider type="vertical" />
+  <span>Text</span>
+  <Divider type="vertical" />
+  <span>Text</span>
+</Space>
+```
+
+## Best Practices
+
+1. **Use for separation** - Use dividers to separate distinct content sections
+2. **Avoid overuse** - Don't use too many dividers, use spacing instead when possible
+3. **Text orientation** - Use appropriate text orientation for context
+4. **Vertical dividers** - Use vertical dividers in inline contexts (Space, etc.)

guidelines/components/drawer.md

@@ -0,0 +1,40 @@
+# Drawer Component
+
+**Purpose**: Drawer panel that slides in from the edge of the screen.
+
+## When to Use
+
+- Show additional content from the side
+- Display forms or details
+- Mobile-friendly side panels
+
+## Basic Usage
+
+```typescript
+import { Drawer } from 'antd';
+
+<Drawer
+  title="Drawer Title"
+  placement="right"
+  onClose={onClose}
+  open={open}
+>
+  <p>Drawer content</p>
+</Drawer>
+```
+
+## Common Props
+
+| Property    | Description      | Type                                           | Default   |
+| ----------- | ---------------- | ---------------------------------------------- | --------- |
+| `open`      | Visible state    | boolean                                        | false     |
+| `title`     | Drawer title     | ReactNode                                      | -         |
+| `placement` | Drawer placement | `'top'` \| `'right'` \| `'bottom'` \| `'left'` | `'right'` |
+| `width`     | Drawer width     | number \| string                               | 378       |
+| `onClose`   | Close handler    | (e) => void                                    | -         |
+
+## Best Practices
+
+1. **Right placement** - Use right placement for most cases
+2. **Appropriate width** - Set width based on content
+3. **Mobile friendly** - Drawers work well on mobile

guidelines/components/empty.md

@@ -0,0 +1,30 @@
+# Empty Component
+
+**Purpose**: Empty state placeholder when there is no data.
+
+## When to Use
+
+- Show empty state when no data
+- Display helpful messages for empty states
+- Guide users when content is missing
+
+## Basic Usage
+
+```typescript
+import { Empty } from 'antd';
+
+<Empty description="No Data" />
+```
+
+## Common Props
+
+| Property      | Description       | Type      | Default     |
+| ------------- | ----------------- | --------- | ----------- |
+| `description` | Empty description | ReactNode | `'No Data'` |
+| `image`       | Custom image      | ReactNode | -           |
+
+## Best Practices
+
+1. **Helpful messages** - Provide helpful, actionable messages
+2. **Custom images** - Use custom images for branded empty states
+3. **Action guidance** - Guide users on what to do next

guidelines/components/flex.md

@@ -0,0 +1,69 @@
+# Flex Component
+
+**Purpose**: Flexbox layout component for flexible layouts.
+
+## When to Use
+
+- Need flexible box layout
+- Align items in rows or columns
+- Distribute space between elements
+- More control than Space component
+
+## Basic Usage
+
+```typescript
+import { Flex } from 'antd';
+
+<Flex>
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Flex>
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `vertical` | Vertical layout | boolean | false |
+| `wrap` | Wrap items | boolean | false |
+| `gap` | Gap between items | number \| string \| [number, number] | - |
+| `justify` | Justify content | `'start'` \| `'end'` \| `'center'` \| `'space-between'` \| `'space-around'` \| `'space-evenly'` | `'start'` |
+| `align` | Align items | `'start'` \| `'end'` \| `'center'` \| `'baseline'` \| `'stretch'` | `'start'` |
+
+## Examples
+
+### Vertical Layout
+
+```typescript
+<Flex vertical gap="middle">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Flex>
+```
+
+### Justify Content
+
+```typescript
+<Flex justify="space-between">
+  <div>Left</div>
+  <div>Right</div>
+</Flex>
+```
+
+### With Gap
+
+```typescript
+<Flex gap={16}>
+  <div>Item 1</div>
+  <div>Item 2</div>
+</Flex>
+```
+
+## Best Practices
+
+1. **Use for block layouts** - Use Flex for block-level element layouts
+2. **More control than Space** - Use Flex when you need more layout control
+3. **Gap for spacing** - Use gap prop for consistent spacing
+4. **Responsive** - Combine with responsive utilities for mobile layouts

guidelines/components/float-button.md

@@ -0,0 +1,32 @@
+# FloatButton Component
+
+**Purpose**: Floating action button for primary actions.
+
+## When to Use
+
+- Primary action button
+- Quick access to main actions
+- Floating action buttons
+
+## Basic Usage
+
+```typescript
+import { FloatButton } from 'antd';
+
+<FloatButton icon={<CustomerServiceOutlined />} />
+```
+
+## Common Props
+
+| Property  | Description  | Type                       | Default     |
+| --------- | ------------ | -------------------------- | ----------- |
+| `icon`    | Button icon  | ReactNode                  | -           |
+| `type`    | Button type  | `'default'` \| `'primary'` | `'default'` |
+| `shape`   | Button shape | `'circle'` \| `'square'`   | `'circle'`  |
+| `tooltip` | Tooltip text | ReactNode                  | -           |
+
+## Best Practices
+
+1. **Primary actions** - Use for primary, frequently used actions
+2. **Icon clarity** - Use clear, recognizable icons
+3. **Tooltip** - Provide tooltip for icon-only buttons

guidelines/components/form.md

@@ -0,0 +1,426 @@
+# Form Component
+
+**Purpose**: Form container with validation, layout, and data management. The Form component is essential for all data entry in Ant Design applications.
+
+## When to Use
+
+- Use `Form` for any data collection (user input, settings, search filters, etc.)
+- Always wrap form controls (Input, Select, etc.) in `Form.Item`
+- Use `Form` for validation, error handling, and form state management
+
+## Basic Usage
+
+```typescript
+import { Form, Input, Button } from 'antd';
+
+const App = () => {
+  const onFinish = (values) => {
+    console.log('Success:', values);
+  };
+
+  const onFinishFailed = (errorInfo) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  return (
+    <Form
+      name="basic"
+      onFinish={onFinish}
+      onFinishFailed={onFinishFailed}
+      autoComplete="off"
+    >
+      <Form.Item
+        label="Username"
+        name="username"
+        rules={[{ required: true, message: 'Please input your username!' }]}
+      >
+        <Input />
+      </Form.Item>
+
+      <Form.Item
+        label="Password"
+        name="password"
+        rules={[{ required: true, message: 'Please input your password!' }]}
+      >
+        <Input.Password />
+      </Form.Item>
+
+      <Form.Item>
+        <Button type="primary" htmlType="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+};
+```
+
+## Form Hook
+
+Use `Form.useForm()` to access form instance for programmatic control:
+
+```typescript
+import { Form, Input, Button } from 'antd';
+
+const App = () => {
+  const [form] = Form.useForm();
+
+  const onFinish = (values) => {
+    console.log('Success:', values);
+  };
+
+  const onReset = () => {
+    form.resetFields();
+  };
+
+  const onFill = () => {
+    form.setFieldsValue({
+      username: 'hello',
+      password: 'world',
+    });
+  };
+
+  return (
+    <Form form={form} onFinish={onFinish}>
+      <Form.Item name="username" rules={[{ required: true }]}>
+        <Input />
+      </Form.Item>
+      <Form.Item name="password" rules={[{ required: true }]}>
+        <Input.Password />
+      </Form.Item>
+      <Form.Item>
+        <Button type="primary" htmlType="submit">Submit</Button>
+        <Button htmlType="button" onClick={onReset}>Reset</Button>
+        <Button type="link" onClick={onFill}>Fill form</Button>
+      </Form.Item>
+    </Form>
+  );
+};
+```
+
+## Common Props
+
+### Form Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `form` | Form instance from `Form.useForm()` | FormInstance | - |
+| `name` | Form name | string | - |
+| `layout` | Form layout | `'horizontal'` \| `'vertical'` \| `'inline'` | `'horizontal'` |
+| `labelCol` | Label column layout | ColProps | - |
+| `wrapperCol` | Wrapper column layout | ColProps | - |
+| `colon` | Show colon after label | boolean | true |
+| `requiredMark` | Required mark style | boolean \| `'optional'` | true |
+| `onFinish` | Submit handler | (values) => void | - |
+| `onFinishFailed` | Failed submit handler | (errorInfo) => void | - |
+| `onValuesChange` | Values change handler | (changedValues, allValues) => void | - |
+| `initialValues` | Initial form values | object | - |
+| `preserve` | Preserve field values when removed | boolean | true |
+| `validateMessages` | Custom validation messages | object | - |
+
+### Form.Item Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `name` | Field name (required for form data) | string \| number \| (string \| number)[] | - |
+| `label` | Label text | ReactNode | - |
+| `rules` | Validation rules | Rule[] | - |
+| `required` | Required field | boolean | false |
+| `hasFeedback` | Show validation feedback icon | boolean | false |
+| `validateStatus` | Validation status | `'success'` \| `'warning'` \| `'error'` \| `'validating'` | - |
+| `help` | Help text | ReactNode | - |
+| `extra` | Extra information | ReactNode | - |
+| `tooltip` | Tooltip for label | ReactNode | - |
+| `dependencies` | Dependencies for field updates | NamePath[] | - |
+| `noStyle` | No style wrapper | boolean | false |
+| `shouldUpdate` | Should update when values change | boolean \| (prevValues, curValues) => boolean | false |
+
+## Validation Rules
+
+### Built-in Rules
+
+```typescript
+<Form.Item
+  name="email"
+  rules={[
+    { required: true, message: 'Email is required' },
+    { type: 'email', message: 'Invalid email format' },
+    { min: 6, message: 'Minimum 6 characters' },
+    { max: 20, message: 'Maximum 20 characters' },
+    { pattern: /^[A-Z]/, message: 'Must start with uppercase' },
+  ]}
+>
+  <Input />
+</Form.Item>
+```
+
+### Custom Validator
+
+```typescript
+<Form.Item
+  name="password"
+  rules={[
+    { required: true },
+    {
+      validator: (_, value) => {
+        if (!value || value.length >= 8) {
+          return Promise.resolve();
+        }
+        return Promise.reject(new Error('Password must be at least 8 characters'));
+      },
+    },
+  ]}
+>
+  <Input.Password />
+</Form.Item>
+```
+
+### Async Validator
+
+```typescript
+<Form.Item
+  name="username"
+  rules={[
+    { required: true },
+    {
+      validator: async (_, value) => {
+        const exists = await checkUsernameExists(value);
+        if (exists) {
+          return Promise.reject(new Error('Username already exists'));
+        }
+      },
+    },
+  ]}
+>
+  <Input />
+</Form.Item>
+```
+
+## Form Layouts
+
+### Horizontal Layout (Default)
+
+```typescript
+<Form layout="horizontal" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }}>
+  <Form.Item label="Username" name="username">
+    <Input />
+  </Form.Item>
+</Form>
+```
+
+### Vertical Layout
+
+```typescript
+<Form layout="vertical">
+  <Form.Item label="Username" name="username">
+    <Input />
+  </Form.Item>
+</Form>
+```
+
+### Inline Layout
+
+```typescript
+<Form layout="inline">
+  <Form.Item name="username">
+    <Input placeholder="Username" />
+  </Form.Item>
+  <Form.Item name="password">
+    <Input.Password placeholder="Password" />
+  </Form.Item>
+  <Form.Item>
+    <Button type="primary" htmlType="submit">Submit</Button>
+  </Form.Item>
+</Form>
+```
+
+## Dependent Fields
+
+### Basic Dependency
+
+```typescript
+<Form.Item
+  name="password"
+  rules={[{ required: true }]}
+>
+  <Input.Password />
+</Form.Item>
+
+<Form.Item
+  name="confirmPassword"
+  dependencies={['password']}
+  rules={[
+    { required: true },
+    ({ getFieldValue }) => ({
+      validator(_, value) {
+        if (!value || getFieldValue('password') === value) {
+          return Promise.resolve();
+        }
+        return Promise.reject(new Error('Passwords do not match'));
+      },
+    }),
+  ]}
+>
+  <Input.Password />
+</Form.Item>
+```
+
+### Conditional Fields
+
+```typescript
+<Form.Item name="type">
+  <Select>
+    <Select.Option value="email">Email</Select.Option>
+    <Select.Option value="phone">Phone</Select.Option>
+  </Select>
+</Form.Item>
+
+<Form.Item
+  noStyle
+  shouldUpdate={(prevValues, currentValues) =>
+    prevValues.type !== currentValues.type
+  }
+>
+  {({ getFieldValue }) =>
+    getFieldValue('type') === 'email' ? (
+      <Form.Item name="email" rules={[{ type: 'email' }]}>
+        <Input />
+      </Form.Item>
+    ) : (
+      <Form.Item name="phone" rules={[{ pattern: /^\d+$/ }]}>
+        <Input />
+      </Form.Item>
+    )
+  }
+</Form.Item>
+```
+
+## Form Methods
+
+Access form methods via `Form.useForm()`:
+
+```typescript
+const [form] = Form.useForm();
+
+// Get field value
+const username = form.getFieldValue('username');
+
+// Get all values
+const values = form.getFieldsValue();
+
+// Set field value
+form.setFieldsValue({ username: 'new value' });
+
+// Set single field
+form.setFieldValue('username', 'new value');
+
+// Reset fields
+form.resetFields();
+
+// Reset specific field
+form.resetFields(['username']);
+
+// Validate fields
+form.validateFields().then((values) => {
+  console.log('Valid:', values);
+});
+
+// Validate specific field
+form.validateFields(['username']);
+
+// Get field error
+const error = form.getFieldError('username');
+
+// Check if field is touched
+const touched = form.isFieldTouched('username');
+
+// Check if field is dirty (changed)
+const dirty = form.isFieldsTouched(['username'], true);
+```
+
+## Best Practices
+
+1. **Always use Form.Item** - Wrap all form controls in `Form.Item` with `name` prop
+2. **Use validation rules** - Always provide validation rules for required fields
+3. **Provide helpful messages** - Use clear, actionable error messages
+4. **Use form instance** - Use `Form.useForm()` for programmatic control
+5. **Handle submit properly** - Use `htmlType="submit"` on submit button
+6. **Use appropriate layout** - Choose layout based on form complexity
+7. **Show feedback** - Use `hasFeedback` for visual validation feedback
+8. **Dependent fields** - Use `dependencies` and `shouldUpdate` for dependent fields
+9. **Initial values** - Use `initialValues` for default values, not `defaultValue` on controls
+10. **Preserve values** - Use `preserve={false}` if you want to clear removed fields
+
+## Common Patterns
+
+### Login Form
+
+```typescript
+<Form onFinish={handleLogin}>
+  <Form.Item
+    name="username"
+    rules={[{ required: true, message: 'Please input username!' }]}
+  >
+    <Input prefix={<UserOutlined />} placeholder="Username" />
+  </Form.Item>
+  <Form.Item
+    name="password"
+    rules={[{ required: true, message: 'Please input password!' }]}
+  >
+    <Input.Password prefix={<LockOutlined />} placeholder="Password" />
+  </Form.Item>
+  <Form.Item>
+    <Button type="primary" htmlType="submit" block>
+      Login
+    </Button>
+  </Form.Item>
+</Form>
+```
+
+### Form with Reset
+
+```typescript
+const [form] = Form.useForm();
+
+<Form form={form} onFinish={handleSubmit}>
+  {/* Form fields */}
+  <Form.Item>
+    <Space>
+      <Button type="primary" htmlType="submit">Submit</Button>
+      <Button onClick={() => form.resetFields()}>Reset</Button>
+    </Space>
+  </Form.Item>
+</Form>
+```
+
+### Dynamic Form Fields
+
+```typescript
+<Form.List name="items">
+  {(fields, { add, remove }) => (
+    <>
+      {fields.map((field) => (
+        <Space key={field.key}>
+          <Form.Item {...field} name={[field.name, 'name']}>
+            <Input placeholder="Item name" />
+          </Form.Item>
+          <Form.Item {...field} name={[field.name, 'value']}>
+            <Input placeholder="Item value" />
+          </Form.Item>
+          <Button onClick={() => remove(field.name)}>Remove</Button>
+        </Space>
+      ))}
+      <Form.Item>
+        <Button type="dashed" onClick={() => add()}>Add Item</Button>
+      </Form.Item>
+    </>
+  )}
+</Form.List>
+```
+
+## Accessibility
+
+- Forms are keyboard accessible by default
+- Labels are properly associated with inputs
+- Error messages are announced to screen readers
+- Required fields are clearly marked

guidelines/components/grid.md

@@ -0,0 +1,84 @@
+# Grid Component
+
+**Purpose**: 24-column grid system for responsive layouts.
+
+## When to Use
+
+- Create responsive page layouts
+- Need column-based layout system
+- Build forms and data displays with consistent spacing
+
+## Basic Usage
+
+```typescript
+import { Row, Col } from 'antd';
+
+<Row>
+  <Col span={12}>col-12</Col>
+  <Col span={12}>col-12</Col>
+</Row>
+```
+
+## Common Props
+
+### Row Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `gutter` | Spacing between columns | number \| [number, number] | 0 |
+| `align` | Vertical alignment | `'top'` \| `'middle'` \| `'bottom'` | `'top'` |
+| `justify` | Horizontal alignment | `'start'` \| `'end'` \| `'center'` \| `'space-around'` \| `'space-between'` | `'start'` |
+| `wrap` | Auto wrap | boolean | true |
+
+### Col Props
+
+| Property | Description        | Type             | Default |
+| -------- | ------------------ | ---------------- | ------- |
+| `span`   | Column span (1-24) | number           | -       |
+| `offset` | Column offset      | number           | 0       |
+| `push`   | Column push        | number           | 0       |
+| `pull`   | Column pull        | number           | 0       |
+| `xs`     | <576px breakpoint  | number \| object | -       |
+| `sm`     | ≥576px breakpoint  | number \| object | -       |
+| `md`     | ≥768px breakpoint  | number \| object | -       |
+| `lg`     | ≥992px breakpoint  | number \| object | -       |
+| `xl`     | ≥1200px breakpoint | number \| object | -       |
+| `xxl`    | ≥1600px breakpoint | number \| object | -       |
+
+## Examples
+
+### Basic Grid
+
+```typescript
+<Row gutter={16}>
+  <Col span={8}>col-8</Col>
+  <Col span={8}>col-8</Col>
+  <Col span={8}>col-8</Col>
+</Row>
+```
+
+### Responsive Grid
+
+```typescript
+<Row gutter={16}>
+  <Col xs={24} sm={12} md={8} lg={6} xl={4}>
+    Responsive column
+  </Col>
+</Row>
+```
+
+### Gutter
+
+```typescript
+<Row gutter={[16, 16]}>
+  <Col span={12}>Column 1</Col>
+  <Col span={12}>Column 2</Col>
+</Row>
+```
+
+## Best Practices
+
+1. **Total 24 columns** - Sum of spans should equal 24
+2. **Use gutter** - Always set gutter for spacing between columns
+3. **Responsive design** - Use breakpoint props for responsive layouts
+4. **Nested grids** - Can nest Row/Col for complex layouts

guidelines/components/image.md

@@ -0,0 +1,36 @@
+# Image Component
+
+**Purpose**: Image display with preview functionality.
+
+## When to Use
+
+- Display images with preview
+- Image galleries
+- Images that need zoom/preview
+
+## Basic Usage
+
+```typescript
+import { Image } from 'antd';
+
+<Image
+  width={200}
+  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+/>
+```
+
+## Common Props
+
+| Property  | Description    | Type              | Default |
+| --------- | -------------- | ----------------- | ------- |
+| `src`     | Image source   | string            | -       |
+| `width`   | Image width    | number            | -       |
+| `height`  | Image height   | number            | -       |
+| `preview` | Enable preview | boolean \| object | true    |
+| `alt`     | Alt text       | string            | -       |
+
+## Best Practices
+
+1. **Alt text** - Always provide alt text for accessibility
+2. **Preview** - Enable preview for detailed images
+3. **Appropriate sizing** - Set appropriate width/height

guidelines/components/input-number.md

@@ -0,0 +1,36 @@
+# InputNumber Component
+
+**Purpose**: Number input field with increment/decrement controls.
+
+## When to Use
+
+- Input numeric values
+- Need increment/decrement controls
+- Form inputs for numbers
+
+## Basic Usage
+
+```typescript
+import { InputNumber } from 'antd';
+
+<InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />
+```
+
+## Common Props
+
+| Property       | Description       | Type                            | Default |
+| -------------- | ----------------- | ------------------------------- | ------- |
+| `value`        | Current value     | number                          | -       |
+| `defaultValue` | Default value     | number                          | -       |
+| `min`          | Minimum value     | number                          | -       |
+| `max`          | Maximum value     | number                          | -       |
+| `step`         | Step value        | number \| string                | 1       |
+| `precision`    | Decimal precision | number                          | -       |
+| `disabled`     | Disabled state    | boolean                         | false   |
+| `onChange`     | Change handler    | (value: number \| null) => void | -       |
+
+## Best Practices
+
+1. **Form integration** - Always use within Form.Item
+2. **Set min/max** - Set appropriate min and max values
+3. **Precision** - Set precision for decimal numbers

guidelines/components/input.md

@@ -0,0 +1,252 @@
+# Input Component
+
+**Purpose**: Text input field for single-line text entry.
+
+## When to Use
+
+- Use `Input` for single-line text input
+- Use `Input.Password` for password fields
+- Use `Input.Search` for search inputs with search button
+- Use `Input.TextArea` for multiline text input (or use `TextArea` component)
+- Use `Input.Group` for input groups with addons
+
+## Basic Usage
+
+```typescript
+import { Input } from 'antd';
+
+// Basic input
+<Input placeholder="Enter text" />
+
+// Controlled input
+const [value, setValue] = useState('');
+<Input value={value} onChange={(e) => setValue(e.target.value)} />
+
+// Uncontrolled input
+<Input defaultValue="Initial value" />
+```
+
+## Input Variants
+
+### Password Input
+
+```typescript
+import { Input } from 'antd';
+
+<Input.Password placeholder="Enter password" />
+```
+
+### Search Input
+
+```typescript
+<Input.Search
+  placeholder="Search"
+  onSearch={(value) => console.log(value)}
+  enterButton
+/>
+```
+
+### TextArea
+
+```typescript
+<Input.TextArea
+  rows={4}
+  placeholder="Enter multiline text"
+/>
+```
+
+Or use the dedicated `TextArea` component:
+
+```typescript
+import { Input } from 'antd';
+const { TextArea } = Input;
+
+<TextArea rows={4} placeholder="Enter text" />
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `value` | Input value (controlled) | string | - |
+| `defaultValue` | Default value (uncontrolled) | string | - |
+| `placeholder` | Placeholder text | string | - |
+| `size` | Input size | `'small'` \| `'middle'` \| `'large'` | `'middle'` |
+| `prefix` | Prefix icon or element | ReactNode | - |
+| `suffix` | Suffix icon or element | ReactNode | - |
+| `addonBefore` | Addon before input | ReactNode | - |
+| `addonAfter` | Addon after input | ReactNode | - |
+| `allowClear` | Show clear button | boolean | false |
+| `disabled` | Disabled state | boolean | false |
+| `readOnly` | Read-only state | boolean | false |
+| `maxLength` | Maximum length | number | - |
+| `showCount` | Show character count | boolean | false |
+| `onChange` | Change handler | (e: ChangeEvent) => void | - |
+| `onPressEnter` | Enter key handler | (e: KeyboardEvent) => void | - |
+
+## Examples
+
+### With Icons
+
+```typescript
+import { Input } from 'antd';
+import { UserOutlined, LockOutlined, SearchOutlined } from '@ant-design/icons';
+
+<Input prefix={<UserOutlined />} placeholder="Username" />
+<Input.Password prefix={<LockOutlined />} placeholder="Password" />
+<Input suffix={<SearchOutlined />} placeholder="Search" />
+```
+
+### Sizes
+
+```typescript
+<Input size="small" placeholder="Small" />
+<Input size="middle" placeholder="Middle" />
+<Input size="large" placeholder="Large" />
+```
+
+### With Addons
+
+```typescript
+<Input.Group compact>
+  <Input style={{ width: '20%' }} defaultValue="0571" />
+  <Input style={{ width: '30%' }} defaultValue="26888888" />
+</Input.Group>
+
+<Input
+  addonBefore="https://"
+  addonAfter=".com"
+  defaultValue="mysite"
+/>
+```
+
+### Clearable Input
+
+```typescript
+<Input allowClear placeholder="Clearable input" />
+```
+
+### With Character Count
+
+```typescript
+<Input showCount maxLength={20} placeholder="Max 20 characters" />
+<Input.TextArea showCount maxLength={100} rows={4} />
+```
+
+### Disabled and ReadOnly
+
+```typescript
+<Input disabled value="Disabled input" />
+<Input readOnly value="Read-only input" />
+```
+
+## Form Integration
+
+Always use `Input` within `Form.Item` for proper validation and form handling:
+
+```typescript
+import { Form, Input } from 'antd';
+
+<Form onFinish={handleSubmit}>
+  <Form.Item
+    name="username"
+    rules={[{ required: true, message: 'Please input username!' }]}
+  >
+    <Input prefix={<UserOutlined />} placeholder="Username" />
+  </Form.Item>
+
+  <Form.Item
+    name="password"
+    rules={[{ required: true, message: 'Please input password!' }]}
+  >
+    <Input.Password prefix={<LockOutlined />} placeholder="Password" />
+  </Form.Item>
+</Form>
+```
+
+## Status States
+
+Inputs can have different status states when used in Forms:
+
+```typescript
+<Form.Item
+  name="email"
+  validateStatus="error"
+  help="Please enter a valid email"
+>
+  <Input placeholder="Email" />
+</Form.Item>
+```
+
+Status values: `'error'`, `'warning'`, `'success'`, `'validating'`
+
+## Best Practices
+
+1. **Always use in Forms** - Wrap inputs in `Form.Item` for proper validation
+2. **Use appropriate input type** - Use `Input.Password` for passwords, `Input.Search` for search
+3. **Provide placeholders** - Always include helpful placeholder text
+4. **Show validation feedback** - Use Form validation for user feedback
+5. **Use icons appropriately** - Prefix icons for context (user, lock, etc.)
+6. **Character limits** - Use `maxLength` and `showCount` for text limits
+7. **Clearable inputs** - Use `allowClear` for inputs where users might want to clear
+8. **Accessible labels** - Always provide labels (via Form.Item or aria-label)
+
+## Common Patterns
+
+### Search Input
+
+```typescript
+<Input.Search
+  placeholder="Search..."
+  onSearch={(value) => handleSearch(value)}
+  enterButton
+  allowClear
+/>
+```
+
+### Password with Strength Indicator
+
+```typescript
+<Form.Item
+  name="password"
+  rules={[
+    { required: true },
+    { min: 8, message: 'Password must be at least 8 characters' },
+  ]}
+>
+  <Input.Password
+    prefix={<LockOutlined />}
+    placeholder="Password"
+  />
+</Form.Item>
+```
+
+### Input with Validation
+
+```typescript
+<Form.Item
+  name="email"
+  rules={[
+    { required: true, message: 'Email is required' },
+    { type: 'email', message: 'Invalid email format' },
+  ]}
+>
+  <Input prefix={<MailOutlined />} placeholder="Email" />
+</Form.Item>
+```
+
+## Accessibility
+
+- Inputs are keyboard accessible by default
+- Use `Form.Item` with `label` for proper labeling
+- Use `aria-label` for icon-only inputs
+- Ensure sufficient color contrast for validation states
+
+## Styling
+
+**IMPORTANT**: Do not override input styles with `className` unless absolutely necessary. Instead:
+
+- Use `size` prop for sizing
+- Use `prefix`/`suffix` for icons
+- Use `ConfigProvider` theme customization for global changes
+- Use design tokens for custom styling

guidelines/components/layout.md

@@ -0,0 +1,121 @@
+# Layout Component
+
+**Purpose**: Handling the overall layout of a page. Provides Header, Sider, Content, and Footer components for building page structures.
+
+## When to Use
+
+- Build page layouts with header, sidebar, content, and footer
+- Create top navigation layouts
+- Create side navigation layouts
+- Need responsive layout structures
+
+## Basic Usage
+
+```typescript
+import { Layout } from 'antd';
+
+const { Header, Sider, Content, Footer } = Layout;
+
+<Layout>
+  <Header>Header</Header>
+  <Layout>
+    <Sider>Sider</Sider>
+    <Content>Content</Content>
+  </Layout>
+  <Footer>Footer</Footer>
+</Layout>
+```
+
+## Component Structure
+
+- **`Layout`**: The layout wrapper, can nest Header, Sider, Content, Footer, or Layout itself
+- **`Header`**: Top layout with default style
+- **`Sider`**: Sidebar with default style and basic functions
+- **`Content`**: Content layout with default style
+- **`Footer`**: Bottom layout with default style
+
+## Common Props
+
+### Layout Props
+
+| Property   | Description       | Type    | Default |
+| ---------- | ----------------- | ------- | ------- |
+| `hasSider` | Whether has sider | boolean | false   |
+
+### Sider Props
+
+| Property           | Description             | Type                      | Default   |
+| ------------------ | ----------------------- | ------------------------- | --------- |
+| `collapsed`        | Whether to collapse     | boolean                   | false     |
+| `collapsedWidth`   | Width when collapsed    | number                    | 80        |
+| `defaultCollapsed` | Default collapsed state | boolean                   | false     |
+| `reverseArrow`     | Reverse arrow direction | boolean                   | false     |
+| `trigger`          | Custom trigger          | ReactNode                 | -         |
+| `width`            | Width of sidebar        | number \| string          | 200       |
+| `theme`            | Theme                   | `'light'` \| `'dark'`     | `'light'` |
+| `onCollapse`       | Collapse callback       | (collapsed, type) => void | -         |
+
+## Examples
+
+### Basic Layout
+
+```typescript
+<Layout>
+  <Header style={{ background: '#fff', padding: 0 }}>Header</Header>
+  <Layout>
+    <Sider width={200} theme="light">Sider</Sider>
+    <Content style={{ padding: '24px', minHeight: 280 }}>Content</Content>
+  </Layout>
+</Layout>
+```
+
+### Top Navigation
+
+```typescript
+<Layout>
+  <Header>Top Navigation</Header>
+  <Content>Main Content</Content>
+  <Footer>Footer</Footer>
+</Layout>
+```
+
+### Collapsible Sider
+
+```typescript
+const [collapsed, setCollapsed] = useState(false);
+
+<Layout>
+  <Sider
+    collapsible
+    collapsed={collapsed}
+    onCollapse={setCollapsed}
+  >
+    Sidebar
+  </Sider>
+  <Layout>
+    <Content>Content</Content>
+  </Layout>
+</Layout>
+```
+
+### Fixed Header
+
+```typescript
+<Layout style={{ minHeight: '100vh' }}>
+  <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
+    Fixed Header
+  </Header>
+  <Layout style={{ marginTop: 64 }}>
+    <Content>Content</Content>
+  </Layout>
+</Layout>
+```
+
+## Best Practices
+
+1. **Use Layout wrapper** - Always wrap layout components in Layout
+2. **Proper nesting** - Header, Sider, Content, Footer must be inside Layout
+3. **Responsive design** - Use responsive breakpoints for mobile layouts
+4. **Fixed elements** - Use fixed positioning for headers/siders when needed
+5. **Theme consistency** - Use consistent theme (light/dark) across layout
+6. **Accessible navigation** - Ensure keyboard navigation works for collapsible siders

guidelines/components/list.md

@@ -0,0 +1,35 @@
+# List Component
+
+**Purpose**: List display for structured data.
+
+## When to Use
+
+- Display list of items
+- Show structured data
+- Simple list displays (use Table for complex data)
+
+## Basic Usage
+
+```typescript
+import { List } from 'antd';
+
+<List
+  dataSource={data}
+  renderItem={(item) => <List.Item>{item}</List.Item>}
+/>
+```
+
+## Common Props
+
+| Property     | Description       | Type                       | Default |
+| ------------ | ----------------- | -------------------------- | ------- |
+| `dataSource` | Data source       | any[]                      | -       |
+| `renderItem` | Render function   | (item, index) => ReactNode | -       |
+| `loading`    | Loading state     | boolean                    | false   |
+| `pagination` | Pagination config | boolean \| object          | false   |
+
+## Best Practices
+
+1. **Simple data** - Use List for simple data, Table for complex
+2. **Custom render** - Use renderItem for custom item rendering
+3. **Loading states** - Show loading during data fetch

guidelines/components/menu.md

@@ -0,0 +1,77 @@
+# Menu Component
+
+**Purpose**: A versatile menu for navigation. Supports top and side navigation.
+
+## When to Use
+
+- Top navigation for website categories and functions
+- Side navigation for multi-level structure
+- Navigation menus with submenus
+- Context menus
+
+## Basic Usage
+
+```typescript
+import { Menu } from 'antd';
+
+const items = [
+  { key: '1', label: 'Navigation One' },
+  { key: '2', label: 'Navigation Two' },
+  {
+    key: '3',
+    label: 'Navigation Three',
+    children: [
+      { key: '3-1', label: 'Option 1' },
+      { key: '3-2', label: 'Option 2' },
+    ],
+  },
+];
+
+<Menu items={items} />
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `items` | Menu items | MenuItem[] | - |
+| `mode` | Menu mode | `'vertical'` \| `'horizontal'` \| `'inline'` | `'vertical'` |
+| `theme` | Menu theme | `'light'` \| `'dark'` | `'light'` |
+| `selectedKeys` | Selected menu items | string[] | - |
+| `defaultSelectedKeys` | Default selected items | string[] | - |
+| `openKeys` | Open submenu keys | string[] | - |
+| `defaultOpenKeys` | Default open submenus | string[] | - |
+| `onClick` | Click handler | ({ key, keyPath }) => void | - |
+| `onSelect` | Select handler | ({ key, keyPath }) => void | - |
+
+## Examples
+
+### Horizontal Menu
+
+```typescript
+<Menu mode="horizontal" items={items} />
+```
+
+### Vertical Menu
+
+```typescript
+<Menu mode="vertical" items={items} />
+```
+
+### With Icons
+
+```typescript
+import { AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
+
+const items = [
+  { key: '1', icon: <AppstoreOutlined />, label: 'Nav 1' },
+  { key: '2', icon: <SettingOutlined />, label: 'Nav 2' },
+];
+```
+
+## Best Practices
+
+1. **Use items prop** - Prefer `items` prop for menu configuration
+2. **Unique keys** - Ensure all menu items have unique keys
+3. **Theme consistency** - Use consistent theme with layout
+4. **Accessible navigation** - Ensure keyboard navigation works

guidelines/components/message.md

@@ -0,0 +1,35 @@
+# Message Component
+
+**Purpose**: Global message feedback for operations. Non-blocking notifications.
+
+## When to Use
+
+- Show operation feedback
+- Display success, error, warning, or info messages
+- Non-blocking notifications
+
+## Basic Usage
+
+```typescript
+import { message } from 'antd';
+
+message.success('Success message');
+message.error('Error message');
+message.warning('Warning message');
+message.info('Info message');
+```
+
+## API Methods
+
+- `message.success(content, duration, onClose)`
+- `message.error(content, duration, onClose)`
+- `message.warning(content, duration, onClose)`
+- `message.info(content, duration, onClose)`
+- `message.loading(content, duration, onClose)`
+
+## Best Practices
+
+1. **Short messages** - Keep messages concise
+2. **Appropriate type** - Use correct type for message severity
+3. **Auto dismiss** - Messages auto-dismiss after duration
+4. **Stack messages** - Multiple messages stack vertically

guidelines/components/modal.md

@@ -0,0 +1,53 @@
+# Modal Component
+
+**Purpose**: Modal dialog for important confirmations, forms, or information display.
+
+## When to Use
+
+- Important confirmations
+- Forms that need focus
+- Display detailed information
+- User interactions that require attention
+
+## Basic Usage
+
+```typescript
+import { Modal } from 'antd';
+
+Modal.confirm({
+  title: 'Confirm',
+  content: 'Some descriptions',
+  onOk() {
+    console.log('OK');
+  },
+});
+
+// Or as component
+<Modal
+  title="Modal Title"
+  open={isOpen}
+  onOk={handleOk}
+  onCancel={handleCancel}
+>
+  <p>Modal content</p>
+</Modal>
+```
+
+## Common Props
+
+| Property   | Description       | Type             | Default |
+| ---------- | ----------------- | ---------------- | ------- |
+| `open`     | Visible state     | boolean          | false   |
+| `title`    | Modal title       | ReactNode        | -       |
+| `footer`   | Modal footer      | ReactNode        | null    |
+| `onOk`     | OK button handler | () => void       | -       |
+| `onCancel` | Cancel handler    | () => void       | -       |
+| `width`    | Modal width       | number \| string | 520     |
+| `centered` | Center modal      | boolean          | false   |
+
+## Best Practices
+
+1. **Use for important actions** - Use modals for important confirmations
+2. **Clear actions** - Provide clear OK/Cancel actions
+3. **Form modals** - Use Modal with Form for form dialogs
+4. **Accessible** - Ensure keyboard navigation and focus management

guidelines/components/notification.md

@@ -0,0 +1,35 @@
+# Notification Component
+
+**Purpose**: Notification box that appears in the corner of the page. More detailed than Message.
+
+## When to Use
+
+- Show detailed notifications
+- Display notifications with descriptions
+- Show notifications that need more information than Message
+
+## Basic Usage
+
+```typescript
+import { notification } from 'antd';
+
+notification.open({
+  message: 'Notification Title',
+  description: 'This is the content of the notification.',
+});
+```
+
+## API Methods
+
+- `notification.success(config)`
+- `notification.error(config)`
+- `notification.warning(config)`
+- `notification.info(config)`
+- `notification.open(config)`
+
+## Best Practices
+
+1. **Detailed content** - Use for notifications with descriptions
+2. **Placement** - Choose appropriate placement (topRight, topLeft, etc.)
+3. **Duration** - Set appropriate duration for message importance
+4. **Actions** - Add action buttons when needed

guidelines/components/pagination.md

@@ -0,0 +1,37 @@
+# Pagination Component
+
+**Purpose**: Pagination controls for navigating through pages of data.
+
+## When to Use
+
+- Navigate through paginated data
+- Show page numbers and navigation controls
+- Display total count and page information
+
+## Basic Usage
+
+```typescript
+import { Pagination } from 'antd';
+
+<Pagination
+  current={current}
+  total={500}
+  onChange={handleChange}
+/>
+```
+
+## Common Props
+
+| Property          | Description             | Type                     | Default |
+| ----------------- | ----------------------- | ------------------------ | ------- |
+| `current`         | Current page            | number                   | -       |
+| `total`           | Total number of items   | number                   | 0       |
+| `pageSize`        | Items per page          | number                   | 10      |
+| `showSizeChanger` | Show page size selector | boolean                  | false   |
+| `onChange`        | Page change handler     | (page, pageSize) => void | -       |
+
+## Best Practices
+
+1. **Server-side pagination** - Use for large datasets with server-side pagination
+2. **Show totals** - Display total count when helpful
+3. **Page size options** - Allow users to change page size for better UX

guidelines/components/popconfirm.md

@@ -0,0 +1,41 @@
+# Popconfirm Component
+
+**Purpose**: Popup confirmation dialog before an action.
+
+## When to Use
+
+- Confirm before destructive actions
+- Ask for confirmation before operations
+- Delete, remove, or critical actions
+
+## Basic Usage
+
+```typescript
+import { Popconfirm } from 'antd';
+
+<Popconfirm
+  title="Delete the task"
+  description="Are you sure to delete this task?"
+  onConfirm={handleConfirm}
+  onCancel={handleCancel}
+>
+  <Button danger>Delete</Button>
+</Popconfirm>
+```
+
+## Common Props
+
+| Property      | Description              | Type        | Default    |
+| ------------- | ------------------------ | ----------- | ---------- |
+| `title`       | Confirmation title       | ReactNode   | -          |
+| `description` | Confirmation description | ReactNode   | -          |
+| `onConfirm`   | Confirm handler          | (e) => void | -          |
+| `onCancel`    | Cancel handler           | (e) => void | -          |
+| `okText`      | OK button text           | string      | `'OK'`     |
+| `cancelText`  | Cancel button text       | string      | `'Cancel'` |
+
+## Best Practices
+
+1. **Destructive actions** - Use for delete, remove, or critical actions
+2. **Clear messages** - Provide clear confirmation messages
+3. **Appropriate placement** - Choose placement that doesn't obstruct

guidelines/components/popover.md

@@ -0,0 +1,34 @@
+# Popover Component
+
+**Purpose**: Popup container for more complex content than Tooltip.
+
+## When to Use
+
+- Show complex content on hover/click
+- Display forms or actions in popup
+- More detailed information than Tooltip
+
+## Basic Usage
+
+```typescript
+import { Popover } from 'antd';
+
+<Popover content={content} title="Title">
+  <Button>Hover me</Button>
+</Popover>
+```
+
+## Common Props
+
+| Property    | Description       | Type                                | Default   |
+| ----------- | ----------------- | ----------------------------------- | --------- |
+| `content`   | Popover content   | ReactNode                           | -         |
+| `title`     | Popover title     | ReactNode                           | -         |
+| `trigger`   | Trigger action    | `'hover'` \| `'focus'` \| `'click'` | `'hover'` |
+| `placement` | Popover placement | string                              | `'top'`   |
+
+## Best Practices
+
+1. **Complex content** - Use for content more complex than Tooltip
+2. **Interactive content** - Use for interactive content (forms, buttons)
+3. **Appropriate trigger** - Choose trigger based on interaction needs

guidelines/components/progress.md

@@ -0,0 +1,34 @@
+# Progress Component
+
+**Purpose**: Progress indicator to show the completion percentage of an operation.
+
+## When to Use
+
+- Show operation progress
+- Display completion percentage
+- Loading progress indicators
+
+## Basic Usage
+
+```typescript
+import { Progress } from 'antd';
+
+<Progress percent={30} />
+<Progress percent={50} status="active" />
+<Progress percent={100} />
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `percent` | Progress percentage | number | 0 |
+| `status` | Progress status | `'success'` \| `'exception'` \| `'active'` \| `'normal'` | `'normal'` |
+| `type` | Progress type | `'line'` \| `'circle'` \| `'dashboard'` | `'line'` |
+| `showInfo` | Show percentage | boolean | true |
+
+## Best Practices
+
+1. **Clear progress** - Show meaningful progress percentages
+2. **Status indication** - Use status for success/error states
+3. **Appropriate type** - Choose type based on space and context

guidelines/components/qrcode.md

@@ -0,0 +1,32 @@
+# QRCode Component
+
+**Purpose**: QR code display component.
+
+## When to Use
+
+- Display QR codes
+- Share links or information
+- Mobile scanning
+
+## Basic Usage
+
+```typescript
+import { QRCode } from 'antd';
+
+<QRCode value="https://ant.design/" />
+```
+
+## Common Props
+
+| Property     | Description            | Type                             | Default |
+| ------------ | ---------------------- | -------------------------------- | ------- |
+| `value`      | QR code value          | string                           | -       |
+| `size`       | QR code size           | number                           | 160     |
+| `errorLevel` | Error correction level | `'L'` \| `'M'` \| `'Q'` \| `'H'` | `'M'`   |
+| `icon`       | Icon in center         | string                           | -       |
+
+## Best Practices
+
+1. **Clear value** - Provide valid QR code value
+2. **Appropriate size** - Set size based on display context
+3. **Error level** - Use higher error level for important codes

guidelines/components/radio.md

@@ -0,0 +1,35 @@
+# Radio Component
+
+**Purpose**: Radio button for selecting a single option from a group.
+
+## When to Use
+
+- Select a single option from multiple choices
+- Use Radio.Group for related options
+- Form inputs for single selection
+
+## Basic Usage
+
+```typescript
+import { Radio } from 'antd';
+
+<Radio.Group onChange={handleChange} value={value}>
+  <Radio value={1}>Option 1</Radio>
+  <Radio value={2}>Option 2</Radio>
+</Radio.Group>
+```
+
+## Common Props
+
+| Property       | Description    | Type        | Default |
+| -------------- | -------------- | ----------- | ------- |
+| `value`        | Selected value | any         | -       |
+| `defaultValue` | Default value  | any         | -       |
+| `disabled`     | Disabled state | boolean     | false   |
+| `onChange`     | Change handler | (e) => void | -       |
+
+## Best Practices
+
+1. **Form integration** - Always use within Form.Item
+2. **Group for options** - Use Radio.Group for related options
+3. **Few options** - Use Radio for 2-4 options, Select for more

guidelines/components/rate.md

@@ -0,0 +1,35 @@
+# Rate Component
+
+**Purpose**: Rating component for displaying or selecting ratings.
+
+## When to Use
+
+- Display ratings
+- Allow users to rate
+- Star ratings
+
+## Basic Usage
+
+```typescript
+import { Rate } from 'antd';
+
+<Rate defaultValue={3} />
+<Rate disabled defaultValue={2} />
+```
+
+## Common Props
+
+| Property       | Description     | Type                    | Default |
+| -------------- | --------------- | ----------------------- | ------- |
+| `value`        | Current value   | number                  | -       |
+| `defaultValue` | Default value   | number                  | -       |
+| `count`        | Star count      | number                  | 5       |
+| `allowHalf`    | Allow half star | boolean                 | false   |
+| `disabled`     | Disabled state  | boolean                 | false   |
+| `onChange`     | Change handler  | (value: number) => void | -       |
+
+## Best Practices
+
+1. **Form integration** - Always use within Form.Item
+2. **Clear labels** - Provide context for ratings
+3. **Half stars** - Use allowHalf for finer ratings

guidelines/components/result.md

@@ -0,0 +1,41 @@
+# Result Component
+
+**Purpose**: Result page for displaying operation results.
+
+## When to Use
+
+- Show operation results (success, error, etc.)
+- Display final states after operations
+- Result pages for forms or processes
+
+## Basic Usage
+
+```typescript
+import { Result } from 'antd';
+
+<Result
+  status="success"
+  title="Successfully Purchased Cloud Server ECS!"
+  subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."
+  extra={[
+    <Button type="primary" key="console">Go Console</Button>,
+    <Button key="buy">Buy Again</Button>,
+  ]}
+/>
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `status` | Result status | `'success'` \| `'error'` \| `'info'` \| `'warning'` \| `'403'` \| `'404'` \| `'500'` | `'info'` |
+| `title` | Result title | ReactNode | - |
+| `subTitle` | Result subtitle | ReactNode | - |
+| `extra` | Extra actions | ReactNode | - |
+| `icon` | Custom icon | ReactNode | - |
+
+## Best Practices
+
+1. **Clear status** - Use appropriate status for result type
+2. **Actionable** - Provide next steps in extra prop
+3. **Helpful messages** - Provide clear, helpful messages

guidelines/components/select.md

@@ -0,0 +1,100 @@
+# Select Component
+
+**Purpose**: A dropdown menu for displaying choices. An elegant alternative to the native `<select>` element.
+
+## When to Use
+
+- Display choices in a dropdown menu
+- Use when there are 4-20 predefined options
+- For single or multiple selection
+- When you need searchable options
+
+**Note**: Use `Radio` for fewer options (less than 5). Use `AutoComplete` if you need an input that can be typed or selected.
+
+## Basic Usage
+
+```typescript
+import { Select } from 'antd';
+
+// Recommended usage (5.11.0+)
+<Select
+  options={[
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+  ]}
+/>
+
+// Legacy usage (deprecated)
+<Select>
+  <Select.Option value="1">Option 1</Select.Option>
+  <Select.Option value="2">Option 2</Select.Option>
+</Select>
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `options` | Select options (recommended) | { label, value }[] | - |
+| `value` | Selected value | string \| string[] \| number | - |
+| `defaultValue` | Default selected value | string \| string[] | - |
+| `mode` | Set mode | `'multiple'` \| `'tags'` | - |
+| `size` | Size | `'small'` \| `'middle'` \| `'large'` | `'middle'` |
+| `placeholder` | Placeholder | ReactNode | - |
+| `showSearch` | Whether select is searchable | boolean | single: false, multiple: true |
+| `allowClear` | Show clear button | boolean | false |
+| `disabled` | Disabled state | boolean | false |
+| `loading` | Loading state | boolean | false |
+| `onChange` | Change handler | (value, option) => void | - |
+| `onSearch` | Search handler | (value: string) => void | - |
+
+## Examples
+
+### Multiple Selection
+
+```typescript
+<Select
+  mode="multiple"
+  placeholder="Select items"
+  options={options}
+  onChange={handleChange}
+/>
+```
+
+### With Search
+
+```typescript
+<Select
+  showSearch
+  placeholder="Search and select"
+  optionFilterProp="label"
+  options={options}
+/>
+```
+
+### With Loading
+
+```typescript
+<Select
+  loading={loading}
+  options={options}
+/>
+```
+
+### Tags Mode
+
+```typescript
+<Select
+  mode="tags"
+  placeholder="Add tags"
+  tokenSeparators={[',']}
+/>
+```
+
+## Best Practices
+
+1. **Use options prop** - Prefer `options` prop over children (better performance)
+2. **Search for many options** - Enable `showSearch` when you have many options
+3. **Multiple selection** - Use `mode="multiple"` for multiple selections
+4. **Form integration** - Always use within `Form.Item` for form handling
+5. **Loading states** - Show loading state during async data fetching

guidelines/components/skeleton.md

@@ -0,0 +1,34 @@
+# Skeleton Component
+
+**Purpose**: Loading skeleton placeholder for content.
+
+## When to Use
+
+- Show loading placeholders
+- Better UX than spinners for content loading
+- Indicate content structure while loading
+
+## Basic Usage
+
+```typescript
+import { Skeleton } from 'antd';
+
+<Skeleton />
+<Skeleton active />
+<Skeleton avatar paragraph={{ rows: 4 }} />
+```
+
+## Common Props
+
+| Property    | Description             | Type                              | Default |
+| ----------- | ----------------------- | --------------------------------- | ------- |
+| `active`    | Show animation          | boolean                           | false   |
+| `avatar`    | Show avatar placeholder | boolean \| SkeletonAvatarProps    | false   |
+| `paragraph` | Paragraph placeholder   | boolean \| SkeletonParagraphProps | true    |
+| `title`     | Show title placeholder  | boolean \| SkeletonTitleProps     | true    |
+
+## Best Practices
+
+1. **Match content** - Match skeleton structure to actual content
+2. **Active animation** - Use active for better visual feedback
+3. **Appropriate rows** - Set appropriate paragraph rows

guidelines/components/slider.md

@@ -0,0 +1,36 @@
+# Slider Component
+
+**Purpose**: Range slider for selecting numeric values.
+
+## When to Use
+
+- Select numeric values in a range
+- Range selection
+- Volume, price range selection
+
+## Basic Usage
+
+```typescript
+import { Slider } from 'antd';
+
+<Slider defaultValue={30} />
+<Slider range defaultValue={[20, 50]} />
+```
+
+## Common Props
+
+| Property       | Description    | Type                       | Default |
+| -------------- | -------------- | -------------------------- | ------- |
+| `value`        | Current value  | number \| [number, number] | -       |
+| `defaultValue` | Default value  | number \| [number, number] | -       |
+| `min`          | Minimum value  | number                     | 0       |
+| `max`          | Maximum value  | number                     | 100     |
+| `step`         | Step value     | number \| null             | 1       |
+| `range`        | Range mode     | boolean                    | false   |
+| `onChange`     | Change handler | (value) => void            | -       |
+
+## Best Practices
+
+1. **Form integration** - Always use within Form.Item
+2. **Clear range** - Set appropriate min/max values
+3. **Step values** - Set step for discrete values

guidelines/components/space.md

@@ -0,0 +1,89 @@
+# Space Component
+
+**Purpose**: Set components spacing. Provides consistent spacing between inline elements.
+
+## When to Use
+
+- Avoid components clinging together and set unified space
+- Need equidistant arrangement of multiple child elements
+- Use Space.Compact for form components with collapsed borders
+
+## Basic Usage
+
+```typescript
+import { Space } from 'antd';
+
+<Space>
+  <Button>Button 1</Button>
+  <Button>Button 2</Button>
+  <Button>Button 3</Button>
+</Space>
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `direction` | Space direction | `'vertical'` \| `'horizontal'` | `'horizontal'` |
+| `size` | Space size | `'small'` \| `'middle'` \| `'large'` \| number \| [number, number] | `'small'` |
+| `align` | Align items | `'start'` \| `'end'` \| `'center'` \| `'baseline'` | - |
+| `wrap` | Auto wrap line | boolean | false |
+| `split` | Set split element | ReactNode | - |
+
+## Examples
+
+### Vertical Space
+
+```typescript
+<Space direction="vertical" size="middle">
+  <Button>Button 1</Button>
+  <Button>Button 2</Button>
+  <Button>Button 3</Button>
+</Space>
+```
+
+### Different Sizes
+
+```typescript
+<Space size="small">
+  <Button>Small</Button>
+  <Button>Small</Button>
+</Space>
+
+<Space size="middle">
+  <Button>Middle</Button>
+  <Button>Middle</Button>
+</Space>
+
+<Space size="large">
+  <Button>Large</Button>
+  <Button>Large</Button>
+</Space>
+```
+
+### With Split
+
+```typescript
+<Space split={<Divider type="vertical" />}>
+  <Link>Link 1</Link>
+  <Link>Link 2</Link>
+  <Link>Link 3</Link>
+</Space>
+```
+
+### Compact Mode
+
+```typescript
+<Space.Compact>
+  <Input placeholder="Input" />
+  <Button type="primary">Submit</Button>
+</Space.Compact>
+```
+
+## Best Practices
+
+1. **Use for inline spacing** - Use Space for spacing between inline elements
+2. **Prefer over manual margins** - Use Space instead of manual margin styling
+3. **Consistent sizing** - Use standard sizes (small, middle, large)
+4. **Compact for forms** - Use Space.Compact for connected form components
+5. **Wrap when needed** - Enable wrap for responsive layouts

guidelines/components/spin.md

@@ -0,0 +1,34 @@
+# Spin Component
+
+**Purpose**: Loading spinner to indicate loading state.
+
+## When to Use
+
+- Show loading state
+- Indicate async operations
+- Loading indicators for content
+
+## Basic Usage
+
+```typescript
+import { Spin } from 'antd';
+
+<Spin />
+<Spin tip="Loading...">
+  <div>Content</div>
+</Spin>
+```
+
+## Common Props
+
+| Property   | Description    | Type                                  | Default     |
+| ---------- | -------------- | ------------------------------------- | ----------- |
+| `spinning` | Spinning state | boolean                               | true        |
+| `tip`      | Loading text   | ReactNode                             | -           |
+| `size`     | Spin size      | `'small'` \| `'default'` \| `'large'` | `'default'` |
+
+## Best Practices
+
+1. **Wrap content** - Wrap content to show loading overlay
+2. **Loading text** - Provide helpful loading text
+3. **Appropriate size** - Use appropriate size for context

guidelines/components/statistic.md

@@ -0,0 +1,33 @@
+# Statistic Component
+
+**Purpose**: Statistic display for numbers and data.
+
+## When to Use
+
+- Display statistics
+- Show numbers with formatting
+- Dashboard metrics
+
+## Basic Usage
+
+```typescript
+import { Statistic } from 'antd';
+
+<Statistic title="Active Users" value={1128} prefix={<UserOutlined />} />
+```
+
+## Common Props
+
+| Property    | Description       | Type             | Default |
+| ----------- | ----------------- | ---------------- | ------- |
+| `title`     | Statistic title   | ReactNode        | -       |
+| `value`     | Statistic value   | number \| string | -       |
+| `prefix`    | Prefix element    | ReactNode        | -       |
+| `suffix`    | Suffix element    | ReactNode        | -       |
+| `precision` | Decimal precision | number           | -       |
+
+## Best Practices
+
+1. **Clear titles** - Provide clear statistic titles
+2. **Formatting** - Use precision for decimal formatting
+3. **Prefix/suffix** - Use for units or icons

guidelines/components/steps.md

@@ -0,0 +1,39 @@
+# Steps Component
+
+**Purpose**: Step-by-step process indicator. Guide users through a process.
+
+## When to Use
+
+- Show step-by-step process
+- Guide users through multi-step forms
+- Display process progress
+
+## Basic Usage
+
+```typescript
+import { Steps } from 'antd';
+
+<Steps
+  current={1}
+  items={[
+    { title: 'Finished', description: 'This is a description.' },
+    { title: 'In Progress', description: 'This is a description.' },
+    { title: 'Waiting', description: 'This is a description.' },
+  ]}
+/>
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `current` | Current step | number | 0 |
+| `items` | Step items | StepItem[] | - |
+| `direction` | Direction | `'horizontal'` \| `'vertical'` | `'horizontal'` |
+| `status` | Current step status | `'wait'` \| `'process'` \| `'finish'` \| `'error'` | `'process'` |
+
+## Best Practices
+
+1. **Clear steps** - Use clear, descriptive step titles
+2. **Progress indication** - Show current step clearly
+3. **Error handling** - Use error status for failed steps

guidelines/components/switch.md

@@ -0,0 +1,34 @@
+# Switch Component
+
+**Purpose**: Toggle switch for switching between two states.
+
+## When to Use
+
+- Toggle between two states (on/off)
+- Enable or disable settings
+- Binary choices in forms
+
+## Basic Usage
+
+```typescript
+import { Switch } from 'antd';
+
+<Switch defaultChecked onChange={handleChange} />
+```
+
+## Common Props
+
+| Property         | Description     | Type                     | Default     |
+| ---------------- | --------------- | ------------------------ | ----------- |
+| `checked`        | Checked state   | boolean                  | false       |
+| `defaultChecked` | Default checked | boolean                  | false       |
+| `disabled`       | Disabled state  | boolean                  | false       |
+| `loading`        | Loading state   | boolean                  | false       |
+| `size`           | Switch size     | `'default'` \| `'small'` | `'default'` |
+| `onChange`       | Change handler  | (checked) => void        | -           |
+
+## Best Practices
+
+1. **Form integration** - Always use within Form.Item
+2. **Clear labels** - Provide clear labels for on/off states
+3. **Loading states** - Show loading during async operations

guidelines/components/table.md

@@ -0,0 +1,354 @@
+# Table Component
+
+**Purpose**: Display structured data in rows and columns with sorting, filtering, pagination, and selection capabilities.
+
+## When to Use
+
+- Use `Table` for displaying tabular data
+- Use when you need sorting, filtering, or pagination
+- Use for data that has a clear row/column structure
+- Use for large datasets that need pagination or virtualization
+
+## Basic Usage
+
+```typescript
+import { Table } from 'antd';
+
+const columns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address',
+  },
+];
+
+const dataSource = [
+  {
+    key: '1',
+    name: 'John Brown',
+    age: 32,
+    address: 'New York No. 1 Lake Park',
+  },
+  {
+    key: '2',
+    name: 'Jim Green',
+    age: 42,
+    address: 'London No. 1 Lake Park',
+  },
+];
+
+<Table dataSource={dataSource} columns={columns} />
+```
+
+## Column Configuration
+
+### Basic Column
+
+```typescript
+{
+  title: 'Name',           // Column header
+  dataIndex: 'name',       // Data field name
+  key: 'name',             // Unique key (required if no dataIndex)
+}
+```
+
+### Column with Custom Render
+
+```typescript
+{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name',
+  render: (text, record, index) => {
+    return <a>{text}</a>;
+  },
+}
+```
+
+### Sorted Column
+
+```typescript
+{
+  title: 'Age',
+  dataIndex: 'age',
+  key: 'age',
+  sorter: (a, b) => a.age - b.age,
+  sortDirections: ['descend', 'ascend'],
+}
+```
+
+### Filtered Column
+
+```typescript
+{
+  title: 'Status',
+  dataIndex: 'status',
+  key: 'status',
+  filters: [
+    { text: 'Active', value: 'active' },
+    { text: 'Inactive', value: 'inactive' },
+  ],
+  onFilter: (value, record) => record.status === value,
+}
+```
+
+### Fixed Column
+
+```typescript
+{
+  title: 'Name',
+  dataIndex: 'name',
+  key: 'name',
+  fixed: 'left',  // or 'right'
+  width: 100,
+}
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `dataSource` | Table data | object[] | - |
+| `columns` | Column configuration | ColumnType[] | - |
+| `rowKey` | Row key function or string | string \| (record) => string | 'key' |
+| `pagination` | Pagination config | object \| false | true |
+| `loading` | Loading state | boolean \| SpinProps | false |
+| `size` | Table size | `'large'` \| `'middle'` \| `'small'` | `'middle'` |
+| `bordered` | Show borders | boolean | false |
+| `scroll` | Scroll configuration | { x?: number, y?: number } | - |
+| `rowSelection` | Row selection config | object | - |
+| `expandable` | Expandable rows config | object | - |
+| `onChange` | Table change handler | (pagination, filters, sorter, extra) => void | - |
+
+## Examples
+
+### With Pagination
+
+```typescript
+<Table
+  dataSource={dataSource}
+  columns={columns}
+  pagination={{
+    current: currentPage,
+    pageSize: 10,
+    total: total,
+    onChange: (page) => setCurrentPage(page),
+  }}
+/>
+```
+
+### With Loading
+
+```typescript
+<Table
+  dataSource={dataSource}
+  columns={columns}
+  loading={loading}
+/>
+```
+
+### With Row Selection
+
+```typescript
+const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+
+<Table
+  rowSelection={{
+    selectedRowKeys,
+    onChange: (keys) => setSelectedRowKeys(keys),
+  }}
+  dataSource={dataSource}
+  columns={columns}
+/>
+```
+
+### With Expandable Rows
+
+```typescript
+<Table
+  expandable={{
+    expandedRowRender: (record) => (
+      <p style={{ margin: 0 }}>{record.description}</p>
+    ),
+    rowExpandable: (record) => record.name !== 'Not Expandable',
+  }}
+  dataSource={dataSource}
+  columns={columns}
+/>
+```
+
+### With Fixed Columns
+
+```typescript
+<Table
+  columns={columns}
+  dataSource={dataSource}
+  scroll={{ x: 1500, y: 300 }}
+/>
+```
+
+### With Custom Row Class
+
+```typescript
+<Table
+  dataSource={dataSource}
+  columns={columns}
+  onRow={(record) => ({
+    onClick: () => handleRowClick(record),
+    className: record.status === 'active' ? 'active-row' : '',
+  })}
+/>
+```
+
+## Column Types
+
+### Action Column
+
+```typescript
+{
+  title: 'Action',
+  key: 'action',
+  render: (_, record) => (
+    <Space>
+      <Button size="small">Edit</Button>
+      <Button size="small" danger>Delete</Button>
+    </Space>
+  ),
+}
+```
+
+### Image Column
+
+```typescript
+{
+  title: 'Avatar',
+  dataIndex: 'avatar',
+  key: 'avatar',
+  render: (url) => <Avatar src={url} />,
+}
+```
+
+### Tag Column
+
+```typescript
+{
+  title: 'Status',
+  dataIndex: 'status',
+  key: 'status',
+  render: (status) => (
+    <Tag color={status === 'active' ? 'green' : 'red'}>
+      {status}
+    </Tag>
+  ),
+}
+```
+
+### Date Column
+
+```typescript
+import dayjs from 'dayjs';
+
+{
+  title: 'Date',
+  dataIndex: 'date',
+  key: 'date',
+  sorter: (a, b) => dayjs(a.date).unix() - dayjs(b.date).unix(),
+  render: (date) => dayjs(date).format('YYYY-MM-DD'),
+}
+```
+
+## Best Practices
+
+1. **Always provide rowKey** - Use unique `rowKey` prop for each row
+2. **Use dataIndex** - Always specify `dataIndex` for columns
+3. **Optimize renders** - Use `render` function efficiently, avoid inline functions
+4. **Handle large data** - Use pagination or virtualization for large datasets
+5. **Provide loading states** - Show loading indicator during data fetching
+6. **Use appropriate size** - Choose size based on data density
+7. **Fixed important columns** - Fix first/last columns for horizontal scrolling
+8. **Accessible headers** - Provide clear, descriptive column titles
+9. **Sortable columns** - Make numeric and date columns sortable
+10. **Filterable columns** - Add filters for categorical data
+
+## Common Patterns
+
+### Server-Side Pagination
+
+```typescript
+const [pagination, setPagination] = useState({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+});
+
+const handleTableChange = (newPagination) => {
+  setPagination(newPagination);
+  fetchData(newPagination);
+};
+
+<Table
+  dataSource={dataSource}
+  columns={columns}
+  pagination={pagination}
+  onChange={handleTableChange}
+  loading={loading}
+/>
+```
+
+### Editable Table
+
+```typescript
+const EditableCell = ({ editing, dataIndex, title, record, children, ...restProps }) => {
+  return (
+    <td {...restProps}>
+      {editing ? (
+        <Form.Item
+          name={dataIndex}
+          style={{ margin: 0 }}
+          rules={[{ required: true, message: `Please input ${title}!` }]}
+        >
+          <Input />
+        </Form.Item>
+      ) : (
+        children
+      )}
+    </td>
+  );
+};
+```
+
+### Table with Search
+
+```typescript
+const [searchText, setSearchText] = useState('');
+
+const filteredData = dataSource.filter(item =>
+  item.name.toLowerCase().includes(searchText.toLowerCase())
+);
+
+<>
+  <Input.Search
+    placeholder="Search"
+    onSearch={setSearchText}
+    style={{ marginBottom: 16 }}
+  />
+  <Table dataSource={filteredData} columns={columns} />
+</>
+```
+
+## Accessibility
+
+- Tables are keyboard accessible
+- Sortable columns are announced to screen readers
+- Row selection is keyboard accessible
+- Column headers are properly associated with cells

guidelines/components/tabs.md

@@ -0,0 +1,74 @@
+# Tabs Component
+
+**Purpose**: Tabs make it easy to explore and switch between different views.
+
+## When to Use
+
+- **Card Tabs**: For managing too many closeable views
+- **Normal Tabs**: For functional aspects of a page
+- **Radio.Button**: For secondary tabs
+
+## Basic Usage
+
+```typescript
+import { Tabs } from 'antd';
+
+const items = [
+  { key: '1', label: 'Tab 1', children: 'Content 1' },
+  { key: '2', label: 'Tab 2', children: 'Content 2' },
+  { key: '3', label: 'Tab 3', children: 'Content 3' },
+];
+
+<Tabs items={items} />
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `items` | Tab items | TabItem[] | - |
+| `activeKey` | Active tab key | string | - |
+| `defaultActiveKey` | Default active tab | string | - |
+| `type` | Tab type | `'line'` \| `'card'` \| `'editable-card'` | `'line'` |
+| `size` | Tab size | `'large'` \| `'middle'` \| `'small'` | `'middle'` |
+| `tabPosition` | Tab position | `'top'` \| `'right'` \| `'bottom'` \| `'left'` | `'top'` |
+| `onChange` | Tab change handler | (key: string) => void | - |
+
+## Examples
+
+### Card Tabs
+
+```typescript
+<Tabs type="card" items={items} />
+```
+
+### Editable Card Tabs
+
+```typescript
+<Tabs
+  type="editable-card"
+  items={items}
+  onEdit={(targetKey, action) => {
+    if (action === 'add') {
+      // Add tab
+    } else {
+      // Remove tab
+    }
+  }}
+/>
+```
+
+### With Icons
+
+```typescript
+const items = [
+  { key: '1', label: <span><AppleOutlined />Tab 1</span>, children: 'Content' },
+];
+```
+
+## Best Practices
+
+1. **Use items prop** - Prefer `items` prop for tab configuration
+2. **Card tabs for many views** - Use card tabs when you have many closeable views
+3. **Controlled tabs** - Use `activeKey` for controlled tabs
+4. **Accessible tabs** - Ensure keyboard navigation works

guidelines/components/tag.md

@@ -0,0 +1,32 @@
+# Tag Component
+
+**Purpose**: Tag/label for categorizing or markup.
+
+## When to Use
+
+- Categorize content
+- Display labels
+- Show status or categories
+
+## Basic Usage
+
+```typescript
+import { Tag } from 'antd';
+
+<Tag>Tag</Tag>
+<Tag color="blue">Blue Tag</Tag>
+```
+
+## Common Props
+
+| Property   | Description       | Type        | Default |
+| ---------- | ----------------- | ----------- | ------- |
+| `color`    | Tag color         | string      | -       |
+| `closable` | Show close button | boolean     | false   |
+| `onClose`  | Close handler     | (e) => void | -       |
+
+## Best Practices
+
+1. **Color coding** - Use colors for categorization
+2. **Closable tags** - Make tags closable when removable
+3. **Consistent colors** - Use consistent color scheme

guidelines/components/textarea.md

@@ -0,0 +1,33 @@
+# TextArea Component
+
+**Purpose**: Multiline text input component for longer form input.
+
+## When to Use
+
+- Multiline text input
+- Longer form input
+- Comments, descriptions, notes
+
+## Basic Usage
+
+```typescript
+import { Input } from 'antd';
+const { TextArea } = Input;
+
+<TextArea rows={4} placeholder="Enter text" />
+```
+
+## Common Props
+
+| Property    | Description          | Type                            | Default |
+| ----------- | -------------------- | ------------------------------- | ------- |
+| `rows`      | Number of rows       | number                          | 4       |
+| `maxLength` | Maximum length       | number                          | -       |
+| `showCount` | Show character count | boolean                         | false   |
+| `autoSize`  | Auto resize          | boolean \| { minRows, maxRows } | false   |
+
+## Best Practices
+
+1. **Form integration** - Always use within Form.Item
+2. **Show count** - Use showCount for character limits
+3. **Auto size** - Use autoSize for dynamic height

guidelines/components/time-picker.md

@@ -0,0 +1,32 @@
+# TimePicker Component
+
+**Purpose**: Time picker for selecting time.
+
+## When to Use
+
+- Select time
+- Time range selection
+- Form time inputs
+
+## Basic Usage
+
+```typescript
+import { TimePicker } from 'antd';
+
+<TimePicker onChange={onChange} />
+<TimePicker.RangePicker onChange={onChange} />
+```
+
+## Common Props
+
+| Property   | Description    | Type                       | Default      |
+| ---------- | -------------- | -------------------------- | ------------ |
+| `value`    | Selected time  | dayjs                      | -            |
+| `format`   | Time format    | string                     | `'HH:mm:ss'` |
+| `onChange` | Change handler | (time, timeString) => void | -            |
+
+## Best Practices
+
+1. **Form integration** - Always use within Form.Item
+2. **Time format** - Set appropriate time format
+3. **Range picker** - Use RangePicker for time ranges

guidelines/components/timeline.md

@@ -0,0 +1,37 @@
+# Timeline Component
+
+**Purpose**: Timeline display for showing chronological events.
+
+## When to Use
+
+- Display chronological events
+- Show process steps
+- Activity timelines
+
+## Basic Usage
+
+```typescript
+import { Timeline } from 'antd';
+
+<Timeline
+  items={[
+    { children: 'Create a services site 2015-09-01' },
+    { children: 'Solve initial network problems 2015-09-01' },
+    { children: 'Technical testing 2015-09-01' },
+  ]}
+/>
+```
+
+## Common Props
+
+| Property  | Description    | Type                                   | Default |
+| --------- | -------------- | -------------------------------------- | ------- |
+| `items`   | Timeline items | TimelineItem[]                         | -       |
+| `mode`    | Timeline mode  | `'left'` \| `'right'` \| `'alternate'` | -       |
+| `pending` | Pending node   | ReactNode                              | -       |
+
+## Best Practices
+
+1. **Chronological order** - Display events in chronological order
+2. **Clear content** - Provide clear event descriptions
+3. **Pending state** - Use pending for ongoing processes

guidelines/components/tooltip.md

@@ -0,0 +1,33 @@
+# Tooltip Component
+
+**Purpose**: Simple text popup tips on hover.
+
+## When to Use
+
+- Show additional information on hover
+- Provide context or help text
+- Explain functionality
+
+## Basic Usage
+
+```typescript
+import { Tooltip } from 'antd';
+
+<Tooltip title="prompt text">
+  <Button>Hover me</Button>
+</Tooltip>
+```
+
+## Common Props
+
+| Property    | Description       | Type                                | Default   |
+| ----------- | ----------------- | ----------------------------------- | --------- |
+| `title`     | Tooltip content   | ReactNode                           | -         |
+| `placement` | Tooltip placement | string                              | `'top'`   |
+| `trigger`   | Trigger action    | `'hover'` \| `'focus'` \| `'click'` | `'hover'` |
+
+## Best Practices
+
+1. **Helpful content** - Provide useful, concise information
+2. **Appropriate placement** - Choose placement that doesn't obstruct content
+3. **Accessible** - Ensure keyboard accessibility

guidelines/components/tour.md

@@ -0,0 +1,41 @@
+# Tour Component
+
+**Purpose**: Tour guide to help users understand new features.
+
+## When to Use
+
+- Guide new users
+- Introduce new features
+- Onboarding tours
+
+## Basic Usage
+
+```typescript
+import { Tour } from 'antd';
+
+<Tour
+  open={open}
+  onClose={() => setOpen(false)}
+  steps={[
+    {
+      title: 'Upload File',
+      description: 'Put your files here.',
+      target: () => ref1.current,
+    },
+  ]}
+/>
+```
+
+## Common Props
+
+| Property  | Description        | Type            | Default |
+| --------- | ------------------ | --------------- | ------- |
+| `open`    | Tour visible state | boolean         | false   |
+| `steps`   | Tour steps         | TourStepProps[] | -       |
+| `onClose` | Close handler      | () => void      | -       |
+
+## Best Practices
+
+1. **Clear steps** - Provide clear, concise step descriptions
+2. **Skip option** - Allow users to skip tour
+3. **Progressive disclosure** - Show one step at a time

guidelines/components/transfer.md

@@ -0,0 +1,39 @@
+# Transfer Component
+
+**Purpose**: Two-column transfer for moving items between lists.
+
+## When to Use
+
+- Move items between two lists
+- Select multiple items from a list
+- User permission assignment
+
+## Basic Usage
+
+```typescript
+import { Transfer } from 'antd';
+
+<Transfer
+  dataSource={mockData}
+  titles={['Source', 'Target']}
+  targetKeys={targetKeys}
+  onChange={handleChange}
+  render={(item) => item.title}
+/>
+```
+
+## Common Props
+
+| Property     | Description     | Type                                      | Default |
+| ------------ | --------------- | ----------------------------------------- | ------- |
+| `dataSource` | Data source     | TransferItem[]                            | []      |
+| `targetKeys` | Selected keys   | string[]                                  | []      |
+| `onChange`   | Change handler  | (targetKeys, direction, moveKeys) => void | -       |
+| `render`     | Render function | (item) => ReactNode                       | -       |
+| `titles`     | Column titles   | [string, string]                          | -       |
+
+## Best Practices
+
+1. **Form integration** - Use with Form for form data
+2. **Clear labels** - Provide clear source and target labels
+3. **Search** - Enable search for large lists

guidelines/components/tree-select.md

@@ -0,0 +1,37 @@
+# TreeSelect Component
+
+**Purpose**: Tree selector combining Tree and Select functionality.
+
+## When to Use
+
+- Select from tree structure
+- Hierarchical data selection
+- File/folder selection
+
+## Basic Usage
+
+```typescript
+import { TreeSelect } from 'antd';
+
+<TreeSelect
+  treeData={treeData}
+  treeDefaultExpandAll
+  onChange={onChange}
+/>
+```
+
+## Common Props
+
+| Property     | Description        | Type                          | Default |
+| ------------ | ------------------ | ----------------------------- | ------- |
+| `treeData`   | Tree data          | TreeNode[]                    | -       |
+| `value`      | Selected value     | string \| string[]            | -       |
+| `onChange`   | Change handler     | (value, label, extra) => void | -       |
+| `multiple`   | Multiple selection | boolean                       | false   |
+| `showSearch` | Enable search      | boolean                       | false   |
+
+## Best Practices
+
+1. **Form integration** - Always use within Form.Item
+2. **Tree structure** - Use for hierarchical data
+3. **Search** - Enable search for large trees

guidelines/components/tree.md

@@ -0,0 +1,37 @@
+# Tree Component
+
+**Purpose**: Tree structure display for hierarchical data.
+
+## When to Use
+
+- Display hierarchical data
+- File/folder structures
+- Category trees
+
+## Basic Usage
+
+```typescript
+import { Tree } from 'antd';
+
+<Tree
+  treeData={treeData}
+  onSelect={onSelect}
+  onCheck={onCheck}
+/>
+```
+
+## Common Props
+
+| Property           | Description           | Type                         | Default |
+| ------------------ | --------------------- | ---------------------------- | ------- |
+| `treeData`         | Tree data             | TreeNode[]                   | -       |
+| `checkable`        | Show checkbox         | boolean                      | false   |
+| `defaultExpandAll` | Expand all by default | boolean                      | false   |
+| `onSelect`         | Select handler        | (selectedKeys, info) => void | -       |
+| `onCheck`          | Check handler         | (checkedKeys, info) => void  | -       |
+
+## Best Practices
+
+1. **Hierarchical data** - Use for hierarchical data structures
+2. **Expand control** - Control expansion for large trees
+3. **Selection** - Use checkable for multiple selection

guidelines/components/typography.md

@@ -0,0 +1,228 @@
+# Typography Component
+
+**Purpose**: Basic text writing, including headings, body text, lists, and more. Provides consistent typography styling across the application.
+
+## When to Use
+
+- Display titles or paragraph contents in articles, blogs, or notes
+- Need copyable, editable, or ellipsis text
+- Create consistent text hierarchy
+- Format code, links, and other text elements
+
+## Basic Usage
+
+```typescript
+import { Typography } from 'antd';
+
+const { Title, Paragraph, Text, Link } = Typography;
+
+<Title>Heading Title</Title>
+<Paragraph>This is a paragraph.</Paragraph>
+<Text>Inline text</Text>
+<Link href="https://ant.design">Link</Link>
+```
+
+## Component Variants
+
+### Title
+
+```typescript
+import { Typography } from 'antd';
+const { Title } = Typography;
+
+<Title level={1}>H1 Title</Title>
+<Title level={2}>H2 Title</Title>
+<Title level={3}>H3 Title</Title>
+<Title level={4}>H4 Title</Title>
+<Title level={5}>H5 Title</Title>
+```
+
+### Paragraph
+
+```typescript
+const { Paragraph } = Typography;
+
+<Paragraph>This is a paragraph with multiple lines of text.</Paragraph>
+```
+
+### Text
+
+```typescript
+const { Text } = Typography;
+
+<Text>Regular text</Text>
+<Text strong>Bold text</Text>
+<Text italic>Italic text</Text>
+<Text underline>Underlined text</Text>
+<Text delete>Deleted text</Text>
+<Text mark>Marked text</Text>
+<Text code>Code text</Text>
+<Text keyboard>Keyboard text</Text>
+```
+
+### Link
+
+```typescript
+const { Link } = Typography;
+
+<Link href="https://ant.design">Link</Link>
+<Link href="https://ant.design" target="_blank">External Link</Link>
+```
+
+## Common Props
+
+### Typography.Text Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `code` | Code style | boolean | false |
+| `copyable` | Whether to be copyable | boolean \| object | false |
+| `delete` | Deleted line style | boolean | false |
+| `disabled` | Disabled content | boolean | false |
+| `editable` | If editable | boolean \| object | false |
+| `ellipsis` | Display ellipsis when overflow | boolean \| object | false |
+| `keyboard` | Keyboard style | boolean | false |
+| `mark` | Marked style | boolean | false |
+| `strong` | Bold style | boolean | false |
+| `italic` | Italic style | boolean | false |
+| `type` | Content type | `'secondary'` \| `'success'` \| `'warning'` \| `'danger'` | - |
+| `underline` | Underlined style | boolean | false |
+
+### Typography.Title Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `level` | Heading level (1-5) | 1 \| 2 \| 3 \| 4 \| 5 | 1 |
+| `code` | Code style | boolean | false |
+| `copyable` | Whether to be copyable | boolean \| object | false |
+| `editable` | If editable | boolean \| object | false |
+| `ellipsis` | Display ellipsis | boolean \| object | false |
+| `mark` | Marked style | boolean | false |
+| `type` | Content type | `'secondary'` \| `'success'` \| `'warning'` \| `'danger'` | - |
+
+### Typography.Paragraph Props
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| `code` | Code style | boolean | false |
+| `copyable` | Whether to be copyable | boolean \| object | false |
+| `editable` | If editable | boolean \| object | false |
+| `ellipsis` | Display ellipsis | boolean \| object | false |
+| `strong` | Bold style | boolean | false |
+| `type` | Content type | `'secondary'` \| `'success'` \| `'warning'` \| `'danger'` | - |
+
+## Examples
+
+### Copyable Text
+
+```typescript
+<Text copyable>Copy this text</Text>
+
+<Text copyable={{ text: 'Custom text to copy' }}>
+  Click to copy custom text
+</Text>
+```
+
+### Editable Text
+
+```typescript
+<Paragraph editable={{ onChange: setContent }}>
+  {content}
+</Paragraph>
+
+<Title editable={{ onChange: setTitle }}>
+  {title}
+</Title>
+```
+
+### Ellipsis
+
+```typescript
+<Paragraph ellipsis>
+  Very long text that will be truncated with ellipsis...
+</Paragraph>
+
+<Paragraph ellipsis={{ rows: 3, expandable: true, symbol: 'more' }}>
+  Very long text that will be truncated to 3 rows...
+</Paragraph>
+```
+
+### Text Types
+
+```typescript
+<Text type="secondary">Secondary text</Text>
+<Text type="success">Success text</Text>
+<Text type="warning">Warning text</Text>
+<Text type="danger">Danger text</Text>
+```
+
+### Combined Styles
+
+```typescript
+<Text strong mark>Important marked text</Text>
+<Text code strong>const example = 'code';</Text>
+<Text delete type="secondary">Deleted secondary text</Text>
+```
+
+## Best Practices
+
+1. **Use appropriate heading levels** - Maintain proper heading hierarchy (h1 → h2 → h3)
+2. **Use Paragraph for body text** - Use Paragraph component for multi-line content
+3. **Use Text for inline elements** - Use Text for inline formatting and styling
+4. **Ellipsis for long content** - Use ellipsis to truncate long text gracefully
+5. **Copyable for important data** - Make important data copyable (IDs, codes, etc.)
+6. **Editable for user content** - Use editable for user-generated content
+7. **Consistent typography** - Use Typography components instead of raw HTML tags
+8. **Accessible headings** - Use proper heading levels for screen readers
+
+## Common Patterns
+
+### Article Content
+
+```typescript
+<Typography>
+  <Title level={1}>Article Title</Title>
+  <Paragraph>
+    Introduction paragraph with important information.
+  </Paragraph>
+  <Title level={2}>Section Title</Title>
+  <Paragraph>
+    Section content with detailed information.
+  </Paragraph>
+</Typography>
+```
+
+### Code Display
+
+```typescript
+<Paragraph>
+  Use <Text code>code</Text> for inline code snippets.
+</Paragraph>
+
+<Paragraph>
+  <pre>
+    <Text code copyable>
+      {codeBlock}
+    </Text>
+  </pre>
+</Paragraph>
+```
+
+### User Information
+
+```typescript
+<Text copyable={{ text: userId }}>
+  User ID: {userId}
+</Text>
+
+<Text editable={{ onChange: handleNameChange }}>
+  {userName}
+</Text>
+```
+
+## Accessibility
+
+- Headings use proper semantic HTML (h1-h5)
+- Copyable elements are keyboard accessible
+- Editable elements have proper ARIA labels
+- Text types maintain sufficient color contrast

guidelines/components/upload.md

@@ -0,0 +1,41 @@
+# Upload Component
+
+**Purpose**: File upload component with drag and drop support.
+
+## When to Use
+
+- File upload functionality
+- Image upload
+- Drag and drop file upload
+
+## Basic Usage
+
+```typescript
+import { Upload } from 'antd';
+import { UploadOutlined } from '@ant-design/icons';
+
+<Upload
+  action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+  listType="text"
+>
+  <Button icon={<UploadOutlined />}>Click to Upload</Button>
+</Upload>
+```
+
+## Common Props
+
+| Property       | Description           | Type                                        | Default  |
+| -------------- | --------------------- | ------------------------------------------- | -------- |
+| `action`       | Upload URL            | string                                      | -        |
+| `fileList`     | File list             | UploadFile[]                                | -        |
+| `onChange`     | Change handler        | (info) => void                              | -        |
+| `beforeUpload` | Before upload handler | (file) => boolean \| Promise                | -        |
+| `listType`     | List type             | `'text'` \| `'picture'` \| `'picture-card'` | `'text'` |
+| `multiple`     | Multiple upload       | boolean                                     | false    |
+
+## Best Practices
+
+1. **Form integration** - Use with Form for form uploads
+2. **Validation** - Use beforeUpload for file validation
+3. **Progress** - Show upload progress
+4. **File types** - Validate file types and sizes

guidelines/components/watermark.md

@@ -0,0 +1,33 @@
+# Watermark Component
+
+**Purpose**: Watermark overlay for content protection.
+
+## When to Use
+
+- Add watermarks to content
+- Protect sensitive information
+- Brand content
+
+## Basic Usage
+
+```typescript
+import { Watermark } from 'antd';
+
+<Watermark content="Ant Design">
+  <div style={{ height: 500 }} />
+</Watermark>
+```
+
+## Common Props
+
+| Property  | Description            | Type               | Default    |
+| --------- | ---------------------- | ------------------ | ---------- |
+| `content` | Watermark content      | string \| string[] | -          |
+| `font`    | Font configuration     | object             | -          |
+| `gap`     | Gap between watermarks | [number, number]   | [100, 100] |
+
+## Best Practices
+
+1. **Content protection** - Use for protecting sensitive content
+2. **Appropriate opacity** - Set appropriate opacity for visibility
+3. **Non-intrusive** - Ensure watermark doesn't obstruct content

guidelines/design-tokens/colors.md

@@ -0,0 +1,293 @@
+# Color Design Tokens
+
+Ant Design uses a comprehensive color token system based on **Seed Tokens**, **Map Tokens**, and **Alias Tokens**. This system ensures consistent colors across all components and supports theme customization.
+
+## Token Hierarchy
+
+1. **Seed Token**: Base color values (e.g., `colorPrimary`, `colorSuccess`)
+2. **Map Token**: Derived colors from seed tokens (e.g., `colorPrimary-1` through `colorPrimary-10`)
+3. **Alias Token**: Semantic color tokens used by components (e.g., `colorText`, `colorBgContainer`)
+
+## Naming Pattern
+
+Ant Design color tokens follow this pattern: `color{Category}{Role}{State}`
+
+- **Category**: `Text`, `Bg`, `Border`, `Fill`, `Link`
+- **Role**: `Primary`, `Success`, `Warning`, `Error`, `Info` (optional)
+- **State**: `Hover`, `Active`, `Disabled` (optional)
+
+## Quick Decision Tree
+
+**Need a background color?** → Start with `colorBg` or `colorFill` → Add role if semantic meaning needed (e.g., `colorBgPrimary`) → Use `-hover` or `-active` for interactions
+
+**Need text color?** → Start with `colorText` → Add role if semantic meaning needed (e.g., `colorTextPrimary`) → Use `-disabled` for disabled state
+
+**Need a border color?** → Start with `colorBorder` → Add role if needed (e.g., `colorBorderPrimary`) → Use `-hover` for hover state
+
+**Need a link color?** → Use `colorLink` → Use `colorLinkHover` for hover state → Use `colorLinkActive` for active state
+
+## Seed Tokens (Base Colors)
+
+These are the foundation colors that generate the entire color system:
+
+### Brand Colors
+
+- **`colorPrimary`**: Brand primary color (default: `#1677ff`)
+  - Used for: Primary buttons, links, brand elements
+  - Generates: `colorPrimary-1` through `colorPrimary-10` gradient
+
+- **`colorSuccess`**: Success color (default: `#52c41a`)
+  - Used for: Success messages, success states
+  - Generates: `colorSuccess-1` through `colorSuccess-10` gradient
+
+- **`colorWarning`**: Warning color (default: `#faad14`)
+  - Used for: Warning messages, warning states
+  - Generates: `colorWarning-1` through `colorWarning-10` gradient
+
+- **`colorError`**: Error color (default: `#ff4d4f`)
+  - Used for: Error messages, destructive actions
+  - Generates: `colorError-1` through `colorError-10` gradient
+
+- **`colorInfo`**: Info color (default: `#1677ff`)
+  - Used for: Informational messages
+  - Generates: `colorInfo-1` through `colorInfo-10` gradient
+
+### Base Colors
+
+- **`colorTextBase`**: Base text color (default: `rgba(0, 0, 0, 0.88)`)
+  - **DO NOT use directly** - Use derived tokens instead
+
+- **`colorBgBase`**: Base background color (default: `#ffffff`)
+  - **DO NOT use directly** - Use derived tokens instead
+
+- **`colorLink`**: Link color (default: `#1677ff`)
+
+## Alias Tokens (Semantic Colors)
+
+These are the tokens you should use in your code:
+
+### Background Colors
+
+#### Container Backgrounds
+
+- **`colorBgContainer`**: Main container background (default: `#ffffff`)
+  - Use for: Card backgrounds, modal backgrounds, drawer backgrounds
+
+- **`colorBgElevated`**: Elevated surface background (default: `#ffffff`)
+  - Use for: Popover backgrounds, dropdown menus, tooltips
+
+- **`colorBgLayout`**: Layout background (default: `#f5f5f5`)
+  - Use for: Page background, layout background
+
+- **`colorBgSpotlight`**: Spotlight background (default: `rgba(0, 0, 0, 0.85)`)
+  - Use for: Backdrop overlays, modal backdrops
+
+#### Fill Colors
+
+- **`colorFill`**: Default fill color (default: `rgba(0, 0, 0, 0.06)`)
+  - Use for: Disabled states, subtle backgrounds
+
+- **`colorFillSecondary`**: Secondary fill color (default: `rgba(0, 0, 0, 0.12)`)
+  - Use for: Hover states, secondary backgrounds
+
+- **`colorFillTertiary`**: Tertiary fill color (default: `rgba(0, 0, 0, 0.04)`)
+  - Use for: Subtle backgrounds, disabled states
+
+- **`colorFillQuaternary`**: Quaternary fill color (default: `rgba(0, 0, 0, 0.02)`)
+  - Use for: Very subtle backgrounds
+
+#### Semantic Background Colors
+
+- **`colorBgPrimary`**: Primary background (light tint of primary color)
+- **`colorBgSuccess`**: Success background (light tint of success color)
+- **`colorBgWarning`**: Warning background (light tint of warning color)
+- **`colorBgError`**: Error background (light tint of error color)
+- **`colorBgInfo`**: Info background (light tint of info color)
+
+### Text Colors
+
+- **`colorText`**: Default text color (default: `rgba(0, 0, 0, 0.88)`)
+  - Use for: Body text, default content
+
+- **`colorTextSecondary`**: Secondary text color (default: `rgba(0, 0, 0, 0.65)`)
+  - Use for: Secondary content, descriptions
+
+- **`colorTextTertiary`**: Tertiary text color (default: `rgba(0, 0, 0, 0.45)`)
+  - Use for: Placeholders, hints, disabled text
+
+- **`colorTextQuaternary`**: Quaternary text color (default: `rgba(0, 0, 0, 0.25)`)
+  - Use for: Very subtle text
+
+- **`colorTextDisabled`**: Disabled text color (default: `rgba(0, 0, 0, 0.25)`)
+  - Use for: Disabled form fields, disabled buttons
+
+- **`colorTextHeading`**: Heading text color (default: `rgba(0, 0, 0, 0.88)`)
+  - Use for: Page titles, section headings
+
+- **`colorTextLabel`**: Label text color
+- **`colorTextDescription`**: Description text color
+- **`colorTextLightSolid`**: Text on solid backgrounds (default: `#ffffff`)
+  - Use for: Text on primary buttons, text on colored backgrounds
+
+#### Semantic Text Colors
+
+- **`colorTextPrimary`**: Primary text color (uses primary color)
+- **`colorTextSuccess`**: Success text color (uses success color)
+- **`colorTextWarning`**: Warning text color (uses warning color)
+- **`colorTextError`**: Error text color (uses error color)
+- **`colorTextInfo`**: Info text color (uses info color)
+
+### Border Colors
+
+- **`colorBorder`**: Default border color (default: `#d9d9d9`)
+  - Use for: Input borders, card borders, divider lines
+
+- **`colorBorderSecondary`**: Secondary border color (default: `#f0f0f0`)
+  - Use for: Subtle borders, inner dividers
+
+- **`colorBorderPrimary`**: Primary border color (uses primary color)
+- **`colorBorderSuccess`**: Success border color (uses success color)
+- **`colorBorderWarning`**: Warning border color (uses warning color)
+- **`colorBorderError`**: Error border color (uses error color)
+- **`colorBorderInfo`**: Info border color (uses info color)
+
+- **`colorSplit`**: Separator color (default: `rgba(5, 5, 5, 0.06)`)
+  - Use for: Dividers, separators
+
+### Link Colors
+
+- **`colorLink`**: Link color (default: `#1677ff`)
+- **`colorLinkHover`**: Link hover color
+- **`colorLinkActive`**: Link active color
+
+### Icon Colors
+
+- **`colorIcon`**: Default icon color (default: `rgba(0, 0, 0, 0.45)`)
+- **`colorIconHover`**: Icon hover color (default: `rgba(0, 0, 0, 0.88)`)
+- **`colorIconActive`**: Icon active color
+
+## Color Gradients
+
+Each seed color generates a 10-step gradient:
+
+- `colorPrimary-1` through `colorPrimary-10` (lightest to darkest)
+- `colorSuccess-1` through `colorSuccess-10`
+- `colorWarning-1` through `colorWarning-10`
+- `colorError-1` through `colorError-10`
+- `colorInfo-1` through `colorInfo-10`
+
+**Usage**: These are typically used internally by components. Use alias tokens instead.
+
+## Usage Examples
+
+### Correct Usage
+
+```typescript
+import { theme } from 'antd';
+
+const { token } = theme.useToken();
+
+// ✅ CORRECT - Using semantic tokens
+<div style={{
+  backgroundColor: token.colorBgContainer,
+  color: token.colorText,
+  border: `1px solid ${token.colorBorder}`
+}}>
+  Content
+</div>
+
+// ✅ CORRECT - Using semantic tokens for states
+<button style={{
+  backgroundColor: token.colorPrimary,
+  color: token.colorTextLightSolid
+}}>
+  Primary Button
+</button>
+
+// ✅ CORRECT - Using theme configuration
+<ConfigProvider
+  theme={{
+    token: {
+      colorPrimary: '#1890ff',
+    },
+  }}
+>
+  {/* Your app */}
+</ConfigProvider>
+```
+
+### Incorrect Usage
+
+```typescript
+// ❌ WRONG - Hardcoding colors
+<div style={{ backgroundColor: '#ffffff', color: '#000000' }}>
+
+// ❌ WRONG - Using seed tokens directly
+<div style={{ backgroundColor: token.colorBgBase }}>
+
+// ❌ WRONG - Using gradient tokens directly
+<div style={{ backgroundColor: token.colorPrimary1 }}>
+```
+
+## Dark Theme Support
+
+All color tokens automatically adapt to dark theme when using `darkAlgorithm`:
+
+```typescript
+import { ConfigProvider, theme } from 'antd';
+
+<ConfigProvider
+  theme={{
+    algorithm: theme.darkAlgorithm,
+  }}
+>
+  {/* Your app - all tokens automatically adapt */}
+</ConfigProvider>
+```
+
+## Customizing Colors
+
+### Global Theme Customization
+
+```typescript
+import { ConfigProvider } from 'antd';
+
+<ConfigProvider
+  theme={{
+    token: {
+      colorPrimary: '#722ed1',      // Change primary color
+      colorSuccess: '#52c41a',        // Change success color
+      colorWarning: '#faad14',        // Change warning color
+      colorError: '#f5222d',          // Change error color
+      colorInfo: '#1890ff',           // Change info color
+    },
+  }}
+>
+  {/* Your app */}
+</ConfigProvider>
+```
+
+### Component-Level Customization
+
+```typescript
+<ConfigProvider
+  theme={{
+    components: {
+      Button: {
+        colorPrimary: '#722ed1',     // Override for Button only
+      },
+    },
+  }}
+>
+  {/* Your app */}
+</ConfigProvider>
+```
+
+## Best Practices
+
+1. **Always use alias tokens** - Never use seed tokens or gradient tokens directly
+2. **Use semantic tokens** - Choose tokens that match the semantic meaning (e.g., `colorTextError` for error text)
+3. **Respect the hierarchy** - Use `colorText`, `colorTextSecondary`, `colorTextTertiary` for text hierarchy
+4. **Use theme configuration** - Customize colors via `ConfigProvider` theme, not hardcoded values
+5. **Test in dark mode** - Ensure your colors work in both light and dark themes
+6. **Maintain contrast** - Ensure sufficient contrast ratios for accessibility (WCAG AA)

guidelines/design-tokens/spacing.md

@@ -0,0 +1,300 @@
+# Spacing and Size Design Tokens
+
+Ant Design uses a systematic spacing and size token system based on a 4px base unit. All spacing and size values should use these tokens for consistency.
+
+## Design Philosophy
+
+- **Base unit**: 4px (defined by `sizeUnit`)
+- **Size step**: 4px (defined by `sizeStep`)
+- All spacing and sizes are multiples of 4px
+- This creates a consistent rhythm throughout the design system
+
+## Spacing Tokens
+
+### Padding Tokens
+
+- **`paddingXXS`**: Extra extra small padding (default: `4px`)
+- **`paddingXS`**: Extra small padding (default: `8px`)
+- **`paddingSM`**: Small padding (default: `12px`)
+- **`padding`**: Base padding (default: `16px`)
+- **`paddingMD`**: Medium padding (default: `16px`)
+- **`paddingLG`**: Large padding (default: `24px`)
+- **`paddingXL`**: Extra large padding (default: `32px`)
+
+### Margin Tokens
+
+- **`marginXXS`**: Extra extra small margin (default: `4px`)
+- **`marginXS`**: Extra small margin (default: `8px`)
+- **`marginSM`**: Small margin (default: `12px`)
+- **`margin`**: Base margin (default: `16px`)
+- **`marginMD`**: Medium margin (default: `16px`)
+- **`marginLG`**: Large margin (default: `24px`)
+- **`marginXL`**: Extra large margin (default: `32px`)
+
+### Common Spacing Values
+
+These are the most commonly used spacing values:
+
+- **4px** (`paddingXXS` / `marginXXS`): Minimal spacing, tight layouts
+- **8px** (`paddingXS` / `marginXS`): Small spacing, compact UI
+- **12px** (`paddingSM` / `marginSM`): Small-medium spacing
+- **16px** (`padding` / `margin`): Default spacing, most common
+- **24px** (`paddingLG` / `marginLG`): Large spacing, section separation
+- **32px** (`paddingXL` / `marginXL`): Extra large spacing, major sections
+
+## Size Tokens
+
+### Control Heights
+
+- **`controlHeightSM`**: Small control height (default: `24px`)
+  - Use for: Small buttons, small inputs, compact UI
+
+- **`controlHeight`**: Base control height (default: `32px`)
+  - Use for: Default buttons, default inputs, most form controls
+
+- **`controlHeightLG`**: Large control height (default: `40px`)
+  - Use for: Large buttons, large inputs, prominent actions
+
+### Border Radius
+
+- **`borderRadius`**: Base border radius (default: `6px`)
+  - Use for: Buttons, inputs, cards, most components
+
+- **`borderRadiusSM`**: Small border radius (default: `4px`)
+  - Use for: Small elements, tags, badges
+
+- **`borderRadiusLG`**: Large border radius (default: `8px`)
+  - Use for: Large cards, prominent elements
+
+- **`borderRadiusXS`**: Extra small border radius (default: `2px`)
+  - Use for: Very small elements
+
+- **`borderRadiusOuter`**: Outer border radius (default: `4px`)
+  - Use for: Outer containers, modals
+
+### Line Width
+
+- **`lineWidth`**: Base line width (default: `1`)
+  - Use for: Borders, dividers, outlines
+
+- **`lineWidthBold`**: Bold line width (default: `2`)
+  - Use for: Strong borders, emphasis
+
+- **`lineWidthFocus`**: Focus outline width (default: `4`)
+  - Use for: Focus indicators, active states
+
+### Size Units
+
+- **`sizeUnit`**: Size change unit (default: `4`)
+  - Base unit for all size calculations
+
+- **`sizeStep`**: Size base step (default: `4`)
+  - Base step for size variations
+
+- **`sizePopupArrow`**: Popup arrow size (default: `16`)
+
+## Usage Examples
+
+### Using Spacing Tokens
+
+```typescript
+import { theme } from 'antd';
+
+const { token } = theme.useToken();
+
+// ✅ CORRECT - Using spacing tokens
+<div style={{
+  padding: token.padding,
+  margin: token.marginLG,
+}}>
+  Content
+</div>
+
+// ✅ CORRECT - Using different spacing sizes
+<Card style={{
+  padding: token.paddingLG,
+  marginBottom: token.margin,
+}}>
+  Card content
+</Card>
+
+// ✅ CORRECT - Using Space component (recommended)
+import { Space } from 'antd';
+
+<Space size="middle">
+  <Button>Button 1</Button>
+  <Button>Button 2</Button>
+</Space>
+```
+
+### Using Size Tokens
+
+```typescript
+// ✅ CORRECT - Using control height tokens
+<button style={{
+  height: token.controlHeight,
+  borderRadius: token.borderRadius,
+}}>
+  Button
+</button>
+
+// ✅ CORRECT - Using border radius tokens
+<div style={{
+  borderRadius: token.borderRadiusLG,
+  border: `${token.lineWidth}px solid ${token.colorBorder}`,
+}}>
+  Content
+</div>
+```
+
+### Incorrect Usage
+
+```typescript
+// ❌ WRONG - Hardcoding spacing values
+<div style={{ padding: '15px', margin: '20px' }}>
+
+// ❌ WRONG - Not using tokens
+<button style={{ height: '30px', borderRadius: '5px' }}>
+
+// ❌ WRONG - Inconsistent spacing
+<div style={{ padding: '13px' }}>  // Should use token values (multiples of 4px)
+```
+
+## Spacing Component
+
+The `Space` component is the recommended way to add spacing between components:
+
+```typescript
+import { Space } from 'antd';
+
+// Small spacing (8px)
+<Space size="small">
+  <Button>Button 1</Button>
+  <Button>Button 2</Button>
+</Space>
+
+// Middle spacing (16px) - default
+<Space size="middle">
+  <Button>Button 1</Button>
+  <Button>Button 2</Button>
+</Space>
+
+// Large spacing (24px)
+<Space size="large">
+  <Button>Button 1</Button>
+  <Button>Button 2</Button>
+</Space>
+
+// Custom spacing
+<Space size={32}>
+  <Button>Button 1</Button>
+  <Button>Button 2</Button>
+</Space>
+```
+
+## Grid System
+
+Ant Design uses a 24-column grid system:
+
+```typescript
+import { Row, Col } from 'antd';
+
+<Row gutter={[16, 16]}>  // 16px horizontal and vertical gutter
+  <Col span={8}>Column 1</Col>
+  <Col span={8}>Column 2</Col>
+  <Col span={8}>Column 3</Col>
+</Row>
+```
+
+The `gutter` prop uses spacing tokens internally. Common gutter values:
+
+- `[8, 8]` - Small gutter
+- `[16, 16]` - Default gutter (most common)
+- `[24, 24]` - Large gutter
+
+## Best Practices
+
+1. **Always use spacing tokens** - Never hardcode padding, margin, or size values
+2. **Use Space component** - Prefer `Space` component over manual margins
+3. **Maintain 4px rhythm** - All spacing should be multiples of 4px
+4. **Consistent spacing** - Use the same spacing tokens for similar elements
+5. **Use appropriate sizes** - Choose spacing that matches the element's importance
+6. **Respect component spacing** - Components have built-in spacing - don't override unnecessarily
+7. **Use Grid system** - Use Row/Col for layout instead of manual spacing
+
+## Common Spacing Patterns
+
+### Card Spacing
+
+```typescript
+<Card style={{ padding: token.paddingLG }}>
+  {/* Card content */}
+</Card>
+```
+
+### Form Spacing
+
+```typescript
+<Form>
+  <Form.Item style={{ marginBottom: token.marginLG }}>
+    {/* Form field */}
+  </Form.Item>
+</Form>
+```
+
+### Section Spacing
+
+```typescript
+<section style={{
+  padding: token.paddingXL,
+  marginBottom: token.marginLG
+}}>
+  {/* Section content */}
+</section>
+```
+
+### Button Group Spacing
+
+```typescript
+<Space>
+  <Button>Cancel</Button>
+  <Button type="primary">Submit</Button>
+</Space>
+```
+
+## Customizing Spacing
+
+### Global Theme Customization
+
+```typescript
+import { ConfigProvider } from 'antd';
+
+<ConfigProvider
+  theme={{
+    token: {
+      sizeUnit: 4,           // Base unit (keep as 4)
+      sizeStep: 4,            // Size step (keep as 4)
+      borderRadius: 8,       // Change base border radius
+      controlHeight: 36,      // Change control height
+    },
+  }}
+>
+  {/* Your app */}
+</ConfigProvider>
+```
+
+### Compact Mode
+
+For compact spacing, use the `compactAlgorithm`:
+
+```typescript
+import { ConfigProvider, theme } from 'antd';
+
+<ConfigProvider
+  theme={{
+    algorithm: theme.compactAlgorithm,
+  }}
+>
+  {/* Your app with compact spacing */}
+</ConfigProvider>
+```

guidelines/design-tokens/typography.md

@@ -0,0 +1,245 @@
+# Typography Design Tokens
+
+Ant Design uses a systematic typography token system for consistent text styling across all components.
+
+## Design Philosophy
+
+- Typography tokens control font family, size, weight, line height, and letter spacing
+- All text should use typography tokens, never hardcoded values
+- Typography creates visual hierarchy through size and weight variations
+- Default font size is 14px, with variations for different contexts
+
+## Font Families
+
+### Default Font Family
+
+- **`fontFamily`**: Default font family for UI text
+  - Value: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`
+  - Usage: All standard UI text including headings and body text
+  - Prioritizes system fonts for better performance and native feel
+
+### Code Font Family
+
+- **`fontFamilyCode`**: Font family for code text
+  - Value: `'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace`
+  - Usage: Code blocks, inline code, technical content
+  - Used in: Typography `code`, `pre`, and `kbd` elements
+
+## Font Sizes
+
+### Base Font Size
+
+- **`fontSize`**: Base font size (default: `14`)
+  - This is the foundation for all other font sizes
+  - Most UI elements use this size or variations of it
+
+### Font Size Scale
+
+Ant Design uses a systematic font size scale:
+
+- **`fontSizeSM`**: Small font size (default: `12px`)
+  - Use for: Secondary text, captions, small labels
+
+- **`fontSize`**: Base font size (default: `14px`)
+  - Use for: Body text, form inputs, buttons, most UI elements
+
+- **`fontSizeLG`**: Large font size (default: `16px`)
+  - Use for: Emphasized body text, important content
+
+- **`fontSizeXL`**: Extra large font size (default: `20px`)
+  - Use for: Section headings, large emphasis
+
+- **`fontSizeHeading1`**: H1 heading size (default: `38px`)
+  - Use for: Page titles, hero headings
+
+- **`fontSizeHeading2`**: H2 heading size (default: `30px`)
+  - Use for: Major section headings
+
+- **`fontSizeHeading3`**: H3 heading size (default: `24px`)
+  - Use for: Subsection headings
+
+- **`fontSizeHeading4`**: H4 heading size (default: `20px`)
+  - Use for: Minor section headings
+
+- **`fontSizeHeading5`**: H5 heading size (default: `16px`)
+  - Use for: Small headings
+
+## Font Weights
+
+- **`fontWeightStrong`**: Strong/bold weight (default: `600`)
+  - Use for: Headings, emphasized text, important labels
+
+- **Default weight**: `400` (normal)
+  - Use for: Body text, most UI elements
+
+## Line Heights
+
+Line heights are calculated based on font sizes for optimal readability:
+
+- **`lineHeight`**: Base line height (default: `1.5714285714285714`)
+  - Calculated as: `fontSize * 1.5714285714285714`
+  - Use for: Body text, most content
+
+- **`lineHeightLG`**: Large line height (default: `1.5`)
+  - Use for: Large text, headings
+
+- **`lineHeightSM`**: Small line height (default: `1.6666666666666667`)
+  - Use for: Small text, compact UI
+
+- **`lineHeightHeading1`**: H1 line height (default: `1.2105263157894737`)
+- **`lineHeightHeading2`**: H2 line height (default: `1.2666666666666666`)
+- **`lineHeightHeading3`**: H3 line height (default: `1.3333333333333333`)
+- **`lineHeightHeading4`**: H4 line height (default: `1.4`)
+- **`lineHeightHeading5`**: H5 line height (default: `1.5`)
+
+## Usage Examples
+
+### Using Typography Tokens
+
+```typescript
+import { theme } from 'antd';
+
+const { token } = theme.useToken();
+
+// ✅ CORRECT - Using typography tokens
+<div style={{
+  fontFamily: token.fontFamily,
+  fontSize: token.fontSize,
+  lineHeight: token.lineHeight,
+  fontWeight: 400,
+}}>
+  Body text
+</div>
+
+// ✅ CORRECT - Heading with tokens
+<h1 style={{
+  fontFamily: token.fontFamily,
+  fontSize: token.fontSizeHeading1,
+  lineHeight: token.lineHeightHeading1,
+  fontWeight: token.fontWeightStrong,
+}}>
+  Page Title
+</h1>
+
+// ✅ CORRECT - Code text
+<code style={{
+  fontFamily: token.fontFamilyCode,
+  fontSize: token.fontSizeSM,
+}}>
+  const example = 'code';
+</code>
+```
+
+### Using Typography Component
+
+The Typography component automatically uses tokens:
+
+```typescript
+import { Typography } from 'antd';
+
+const { Title, Paragraph, Text, Code } = Typography;
+
+// Automatically uses correct tokens
+<Title level={1}>Heading 1</Title>
+<Title level={2}>Heading 2</Title>
+<Paragraph>Body text</Paragraph>
+<Text type="secondary">Secondary text</Text>
+<Code>code example</Code>
+```
+
+### Incorrect Usage
+
+```typescript
+// ❌ WRONG - Hardcoding font sizes
+<div style={{ fontSize: '14px', fontFamily: 'Arial' }}>
+
+// ❌ WRONG - Not using tokens
+<h1 style={{ fontSize: '32px', fontWeight: 'bold' }}>
+
+// ❌ WRONG - Inconsistent sizing
+<p style={{ fontSize: '13px' }}>  // Should use fontSizeSM (12px) or fontSize (14px)
+```
+
+## Typography Hierarchy
+
+### For Headings
+
+- Use `fontSizeHeading1` for page titles in large views
+- Use `fontSizeHeading2` for major section headers
+- Use `fontSizeHeading3` for subsection headers
+- Use `fontSizeHeading4` for minor section headers
+- Use `fontSizeHeading5` for small headings
+- Always use `fontWeightStrong` for headings
+
+### For Body Text
+
+- Use `fontSize` (14px) as the default for most UI elements
+- Use `fontSizeLG` (16px) for emphasized body text or multiline content
+- Use `fontSizeSM` (12px) sparingly - only for compact UI like badges, metadata, or when space is extremely limited
+- **IMPORTANT**: Avoid using font sizes smaller than 12px as they are hard to read
+
+### For Code
+
+- Use `fontFamilyCode` for all code-related content
+- Use `fontSizeSM` or `fontSize` for code text
+- Use Typography's `Code` component for inline code
+- Use Typography's `Pre` component for code blocks
+
+## Text Colors
+
+Typography colors are defined in the color token system:
+
+- **`colorText`**: Default text color
+- **`colorTextSecondary`**: Secondary text color
+- **`colorTextTertiary`**: Tertiary text color
+- **`colorTextHeading`**: Heading text color
+- **`colorTextDisabled`**: Disabled text color
+
+See [colors.md](colors.md) for detailed color token information.
+
+## Customizing Typography
+
+### Global Theme Customization
+
+```typescript
+import { ConfigProvider } from 'antd';
+
+<ConfigProvider
+  theme={{
+    token: {
+      fontSize: 16,                    // Change base font size
+      fontFamily: 'Your Font, sans-serif', // Change font family
+      fontWeightStrong: 700,            // Change bold weight
+    },
+  }}
+>
+  {/* Your app */}
+</ConfigProvider>
+```
+
+### Component-Level Customization
+
+```typescript
+<ConfigProvider
+  theme={{
+    components: {
+      Typography: {
+        fontSizeHeading1: 40,           // Override H1 size
+        fontWeightStrong: 700,          // Override bold weight
+      },
+    },
+  }}
+>
+  {/* Your app */}
+</ConfigProvider>
+```
+
+## Best Practices
+
+1. **Always use typography tokens** - Never hardcode font sizes, families, or line heights
+2. **Maintain hierarchy** - Use appropriate heading sizes for content structure
+3. **Avoid small text** - Don't use font sizes smaller than 12px
+4. **Use Typography component** - Prefer Typography component over manual styling
+5. **Respect line heights** - Use appropriate line heights for readability
+6. **Consistent weights** - Use `fontWeightStrong` only for headings and emphasis
+7. **Code font for code** - Always use `fontFamilyCode` for code content

guidelines/guidelines-template.md

@@ -0,0 +1,63 @@
+# Component Guidelines Template
+
+Use this template when creating new component guidelines. Copy this file and replace the placeholders.
+
+# [Component Name] Component
+
+**Purpose**: [Brief description of what the component does and when to use it]
+
+## When to Use
+
+- [Use case 1]
+- [Use case 2]
+- [Use case 3]
+
+## Basic Usage
+
+```typescript
+import { [ComponentName] } from 'antd';
+
+<[ComponentName] [props]>
+  [content]
+</[ComponentName]>
+```
+
+## Common Props
+
+| Property | Description | Type | Default |
+| -------- | ----------- | ---- | ------- |
+| `prop1`  | Description | type | default |
+| `prop2`  | Description | type | default |
+
+## Examples
+
+### Example 1
+
+```typescript
+[Code example]
+```
+
+### Example 2
+
+```typescript
+[Code example]
+```
+
+## Best Practices
+
+1. **Practice 1** - Explanation
+2. **Practice 2** - Explanation
+3. **Practice 3** - Explanation
+
+## Common Patterns
+
+### Pattern 1
+
+```typescript
+[Code example]
+```
+
+## Accessibility
+
+- [Accessibility consideration 1]
+- [Accessibility consideration 2]

guidelines/overview-components.md

@@ -0,0 +1,198 @@
+# Components Overview
+
+Ant Design provides a comprehensive set of React components for building enterprise-class applications. Always prefer components from the `antd` package (imported from `antd`) if they are available. Each component has detailed documentation and examples.
+
+## Component Categories
+
+### General Components
+
+| Component  | Purpose                        | Guidelines File                            |
+| ---------- | ------------------------------ | ------------------------------------------ |
+| Button     | Trigger operations and actions | [button.md](components/button.md)          |
+| Icon       | Semantic vector graphics       | See [overview-icons.md](overview-icons.md) |
+| Typography | Text display and formatting    | [typography.md](components/typography.md)  |
+
+### Layout Components
+
+| Component | Purpose                    | Guidelines File                     |
+| --------- | -------------------------- | ----------------------------------- |
+| Layout    | Page layout container      | [layout.md](components/layout.md)   |
+| Grid      | 24-column grid system      | [grid.md](components/grid.md)       |
+| Space     | Spacing between components | [space.md](components/space.md)     |
+| Divider   | Content divider            | [divider.md](components/divider.md) |
+| Flex      | Flexbox layout             | [flex.md](components/flex.md)       |
+
+### Navigation Components
+
+| Component  | Purpose                  | Guidelines File                           |
+| ---------- | ------------------------ | ----------------------------------------- |
+| Menu       | Navigation menu          | [menu.md](components/menu.md)             |
+| Tabs       | Tab panels with selector | [tabs.md](components/tabs.md)             |
+| Breadcrumb | Breadcrumb navigation    | [breadcrumb.md](components/breadcrumb.md) |
+| Pagination | Pagination controls      | [pagination.md](components/pagination.md) |
+| Steps      | Step-by-step process     | [steps.md](components/steps.md)           |
+| Anchor     | Anchor navigation        | [anchor.md](components/anchor.md)         |
+
+### Data Entry Components
+
+| Component   | Purpose                        | Guidelines File                               |
+| ----------- | ------------------------------ | --------------------------------------------- |
+| Form        | Form container with validation | [form.md](components/form.md)                 |
+| Input       | Text input field               | [input.md](components/input.md)               |
+| InputNumber | Number input field             | [input-number.md](components/input-number.md) |
+| TextArea    | Multiline text input           | [textarea.md](components/textarea.md)         |
+| Select      | Dropdown selector              | [select.md](components/select.md)             |
+| Cascader    | Cascading selector             | [cascader.md](components/cascader.md)         |
+| TreeSelect  | Tree selector                  | [tree-select.md](components/tree-select.md)   |
+| Checkbox    | Checkbox input                 | [checkbox.md](components/checkbox.md)         |
+| Radio       | Radio button group             | [radio.md](components/radio.md)               |
+| Switch      | Toggle switch                  | [switch.md](components/switch.md)             |
+| Slider      | Range slider                   | [slider.md](components/slider.md)             |
+| Rate        | Rating component               | [rate.md](components/rate.md)                 |
+| Upload      | File upload                    | [upload.md](components/upload.md)             |
+| DatePicker  | Date picker                    | [date-picker.md](components/date-picker.md)   |
+| TimePicker  | Time picker                    | [time-picker.md](components/time-picker.md)   |
+| ColorPicker | Color picker                   | [color-picker.md](components/color-picker.md) |
+| Transfer    | Transfer list                  | [transfer.md](components/transfer.md)         |
+
+### Data Display Components
+
+| Component    | Purpose                           | Guidelines File                               |
+| ------------ | --------------------------------- | --------------------------------------------- |
+| Table        | Data table with sorting/filtering | [table.md](components/table.md)               |
+| List         | List display                      | [list.md](components/list.md)                 |
+| Card         | Card container                    | [card.md](components/card.md)                 |
+| Descriptions | Description list                  | [descriptions.md](components/descriptions.md) |
+| Empty        | Empty state                       | [empty.md](components/empty.md)               |
+| Badge        | Badge/notification count          | [badge.md](components/badge.md)               |
+| Tag          | Tag/label                         | [tag.md](components/tag.md)                   |
+| Avatar       | Avatar display                    | [avatar.md](components/avatar.md)             |
+| Image        | Image display                     | [image.md](components/image.md)               |
+| Carousel     | Carousel/slider                   | [carousel.md](components/carousel.md)         |
+| Timeline     | Timeline display                  | [timeline.md](components/timeline.md)         |
+| Tree         | Tree structure                    | [tree.md](components/tree.md)                 |
+| Collapse     | Collapsible panels                | [collapse.md](components/collapse.md)         |
+| Statistic    | Statistic display                 | [statistic.md](components/statistic.md)       |
+| QRCode       | QR code display                   | [qrcode.md](components/qrcode.md)             |
+
+### Feedback Components
+
+| Component    | Purpose            | Guidelines File                               |
+| ------------ | ------------------ | --------------------------------------------- |
+| Alert        | Alert message      | [alert.md](components/alert.md)               |
+| Modal        | Modal dialog       | [modal.md](components/modal.md)               |
+| Drawer       | Drawer panel       | [drawer.md](components/drawer.md)             |
+| Message      | Global message     | [message.md](components/message.md)           |
+| Notification | Notification       | [notification.md](components/notification.md) |
+| Popconfirm   | Popup confirmation | [popconfirm.md](components/popconfirm.md)     |
+| Progress     | Progress indicator | [progress.md](components/progress.md)         |
+| Skeleton     | Loading skeleton   | [skeleton.md](components/skeleton.md)         |
+| Spin         | Loading spinner    | [spin.md](components/spin.md)                 |
+| Result       | Result page        | [result.md](components/result.md)             |
+| Tooltip      | Tooltip            | [tooltip.md](components/tooltip.md)           |
+| Popover      | Popover            | [popover.md](components/popover.md)           |
+
+### Other Components
+
+| Component      | Purpose                | Guidelines File                                     |
+| -------------- | ---------------------- | --------------------------------------------------- |
+| ConfigProvider | Global configuration   | [config-provider.md](components/config-provider.md) |
+| App            | App-level container    | [app.md](components/app.md)                         |
+| FloatButton    | Floating action button | [float-button.md](components/float-button.md)       |
+| BackTop        | Back to top button     | [back-top.md](components/back-top.md)               |
+| Affix          | Affix/sticky element   | [affix.md](components/affix.md)                     |
+| Watermark      | Watermark overlay      | [watermark.md](components/watermark.md)             |
+| Tour           | Tour guide             | [tour.md](components/tour.md)                       |
+
+## General Component Usage and Best Practices
+
+### Common Props
+
+Most Ant Design components accept these common props:
+
+- `className`: String for additional CSS classes
+- `style`: CSSProperties for inline styles
+- `disabled`: Boolean to disable the component
+- `size`: `'small'` | `'middle'` | `'large'` (default: `'middle'`)
+- `loading`: Boolean to show loading state
+- `prefixCls`: String for custom CSS class prefix (rarely needed)
+
+### Controlled vs Uncontrolled
+
+- **Controlled**: Component receives `value` and `onChange` props, parent manages state
+- **Uncontrolled**: Component manages own state, use `defaultValue` for initial value
+- Prefer controlled for most cases in modern React applications
+
+### Sizing
+
+Most components support `size` prop:
+
+- `'small'`: Compact size (24px height for controls)
+- `'middle'`: Default size (32px height for controls)
+- `'large'`: Large size (40px height for controls)
+
+### Form Components
+
+- Always use `Form` component to wrap form controls
+- Use `Form.Item` to wrap individual form fields
+- Use `name` prop on `Form.Item` for form field identification
+- Use `rules` prop for validation
+- Access form values via `Form.useForm()` hook or `onFinish` callback
+
+### Data Display Components
+
+- Use `Table` for tabular data with sorting, filtering, pagination
+- Use `List` for simple list displays
+- Use `Card` for grouped content sections
+- Use `Descriptions` for key-value pairs
+
+### Feedback Components
+
+- Use `message` for short, non-blocking notifications
+- Use `notification` for longer, more detailed notifications
+- Use `Modal` for important confirmations or forms
+- Use `Alert` for inline important messages
+- Use `Spin` or `Skeleton` for loading states
+
+### Styling
+
+**IMPORTANT**: Do not override component styles with `className` unless absolutely necessary. Instead:
+
+- Use design tokens via theme configuration
+- Use component-specific props for styling (e.g., `variant`, `color` for Button)
+- Use `styles` prop (semantic DOM styling) when available
+- Use `ConfigProvider` theme customization for global changes
+
+### Accessibility
+
+- All components follow WCAG 2.1 AA standards
+- Components include proper ARIA attributes
+- Keyboard navigation is supported
+- Focus management is handled automatically
+- Screen reader support is built-in
+
+### Internationalization
+
+- Use `ConfigProvider` with `locale` prop for internationalization
+- Locale files are in `components/locale/`
+- Format: `locale_COUNTRY.ts` (e.g., `zh_CN.ts`, `en_US.ts`)
+
+## Component Import Pattern
+
+```typescript
+// Import components
+
+// Import icons
+import { SearchOutlined, UserOutlined } from '@ant-design/icons';
+import { Button, Form, Input, Table } from 'antd';
+// Import types
+import type { ButtonProps, FormProps } from 'antd';
+```
+
+## Getting Help
+
+If a component guideline file doesn't exist:
+
+1. Check the component's documentation in `components/[component-name]/index.en-US.md`
+2. Check the component's demo files in `components/[component-name]/demo/`
+3. Check the component's source code in `components/[component-name]/`

guidelines/overview-icons.md

@@ -0,0 +1,253 @@
+# Icon System Overview
+
+Ant Design uses the `@ant-design/icons` package for all icons. Icons are React components that render SVG graphics.
+
+## Installation
+
+Icons are provided by a separate package that must be installed:
+
+```bash
+npm install @ant-design/icons@5.x --save
+# or
+yarn add @ant-design/icons@5.x
+# or
+pnpm install @ant-design/icons@5.x --save
+```
+
+**IMPORTANT**: Always use `@ant-design/icons@5.x` with `antd@5.x` to avoid version mismatch issues.
+
+## Icon Themes
+
+Ant Design icons come in three themes:
+
+1. **Outlined** (default) - Line icons with `Outlined` suffix
+2. **Filled** - Solid icons with `Filled` suffix
+3. **TwoTone** - Two-color icons with `TwoTone` suffix
+
+## Usage Pattern
+
+```typescript
+import {
+  SearchOutlined,      // Outlined theme
+  SearchFilled,         // Filled theme
+  SearchTwoTone         // TwoTone theme
+} from '@ant-design/icons';
+
+// Basic usage
+<SearchOutlined />
+<SearchFilled />
+<SearchTwoTone twoToneColor="#eb2f96" />
+```
+
+## Icon Naming Convention
+
+- Icon names are in **PascalCase**
+- Outlined icons: `[Name]Outlined` (e.g., `UserOutlined`, `HomeOutlined`)
+- Filled icons: `[Name]Filled` (e.g., `UserFilled`, `HomeFilled`)
+- TwoTone icons: `[Name]TwoTone` (e.g., `HeartTwoTone`, `StarTwoTone`)
+
+## Common Props
+
+All icons accept these props:
+
+| Property       | Description                               | Type          | Default |
+| -------------- | ----------------------------------------- | ------------- | ------- |
+| `className`    | CSS class name                            | string        | -       |
+| `style`        | Inline styles (e.g., `fontSize`, `color`) | CSSProperties | -       |
+| `rotate`       | Rotate icon by degrees                    | number        | -       |
+| `spin`         | Rotate icon with animation                | boolean       | false   |
+| `twoToneColor` | Primary color for TwoTone icons           | string (hex)  | -       |
+
+## Using Icons with Components
+
+### With Button
+
+```typescript
+import { Button } from 'antd';
+import { SearchOutlined, DownloadOutlined } from '@ant-design/icons';
+
+<Button icon={<SearchOutlined />}>Search</Button>
+<Button icon={<DownloadOutlined />} />
+```
+
+### With Input
+
+```typescript
+import { Input } from 'antd';
+import { UserOutlined, LockOutlined } from '@ant-design/icons';
+
+<Input prefix={<UserOutlined />} placeholder="Username" />
+<Input.Password prefix={<LockOutlined />} placeholder="Password" />
+```
+
+### With Menu
+
+```typescript
+import { Menu } from 'antd';
+import { HomeOutlined, UserOutlined, SettingOutlined } from '@ant-design/icons';
+
+<Menu
+  items={[
+    { key: '1', icon: <HomeOutlined />, label: 'Home' },
+    { key: '2', icon: <UserOutlined />, label: 'Profile' },
+    { key: '3', icon: <SettingOutlined />, label: 'Settings' },
+  ]}
+/>
+```
+
+### With Tabs
+
+```typescript
+import { Tabs } from 'antd';
+import { AppleOutlined, AndroidOutlined } from '@ant-design/icons';
+
+<Tabs
+  items={[
+    { key: '1', label: <span><AppleOutlined />iOS</span>, children: 'iOS Content' },
+    { key: '2', label: <span><AndroidOutlined />Android</span>, children: 'Android Content' },
+  ]}
+/>
+```
+
+## Icon Sizing
+
+Icons inherit size from their container or can be styled directly:
+
+```typescript
+// Small icon
+<SearchOutlined style={{ fontSize: '12px' }} />
+
+// Medium icon (default)
+<SearchOutlined style={{ fontSize: '16px' }} />
+
+// Large icon
+<SearchOutlined style={{ fontSize: '24px' }} />
+```
+
+## Icon Colors
+
+Icons inherit color from their parent or can be styled:
+
+```typescript
+// Inherit color
+<SearchOutlined style={{ color: 'inherit' }} />
+
+// Custom color
+<SearchOutlined style={{ color: '#1890ff' }} />
+
+// Using design tokens (in styled components)
+import { theme } from 'antd';
+const { token } = theme.useToken();
+<SearchOutlined style={{ color: token.colorPrimary }} />
+```
+
+## TwoTone Icons
+
+TwoTone icons have a special `twoToneColor` prop:
+
+```typescript
+import { HeartTwoTone, StarTwoTone } from '@ant-design/icons';
+
+<HeartTwoTone twoToneColor="#eb2f96" />
+<StarTwoTone twoToneColor="#faad14" />
+```
+
+You can also set a global default two-tone color:
+
+```typescript
+import { getTwoToneColor, setTwoToneColor } from '@ant-design/icons';
+
+// Set global default
+setTwoToneColor('#1890ff');
+
+// Get current default
+const currentColor = getTwoToneColor();
+```
+
+## Icon Animation
+
+Use the `spin` prop for rotating animation:
+
+```typescript
+import { LoadingOutlined } from '@ant-design/icons';
+
+<LoadingOutlined spin />
+```
+
+## Finding Icons
+
+- Browse icons on the [Ant Design website](https://ant.design/components/icon)
+- Search by name in the icon picker
+- Check the `@ant-design/icons` package in `node_modules/@ant-design/icons/es/icons/`
+
+## Best Practices
+
+1. **Always import icons explicitly** - Don't import the entire icon library
+2. **Use appropriate theme** - Prefer `Outlined` for most cases, `Filled` for emphasis
+3. **Match icon size to context** - Use 16px for small UI, 24px for buttons, larger for hero sections
+4. **Use semantic icons** - Choose icons that clearly represent their function
+5. **Maintain consistency** - Use the same icon theme throughout your application
+6. **Accessibility** - Icons should have text labels or `aria-label` when used alone
+
+## Common Icons
+
+Here are some commonly used icons:
+
+### Navigation
+
+- `HomeOutlined`, `MenuOutlined`, `AppstoreOutlined`, `BarsOutlined`
+
+### Actions
+
+- `SearchOutlined`, `PlusOutlined`, `EditOutlined`, `DeleteOutlined`, `SaveOutlined`, `DownloadOutlined`, `UploadOutlined`
+
+### User
+
+- `UserOutlined`, `UserAddOutlined`, `TeamOutlined`, `SettingOutlined`
+
+### Communication
+
+- `MessageOutlined`, `MailOutlined`, `PhoneOutlined`, `NotificationOutlined`
+
+### Status
+
+- `CheckCircleOutlined`, `CloseCircleOutlined`, `ExclamationCircleOutlined`, `InfoCircleOutlined`
+
+### Direction
+
+- `ArrowLeftOutlined`, `ArrowRightOutlined`, `ArrowUpOutlined`, `ArrowDownOutlined`
+
+### Media
+
+- `PictureOutlined`, `VideoCameraOutlined`, `FileOutlined`, `FolderOutlined`
+
+## Custom Icons
+
+If you need a custom icon, you can create one:
+
+```typescript
+import { createFromIconfontCN } from '@ant-design/icons';
+
+const IconFont = createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
+});
+
+<IconFont type="icon-example" />
+```
+
+Or use a custom SVG component:
+
+```typescript
+import { Icon } from '@ant-design/icons';
+
+const CustomIcon = (props) => (
+  <Icon
+    component={() => (
+      <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
+        {/* Your SVG path */}
+      </svg>
+    )}
+    {...props}
+  />
+);
+```