ginskill-init 1.0.1 → 1.0.3

package/README.md

@@ -1,77 +1,140 @@
-# ginstudio-skills
+# GinStudio Skills
 
-Claude Code skills and subagents designed to be shared across multiple projects, following the [Anthropic skill standard](https://code.claude.com/docs/en/skills).
+Claude Code skills and agents — install with one command, select what you need.
 
-## Skills
+## Quick Start
 
-| Skill | Description |
-|-------|-------------|
-| ai-asset-generator | Generate images, videos, icons using KIE AI API |
-| icon-generator | Generate SVG icon components (.tsx) for React Native |
-| mobile-app-review | Pre-submission audit for App Store & Google Play |
-| mongodb | MongoDB & Mongoose best practices for NestJS |
-| nestjs-architecture | NestJS feature-based architecture patterns |
-| performance | React Native performance optimization |
-| react-fsd-architecture | Feature-Sliced Design (FSD) for frontend projects |
-| react-query | TanStack React Query v5+ best practices |
-| review-code | Comprehensive code review for fullstack monorepos |
-| security-scanner | OWASP-aligned security audit |
-| ui-ux-pro-max | Design intelligence with styles, palettes, typography |
-
-## Agents
+```bash
+npx ginskill-init
+```
 
-| Agent | Description |
-|-------|-------------|
-| developer | Full-stack developer for features, bugs, production code |
-| frontend-design | Frontend designer with Next.js, Tailwind, shadcn/ui |
-| mobile-reviewer | React Native/Expo app reviewer for store compliance |
-| review-code | Senior code reviewer for fullstack monorepos |
-| security-scanner | Security auditor (OWASP Top 10, LLM, Mobile) |
-| tester | QA engineer and testing specialist |
+Interactive TUI — use **Space** to select, **A** to toggle all, **Enter** to confirm.
+
+---
 
 ## Installation
 
-Run the interactive installer with Python (no dependencies required):
+### Install to current project
 
 ```bash
-python install.py
+npx ginskill-init
 ```
 
-The installer will:
-1. Default to installing in the **parent directory** (the project adjacent to this repo).
-2. Let you **select which skills** to install with an interactive checklist.
-3. Let you **select which agents** to install.
-4. Copy selections to `<target>/.claude/skills/` and `<target>/.claude/agents/`.
+### Install to a specific project
+
+```bash
+npx ginskill-init -t /path/to/project
+```
 
-You can also pass a target path directly:
+### Install globally (available in all projects)
 
 ```bash
-python install.py /path/to/your/project
+npx ginskill-init -g
 ```
 
-### Where files are installed
+### Non-interactive (CI / scripts)
 
-Following the Anthropic skill standard:
+```bash
+npx ginskill-init --all                          # Install everything
+npx ginskill-init --skills react-query,mongodb   # Specific skills
+npx ginskill-init --agents developer,tester      # Specific agents
+npx ginskill-init --all -g                       # Everything, globally
+```
+
+---
+
+## Commands
+
+| Command | Description |
+|---------|-------------|
+| `ginskill-init` | Interactive install (default) |
+| `ginskill-init upgrade` | Re-install installed skills/agents from latest bundled version |
+| `ginskill-init uninstall` | Remove installed skills/agents |
+| `ginskill-init status` | Show what's installed vs available |
+| `ginskill-init list` | List all available skills & agents |
+| `ginskill-init versions` | Show all published npm versions |
 
+### Flags (work on all commands)
+
+| Flag | Short | Description |
+|------|-------|-------------|
+| `--global` | `-g` | Target `~/.claude/` (available in all projects) |
+| `--target <path>` | `-t` | Target a specific project path |
+| `--all` | `-a` | Skip prompts, select all |
+
+### Examples
+
+```bash
+# Check what's installed in current project
+ginskill-init status
+
+# Check a specific project
+ginskill-init status -t /path/to/project
+
+# Upgrade all installed skills to latest version
+npx ginskill-init@latest upgrade --all
+
+# Uninstall interactively
+ginskill-init uninstall
+
+# Remove from a specific project
+ginskill-init uninstall -t /path/to/project
 ```
-<target-project>/
+
+---
+
+## Where files are installed
+
+```
+<project>/
   .claude/
     skills/
-      mongodb/SKILL.md          # skill directory with SKILL.md entrypoint
       react-query/SKILL.md
+      mongodb/SKILL.md
       ...
     agents/
-      developer.md              # agent markdown files
+      developer.md
       tester.md
       ...
 ```
 
-### User-level installation
+After installing, **restart Claude Code** (or type `/agents`) to pick up the new skills and agents.
 
-To make skills available across **all** your projects, install to your home directory:
+---
 
-```bash
-python install.py ~/.claude
-```
+## Available Skills
+
+| Skill | Description |
+|-------|-------------|
+| `ai-asset-generator` | Generate images, videos, icons using KIE AI API |
+| `ai-build-ai` | Master guide for extending Claude Code — skills, agents, MCP, hooks, headless |
+| `icon-generator` | Generate SVG icon components (.tsx) for React Native |
+| `mobile-app-review` | Pre-submission audit for App Store & Google Play |
+| `mongodb` | MongoDB & Mongoose best practices for NestJS |
+| `nestjs-architecture` | NestJS feature-based architecture patterns |
+| `performance` | React Native performance optimization |
+| `react-fsd-architecture` | Feature-Sliced Design (FSD) for frontend projects |
+| `react-query` | TanStack React Query v5+ best practices |
+| `review-code` | Comprehensive code review for fullstack monorepos |
+| `security-scanner` | OWASP-aligned security audit (Top 10, LLM, Mobile) |
+| `ui-ux-pro-max` | Design intelligence with 67 styles, palettes, typography |
+
+## Available Agents
+
+| Agent | Description |
+|-------|-------------|
+| `developer` | Full-stack developer for features, bugs, production code |
+| `frontend-design` | Frontend designer with Next.js, Tailwind, shadcn/ui |
+| `mobile-reviewer` | React Native/Expo app reviewer for store compliance |
+| `review-code` | Senior code reviewer for fullstack monorepos |
+| `security-scanner` | Security auditor (OWASP Top 10, LLM, Mobile) |
+| `tester` | QA engineer and testing specialist |
+
+---
+
+## Contributing
 
-This installs to `~/.claude/skills/` and `~/.claude/agents/` which Claude Code discovers globally.
+See [DEVELOPMENT.md](./DEVELOPMENT.md) for:
+- How to add a new skill or agent
+- How to release a new version to npm
+- CLI development and testing guide

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ginskill-init",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Install GinStudio skills and agents for Claude Code",
   "keywords": [
     "claude-code",

package/skills/ant-design/SKILL.md

@@ -0,0 +1,323 @@
+---
+name: ant-design
+description: |
+  **Ant Design (antd) Expert**: Production patterns for building React UIs with Ant Design v5/v6 — components, theming, Form, Table, Modal, layout, icons, TypeScript, Next.js/Vite setup, and best practices.
+  - MANDATORY TRIGGERS: ant design, antd, ant-design, <Button, <Form, <Table, <Modal, <Select, <Input, <DatePicker, <ConfigProvider, antd theme, antd dark mode, antd form, antd table, antd modal, antd layout, antd component, antd v5, antd v6, ant design component, design token, colorPrimary, borderRadius, darkAlgorithm, compactAlgorithm, Form.useForm, Form.Item, TableColumnsType, Modal.confirm, Modal.useModal, useToken, ConfigProvider theme, antd migration, antd vite, antd next.js, antd nextjs, antd ssr, antd import, antd icon, @ant-design/icons
+  - Use this skill when building, reviewing, or debugging React code that imports from `antd` or `@ant-design/icons`, or when setting up Ant Design in a project.
+---
+
+# Ant Design (antd) — Expert Guide
+
+## Quick Start
+
+```bash
+npm install antd @ant-design/icons
+```
+
+```tsx
+// src/main.tsx — import once at root
+import 'antd/dist/reset.css';
+
+// Components auto tree-shake — no plugin needed in v5
+import { Button, Form, Table, Modal, Select, Input, DatePicker } from 'antd';
+import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
+```
+
+---
+
+## Key Principles
+
+1. **No `@types/antd`** — TypeScript types are bundled in `antd` itself
+2. **No `babel-plugin-import`** — v5 CSS-in-JS auto loads styles on demand
+3. **`antd/dist/reset.css`** — import once at root (replaces `antd/dist/antd.css`)
+4. **`visible` → `open`** — all popups/overlays use `open` prop in v5+
+5. **`ConfigProvider` does NOT affect** `message.xxx` / `Modal.xxx` / `notification.xxx` static methods — use `App.useApp()` or `Modal.useModal()` instead
+
+---
+
+## Theme Customization
+
+```tsx
+import { ConfigProvider, theme } from 'antd';
+import type { ThemeConfig } from 'antd';
+
+const myTheme: ThemeConfig = {
+  token: {
+    colorPrimary: '#1677ff',   // brand color (cascades to all primary variants)
+    borderRadius: 6,
+    fontSize: 14,
+    fontFamily: 'Inter, sans-serif',
+  },
+  algorithm: theme.darkAlgorithm,        // light | dark | compact | [dark, compact]
+  components: {
+    Button: { borderRadius: 20 },        // per-component override
+    Table: { headerBg: '#f0f4f8' },
+  },
+  cssVar: true,                          // enables CSS variables for runtime theming
+};
+
+<ConfigProvider theme={myTheme}>
+  <App />
+</ConfigProvider>
+```
+
+### Token layers (3-tier system)
+| Layer | Example | Use |
+|-------|---------|-----|
+| Seed Token | `colorPrimary`, `borderRadius` | Set root values; algorithm derives the rest |
+| Map Token | `colorPrimaryHover`, `colorPrimaryBg` | Auto-derived; override cautiously |
+| Alias Token | `colorLink`, `colorTextHeading` | Semantic batch-controls across components |
+
+### Consume tokens inside components
+```tsx
+import { theme } from 'antd';
+const { token } = theme.useToken();
+// token.colorPrimary, token.borderRadius, token.paddingLG, ...
+
+// Outside React (build time / utilities)
+const t = theme.getDesignToken({ token: { colorPrimary: '#f00' } });
+```
+
+### Dynamic dark/light toggle
+```tsx
+const [isDark, setIsDark] = useState(false);
+<ConfigProvider theme={{ algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm }}>
+```
+
+---
+
+## Form — Core Patterns
+
+```tsx
+import { Form, Input, Button, Select, Checkbox } from 'antd';
+
+const [form] = Form.useForm<MyValues>();
+
+<Form form={form} layout="vertical" onFinish={onFinish} scrollToFirstError>
+  <Form.Item name="email" label="Email"
+    rules={[{ required: true }, { type: 'email', message: 'Invalid email' }]}>
+    <Input />
+  </Form.Item>
+
+  <Form.Item name="role" label="Role" rules={[{ required: true }]}>
+    <Select options={[{ value: 'admin', label: 'Admin' }]} />
+  </Form.Item>
+
+  {/* Boolean controls need valuePropName="checked" */}
+  <Form.Item name="active" valuePropName="checked">
+    <Checkbox>Active</Checkbox>
+  </Form.Item>
+
+  <Button type="primary" htmlType="submit">Submit</Button>
+</Form>
+```
+
+### FormInstance methods
+```tsx
+form.setFieldValue('email', 'test@test.com');   // single field
+form.setFieldsValue({ email: 'x', role: 'y' }); // multiple
+form.validateFields();                           // returns Promise<Values>
+form.resetFields();
+form.getFieldValue('email');
+
+// Reactive watch (use instead of getFieldsValue in render)
+const email = Form.useWatch('email', form);
+```
+
+> **Read `docs/key-components.md`** for full Form API, validation rules, Form.List dynamic fields, common mistakes.
+
+---
+
+## Table — Core Pattern
+
+```tsx
+import type { TableColumnsType } from 'antd';
+import { Table, Tag, Button } from 'antd';
+
+const columns: TableColumnsType<User> = [
+  {
+    title: 'Name', dataIndex: 'name',
+    sorter: (a, b) => a.name.localeCompare(b.name),
+  },
+  {
+    title: 'Status', dataIndex: 'status',
+    filters: [{ text: 'Active', value: 'active' }],
+    onFilter: (value, record) => record.status === value,
+    render: (status) => <Tag color={status === 'active' ? 'green' : 'red'}>{status}</Tag>,
+  },
+  {
+    title: 'Actions', key: 'actions', fixed: 'right', width: 100,
+    render: (_, record) => <Button onClick={() => edit(record)}>Edit</Button>,
+  },
+];
+
+<Table<User>
+  dataSource={data}
+  columns={columns}
+  rowKey="id"
+  pagination={{ pageSize: 20, showSizeChanger: true }}
+  rowSelection={{ type: 'checkbox', onChange: onSelectChange }}
+  scroll={{ x: 1000 }}
+  onChange={(pagination, filters, sorter) => fetchData({ ...pagination, filters, sorter })}
+/>
+```
+
+> **Read `docs/key-components.md`** for full column API, server-side sorting/filtering, virtual scrolling, expandable rows.
+
+---
+
+## Modal — Core Patterns
+
+```tsx
+// Controlled component
+<Modal open={visible} title="Edit" onOk={handleOk} onCancel={close}
+  confirmLoading={saving} destroyOnHidden width={600}>
+  <Form form={form}>...</Form>
+</Modal>
+
+// Imperative — use useModal for context access (NOT Modal.confirm directly)
+const [modal, contextHolder] = Modal.useModal();
+// render {contextHolder} in the JSX tree
+modal.confirm({ title: 'Delete?', onOk: async () => { await deleteItem(); } });
+modal.info({ ... }); modal.success({ ... }); modal.error({ ... });
+
+// Static (NO context — theme/locale won't apply)
+Modal.confirm({ title: 'Are you sure?', onOk: () => {} });
+```
+
+---
+
+## Button — Key Variants
+
+```tsx
+<Button type="primary">Primary</Button>
+<Button type="primary" danger>Delete</Button>
+<Button type="primary" loading={saving}>Save</Button>
+<Button type="primary" icon={<PlusOutlined />}>Add</Button>
+<Button type="primary" htmlType="submit" block>Submit Form</Button>
+
+{/* v5.21+ color+variant system */}
+<Button color="primary" variant="outlined">Ghost-style</Button>
+<Button color="danger" variant="filled">Soft Danger</Button>
+<Button color="green" variant="solid">Green Solid</Button>
+```
+
+---
+
+## Layout
+
+```tsx
+import { Layout, Menu } from 'antd';
+const { Header, Content, Sider, Footer } = Layout;
+
+<Layout style={{ minHeight: '100vh' }}>
+  <Sider collapsible>
+    <Menu theme="dark" mode="inline" items={menuItems} />
+  </Sider>
+  <Layout>
+    <Header style={{ background: '#fff', padding: 0 }} />
+    <Content style={{ margin: '24px 16px', padding: 24 }}>
+      {children}
+    </Content>
+    <Footer>Footer</Footer>
+  </Layout>
+</Layout>
+```
+
+---
+
+## Feedback Components
+
+```tsx
+// Transient global messages (top of page)
+import { message, notification } from 'antd';
+message.success('Saved!');
+message.error('Failed.');
+message.loading('Processing...', 2.5);
+
+// Persistent notifications (corner)
+notification.success({ message: 'Done', description: 'Your record was saved.' });
+
+// Use App.useApp() to get context-aware versions
+import { App } from 'antd';
+const { message, modal, notification } = App.useApp();
+// Wrap root with <App><Root /></App>
+```
+
+---
+
+## Common Components Quick Reference
+
+| Component | Import | Key props |
+|-----------|--------|-----------|
+| Input | `antd` | `value`, `onChange`, `allowClear`, `prefix`, `suffix`, `addonAfter` |
+| Input.TextArea | `antd` | `rows`, `autoSize`, `showCount`, `maxLength` |
+| Input.Password | `antd` | `visibilityToggle` |
+| Select | `antd` | `mode` (multiple/tags), `options`, `showSearch`, `allowClear`, `loading`, `fieldNames` |
+| DatePicker | `antd` | `picker`, `showTime`, `format`, `disabledDate`, `onChange` |
+| Checkbox | `antd` | `checked`, `onChange`; `Checkbox.Group` for grouped |
+| Radio | `antd` | `value`; `Radio.Group`, `Radio.Button` |
+| Switch | `antd` | `checked`, `onChange`, `checkedChildren` |
+| Upload | `antd` | `action`, `accept`, `multiple`, `beforeUpload`, `fileList`, `listType` |
+| Spin | `antd` | `spinning`, `tip`, wraps content |
+| Alert | `antd` | `type` (success/info/warning/error), `message`, `description`, `closable` |
+| Tag | `antd` | `color`, `closable`, `onClose` |
+| Badge | `antd` | `count`, `dot`, `status`, `offset` |
+| Tooltip | `antd` | `title`, `placement`, wraps target |
+| Popconfirm | `antd` | `title`, `onConfirm`, `onCancel`, `okText`, `cancelText` |
+| Drawer | `antd` | `open`, `onClose`, `title`, `placement`, `width` |
+| Card | `antd` | `title`, `extra`, `loading`, `actions`, `hoverable` |
+| Avatar | `antd` | `src`, `icon`, `size`, `shape`; `Avatar.Group` |
+| Tabs | `antd` | `items`, `activeKey`, `onChange`, `type`, `tabPosition` |
+
+---
+
+## Icons
+
+```bash
+npm install @ant-design/icons
+```
+
+```tsx
+import { SearchOutlined, HeartFilled, SmileTwoTone } from '@ant-design/icons';
+// Naming: <Name>Outlined | <Name>Filled | <Name>TwoTone
+// TwoTone supports twoToneColor prop
+
+<SearchOutlined style={{ fontSize: 20, color: '#1677ff' }} />
+```
+
+---
+
+## Loading Docs On Demand
+
+**Do NOT load all docs at once.** Use the routing guide below to load only what is needed.
+
+### Docs Routing Guide
+
+| Topic / Component | Load This File |
+|-------------------|---------------|
+| Vite / Next.js setup, v4→v5 migration | `docs/setup.md` |
+| Theme tokens, dark mode, ConfigProvider, CSS vars | `docs/theme.md` |
+| Form, Table, Modal, Button (full API) | `docs/key-components.md` |
+| Menu, Tabs, Layout, Grid | `docs/navigation.md` |
+| Select, Upload, DatePicker, Input (full API) | `docs/data-entry.md` |
+| Typography, Card, List, Descriptions, Space, Flex | `docs/display.md` |
+| Drawer, Message, Notification, Spin, Skeleton, App | `docs/feedback.md` |
+| ProTable, ProForm, ProLayout | `docs/pro-components.md` |
+| All 60+ components — quick reference | `docs/components.md` |
+
+### Fetching Live Docs For Any Component
+
+Use the fetch script to get the latest URL for any component, then call `WebFetch` on it:
+
+```bash
+# Run to get the URL for a component
+bash ginstudio-skills/skills/ant-design/scripts/fetch-component-docs.sh <component-name>
+# Examples:
+bash ginstudio-skills/skills/ant-design/scripts/fetch-component-docs.sh select
+bash ginstudio-skills/skills/ant-design/scripts/fetch-component-docs.sh pro-table
+bash ginstudio-skills/skills/ant-design/scripts/fetch-component-docs.sh customize-theme
+```
+
+Then fetch the returned URL with `WebFetch` using the prompt:
+> "Extract all props, types, defaults, sub-components, and code examples"

package/skills/ant-design/docs/components.md

@@ -0,0 +1,160 @@
+# Ant Design — All Components Reference
+
+All components: `import { ComponentName } from 'antd'`
+Icons: `import { IconName } from '@ant-design/icons'`
+
+---
+
+## General (3)
+
+| Component | Key Props | Notes |
+|-----------|-----------|-------|
+| **Button** | `type`, `color`, `variant`, `size`, `shape`, `loading`, `danger`, `ghost`, `icon`, `htmlType` | See `key-components.md` for full API |
+| **Icon** | `style`, `spin`, `rotate`, `twoToneColor` | From `@ant-design/icons`; `Outlined`/`Filled`/`TwoTone` suffixes |
+| **Typography** | — | Sub: `Title` (h1-h5), `Text` (copyable, code, delete, editable), `Link`, `Paragraph` |
+
+---
+
+## Layout (6)
+
+| Component | Key Props | Notes |
+|-----------|-----------|-------|
+| **Divider** | `type` (horizontal/vertical), `orientation`, `dashed`, `plain` | |
+| **Flex** | `justify`, `align`, `gap`, `wrap`, `vertical` | CSS Flexbox abstraction; v5.10+ |
+| **Grid** (Row/Col) | `Row: gutter, justify, align, wrap` / `Col: span, offset, xs, sm, md, lg, xl` | 24-column grid |
+| **Layout** | `hasSider` | Sub: `Header`, `Content`, `Footer`, `Sider` (collapsible, width, breakpoint) |
+| **Space** | `size`, `direction`, `wrap`, `align`, `split` | Inline gap management |
+| **Splitter** | `layout` (horizontal/vertical), `onResize`, `onResizeEnd` | Resizable panels; v5.21+ |
+
+---
+
+## Navigation (8)
+
+| Component | Key Props | Notes |
+|-----------|-----------|-------|
+| **Affix** | `offsetTop`, `offsetBottom`, `target`, `onChange` | Sticky element |
+| **Anchor** | `items`, `affix`, `offsetTop`, `targetOffset`, `onChange` | Jump links |
+| **Breadcrumb** | `items[{ title, href, onClick }]`, `separator` | |
+| **Dropdown** | `menu`, `open`, `trigger`, `placement`, `arrow` | `menu.items` array |
+| **Menu** | `items`, `mode` (horizontal/vertical/inline), `theme`, `selectedKeys`, `openKeys`, `onSelect` | |
+| **Pagination** | `total`, `pageSize`, `current`, `showSizeChanger`, `showQuickJumper`, `onChange` | |
+| **Steps** | `items[{ title, description, status, icon }]`, `current`, `direction`, `type` | |
+| **FloatButton** | `icon`, `tooltip`, `type`, `shape`, `onClick` | Sub: `FloatButton.Group`, `FloatButton.BackTop`; v5.0+ |
+
+---
+
+## Data Entry (19)
+
+| Component | Key Props | Notes |
+|-----------|-----------|-------|
+| **AutoComplete** | `options`, `onSearch`, `onSelect`, `filterOption` | Input with suggestions |
+| **Cascader** | `options`, `value`, `onChange`, `multiple`, `showSearch`, `changeOnSelect` | Multi-level selector |
+| **Checkbox** | `checked`, `onChange`, `disabled`, `indeterminate` | `Checkbox.Group: options, value` |
+| **ColorPicker** | `value`, `onChange`, `format`, `presets`, `showText` | v5.5+ |
+| **DatePicker** | `picker`, `value`, `onChange`, `showTime`, `format`, `disabledDate`, `needConfirm` | Uses dayjs; `RangePicker` for ranges |
+| **Form** | — | See `key-components.md` |
+| **Input** | `value`, `onChange`, `allowClear`, `prefix`, `suffix`, `addonBefore`, `addonAfter`, `showCount`, `maxLength` | Sub: `TextArea`, `Password`, `Search` |
+| **InputNumber** | `min`, `max`, `step`, `precision`, `formatter`, `parser`, `addonBefore`, `addonAfter` | |
+| **Mentions** | `options`, `prefix`, `onSearch`, `onSelect` | @mention input |
+| **Radio** | `value`, `onChange` | `Radio.Group: options, value, buttonStyle` / `Radio.Button` |
+| **Rate** | `count`, `value`, `onChange`, `allowHalf`, `character` | Star rating |
+| **Select** | `mode` (multiple/tags), `options`, `value`, `onChange`, `showSearch`, `filterOption`, `allowClear`, `loading`, `fieldNames`, `labelInValue` | |
+| **Segmented** | `options`, `value`, `onChange`, `block`, `size` | Button-group toggle |
+| **Slider** | `min`, `max`, `step`, `value`, `onChange`, `range`, `marks`, `tooltip` | Range or single |
+| **Switch** | `checked`, `onChange`, `checkedChildren`, `unCheckedChildren`, `loading` | |
+| **TimePicker** | `value`, `onChange`, `format`, `use12Hours`, `showNow`, `disabledTime` | |
+| **Transfer** | `dataSource`, `targetKeys`, `onChange`, `titles`, `render`, `listStyle` | Dual-panel list |
+| **TreeSelect** | `treeData`, `value`, `onChange`, `multiple`, `showSearch`, `treeCheckable` | |
+| **Upload** | `action`, `accept`, `multiple`, `fileList`, `onChange`, `beforeUpload`, `listType`, `maxCount` | `listType: 'text' \| 'picture' \| 'picture-card'` |
+
+---
+
+## Data Display (20)
+
+| Component | Key Props | Notes |
+|-----------|-----------|-------|
+| **Avatar** | `src`, `icon`, `size`, `shape` (circle/square), `alt` | `Avatar.Group: max, size` |
+| **Badge** | `count`, `dot`, `status`, `color`, `overflowCount`, `showZero`, `offset` | Wraps child |
+| **Calendar** | `value`, `onSelect`, `dateCellRender`, `monthCellRender`, `mode`, `fullscreen` | |
+| **Card** | `title`, `extra`, `loading`, `actions`, `hoverable`, `cover`, `tabList` | Sub: `Card.Meta`, `Card.Grid` |
+| **Carousel** | `autoplay`, `dots`, `effect`, `arrows`, `afterChange` | |
+| **Collapse** | `items[{ key, label, children }]`, `accordion`, `defaultActiveKey` | |
+| **Descriptions** | `items[{ key, label, children, span }]`, `column`, `layout`, `bordered`, `title` | Key-value display |
+| **Empty** | `image`, `description`, `imageStyle` | No-data placeholder |
+| **Image** | `src`, `width`, `height`, `preview`, `fallback` | `Image.PreviewGroup` for gallery |
+| **List** | `dataSource`, `renderItem`, `grid`, `pagination`, `loading` | Sub: `List.Item`, `List.Item.Meta` |
+| **Popover** | `content`, `title`, `trigger`, `placement`, `open` | Richer than Tooltip |
+| **QRCode** | `value`, `size`, `color`, `bgColor`, `icon`, `status` | v5.1+ |
+| **Statistic** | `value`, `title`, `prefix`, `suffix`, `formatter`, `precision` | `Statistic.Countdown` |
+| **Table** | — | See `key-components.md` |
+| **Tabs** | `items[{ key, label, children }]`, `activeKey`, `onChange`, `type`, `tabPosition`, `tabBarExtraContent` | |
+| **Tag** | `color`, `closable`, `onClose`, `bordered` | Preset or hex color |
+| **Timeline** | `items[{ color, dot, label, children }]`, `mode`, `pending`, `reverse` | |
+| **Tooltip** | `title`, `placement`, `trigger`, `open`, `color` | Light hover text |
+| **Tree** | `treeData`, `checkable`, `defaultExpandAll`, `onCheck`, `onSelect`, `draggable` | |
+| **Watermark** | `content`, `font`, `image`, `rotate`, `gap`, `offset` | v5.1+ |
+
+---
+
+## Feedback (11)
+
+| Component | Key Props | Notes |
+|-----------|-----------|-------|
+| **Alert** | `type` (success/info/warning/error), `message`, `description`, `closable`, `action`, `showIcon`, `banner` | Inline banner |
+| **Drawer** | `open`, `onClose`, `title`, `placement`, `width`, `height`, `mask`, `extra`, `footer` | Slide-in panel |
+| **Message** | — | Imperative: `message.success/error/warning/info/loading(content, duration)` |
+| **Modal** | — | See `key-components.md` |
+| **Notification** | — | `notification.success/error/warning/info({ message, description, placement, duration })` |
+| **Popconfirm** | `title`, `onConfirm`, `onCancel`, `okText`, `cancelText`, `okButtonProps`, `placement` | Bubble confirm |
+| **Progress** | `percent`, `type` (line/circle/dashboard), `status`, `strokeColor`, `format`, `steps` | |
+| **Result** | `status` (success/error/warning/404/403/500), `title`, `subTitle`, `extra` | Full-page outcome |
+| **Skeleton** | `active`, `paragraph`, `avatar`, `title`, `loading` | Loading placeholder |
+| **Spin** | `spinning`, `tip`, `size`, `delay`, wraps content | Loading overlay |
+| **Tour** | `open`, `onClose`, `steps[{ title, description, target, cover }]` | Guided tour; v5.0+ |
+
+---
+
+## Utility Components
+
+| Component | Notes |
+|-----------|-------|
+| **App** | Wrap root: `<App>`. Use `App.useApp()` for context-aware `message`, `modal`, `notification` |
+| **ConfigProvider** | Global theme, locale, direction, componentSize, virtual, getPopupContainer |
+
+---
+
+## Quick Import Reference
+
+```tsx
+// Single import covers everything — fully tree-shaken
+import {
+  // Layout
+  Layout, Grid, Row, Col, Space, Flex, Divider,
+  // Navigation
+  Menu, Breadcrumb, Pagination, Steps, Tabs, Dropdown,
+  // Data Entry
+  Form, Input, Select, DatePicker, Checkbox, Radio, Switch, Upload, Slider,
+  InputNumber, AutoComplete, Cascader, Rate, Transfer, Mentions, TimePicker,
+  // Data Display
+  Table, Card, List, Avatar, Badge, Tag, Tooltip, Popover, Tree, Image,
+  Collapse, Carousel, Timeline, Descriptions, Statistic, QRCode, Calendar,
+  // Feedback
+  Modal, Drawer, Alert, Spin, Progress, Skeleton, Result, Popconfirm,
+  // Utility
+  ConfigProvider, App,
+  // Imperative APIs
+  message, notification,
+  // Theme
+  theme,
+} from 'antd';
+
+// Icons (separate package)
+import { SearchOutlined, PlusOutlined, DeleteFilled } from '@ant-design/icons';
+
+// TypeScript types
+import type {
+  ButtonProps, InputProps, SelectProps, FormInstance, FormProps,
+  TableColumnsType, TableProps, TablePaginationConfig,
+  ModalProps, DrawerProps, MenuProps, TabsProps, ThemeConfig,
+} from 'antd';
+```