ginskill-init 1.0.2 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of ginskill-init might be problematic. Click here for more details.

Files changed (12) hide show
  1. package/package.json +1 -1
  2. package/skills/ant-design/SKILL.md +323 -0
  3. package/skills/ant-design/docs/components.md +160 -0
  4. package/skills/ant-design/docs/data-entry.md +406 -0
  5. package/skills/ant-design/docs/display.md +594 -0
  6. package/skills/ant-design/docs/feedback.md +451 -0
  7. package/skills/ant-design/docs/key-components.md +414 -0
  8. package/skills/ant-design/docs/navigation.md +310 -0
  9. package/skills/ant-design/docs/pro-components.md +543 -0
  10. package/skills/ant-design/docs/setup.md +213 -0
  11. package/skills/ant-design/docs/theme.md +265 -0
  12. package/skills/ant-design/scripts/fetch-component-docs.sh +169 -0
package/skills/ant-design/docs/setup.md ADDED
@@ -0,0 +1,213 @@
1
+ # Ant Design — Installation & Framework Setup
2
+
3
+ ## Installation
4
+
5
+ ```bash
6
+ npm install antd
7
+ npm install @ant-design/icons # icons are separate
8
+ ```
9
+
10
+ Do NOT install `@types/antd` — TypeScript types are bundled in `antd` itself.
11
+
12
+ ---
13
+
14
+ ## Vite Setup
15
+
16
+ ```bash
17
+ npm create vite@latest my-app --template react-ts
18
+ cd my-app
19
+ npm install antd @ant-design/icons
20
+ ```
21
+
22
+ **`src/main.tsx`:**
23
+ ```tsx
24
+ import React from 'react';
25
+ import ReactDOM from 'react-dom/client';
26
+ import 'antd/dist/reset.css'; // ONE-TIME global reset; import before your own CSS
27
+ import App from './App';
28
+
29
+ ReactDOM.createRoot(document.getElementById('root')!).render(
30
+ <React.StrictMode>
31
+ <App />
32
+ </React.StrictMode>,
33
+ );
34
+ ```
35
+
36
+ **`vite.config.ts`** — no extra config needed for v5 (CSS-in-JS handles styles):
37
+ ```ts
38
+ import { defineConfig } from 'vite';
39
+ import react from '@vitejs/plugin-react';
40
+
41
+ export default defineConfig({
42
+ plugins: [react()],
43
+ // Only needed if using antd Less source (unusual in v5):
44
+ // css: { preprocessorOptions: { less: { javascriptEnabled: true } } },
45
+ });
46
+ ```
47
+
48
+ ---
49
+
50
+ ## Next.js App Router (13+ / 14+ / 15+)
51
+
52
+ ```bash
53
+ npm install @ant-design/nextjs-registry
54
+ ```
55
+
56
+ > Ensure `@ant-design/cssinjs` version matches the one inside `antd/node_modules`. Mismatched versions cause broken style extraction.
57
+
58
+ **`app/layout.tsx`:**
59
+ ```tsx
60
+ import React from 'react';
61
+ import { AntdRegistry } from '@ant-design/nextjs-registry';
62
+ import { ConfigProvider } from 'antd';
63
+ import type { ThemeConfig } from 'antd';
64
+
65
+ const themeConfig: ThemeConfig = {
66
+ token: { colorPrimary: '#1677ff' },
67
+ };
68
+
69
+ export default function RootLayout({ children }: React.PropsWithChildren) {
70
+ return (
71
+ <html lang="en">
72
+ <body>
73
+ <AntdRegistry>
74
+ <ConfigProvider theme={themeConfig}>
75
+ {children}
76
+ </ConfigProvider>
77
+ </AntdRegistry>
78
+ </body>
79
+ </html>
80
+ );
81
+ }
82
+ ```
83
+
84
+ **Client pages must be marked:**
85
+ ```tsx
86
+ 'use client'; // ALL antd components are client components
87
+ import { Button, Form } from 'antd';
88
+ ```
89
+
90
+ **React 19 / Next.js 15 compatibility:**
91
+ ```bash
92
+ npm install @ant-design/v5-patch-for-react-19
93
+ ```
94
+ ```tsx
95
+ import '@ant-design/v5-patch-for-react-19'; // import once at root layout
96
+ ```
97
+
98
+ ---
99
+
100
+ ## Next.js Pages Router
101
+
102
+ ```bash
103
+ npm install @ant-design/cssinjs
104
+ ```
105
+
106
+ **`pages/_document.tsx`:**
107
+ ```tsx
108
+ import React from 'react';
109
+ import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';
110
+ import Document, { Head, Html, Main, NextScript } from 'next/document';
111
+ import type { DocumentContext } from 'next/document';
112
+
113
+ const MyDocument = () => (
114
+ <Html lang="en">
115
+ <Head />
116
+ <body>
117
+ <Main />
118
+ <NextScript />
119
+ </body>
120
+ </Html>
121
+ );
122
+
123
+ MyDocument.getInitialProps = async (ctx: DocumentContext) => {
124
+ const cache = createCache();
125
+ const originalRenderPage = ctx.renderPage;
126
+
127
+ ctx.renderPage = () =>
128
+ originalRenderPage({
129
+ enhanceApp: (App) => (props) => (
130
+ <StyleProvider cache={cache}>
131
+ <App {...props} />
132
+ </StyleProvider>
133
+ ),
134
+ });
135
+
136
+ const initialProps = await Document.getInitialProps(ctx);
137
+ const style = extractStyle(cache, true);
138
+
139
+ return {
140
+ ...initialProps,
141
+ styles: (
142
+ <>
143
+ {initialProps.styles}
144
+ <style dangerouslySetInnerHTML={{ __html: style }} />
145
+ </>
146
+ ),
147
+ };
148
+ };
149
+
150
+ export default MyDocument;
151
+ ```
152
+
153
+ **`pages/_app.tsx`:**
154
+ ```tsx
155
+ import type { AppProps } from 'next/app';
156
+ import { ConfigProvider } from 'antd';
157
+
158
+ export default function MyApp({ Component, pageProps }: AppProps) {
159
+ return (
160
+ <ConfigProvider theme={{ token: { colorPrimary: '#1677ff' } }}>
161
+ <Component {...pageProps} />
162
+ </ConfigProvider>
163
+ );
164
+ }
165
+ ```
166
+
167
+ ---
168
+
169
+ ## v4 → v5 Migration
170
+
171
+ ### Automated codemod first
172
+ ```bash
173
+ npx -p @ant-design/codemod-v5 antd5-codemod src
174
+ ```
175
+
176
+ ### Key breaking changes
177
+
178
+ | What changed | v4 | v5 |
179
+ |---|---|---|
180
+ | Styling system | Less CSS | CSS-in-JS (auto) |
181
+ | CSS import | `antd/dist/antd.css` | `antd/dist/reset.css` |
182
+ | `babel-plugin-import` | required for tree shaking | **removed** — not needed or supported |
183
+ | Popup visibility | `visible` | `open` |
184
+ | Primary color | `#1890ff` | `#1677ff` |
185
+ | Default border radius | `2px` | `6px` |
186
+ | PageHeader | `antd` | `@ant-design/pro-components` |
187
+ | BackTop | `antd` | `FloatButton.BackTop` |
188
+ | `message.warn` | existed | removed → use `message.warning` |
189
+ | Form.create() | removed in v4 already | fully gone in v5 |
190
+
191
+ ### Migration path
192
+ 1. Upgrade to antd v4 latest → fix all deprecation warnings
193
+ 2. Run codemod
194
+ 3. `npm install antd@5`
195
+ 4. Replace `antd/dist/antd.css` → `antd/dist/reset.css`
196
+ 5. Remove `babel-plugin-import` from babel/vite config
197
+ 6. Migrate Less variable overrides → `ConfigProvider theme.token`
198
+ 7. Replace removed components from `@ant-design/compatible`
199
+
200
+ ```bash
201
+ npm install @ant-design/compatible # for PageHeader, Comment etc.
202
+ ```
203
+
204
+ ### `visible` → `open` migration
205
+ ```tsx
206
+ // v4
207
+ <Modal visible={show} />
208
+ <Drawer visible={show} onVisibleChange={fn} />
209
+
210
+ // v5
211
+ <Modal open={show} />
212
+ <Drawer open={show} onOpenChange={fn} />
213
+ ```
package/skills/ant-design/docs/theme.md ADDED
@@ -0,0 +1,265 @@
1
+ # Ant Design — Theming & Design Tokens
2
+
3
+ ## ConfigProvider theme prop
4
+
5
+ ```tsx
6
+ import { ConfigProvider, theme } from 'antd';
7
+ import type { ThemeConfig } from 'antd';
8
+
9
+ <ConfigProvider
10
+ theme={{
11
+ token: { /* global design tokens */ },
12
+ algorithm: theme.darkAlgorithm, // derivation algorithm
13
+ components: { // per-component overrides
14
+ Button: { colorPrimary: '#ff0000', borderRadius: 4 },
15
+ },
16
+ cssVar: true, // enable CSS variables
17
+ hashed: true, // hash-based class selectors (default)
18
+ inherit: true, // inherit parent ConfigProvider (default)
19
+ zeroRuntime: false, // v6+: pre-generate styles at build time
20
+ }}
21
+ >
22
+ <App />
23
+ </ConfigProvider>
24
+ ```
25
+
26
+ > **Limitation:** `ConfigProvider` does NOT affect `message.xxx`, `Modal.xxx`, or `notification.xxx` static methods (they run outside React context). Use `App.useApp()` or `Modal.useModal()` instead.
27
+
28
+ ---
29
+
30
+ ## Three-Layer Token System
31
+
32
+ ```
33
+ Seed Tokens → (algorithm) → Map Tokens → (specialization) → Alias Tokens
34
+ ```
35
+
36
+ | Layer | Examples | When to change |
37
+ |-------|----------|----------------|
38
+ | **Seed Tokens** | `colorPrimary`, `borderRadius`, `fontSize` | Primary customization — algorithm derives the rest automatically |
39
+ | **Map Tokens** | `colorPrimaryHover`, `colorPrimaryBg`, `colorBgContainer` | Override specific derived values when algorithm result isn't right |
40
+ | **Alias Tokens** | `colorLink`, `colorTextHeading`, `colorTextBase` | Batch-control semantic colors across components |
41
+
42
+ ---
43
+
44
+ ## Color Seed Tokens
45
+
46
+ | Token | Default | Description |
47
+ |-------|---------|-------------|
48
+ | `colorPrimary` | `#1677ff` | Brand primary color — cascades to hover/active/bg/border variants |
49
+ | `colorSuccess` | `#52c41a` | Success state |
50
+ | `colorWarning` | `#faad14` | Warning state |
51
+ | `colorError` | `#ff4d4f` | Error / danger state |
52
+ | `colorInfo` | `#1677ff` | Info state |
53
+
54
+ ## Derived Color Map Tokens (auto-calculated)
55
+
56
+ For each status color (primary/success/warning/error), these are auto-derived:
57
+ - `colorPrimaryBg` — lightest background tint
58
+ - `colorPrimaryBgHover` — hover background tint
59
+ - `colorPrimaryBorder` — border color
60
+ - `colorPrimaryBorderHover` — hover border
61
+ - `colorPrimaryHover` — hover state
62
+ - `colorPrimary` — base color
63
+ - `colorPrimaryActive` — pressed state
64
+ - `colorPrimaryTextHover` — text hover
65
+ - `colorPrimaryText` — text color
66
+ - `colorPrimaryTextActive` — text active
67
+
68
+ ## Alias Tokens (Semantic Colors)
69
+
70
+ | Token | Description | Default |
71
+ |-------|-------------|---------|
72
+ | `colorLink` | Link text color | `colorPrimary` |
73
+ | `colorTextBase` | Base text | `#000` |
74
+ | `colorBgBase` | Base background | `#fff` |
75
+ | `colorBgContainer` | Container/card background | `#fff` |
76
+ | `colorBgLayout` | Page layout background | `#f5f5f5` |
77
+ | `colorBgElevated` | Elevated surface (modals, dropdowns) | `#fff` |
78
+ | `colorText` | Primary text | `rgba(0,0,0,0.88)` |
79
+ | `colorTextSecondary` | Secondary text | `rgba(0,0,0,0.45)` |
80
+ | `colorTextTertiary` | Tertiary text | `rgba(0,0,0,0.35)` |
81
+ | `colorTextDisabled` | Disabled text | `rgba(0,0,0,0.25)` |
82
+ | `colorBorder` | Default border | `#d9d9d9` |
83
+ | `colorBorderSecondary` | Secondary border | `#f0f0f0` |
84
+
85
+ ---
86
+
87
+ ## Sizing Tokens
88
+
89
+ | Token | Default | Description |
90
+ |-------|---------|-------------|
91
+ | `borderRadius` | `6` | Default radius (px) |
92
+ | `borderRadiusXS` | `2` | Extra small |
93
+ | `borderRadiusSM` | `4` | Small |
94
+ | `borderRadiusLG` | `8` | Large |
95
+ | `fontSize` | `14` | Base font (px) |
96
+ | `fontSizeSM` | `12` | Small |
97
+ | `fontSizeLG` | `16` | Large |
98
+ | `fontSizeXL` | `20` | Extra large |
99
+ | `controlHeight` | `32` | Input/control height (px) |
100
+ | `controlHeightSM` | `24` | Small control |
101
+ | `controlHeightLG` | `40` | Large control |
102
+ | `paddingXS` | `8` | Extra small padding |
103
+ | `paddingSM` | `12` | Small padding |
104
+ | `padding` | `16` | Default padding |
105
+ | `paddingLG` | `24` | Large padding |
106
+ | `paddingXL` | `32` | Extra large padding |
107
+
108
+ ---
109
+
110
+ ## Special Tokens
111
+
112
+ | Token | Default | Description |
113
+ |-------|---------|-------------|
114
+ | `wireframe` | `false` | Wireframe visual mode |
115
+ | `motion` | `true` | Enable animations |
116
+ | `motionDurationFast` | `0.1s` | Fast animation |
117
+ | `motionDurationMid` | `0.2s` | Medium animation |
118
+ | `motionDurationSlow` | `0.3s` | Slow animation |
119
+ | `fontFamily` | system fonts | Base font family |
120
+ | `fontWeightStrong` | `600` | Bold weight |
121
+ | `zIndexPopupBase` | `1000` | Popup base z-index |
122
+
123
+ ---
124
+
125
+ ## Algorithms
126
+
127
+ ```tsx
128
+ import { theme } from 'antd';
129
+
130
+ // Single algorithm
131
+ <ConfigProvider theme={{ algorithm: theme.darkAlgorithm }}>
132
+ <ConfigProvider theme={{ algorithm: theme.compactAlgorithm }}>
133
+
134
+ // Combined (order matters)
135
+ <ConfigProvider theme={{ algorithm: [theme.darkAlgorithm, theme.compactAlgorithm] }}>
136
+
137
+ // Dynamic toggle
138
+ const [isDark, setIsDark] = useState(false);
139
+ <ConfigProvider theme={{ algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm }}>
140
+ ```
141
+
142
+ ---
143
+
144
+ ## Component Tokens
145
+
146
+ Each component has its own token scope:
147
+
148
+ ```tsx
149
+ <ConfigProvider
150
+ theme={{
151
+ components: {
152
+ Button: {
153
+ colorPrimary: '#ff6900',
154
+ borderRadius: 20,
155
+ controlHeight: 40,
156
+ algorithm: true, // apply current theme algorithm to component
157
+ },
158
+ Input: {
159
+ borderRadius: 4,
160
+ colorBorder: '#91d5ff',
161
+ hoverBorderColor: '#4096ff',
162
+ },
163
+ Menu: {
164
+ itemBg: '#001529',
165
+ itemColor: 'rgba(255,255,255,0.65)',
166
+ itemSelectedBg: '#1677ff',
167
+ },
168
+ Table: {
169
+ headerBg: '#f0f4f8',
170
+ rowHoverBg: '#f5f5f5',
171
+ },
172
+ },
173
+ }}
174
+ >
175
+ ```
176
+
177
+ ---
178
+
179
+ ## Consuming Tokens
180
+
181
+ ```tsx
182
+ // Inside React components
183
+ import { theme } from 'antd';
184
+ const { token } = theme.useToken();
185
+
186
+ <div style={{
187
+ backgroundColor: token.colorBgContainer,
188
+ color: token.colorText,
189
+ padding: token.paddingLG,
190
+ borderRadius: token.borderRadius,
191
+ border: `1px solid ${token.colorBorderSecondary}`,
192
+ }} />
193
+
194
+ // Outside React (static / build tools)
195
+ const defaultToken = theme.getDesignToken(); // default theme
196
+ const customToken = theme.getDesignToken({ token: { colorPrimary: '#f00' } }); // custom config
197
+ ```
198
+
199
+ ---
200
+
201
+ ## Nested Themes
202
+
203
+ ```tsx
204
+ <ConfigProvider theme={{ token: { colorPrimary: '#1677ff' } }}>
205
+ {/* blue primary */}
206
+ <Header />
207
+
208
+ <ConfigProvider theme={{ token: { colorPrimary: '#52c41a' } }}>
209
+ {/* green primary — inherits all other tokens from parent */}
210
+ <Sidebar />
211
+ </ConfigProvider>
212
+
213
+ <ConfigProvider theme={{ inherit: false, token: { colorPrimary: '#722ed1' } }}>
214
+ {/* inherit: false — fully isolated from parent */}
215
+ <Widget />
216
+ </ConfigProvider>
217
+ </ConfigProvider>
218
+ ```
219
+
220
+ ---
221
+
222
+ ## CSS Variables Mode
223
+
224
+ ```tsx
225
+ <ConfigProvider theme={{ cssVar: true, hashed: false }}>
226
+ <App />
227
+ </ConfigProvider>
228
+ ```
229
+
230
+ Generates `--ant-color-primary`, `--ant-border-radius`, etc. — enables runtime switching without React re-renders. You can also override them in plain CSS:
231
+
232
+ ```css
233
+ :root { --ant-color-primary: #722ed1; }
234
+ ```
235
+
236
+ ---
237
+
238
+ ## StyleProvider — Browser Compatibility
239
+
240
+ ```tsx
241
+ import { StyleProvider, legacyLogicalPropertiesTransformer, px2remTransformer } from '@ant-design/cssinjs';
242
+
243
+ <StyleProvider
244
+ hashPriority="high" // disable :where() for old browsers
245
+ transformers={[legacyLogicalPropertiesTransformer]} // margin-inline-start → margin-left
246
+ layer // enable @layer cascade ordering
247
+ >
248
+ <App />
249
+ </StyleProvider>
250
+ ```
251
+
252
+ ### Tailwind CSS integration with @layer
253
+ ```css
254
+ /* Tailwind v3 global.css */
255
+ @layer tailwind-base, antd;
256
+
257
+ /* Tailwind v4 global.css */
258
+ @layer theme, base, antd, components, utilities;
259
+ ```
260
+
261
+ ### px → rem transformer
262
+ ```tsx
263
+ const px2rem = px2remTransformer({ rootValue: 16, precision: 5 });
264
+ <StyleProvider transformers={[px2rem]}><App /></StyleProvider>
265
+ ```
package/skills/ant-design/scripts/fetch-component-docs.sh ADDED
@@ -0,0 +1,169 @@
1
+ #!/usr/bin/env bash
2
+ # fetch-component-docs.sh
3
+ # Fetch live Ant Design documentation for a specific component or topic.
4
+ #
5
+ # Usage:
6
+ # ./fetch-component-docs.sh <component-or-topic>
7
+ #
8
+ # Examples:
9
+ # ./fetch-component-docs.sh select
10
+ # ./fetch-component-docs.sh pro-table
11
+ # ./fetch-component-docs.sh customize-theme
12
+ #
13
+ # The script prints the URL it fetched and a summary of what to look for.
14
+ # Claude should then call WebFetch on that URL with the question at hand.
15
+
16
+ set -euo pipefail
17
+
18
+ COMPONENT="${1:-}"
19
+
20
+ if [[ -z "$COMPONENT" ]]; then
21
+ echo "Usage: $0 <component-or-topic>"
22
+ echo ""
23
+ echo "Component docs → https://ant.design/components/<name>"
24
+ echo "React docs → https://ant.design/docs/react/<topic>"
25
+ echo "Pro components → https://procomponents.ant.design/en-US/components/<name>"
26
+ exit 1
27
+ fi
28
+
29
+ COMPONENT_LOWER="${COMPONENT,,}"
30
+
31
+ # --- Route table -----------------------------------------------------------
32
+ declare -A ROUTES=(
33
+ # General
34
+ ["button"]="https://ant.design/components/button"
35
+ ["icon"]="https://ant.design/components/icon"
36
+ ["typography"]="https://ant.design/components/typography"
37
+
38
+ # Layout
39
+ ["layout"]="https://ant.design/components/layout"
40
+ ["grid"]="https://ant.design/components/grid"
41
+ ["row"]="https://ant.design/components/grid"
42
+ ["col"]="https://ant.design/components/grid"
43
+ ["space"]="https://ant.design/components/space"
44
+ ["flex"]="https://ant.design/components/flex"
45
+ ["divider"]="https://ant.design/components/divider"
46
+ ["splitter"]="https://ant.design/components/splitter"
47
+
48
+ # Navigation
49
+ ["menu"]="https://ant.design/components/menu"
50
+ ["breadcrumb"]="https://ant.design/components/breadcrumb"
51
+ ["dropdown"]="https://ant.design/components/dropdown"
52
+ ["pagination"]="https://ant.design/components/pagination"
53
+ ["steps"]="https://ant.design/components/steps"
54
+ ["tabs"]="https://ant.design/components/tabs"
55
+ ["anchor"]="https://ant.design/components/anchor"
56
+ ["affix"]="https://ant.design/components/affix"
57
+ ["float-button"]="https://ant.design/components/float-button"
58
+ ["floatbutton"]="https://ant.design/components/float-button"
59
+ ["back-top"]="https://ant.design/components/float-button"
60
+
61
+ # Data Entry
62
+ ["form"]="https://ant.design/components/form"
63
+ ["input"]="https://ant.design/components/input"
64
+ ["input-number"]="https://ant.design/components/input-number"
65
+ ["inputnumber"]="https://ant.design/components/input-number"
66
+ ["select"]="https://ant.design/components/select"
67
+ ["checkbox"]="https://ant.design/components/checkbox"
68
+ ["radio"]="https://ant.design/components/radio"
69
+ ["switch"]="https://ant.design/components/switch"
70
+ ["slider"]="https://ant.design/components/slider"
71
+ ["date-picker"]="https://ant.design/components/date-picker"
72
+ ["datepicker"]="https://ant.design/components/date-picker"
73
+ ["time-picker"]="https://ant.design/components/time-picker"
74
+ ["timepicker"]="https://ant.design/components/time-picker"
75
+ ["upload"]="https://ant.design/components/upload"
76
+ ["cascader"]="https://ant.design/components/cascader"
77
+ ["transfer"]="https://ant.design/components/transfer"
78
+ ["tree-select"]="https://ant.design/components/tree-select"
79
+ ["treeselect"]="https://ant.design/components/tree-select"
80
+ ["mentions"]="https://ant.design/components/mentions"
81
+ ["rate"]="https://ant.design/components/rate"
82
+ ["segmented"]="https://ant.design/components/segmented"
83
+ ["color-picker"]="https://ant.design/components/color-picker"
84
+ ["colorpicker"]="https://ant.design/components/color-picker"
85
+ ["auto-complete"]="https://ant.design/components/auto-complete"
86
+ ["autocomplete"]="https://ant.design/components/auto-complete"
87
+
88
+ # Data Display
89
+ ["table"]="https://ant.design/components/table"
90
+ ["list"]="https://ant.design/components/list"
91
+ ["card"]="https://ant.design/components/card"
92
+ ["collapse"]="https://ant.design/components/collapse"
93
+ ["carousel"]="https://ant.design/components/carousel"
94
+ ["descriptions"]="https://ant.design/components/descriptions"
95
+ ["empty"]="https://ant.design/components/empty"
96
+ ["image"]="https://ant.design/components/image"
97
+ ["avatar"]="https://ant.design/components/avatar"
98
+ ["badge"]="https://ant.design/components/badge"
99
+ ["tag"]="https://ant.design/components/tag"
100
+ ["tooltip"]="https://ant.design/components/tooltip"
101
+ ["popover"]="https://ant.design/components/popover"
102
+ ["statistic"]="https://ant.design/components/statistic"
103
+ ["tree"]="https://ant.design/components/tree"
104
+ ["timeline"]="https://ant.design/components/timeline"
105
+ ["calendar"]="https://ant.design/components/calendar"
106
+ ["qrcode"]="https://ant.design/components/qr-code"
107
+ ["qr-code"]="https://ant.design/components/qr-code"
108
+ ["watermark"]="https://ant.design/components/watermark"
109
+
110
+ # Feedback
111
+ ["modal"]="https://ant.design/components/modal"
112
+ ["drawer"]="https://ant.design/components/drawer"
113
+ ["message"]="https://ant.design/components/message"
114
+ ["notification"]="https://ant.design/components/notification"
115
+ ["alert"]="https://ant.design/components/alert"
116
+ ["spin"]="https://ant.design/components/spin"
117
+ ["skeleton"]="https://ant.design/components/skeleton"
118
+ ["progress"]="https://ant.design/components/progress"
119
+ ["result"]="https://ant.design/components/result"
120
+ ["popconfirm"]="https://ant.design/components/popconfirm"
121
+ ["tour"]="https://ant.design/components/tour"
122
+
123
+ # Utility
124
+ ["app"]="https://ant.design/components/app"
125
+ ["config-provider"]="https://ant.design/components/config-provider"
126
+ ["configprovider"]="https://ant.design/components/config-provider"
127
+
128
+ # React docs
129
+ ["customize-theme"]="https://ant.design/docs/react/customize-theme"
130
+ ["theme"]="https://ant.design/docs/react/customize-theme"
131
+ ["compatible-style"]="https://ant.design/docs/react/compatible-style"
132
+ ["use-with-vite"]="https://ant.design/docs/react/use-with-vite"
133
+ ["use-with-next"]="https://ant.design/docs/react/use-with-next"
134
+ ["migration-v5"]="https://ant.design/docs/react/migration-v5"
135
+ ["migration-v6"]="https://ant.design/docs/react/migration-v6"
136
+ ["server-side-rendering"]="https://ant.design/docs/react/server-side-rendering"
137
+ ["ssr"]="https://ant.design/docs/react/server-side-rendering"
138
+ ["faq"]="https://ant.design/docs/react/faq"
139
+
140
+ # Pro Components
141
+ ["pro-table"]="https://procomponents.ant.design/en-US/components/table"
142
+ ["protable"]="https://procomponents.ant.design/en-US/components/table"
143
+ ["pro-form"]="https://procomponents.ant.design/en-US/components/form"
144
+ ["proform"]="https://procomponents.ant.design/en-US/components/form"
145
+ ["pro-layout"]="https://procomponents.ant.design/en-US/components/layout"
146
+ ["prolayout"]="https://procomponents.ant.design/en-US/components/layout"
147
+ ["pro-list"]="https://procomponents.ant.design/en-US/components/list"
148
+ ["prolist"]="https://procomponents.ant.design/en-US/components/list"
149
+ ["pro-descriptions"]="https://procomponents.ant.design/en-US/components/descriptions"
150
+ )
151
+
152
+ URL="${ROUTES[$COMPONENT_LOWER]:-}"
153
+
154
+ if [[ -z "$URL" ]]; then
155
+ # Fallback: try as a direct component slug
156
+ URL="https://ant.design/components/${COMPONENT_LOWER}"
157
+ echo "⚠️ No exact match for '${COMPONENT}'. Trying: $URL"
158
+ else
159
+ echo "✓ Component: ${COMPONENT}"
160
+ echo " URL: $URL"
161
+ fi
162
+
163
+ echo ""
164
+ echo "─────────────────────────────────────────────"
165
+ echo "Fetch this URL with WebFetch and ask:"
166
+ echo " 'Extract all props, types, defaults,"
167
+ echo " sub-components, and code examples'"
168
+ echo "─────────────────────────────────────────────"
169
+ echo "$URL"