Add initialization scripts and various identity documents; rename and organize files

agents/pencil-ui-designer.md

@@ -0,0 +1,38 @@
+---
+name: pencil-ui-designer
+description: "Use this agent when you need Pencil-based design workflows: atomic designer actions, MCP tools, and spec-driven UI plans. Examples include: (1) Turning PRD or user requirements into action-level PENCIL_PLAN via pencil-ui-design-spec-generator; (2) Executing Pencil MCP tools in sequence (open_document, batch_design, set_variables, get_screenshot, get_style_guide, etc.) to simulate designer operations; (3) Initializing design systems (Layui, Ant Design, Bootstrap, Element Plus, uView, uView Pro, Vant, uCharts, ECharts) with pencil-ui-design-system-* skills; (4) Creating new pencil-ui-design-system-* skills with pencil-skill-creator. This agent should be used when the task involves Pencil, Figma-like design automation, or action-level design plans rather than high-level text-to-UI."
+model: sonnet
+---
+
+You are a Pencil UI designer with expertise in atomic design workflows, Pencil MCP tools, and spec-driven PENCIL_PLAN execution. Your specialization covers turning requirements into actionable design steps, calling Pencil MCP methods in the right order, and initializing or extending design systems within the Pencil ecosystem.
+
+Core Competencies:
+- **PENCIL_PLAN**: You use pencil-ui-design-spec-generator to convert vague or high-level requirements into an action-level PENCIL_PLAN. Each step specifies tool, intent, and key parameters; the plan is not executed by the spec generator—you then run the corresponding Pencil MCP tools or pencil-mcp-* skills in sequence.
+- **Pencil MCP**: You call Pencil MCP tools correctly and in a valid order: e.g. open_document before batch_design; set_variables when initializing design tokens; get_editor_state, get_screenshot, get_guidelines, get_style_guide, get_variables when reading state. You follow the strict skill naming convention pencil-mcp-{mcp-method} (e.g. open_document → pencil-mcp-open-document). Parameters and usage are documented in pencil-skills/docs/pencil-mcp-tools.md.
+- **Design System Init**: You use pencil-ui-design-system-* skills (layui, antd, bootstrap, element, uview, uviewpro, vant, ucharts, echarts) to produce executable PENCIL_PLANs: Step 1 set_variables (design tokens), Step 2 batch_design (component overview frame). You do not execute the plan inside the skill—you output the plan and then run the appropriate pencil-mcp-* tools.
+- **Skill Authoring**: You create new pencil-ui-design-system-* skills with pencil-skill-creator and init_pencil_design_system_skill.py. You adhere to the skill layout (SKILL.md, references/, examples/, scripts/) and the Agent Skills spec described in pencil-skills/spec/agent-skills-spec.md and AGENTS.md.
+
+Operational Principles:
+1. **Plan Then Execute**: Always derive or reference a PENCIL_PLAN (from spec-generator or design-system-* skills) before executing a sequence of Pencil MCP calls. Avoid ad-hoc tool calls without a clear step order.
+2. **Naming**: Pencil MCP skills must be named pencil-mcp-{mcp-method} with underscores in method names converted to hyphens (e.g. get_style_guide_tags → pencil-mcp-get-style-guide-tags).
+3. **Progressive Disclosure**: Load full SKILL.md only when a skill is selected; use references (e.g. docs/pencil-mcp-tools.md, references/contract.md) for details to keep context small.
+4. **One Method, One Skill**: Each Pencil MCP method has exactly one skill; do not group multiple MCP methods into a single skill.
+5. **Documentation**: Align with pencil-skills/AGENTS.md for workflow, skill index (docs/skills-index.md), and MCP tool reference (docs/pencil-mcp-tools.md).
+
+When Approaching Tasks:
+- **Clarify**: Determine if the user wants a PENCIL_PLAN only, execution only, or both; identify the design system (if any) and target artifact (e.g. new doc, design system init, screenshot).
+- **Plan**: Use pencil-ui-design-spec-generator for custom flows or pencil-ui-design-system-* for design-system init; ensure the plan lists steps with tool names and key parameters.
+- **Execute**: Run pencil-mcp-* tools (or underlying Pencil MCP) in the order specified by the plan.
+- **Validate**: After execution, use get_screenshot or get_editor_state as needed to confirm outcome; suggest follow-up steps when relevant.
+
+Communication Style:
+- Be explicit about which step of the PENCIL_PLAN you are executing and which tool/skill you are calling
+- When Pencil MCP is unavailable, state that the Pencil MCP server must be configured and point to setup docs
+- Prefer referencing pencil-skills docs (AGENTS.md, docs/pencil-mcp-tools.md, docs/skills-index.md) for structure and parameters
+
+When encountering missing MCP or ambiguous requirements:
+- State that Pencil MCP must be configured and link to the relevant setup guide
+- If the request is high-level, propose using pencil-ui-design-spec-generator first to get a PENCIL_PLAN, then execute
+- For design-system work, suggest the appropriate pencil-ui-design-system-* skill and then run the produced plan
+
+You balance plan clarity with execution accuracy, so that Pencil workflows behave like a designer performing atomic actions in a predictable order.

docs/external-skills.md

@@ -0,0 +1,253 @@
+# 外部技能库索引（全栈开发）
+
+本文档列出与 **full-stack-skills** 互补的第三方 Agent Skills 仓库：可直接安装使用的外部技能、可整合候选，以及发现更多技能库的聚合资源。Stars 数为撰写时参考值，以 GitHub 为准。
+
+**与 [full-stack-skills](../README.md) 的关系**：本仓库提供按 `skills/` 分组的全栈基础技能；外部库侧重官方示例、单一框架深度、ML/设计/产品流程等。建议按需并行注册多个 marketplace，组合使用。
+
+---
+
+## 1. 概述
+
+| 类型 | 说明 |
+|------|------|
+| **直接使用** | 维护活跃、文档完整，推荐通过各平台 CLI / 插件市场安装，无需并入本仓库 |
+| **可整合** | 可评估将部分技能迁入 `full-stack-skills/skills/<组>/`，需审许可证与重复度；详见 [integration-plan.md](integration-plan.md) |
+| **发现资源** | Awesome 列表与 Hub，用于持续发现新技能库 |
+
+安装方式因工具而异：**Claude Code** 常用 `/plugin marketplace add <owner/repo>`；**Codex** 常用 `$skill-installer`；**通用** 可用 [skills CLI](https://github.com/vercel-labs/skills)：`npx skills add <owner/repo>`（以各仓库 README 为准）。
+
+---
+
+## 2. 官方与平台技能库
+
+### 2.1 [anthropics/skills](https://github.com/anthropics/skills)
+
+- **Stars**：约 98k+
+- **技能数**：约 17（含 document-skills、example-skills、claude-api）
+- **类别**：文档（docx/pdf/pptx/xlsx）、创意与设计、企业与沟通、开发类（frontend-design、webapp-testing、mcp-builder、web-artifacts-builder 等）
+- **全栈相关**：前端界面质量、Playwright 测本地 Web、MCP 构建、Claude API 集成、办公文档自动化
+- **安装（Claude Code）**：
+  ```text
+  /plugin marketplace add anthropics/skills
+  /plugin install document-skills@anthropic-agent-skills
+  /plugin install example-skills@anthropic-agent-skills
+  ```
+- **互补**：本仓库偏框架与基础设施；Anthropic 官方偏「高质量通用技能」与文档能力示范。
+
+### 2.2 [openai/skills](https://github.com/openai/skills)
+
+- **Stars**：约 14k+
+- **技能数**：`.system` 预装约 3 + `.curated` 约 33
+- **类别**：部署（Vercel/Netlify/Cloudflare/Render）、Playwright、安全（threat model、best practices）、Figma 实现、ASP.NET Core、Jupyter、Sentry、Notion/Linear 等
+- **全栈相关**：前后端发布流水线、E2E 测试、安全基线、设计稿落地
+- **安装（Codex）**：
+  ```text
+  $skill-installer <skill-name>
+  $skill-installer install https://github.com/openai/skills/tree/main/skills/.experimental/<skill-folder>
+  ```
+- **互补**：本仓库有测试/DevOps/云技能条目；OpenAI curated 更贴近 Codex 工作流与一键部署场景。
+
+### 2.3 [google-labs-code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
+
+- **Stars**：约 2.7k+
+- **技能数**：7（stitch-design、stitch-loop、design-md、enhance-prompt、react-components、remotion、shadcn-ui）
+- **类别**：Stitch MCP、UI 生成、React/shadcn、Remotion
+- **全栈相关**：设计到代码、多页站点生成、设计系统文档
+- **安装**：
+  ```bash
+  npx skills add google-labs-code/stitch-skills --list
+  npx skills add google-labs-code/stitch-skills --skill stitch-design --global
+  ```
+- **互补**：本仓库含 **stitch-skills** 扩展组（非官方重复项）；官方 stitch-skills 仍建议单独安装以获得完整官方技能集。
+
+### 2.4 [google-gemini/gemini-skills](https://github.com/google-gemini/gemini-skills)
+
+- **Stars**：约 2.2k+
+- **类别**：Gemini API、SDK、模型与智能体交互
+- **全栈相关**：在应用中集成 Gemini、多模态与 Agent 模式
+- **安装**：以仓库 README 为准（Gemini CLI / 插件说明）
+- **互补**：本仓库以通用全栈为主；Gemini 技能专注 Google 模型栈。
+
+### 2.5 [huggingface/skills](https://github.com/huggingface/skills)
+
+- **Stars**：约 9k+
+- **技能数**：约 14（Gradio、transformers.js、数据集、训练与评测等）
+- **全栈相关**：Gradio 演示、浏览器/Node 侧推理、Hub CLI、数据集浏览
+- **安装（Claude Code）**：
+  ```text
+  /plugin marketplace add huggingface/skills
+  /plugin install <skill-name>@huggingface/skills
+  ```
+- **互补**：本仓库覆盖传统 Web/后端；HF 技能覆盖 ML 生命周期与演示部署。
+
+---
+
+## 3. 框架与技术栈专用
+
+### 3.1 [vuejs-ai/skills](https://github.com/vuejs-ai/skills)
+
+- **Stars**：约 2k+
+- **技能数**：8（Vue 3 最佳实践、Router、Pinia、测试、JSX、调试、可组合函数等）
+- **安装**：
+  ```bash
+  npx skills add vuejs-ai/skills
+  ```
+  Claude Code：`/plugin marketplace add vuejs-ai/skills` 后按提示安装
+- **触发**：提示中可写 `Use vue skill, ...`（以官方 README 为准）
+- **互补**：本仓库 **vue-skills** 偏 API 与项目结构；vuejs-ai 偏深度实践与测试。
+
+### 3.2 [antfu/skills](https://github.com/antfu/skills)
+
+- **Stars**：约 4k+
+- **技能数**：约 17（Vue、Nuxt、Vite、VitePress、Vitest、UnoCSS、pnpm、Slidev、Turborepo、web-design-guidelines 等）
+- **安装**：
+  ```bash
+  pnpx skills add antfu/skills --skill='*'
+  ```
+- **互补**：本仓库含 Vite/Vue；antfu 集合并维护 Nuxt/VitePress/Vitest 等一条龙内容。
+
+### 3.3 [analogjs/angular-skills](https://github.com/analogjs/angular-skills)
+
+- **Stars**：见 GitHub
+- **技能数**：10（组件、DI、指令、表单、HTTP、路由、Signals、SSR、测试、工具链）
+- **安装**：
+  ```bash
+  npx skills add analogjs/angular-skills
+  ```
+- **互补**：本仓库 **angular-skills** 单技能概览；analogjs 为 Angular v20+ 细分技能。
+
+### 3.4 [remotion-dev/skills](https://github.com/remotion-dev/skills)
+
+- **Stars**：约 2.2k+
+- **结构**：以 `skills/remotion` 为主技能，内含多份规则（动画、字幕、音频、图表等）
+- **全栈相关**：React 驱动视频/动效产品
+- **安装**：仓库 README 较简，可能以 npm 包形式使用；以官方文档为准
+- **互补**：本仓库无 Remotion 垂直技能；视频类产品可并行安装。
+
+---
+
+## 4. 内容、设计与工具类
+
+### 4.1 [JimLiu/baoyu-skills](https://github.com/JimLiu/baoyu-skills)
+
+- **类别**：内容（小红书图、信息图、封面、幻灯片、公众号/X 发布等）、AI 生图、工具（URL 转 Markdown、翻译、压缩图片等）
+- **安装**：
+  ```bash
+  npx skills add jimliu/baoyu-skills
+  ```
+- **互补**：本仓库偏工程实现；baoyu 偏运营与内容生产管线。
+
+### 4.2 [kepano/obsidian-skills](https://github.com/kepano/obsidian-skills)
+
+- **Stars**：约 15k+
+- **类别**：Obsidian（Markdown、Bases、JSON Canvas、CLI）
+- **全栈相关**：知识库、技术文档与个人笔记工作流
+- **安装**：以仓库 README 为准
+- **互补**：与 **document-skills** 文档工程场景互补，偏 Obsidian 生态。
+
+### 4.3 [nextlevelbuilder/ui-ux-pro-max-skill](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill)
+
+- **Stars**：约 46k+
+- **类别**：多平台 UI/UX 设计情报与规范
+- **安装**：以仓库 README 为准
+- **互补**：强化界面与体验决策；与本仓库 **design-skills**、**frontend-design** 类能力互补。
+
+---
+
+## 5. 产品与流程类
+
+### 5.1 [deanpeters/Product-Manager-Skills](https://github.com/deanpeters/Product-Manager-Skills)
+
+- **技能数**：46+ 技能与 6 条工作流命令（用户故事、PRD、路线图、发现访谈等）
+- **安装**：
+  ```text
+  /plugin marketplace add deanpeters/Product-Manager-Skills
+  /plugin install <skill-name>@pm-skills
+  ```
+  或 `npx skills find/add deanpeters/Product-Manager-Skills`
+- **互补**：本仓库含 speckit/openspec 等规格技能；PM Skills 偏产品发现与优先级，与「做什么」衔接「怎么做」。
+
+---
+
+## 6. 方法论与个人仓库
+
+### 6.1 [obra/superpowers](https://github.com/obra/superpowers)
+
+- **Stars**：约 100k+
+- **类别**：智能体技能框架与软件开发方法论（可组合技能与工作流）
+- **安装**：以仓库 README 为准
+- **互补**：提供宏观工作方式；与本仓库「按技术栈拆分的技能」叠加使用。
+
+### 6.2 [affaan-m/everything-claude-code](https://github.com/affaan-m/everything-claude-code)
+
+- **Stars**：约 89k+
+- **类别**：Claude Code / Codex / Cursor 等用的技能、本能、记忆、安全与研究优先开发
+- **安装**：以仓库 README 为准
+- **互补**：偏「智能体装备与性能」；与本仓库「业务与栈技能」互补。
+
+### 6.3 [mattpocock/skills](https://github.com/mattpocock/skills)
+
+- **Stars**：约 7.6k+
+- **说明**：个人 `.claude` 技能目录导出；内容随作者迭代
+- **安装**：克隆后按需复制技能目录或参考作者说明
+- **可整合**：见 [integration-plan.md](integration-plan.md)
+
+### 6.4 [Dimillian/Skills](https://github.com/Dimillian/Skills)
+
+- **Stars**：约 2.2k+
+- **说明**：个人 Codex 技能集合
+- **可整合**：见 [integration-plan.md](integration-plan.md)
+
+### 6.5 [Ceeon/videocut-skills](https://github.com/Ceeon/videocut-skills)
+
+- **Stars**：约 1.1k+
+- **类别**：视频剪辑 Agent（Claude Code Skills）
+- **可整合**：若本仓库扩展「多媒体/内容工程」组，可评估是否迁入或仅外链
+
+---
+
+## 7. 技能库发现资源（聚合）
+
+用于持续检索「适合全栈」的新技能库：
+
+| 资源 | 说明 |
+|------|------|
+| [VoltAgent/awesome-agent-skills](https://github.com/VoltAgent/awesome-agent-skills) | 大量官方与社区技能索引 |
+| [heilcheng/awesome-agent-skills](https://github.com/heilcheng/awesome-agent-skills) | 多语言精选与教程 |
+| [christophacham/agent-skills-library](https://github.com/christophacham/agent-skills-library) | 多来源、多类别聚合 |
+| [agent-skills-hub/agent-skills-hub](https://github.com/agent-skills-hub/agent-skills-hub) | Hub 与 CLI 发现 |
+| [ZhanlinCui/Agent-Skills-Hunter](https://github.com/ZhanlinCui/Agent-Skills-Hunter) | 生产向技能与 skillctl |
+
+**GitHub 搜索**：[`skills` topics](https://github.com/search?q=topic%3Aagent-skills&type=repositories) 或关键词 `agent skills`、`claude skills`、`codex skills`。
+
+**建议关注领域**：NestJS/FastAPI/Django/Spring 专项、React/Svelte/Solid 专项、K8s/Terraform 专项、Playwright/Jest 专项、云厂商专项、安全/OWASP 专项。
+
+---
+
+## 8. 快速命令速查
+
+```text
+# Claude Code：注册市场后安装插件（示例）
+/plugin marketplace add anthropics/skills
+/plugin marketplace add huggingface/skills
+/plugin marketplace add vuejs-ai/skills
+/plugin marketplace add deanpeters/Product-Manager-Skills
+
+# 通用 skills CLI（示例）
+npx skills add google-labs-code/stitch-skills --list
+npx skills add vuejs-ai/skills
+npx skills add analogjs/angular-skills
+npx skills add jimliu/baoyu-skills
+pnpx skills add antfu/skills --skill='*'
+
+# Codex（示例）
+$skill-installer playwright
+```
+
+---
+
+## 相关链接
+
+- [技能生态总览](skills-ecosystem.md)（本仓库 + PartMe 关联仓 + 外部库组合方式）
+- [阶段→技能映射](pipeline-stage-to-skills.md)
+- [可整合技能库评估](integration-plan.md)

docs/integration-plan.md

@@ -0,0 +1,60 @@
+# 可整合技能库评估（草案）
+
+本文档评估若干**未并入** [full-stack-skills](https://github.com/partme-ai/full-stack-skills) 的外部仓库，是否适合将部分技能迁入 `skills/<组>/`，供维护者决策。执行整合前须核对：**许可证**、**与现有技能重复度**、**目录规范**（见 [skill-group-mapping.md](skill-group-mapping.md)）。
+
+---
+
+## 1. mattpocock/skills
+
+| 项 | 说明 |
+|----|------|
+| **仓库** | [github.com/mattpocock/skills](https://github.com/mattpocock/skills) |
+| **性质** | 个人导出的 `.claude` 技能目录，内容随作者变更 |
+| **整合价值** | 若含 TypeScript 高级模式、Zod、教学向短文等，可挑选与 **typescript** / **dev-utils** 不重复条目 |
+| **风险** | 许可证需逐条确认；更新节奏与个人偏好强绑定 |
+| **建议优先级** | **低**：优先保持「外链 + 用户自行克隆」；确有高频缺失再单技能迁入 |
+
+---
+
+## 2. Dimillian/Skills
+
+| 项 | 说明 |
+|----|------|
+| **仓库** | [github.com/Dimillian/Skills](https://github.com/Dimillian/Skills) |
+| **性质** | 个人 Codex 技能 |
+| **整合价值** | 若含 SwiftUI/iOS、独立开发者工作流，可补充本仓库 **mobile-native-skills** 之上层模式 |
+| **风险** | 与本仓库 **ios-swift** 等可能重叠；需 diff 后迁入 |
+| **建议优先级** | **低～中**：先文档外链，确认社区需求后再选 1～2 个技能试点 |
+
+---
+
+## 3. Ceeon/videocut-skills
+
+| 项 | 说明 |
+|----|------|
+| **仓库** | [github.com/Ceeon/videocut-skills](https://github.com/Ceeon/videocut-skills) |
+| **性质** | 视频剪辑 Agent（Claude Code Skills） |
+| **整合价值** | 可新建组如 **media-skills** 或归入 **dev-utils-skills** 下的「内容工程」子集 |
+| **风险** | 依赖 FFmpeg/剪辑链路，体积与维护成本较高 |
+| **建议优先级** | **低**：全栈核心路径非必需；更适合 **external-skills.md** 外链 |
+
+---
+
+## 4. 执行整合的检查清单（若决定迁入）
+
+1. 目标路径：`skills/<组目录>/<skill-name>/`，且 `SKILL.md` 的 `name` 与目录名一致  
+2. 更新 [.claude-plugin/marketplace.json](../.claude-plugin/marketplace.json) 对应插件的 `skills` 数组  
+3. 更新 [skill-group-mapping.md](skill-group-mapping.md)  
+4. 在 [external-skills.md](external-skills.md) 将该项从「可整合」改为「已整合（本仓库）」并保留上游致谢链接  
+
+---
+
+## 5. 结论摘要
+
+| 仓库 | 建议 |
+|------|------|
+| mattpocock/skills | 维持外链；有明确缺口再单技能评估 |
+| Dimillian/Skills | 维持外链；iOS/Swift 深度需求时再评估 |
+| Ceeon/videocut-skills | 维持外链；不优先并入 monorepo |
+
+本文件随社区反馈迭代；整合决策以仓库维护者 PR 与审阅为准。

docs/repository-map.md

@@ -0,0 +1,97 @@
+# full-stack-skills 仓库结构与技能目录总览
+
+本文档基于当前仓库内 `skills/` 实际目录和 `.claude-plugin/marketplace.json` 生成，用于作为本仓库的结果型说明文档与目录总览入口。
+
+## 一、当前仓库概况
+
+- `skills/` 下共有 **42** 个技能组目录。
+- 仓库内共检出 **421** 个 `SKILL.md` 文件。
+- Marketplace 当前配置了 **40** 个插件，合计 **410** 个技能路径。
+- 已发布插件组：angular-skills、antd-skills、ascii-skills、avue-skills、build-skills、chart-skills、cocos-skills、database-skills、ddd-skills、design-skills、dev-utils-skills、devops-skills、docker-skills、document-skills、drawio-skills、electron-skills、flutter-skills、go-skills、mobile-native-skills、nodejs-skills、nvm-skills、ocrmypdf-skills、openspec-skills、pencil-skills、python-skills、react-skills、social-skills、speckit-skills、spring-skills、stitch-skills、svelte-skills、t2ui-skills、tauri-skills、teaching-skills、testing-skills、uniapp-skills、utility-skills、uview-skills、vue-skills、vue-ui-skills。
+- 文档入口建议优先查看：`README.md`、`docs/skill-group-mapping.md`、`docs/pipeline-stage-to-skills.md`、本文件。
+
+## 二、仓库顶层结构
+
+```text
+full-stack-skills/
+├── .claude-plugin/           # Claude Marketplace 配置
+├── adapters/                 # 多平台适配器与转换工具
+├── agents/                   # 代理角色与编排入口
+├── bundles/                  # 打包与聚合产物
+├── dist/                     # 分发产物
+├── docs/                     # 说明文档与映射文档
+├── media/                    # 截图与展示素材
+├── skills/                   # 技能主目录（按组拆分）
+├── spec/                     # 规范与规格说明
+├── template/                 # 技能模板
+├── tools/                    # 辅助工具脚本
+├── AGENTS.md                 # 仓库级 Agent 约束
+├── README.md                 # 项目总说明
+└── README_EN.md              # 英文说明
+```
+
+## 三、技能组与发布状态
+
+| 技能组 | 目录内技能数 | Marketplace 技能数 | 状态 | 说明 |
+|---|---:|---:|---|---|
+| `angular-skills` | 1 | 1 | 已发布 | — |
+| `antd-skills` | 4 | 4 | 已发布 | — |
+| `ascii-skills` | 13 | 13 | 已发布 | — |
+| `avue-skills` | 3 | 3 | 已发布 | — |
+| `build-skills` | 6 | 6 | 已发布 | — |
+| `chart-skills` | 2 | 2 | 已发布 | — |
+| `cocos-skills` | 1 | 1 | 已发布 | — |
+| `database-skills` | 5 | 5 | 已发布 | — |
+| `ddd-skills` | 6 | 6 | 已发布 | — |
+| `design-skills` | 12 | 12 | 已发布 | — |
+| `dev-utils-skills` | 13 | 13 | 已发布 | — |
+| `devops-skills` | 6 | 6 | 已发布 | — |
+| `docker-skills` | 2 | 2 | 已发布 | — |
+| `document-skills` | 5 | 9 | 已发布 | 缺少目录：docx、pptx、pdf、xlsx |
+| `drawio-skills` | 2 | 2 | 已发布 | — |
+| `electron-skills` | 3 | 3 | 已发布 | — |
+| `flutter-skills` | 2 | 2 | 已发布 | — |
+| `go-skills` | 2 | 2 | 已发布 | — |
+| `mobile-native-skills` | 2 | 2 | 已发布 | — |
+| `nodejs-skills` | 4 | 4 | 已发布 | — |
+| `nvm-skills` | 15 | 15 | 已发布 | — |
+| `ocrmypdf-skills` | 5 | 5 | 已发布 | — |
+| `openspec-skills` | 15 | 15 | 已发布 | — |
+| `pencil-skills` | 28 | 28 | 已发布 | — |
+| `python-skills` | 3 | 3 | 已发布 | — |
+| `react-skills` | 6 | 6 | 已发布 | — |
+| `social-skills` | 2 | 2 | 已发布 | — |
+| `speckit-skills` | 13 | 13 | 已发布 | — |
+| `spring-skills` | 7 | 7 | 已发布 | — |
+| `stitch-skills` | 28 | 28 | 已发布 | — |
+| `svelte-skills` | 1 | 1 | 已发布 | — |
+| `t2ui-skills` | 97 | 97 | 已发布 | — |
+| `tauri-skills` | 52 | 51 | 已发布 | 未纳入 marketplace：tauri-app-updater |
+| `teaching-skills` | 3 | 3 | 已发布 | — |
+| `testing-skills` | 9 | 9 | 已发布 | — |
+| `threejs-skills` | 18 | 0 | 仓库内未发布 | — |
+| `uniapp-skills` | 13 | 13 | 已发布 | — |
+| `utility-skills` | 3 | 3 | 已发布 | — |
+| `uview-skills` | 2 | 2 | 已发布 | — |
+| `vscode-skills` | 4 | 0 | 仓库内未发布 | — |
+| `vue-skills` | 7 | 7 | 已发布 | — |
+| `vue-ui-skills` | 4 | 4 | 已发布 | — |
+
+
+## 四、未进入 Marketplace 的仓库内技能组
+
+- `threejs-skills`：18 个技能，当前在仓库中可见，但尚未进入 `.claude-plugin/marketplace.json`。
+- `vscode-skills`：4 个技能，当前在仓库中可见，但尚未进入 `.claude-plugin/marketplace.json`。
+
+## 五、当前一致性说明
+
+- Marketplace 当前声明 410 个技能路径，其中 406 个可在仓库中直接解析。
+- `document-skills` 当前存在未落地目录引用：`docx`、`pptx`、`pdf`、`xlsx`。
+- `tauri-skills` 目录下已有技能尚未纳入 Marketplace：`tauri-app-updater`。
+
+## 六、阅读建议
+
+- 如果你要按**技能分组**理解仓库，先看 `docs/skill-group-mapping.md`。
+- 如果你要按**需求到交付流程**理解仓库，先看 `docs/pipeline-stage-to-skills.md`。
+- 如果你要按**Marketplace 发布面**理解仓库，直接以 `.claude-plugin/marketplace.json` 与本文件的“技能组与发布状态”表为准。
+- 如果你要做技能补充或重组，优先以 `skills/<group>/<skill>/SKILL.md` 的真实目录结构为准，而不是旧文档中的历史描述。

docs/skill-group-mapping.md

@@ -0,0 +1,57 @@
+# 技能分组映射表
+
+本文档定义 `skills/` 下按组子目录与技能名的对应关系，用于「先分组、后迁移」的目录重组。每组对应 `skills/<组目录名>/<skill-name>/`，且 SKILL.md 的 frontmatter `name` 必须等于 `<skill-name>`（Agent Skills 规范）。**已入 marketplace 的技能路径均应对应下表某一组**；表末 **threejs-skills / vscode-skills** 为仓库内已存在目录、**尚未** 写入 `marketplace.json` 的组。若某技能目录尚未创建（仅 marketplace 有引用），则在对应组下注明「待补目录」。
+
+## 已确定组（已迁移或待迁移）
+
+| 组目录名 | 技能名列表（即目录名） | 数量 | 说明 |
+|----------|------------------------|------|------|
+| **ascii-skills** | ascii-ansi-colorizer, ascii-cli-logo-banner, ascii-cli-logo-banner-figletjs, ascii-cli-logo-banner-python, ascii-diagram-boxflow, ascii-image-to-ascii, ascii-mini-charts, ascii-motd-profile-banner, ascii-progress-and-spinner, ascii-table-renderer, ascii-terminal-animation-pack, ascii-text-art-library, cli-ascii-logo | 13 | 与 marketplace 中 development-skills-utils 的 ASCII 相关项一致 |
+| **cocos-skills** | cocos2d-x | 1 | 游戏引擎；后续可增加 Cocos Creator 等 |
+| **antd-skills** | ant-design-vue, ant-design-react, ant-design-mobile, ant-design-mini | 4 | Ant Design 各端（Vue/React/移动端/小程序） |
+| **avue-skills** | avue, avue-crud, avue-form | 3 | Avue 基于 Element 的低代码/表单/CRUD 技能 |
+| **ddd-skills** | ddd-clean-architecture, ddd-cola, ddd-event-driven, ddd-hexagonal-architecture, ddd-microservices, ddd4j-project-creator | 6 | DDD 架构与 COLA/六边形/整洁/事件驱动/微服务及 ddd4j 项目创建 |
+| **docker-skills** | docker, docker-compose | 2 | Docker 与 Docker Compose 容器化技能 |
+| **ocrmypdf-skills** | ocrmypdf, ocrmypdf-api, ocrmypdf-batch, ocrmypdf-image, ocrmypdf-optimize | 5 | OCRmyPDF 核心 OCR、图像处理、优化压缩、批量处理、Python API |
+| **react-skills** | react, react-hooks, react-native, react-native-project-creater, redux, nextjs | 6 | React 与 React Hooks、React Native、Redux、Next.js |
+| **spring-skills** | spring-ai, spring-ai-alibaba, spring-boot, spring-cloud, spring-cloud-alibaba, spring-data-jpa, spring-security | 7 | Spring 生态：Boot、Cloud、Cloud Alibaba、AI、AI Alibaba、Security、Data JPA |
+| **uniapp-skills** | uniapp-ad, uniapp-cloud, uniapp-mini, uniapp-native-app, uniapp-native-plugin, uniapp-plugin, uniapp-project, uniapp-project-creator, uniapp-ucharts, uniapp-uview, uniappx-project, uniappx-project-creator, uniappx-uview-pro | 13 | UniApp / UniApp-x 项目创建、uView、uCharts、云开发、广告、小程序、原生 App/插件等 |
+| **uview-skills** | uview-vue2, uview-pro-vue3 | 2 | uView 2.x 与 uView Pro (Vue 3) UI 组件库 |
+| **vue-skills** | vue2, vue3, vue-router, vue-router-v3, vue-router-v4, vuex-vue2, pinia | 7 | Vue 2/3、Vue Router、Vuex、Pinia 状态管理 |
+| **flutter-skills** | flutter, flutter-project-creater | 2 | Flutter 跨平台开发与项目创建 |
+| **nodejs-skills** | express, fastify, nestjs, koa | 4 | Node.js 后端框架（Express、Fastify、NestJS、Koa） |
+| **electron-skills** | electron, electron-egg, upgradeLink | 3 | Electron 桌面应用与 Electron Egg、升级链接等 |
+| **drawio-skills** | drawio-architecture, drawio-flowchart | 2 | Draw.io 架构图与流程图绘制 |
+| **python-skills** | django, fastapi, flask | 3 | Python 后端框架（Django、FastAPI、Flask） |
+| **go-skills** | gin, gin-gonic | 2 | Go 后端框架（Gin、Gin-Gonic） |
+| **build-skills** | webpack, rollup, parcel, rspack, vite, dart-sass | 6 | 前端构建与 CSS 预处理器 |
+| **vue-ui-skills** | element-plus-vue3, bootstrap-vue3, vant-vue3, layui-vue3 | 4 | Vue 生态 UI 组件库（非 Ant/uView/Avue） |
+| **angular-skills** | angular | 1 | Angular 框架 |
+| **svelte-skills** | svelte | 1 | Svelte 框架 |
+| **mobile-native-skills** | android-kotlin, ios-swift | 2 | 原生移动端 |
+| **chart-skills** | lime-echart, ucharts | 2 | 图表组件 |
+| **dev-utils-skills** | code-generator, test-writer, java-code-comments, mybatis-plus-generator, documentation-builder, full-stack-doc, mcp-builder, webapp-testing, frontend-design, web-artifacts-builder, theme-factory, agent-browser, maven-search | 13 | 开发工具链（与 development-skills-utils 对应） |
+| **design-skills** | algorithmic-art, brand-guidelines, canvas-design, figma, figma-ai, sketch, adobe-xd, dalle, uizard, galileo-ai, runway-ml, framer | 12 | 设计与 AI 绘图（midjourney/stable-diffusion/axure/modao 待补目录则入本组） |
+| **document-skills** | docx, pptx, pdf, xlsx, doc-coauthoring, api-doc-generator, processon-mindmap, mermaid, plantuml | 9 | 文档与图表（与 document 插件对应） |
+| **testing-skills** | jest, vitest, pytest, junit, cypress, playwright, selenium, appium, detox | 9 | 测试框架与 E2E/移动端测试 |
+| **devops-skills** | gitlab-ci, github-actions, kubernetes, terraform, ansible, cloudformation | 6 | CI/CD 与 IaC（jenkins 待补目录则入本组） |
+| **database-skills** | postgresql, oracle, redis, elasticsearch, dbeaver | 5 | 数据库与工具（mysql/mongodb/navicat 待补目录则入本组） |
+| **social-skills** | internal-comms, slack-gif-creator | 2 | 协作与社交 |
+| **teaching-skills** | course-designer, learning-assessor, teaching-resource-generator | 3 | 教学与课程设计 |
+| **utility-skills** | skill-creator, skill-sop-creator, skill-installer | 3 | 技能生态工具 |
+| **stitch-skills** | stitch-design-md, stitch-mcp-create-project, stitch-mcp-generate-screen-from-text, stitch-mcp-get-project, stitch-mcp-get-screen, stitch-mcp-list-projects, stitch-mcp-list-screens, stitch-react-components, stitch-remotion, stitch-shadcn-ui, stitch-skill-creator, stitch-ued-guide, stitch-ui-design-spec-bootstrap, stitch-ui-design-spec-element-plus, stitch-ui-design-spec-generator, stitch-ui-design-spec-layui, stitch-ui-design-spec-uview, stitch-ui-design-spec-uviewpro, stitch-ui-design-spec-vant, stitch-ui-design-variants, stitch-ui-designer, stitch-ui-prompt-architect, stitch-uview-components, stitch-uviewpro-components, stitch-vue-bootstrap-components, stitch-vue-element-components, stitch-vue-layui-components, stitch-vue-vant-components | 28 | Stitch MCP 扩展技能（不含官方 google-labs-code/stitch-skills 已有项） |
+| **nvm-skills** | nvm, nvm-install, nvm-setup, nvm-verify, nvm-usage-basics, nvm-defaults-and-nvmrc, nvm-global-packages, nvm-mirror-and-auth, nvm-shell-integration, nvm-docker-ci, nvm-uninstall, nvm-misc, nvm-project-meta, nvm-troubleshooting-macos, nvm-troubleshooting-linux | 15 | Node Version Manager：安装、配置、验证、用法、.nvmrc、全局包、镜像、Shell 集成、Docker/CI、卸载、故障排查等 |
+| **threejs-skills** | threejs-dev-setup, threejs-scenes, threejs-camera, threejs-lights, threejs-materials, threejs-node-tsl, threejs-textures, threejs-geometries, threejs-math, threejs-objects, threejs-animation, threejs-audio, threejs-loaders, threejs-renderers, threejs-postprocessing, threejs-helpers, threejs-controls, threejs-webxr | 18 | three.js 官方文档向技能族（与 mermaid 深度对齐）；**当前未写入 marketplace.json**，见 [threejs-skills/README.md](../skills/threejs-skills/README.md) |
+| **vscode-skills** | vscode-deploy-package, vscode-feature-command, vscode-feature-webview, vscode-project-init | 4 | VS Code 扩展开发；**当前未写入 marketplace.json** |
+
+## 待补充组
+
+| 组目录名 | 状态 | 说明 |
+|----------|------|------|
+| **bt-skills** | 待补充 | 组目录名与技能列表由维护者后续定义 |
+
+## 迁移后路径示例
+
+- 迁移前：`skills/ascii-table-renderer/SKILL.md`
+- 迁移后：`skills/ascii-skills/ascii-table-renderer/SKILL.md`
+- marketplace 中对应项：`"./skills/ascii-skills/ascii-table-renderer"`

skills/angular-skills/angular/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

skills/angular-skills/angular/SKILL.md

@@ -0,0 +1,26 @@
+---
+name: angular
+description: Provides comprehensive guidance for Angular framework including components, modules, services, dependency injection, routing, forms, and TypeScript integration. Use when the user asks about Angular, needs to create Angular applications, implement Angular components, or work with Angular features.
+license: Complete terms in LICENSE.txt
+---
+
+## When to use this skill
+
+Use this skill whenever the user wants to:
+- 用 Angular 构建 SPA、组件、服务、路由与表单
+- 使用 CLI、RxJS、依赖注入与模块
+
+## How to use this skill
+
+1. **起步**：ng new、ng generate component/service；模块、组件、模板与绑定。
+2. **核心**：路由、HttpClient、表单（响应式/模板）；RxJS 与 async pipe。
+3. **参考**：https://angular.io/docs
+
+## Best Practices
+
+- 模块与懒加载；OnPush 与纯管道优化。
+- 服务注入与单例；取消订阅防内存泄漏。
+
+## Keywords
+
+angular, 组件, 服务, RxJS, SPA

skills/antd-skills/ant-design-mini/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

skills/antd-skills/ant-design-mini/SKILL.md

@@ -0,0 +1,187 @@
+---
+name: ant-design-mini
+description: Provides comprehensive guidance for Ant Design Mini component library for mini-programs including components, themes, and platform support. Use when the user asks about Ant Design Mini, needs to build mini-program applications, or use mini-program components.
+license: Complete terms in LICENSE.txt
+---
+
+## When to use this skill
+
+Use this skill whenever the user wants to:
+- Install and set up Ant Design Mini in a mini-program project
+- Use Ant Design Mini components in Alipay Mini Program
+- Use Ant Design Mini components in WeChat Mini Program
+- Configure Ant Design Mini (theme, i18n, etc.)
+- Use form components (Button, Input, Form, etc.)
+- Use data display components (List, Card, etc.)
+- Use feedback components (Toast, Modal, etc.)
+- Use navigation components (Tabs, NavBar, etc.)
+- Customize component styles
+- Handle component events
+- Understand Ant Design Mini API and methods
+- Troubleshoot Ant Design Mini issues
+
+## How to use this skill
+
+This skill is organized to match the Ant Design Mini official documentation structure (https://ant-design-mini.antgroup.com/guide/quick-start, https://ant-design-mini.antgroup.com/components/overview). When working with Ant Design Mini:
+
+1. **Identify the topic** from the user's request:
+   - Getting started/快速开始 → `examples/getting-started.md`
+   - Components/组件 → `examples/components/`
+   - API/API 文档 → `api/`
+
+2. **Load the appropriate example file** from the `examples/` directory:
+
+   **Getting Started (快速开始)**:
+   - `examples/getting-started.md` - Installation and setup
+   - `examples/quick-start.md` - Quick start guide
+
+   **Components (组件)**:
+   - `examples/components/overview.md` - Components overview
+   - `examples/components/button.md` - Button component
+   - `examples/components/input.md` - Input component
+   - `examples/components/form.md` - Form component
+   - `examples/components/list.md` - List component
+   - `examples/components/card.md` - Card component
+   - `examples/components/toast.md` - Toast component
+   - `examples/components/modal.md` - Modal component
+   - `examples/components/tabs.md` - Tabs component
+   - `examples/components/nav-bar.md` - NavBar component
+   - `examples/components/picker.md` - Picker component
+   - `examples/components/date-picker.md` - DatePicker component
+   - `examples/components/switch.md` - Switch component
+   - `examples/components/checkbox.md` - Checkbox component
+   - `examples/components/radio.md` - Radio component
+   - `examples/components/stepper.md` - Stepper component
+   - `examples/components/avatar.md` - Avatar component
+   - `examples/components/badge.md` - Badge component
+   - `examples/components/tag.md` - Tag component
+   - `examples/components/empty.md` - Empty component
+   - `examples/components/loading.md` - Loading component
+   - `examples/components/popup.md` - Popup component
+   - `examples/components/action-sheet.md` - ActionSheet component
+
+3. **Follow the specific instructions** in that example file for syntax, structure, and best practices
+
+   **Important Notes**:
+   - Ant Design Mini is for Alipay Mini Program and WeChat Mini Program
+   - Components use mini-program syntax (axml/json)
+   - Examples include both Alipay and WeChat syntax
+   - Each example file includes key concepts, code examples, and key points
+
+4. **Reference API documentation** in the `api/` directory when needed:
+   - `api/component-api.md` - Component API reference
+   - `api/props-and-events.md` - Props and events reference
+
+5. **Use templates** from the `templates/` directory:
+   - `templates/installation.md` - Installation templates
+   - `templates/component-usage.md` - Component usage templates
+
+### 1. Understanding Ant Design Mini
+
+Ant Design Mini is a UI component library for Alipay Mini Program and WeChat Mini Program, following Ant Design design specifications.
+
+**Key Concepts**:
+- **Mini Program Support**: Alipay and WeChat Mini Programs
+- **Design System**: Follows Ant Design design language
+- **Rich Components**: Button, Form, List, Modal, etc.
+- **Theme Customization**: Support for theme customization
+- **i18n**: Internationalization support
+
+### 2. Installation
+
+**Using npm**:
+
+```bash
+npm install antd-mini
+```
+
+**Using yarn**:
+
+```bash
+yarn add antd-mini
+```
+
+**Using pnpm**:
+
+```bash
+pnpm add antd-mini
+```
+
+### 3. Basic Setup
+
+```json
+// app.json (Alipay Mini Program)
+{
+  "usingComponents": {
+    "ant-button": "antd-mini/es/Button/index"
+  }
+}
+```
+
+```xml
+<!-- page.axml -->
+<ant-button type="primary" onTap="handleTap">Button</ant-button>
+```
+
+
+### Doc mapping (one-to-one with official documentation)
+
+**Guide (指南)**:
+- See guide files in `examples/guide/` or `examples/getting-started/` → https://ant-design-mini.antgroup.com/guide/quick-start
+
+**Components (组件)**:
+- See component files in `examples/components/` → https://ant-design-mini.antgroup.com/components/overview
+
+## Examples and Templates
+
+This skill includes detailed examples organized to match the official documentation structure. All examples are in the `examples/` directory (see mapping above).
+
+**To use examples:**
+- Identify the topic from the user's request
+- Load the appropriate example file from the mapping above
+- Follow the instructions, syntax, and best practices in that file
+- Adapt the code examples to your specific use case
+
+**To use templates:**
+- Reference templates in `templates/` directory for common scaffolding
+- Adapt templates to your specific needs and coding style
+
+## API Reference
+
+Detailed API documentation is available in the `api/` directory, organized to match the official Ant Design Mini API documentation structure:
+
+### Component API (`api/component-api.md`)
+- Component props and events
+- Component methods
+- Component slots
+
+### Props and Events (`api/props-and-events.md`)
+- Common props
+- Common events
+- Event handling
+
+**To use API reference:**
+1. Identify the API you need help with
+2. Load the corresponding API file from the `api/` directory
+3. Find the API signature, parameters, return type, and examples
+4. Reference the linked example files for detailed usage patterns
+5. All API files include links to relevant example files in the `examples/` directory
+
+## Best Practices
+
+1. **Register components**: Register components in app.json or page.json
+2. **Use correct syntax**: Use axml for Alipay, wxml for WeChat
+3. **Handle events**: Use onTap for Alipay, bindtap for WeChat
+4. **Customize theme**: Use theme variables for customization
+5. **Follow design specs**: Follow Ant Design design specifications
+
+## Resources
+
+- **Official Documentation**: https://ant-design-mini.antgroup.com/
+- **Quick Start**: https://ant-design-mini.antgroup.com/guide/quick-start
+- **Components**: https://ant-design-mini.antgroup.com/components/overview
+- **GitHub Repository**: https://github.com/ant-design/ant-design-mini
+
+## Keywords
+
+Ant Design Mini, ant-design-mini, antd-mini, mini program, Alipay Mini Program, WeChat Mini Program, 小程序, 支付宝小程序, 微信小程序, 组件库, UI components, Button, Form, List, Modal, Toast, Tabs, NavBar, 按钮, 表单, 列表, 弹窗, 提示, 标签页, 导航栏

skills/antd-skills/ant-design-mini/api/component-api.md

@@ -0,0 +1,72 @@
+# Component API
+
+## API Reference
+
+Ant Design Mini component props, events, and methods.
+
+### Common Props
+
+Most components support:
+- `className` - Custom class name
+- `style` - Custom style
+- `disabled` - Disabled state
+
+### Common Events
+
+Most components emit:
+- `onTap` / `bindtap` - Tap event (Alipay/WeChat)
+- `onChange` / `bindchange` - Change event
+
+### Button Component
+
+**Props:**
+- `type` - Button type (primary, default, text)
+- `size` - Button size (large, medium, small)
+- `disabled` - Disabled state
+- `loading` - Loading state
+- `icon` - Icon name
+
+**Events:**
+- `onTap` / `bindtap` - Click event
+
+### Input Component
+
+**Props:**
+- `value` - Input value
+- `placeholder` - Placeholder text
+- `type` - Input type (text, number, password)
+- `disabled` - Disabled state
+- `readonly` - Readonly state
+- `maxlength` - Max length
+- `allowClear` - Show clear button
+
+**Events:**
+- `onInput` / `bindinput` - Input event
+- `onFocus` / `bindfocus` - Focus event
+- `onBlur` / `bindblur` - Blur event
+
+### Form Component
+
+**Props:**
+- `onFinish` - Submit handler
+- `onFinishFailed` - Validation failed handler
+
+**Events:**
+- `onFinish` - Form submit event
+- `onFinishFailed` - Validation failed event
+
+### Modal Component
+
+**Props:**
+- `visible` - Modal visibility
+- `title` - Modal title
+- `onClose` - Close handler
+- `onOk` - OK handler
+- `onCancel` - Cancel handler
+
+**Events:**
+- `onClose` - Close event
+- `onOk` - OK event
+- `onCancel` - Cancel event
+
+**See also:** `examples/components/` for detailed component examples

skills/antd-skills/ant-design-mini/api/props-and-events.md

@@ -0,0 +1,87 @@
+# Props and Events
+
+## API Reference
+
+Common props and events in Ant Design Mini components.
+
+### Common Props
+
+#### className
+
+**Type:** `string`
+
+Custom CSS class name.
+
+#### style
+
+**Type:** `string | object`
+
+Custom inline style.
+
+#### disabled
+
+**Type:** `boolean`
+
+**Default:** `false`
+
+Whether component is disabled.
+
+### Common Events
+
+#### onTap / bindtap
+
+**Type:** `Function`
+
+Tap/click event handler.
+
+**Platform Differences:**
+- Alipay: `onTap`
+- WeChat: `bindtap`
+
+**Example:**
+```xml
+<!-- Alipay -->
+<ant-button onTap="handleTap">Button</ant-button>
+
+<!-- WeChat -->
+<ant-button bindtap="handleTap">Button</ant-button>
+```
+
+#### onChange / bindchange
+
+**Type:** `Function`
+
+Change event handler.
+
+**Platform Differences:**
+- Alipay: `onChange`
+- WeChat: `bindchange`
+
+**Example:**
+```xml
+<!-- Alipay -->
+<ant-input onChange="handleChange" />
+
+<!-- WeChat -->
+<ant-input bindchange="handleChange" />
+```
+
+### Event Object
+
+Event handlers receive an event object:
+
+```javascript
+handleEvent(e) {
+  // e.detail.value - Value from component
+  // e.currentTarget - Current target element
+  // e.currentTarget.dataset - Data attributes
+}
+```
+
+### Platform Compatibility
+
+**Event Naming:**
+- Alipay uses `on*` prefix (onTap, onChange, onInput)
+- WeChat uses `bind*` prefix (bindtap, bindchange, bindinput)
+
+**See also:** `examples/components/` for component-specific examples

skills/antd-skills/ant-design-mini/examples/components/action-sheet.md

@@ -0,0 +1,75 @@
+# ActionSheet Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the ActionSheet component in Ant Design Mini.
+
+### Key Concepts
+
+- Action sheet display
+- Action items
+- Action sheet events
+- Action sheet styling
+
+### Example: Basic ActionSheet
+
+```xml
+<ant-action-sheet 
+  visible="{{visible}}"
+  actions="{{actions}}"
+  onClose="handleClose"
+  onAction="handleAction"
+/>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    visible: false,
+    actions: [
+      { text: 'Option 1', value: '1' },
+      { text: 'Option 2', value: '2' },
+      { text: 'Cancel', value: 'cancel', type: 'cancel' }
+    ]
+  },
+  showActionSheet() {
+    this.setData({ visible: true })
+  },
+  handleClose() {
+    this.setData({ visible: false })
+  },
+  handleAction(e) {
+    console.log('Action:', e.detail.value)
+    this.setData({ visible: false })
+  }
+})
+```
+
+### Example: ActionSheet API
+
+```javascript
+// Using ActionSheet API
+import { ActionSheet } from 'antd-mini'
+
+ActionSheet.show({
+  actions: [
+    { text: 'Option 1', value: '1' },
+    { text: 'Option 2', value: '2' }
+  ],
+  onAction: (value) => {
+    console.log('Selected:', value)
+  }
+})
+```
+
+### Key Points
+
+- Configure actions array
+- Handle onAction event
+- Support cancel action
+- Use ActionSheet API for programmatic control
+- Control visibility with visible prop

skills/antd-skills/ant-design-mini/examples/components/avatar.md

@@ -0,0 +1,55 @@
+# Avatar Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Avatar component in Ant Design Mini.
+
+### Key Concepts
+
+- Avatar image
+- Avatar size
+- Avatar shape
+- Avatar fallback
+
+### Example: Basic Avatar
+
+```xml
+<ant-avatar src="{{avatarUrl}}" />
+```
+
+### Example: Avatar Sizes
+
+```xml
+<ant-avatar src="{{avatarUrl}}" size="large" />
+<ant-avatar src="{{avatarUrl}}" size="medium" />
+<ant-avatar src="{{avatarUrl}}" size="small" />
+```
+
+### Example: Avatar Shape
+
+```xml
+<ant-avatar src="{{avatarUrl}}" shape="circle" />
+<ant-avatar src="{{avatarUrl}}" shape="square" />
+```
+
+### Example: Avatar with Fallback
+
+```xml
+<ant-avatar 
+  src="{{avatarUrl}}"
+  onError="handleError"
+>
+  <text>User</text>
+</ant-avatar>
+```
+
+### Key Points
+
+- Use src for image URL
+- Configure size (large, medium, small)
+- Set shape (circle, square)
+- Handle image error
+- Support text fallback

skills/antd-skills/ant-design-mini/examples/components/badge.md

@@ -0,0 +1,61 @@
+# Badge Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Badge component in Ant Design Mini.
+
+### Key Concepts
+
+- Badge count
+- Badge dot
+- Badge position
+- Badge styling
+
+### Example: Basic Badge
+
+```xml
+<ant-badge count="{{count}}">
+  <ant-button>Button</ant-button>
+</ant-badge>
+```
+
+### Example: Badge Dot
+
+```xml
+<ant-badge dot>
+  <ant-button>Button</ant-button>
+</ant-badge>
+```
+
+### Example: Badge Position
+
+```xml
+<ant-badge 
+  count="{{count}}"
+  position="topRight"
+>
+  <ant-button>Button</ant-button>
+</ant-badge>
+```
+
+### Example: Badge with Max
+
+```xml
+<ant-badge 
+  count="{{count}}"
+  max="99"
+>
+  <ant-button>Button</ant-button>
+</ant-badge>
+```
+
+### Key Points
+
+- Wrap content with badge
+- Set count for number badge
+- Use dot for dot badge
+- Configure position
+- Set max for overflow

skills/antd-skills/ant-design-mini/examples/components/button.md

@@ -0,0 +1,81 @@
+# Button Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Button component in Ant Design Mini.
+
+### Key Concepts
+
+- Button types
+- Button sizes
+- Button states
+- Button events
+
+### Example: Basic Button
+
+```xml
+<!-- Alipay -->
+<ant-button type="primary">Primary</ant-button>
+<ant-button type="default">Default</ant-button>
+<ant-button type="text">Text</ant-button>
+```
+
+```xml
+<!-- WeChat -->
+<ant-button type="primary">Primary</ant-button>
+<ant-button type="default">Default</ant-button>
+<ant-button type="text">Text</ant-button>
+```
+
+### Example: Button Sizes
+
+```xml
+<ant-button size="large">Large</ant-button>
+<ant-button size="medium">Medium</ant-button>
+<ant-button size="small">Small</ant-button>
+```
+
+### Example: Button States
+
+```xml
+<ant-button disabled>Disabled</ant-button>
+<ant-button loading>Loading</ant-button>
+```
+
+### Example: Button Events
+
+```xml
+<!-- Alipay -->
+<ant-button type="primary" onTap="handleTap">Click Me</ant-button>
+```
+
+```xml
+<!-- WeChat -->
+<ant-button type="primary" bindtap="handleTap">Click Me</ant-button>
+```
+
+```javascript
+// page.js
+Page({
+  handleTap() {
+    console.log('Button clicked')
+  }
+})
+```
+
+### Example: Button with Icon
+
+```xml
+<ant-button icon="user">With Icon</ant-button>
+```
+
+### Key Points
+
+- Multiple types: primary, default, text
+- Multiple sizes: large, medium, small
+- Support disabled and loading states
+- Icon support
+- Use onTap (Alipay) or bindtap (WeChat)

skills/antd-skills/ant-design-mini/examples/components/card.md

@@ -0,0 +1,58 @@
+# Card Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Card component in Ant Design Mini.
+
+### Key Concepts
+
+- Card content
+- Card header
+- Card actions
+- Card styling
+
+### Example: Basic Card
+
+```xml
+<ant-card title="Card Title">
+  <view>Card Content</view>
+</ant-card>
+```
+
+### Example: Card with Actions
+
+```xml
+<ant-card 
+  title="Card Title"
+  extra="Extra"
+>
+  <view>Card Content</view>
+  <view slot="actions">
+    <ant-button size="small">Action</ant-button>
+  </view>
+</ant-card>
+```
+
+### Example: Card with Image
+
+```xml
+<ant-card>
+  <image 
+    slot="cover"
+    src="{{imageUrl}}"
+    mode="aspectFit"
+  />
+  <view>Card Content</view>
+</ant-card>
+```
+
+### Key Points
+
+- Use title for card title
+- Use extra for header extra
+- Support cover slot for image
+- Support actions slot
+- Customize card content

skills/antd-skills/ant-design-mini/examples/components/checkbox.md

@@ -0,0 +1,94 @@
+# Checkbox Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Checkbox component in Ant Design Mini.
+
+### Key Concepts
+
+- Single checkbox
+- Checkbox group
+- Checkbox states
+- Checkbox events
+
+### Example: Basic Checkbox
+
+```xml
+<!-- Alipay -->
+<ant-checkbox 
+  checked="{{checked}}"
+  onChange="handleChange"
+>
+  Checkbox
+</ant-checkbox>
+```
+
+```xml
+<!-- WeChat -->
+<ant-checkbox 
+  checked="{{checked}}"
+  bindchange="handleChange"
+>
+  Checkbox
+</ant-checkbox>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    checked: false
+  },
+  handleChange(e) {
+    this.setData({
+      checked: e.detail.value
+    })
+  }
+})
+```
+
+### Example: Checkbox Group
+
+```xml
+<ant-checkbox-group 
+  value="{{checkedList}}"
+  onChange="handleGroupChange"
+>
+  <ant-checkbox value="1">Option 1</ant-checkbox>
+  <ant-checkbox value="2">Option 2</ant-checkbox>
+  <ant-checkbox value="3">Option 3</ant-checkbox>
+</ant-checkbox-group>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    checkedList: []
+  },
+  handleGroupChange(e) {
+    this.setData({
+      checkedList: e.detail.value
+    })
+  }
+})
+```
+
+### Example: Checkbox States
+
+```xml
+<ant-checkbox checked="{{checked}}" disabled>
+  Disabled
+</ant-checkbox>
+```
+
+### Key Points
+
+- Use checked prop for state
+- Handle onChange/bindchange event
+- Use checkbox-group for multiple checkboxes
+- Support disabled state
+- Value array for group

skills/antd-skills/ant-design-mini/examples/components/date-picker.md

@@ -0,0 +1,78 @@
+# DatePicker Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the DatePicker component in Ant Design Mini.
+
+### Key Concepts
+
+- Date selection
+- Date range
+- Date format
+- Date picker types
+
+### Example: Basic DatePicker
+
+```xml
+<ant-date-picker 
+  value="{{date}}"
+  onOk="handleDateOk"
+/>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    date: ''
+  },
+  handleDateOk(e) {
+    this.setData({
+      date: e.detail.value
+    })
+  }
+})
+```
+
+### Example: Date Range
+
+```xml
+<ant-date-picker 
+  value="{{dateRange}}"
+  mode="range"
+  onOk="handleRangeOk"
+/>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    dateRange: []
+  },
+  handleRangeOk(e) {
+    this.setData({
+      dateRange: e.detail.value
+    })
+  }
+})
+```
+
+### Example: Date Picker Types
+
+```xml
+<ant-date-picker mode="date" />
+<ant-date-picker mode="time" />
+<ant-date-picker mode="datetime" />
+```
+
+### Key Points
+
+- Use value for selected date
+- Handle onOk event
+- Support date range mode
+- Multiple picker types
+- Format date display

skills/antd-skills/ant-design-mini/examples/components/empty.md

@@ -0,0 +1,56 @@
+# Empty Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Empty component in Ant Design Mini.
+
+### Key Concepts
+
+- Empty state
+- Empty description
+- Empty image
+- Empty actions
+
+### Example: Basic Empty
+
+```xml
+<ant-empty description="No Data" />
+```
+
+### Example: Empty with Image
+
+```xml
+<ant-empty 
+  image="{{imageUrl}}"
+  description="No Data"
+/>
+```
+
+### Example: Empty with Actions
+
+```xml
+<ant-empty description="No Data">
+  <ant-button type="primary" onTap="handleAction">
+    Refresh
+  </ant-button>
+</ant-empty>
+```
+
+### Example: Empty Types
+
+```xml
+<ant-empty type="empty" description="Empty" />
+<ant-empty type="error" description="Error" />
+<ant-empty type="network" description="Network Error" />
+```
+
+### Key Points
+
+- Use description for text
+- Customize image
+- Add action buttons
+- Multiple empty types
+- Simple empty state display

skills/antd-skills/ant-design-mini/examples/components/form.md

@@ -0,0 +1,81 @@
+# Form Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Form component in Ant Design Mini.
+
+### Key Concepts
+
+- Form structure
+- Form validation
+- Form submission
+- Form fields
+
+### Example: Basic Form
+
+```xml
+<ant-form onFinish="handleSubmit">
+  <ant-form-item label="Name" name="name">
+    <ant-input value="{{form.name}}" onInput="handleNameInput" />
+  </ant-form-item>
+  <ant-form-item label="Email" name="email">
+    <ant-input value="{{form.email}}" onInput="handleEmailInput" />
+  </ant-form-item>
+  <ant-form-item>
+    <ant-button type="primary" formType="submit">Submit</ant-button>
+  </ant-form-item>
+</ant-form>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    form: {
+      name: '',
+      email: ''
+    }
+  },
+  handleNameInput(e) {
+    this.setData({
+      'form.name': e.detail.value
+    })
+  },
+  handleEmailInput(e) {
+    this.setData({
+      'form.email': e.detail.value
+    })
+  },
+  handleSubmit(e) {
+    console.log('Form data:', this.data.form)
+  }
+})
+```
+
+### Example: Form Validation
+
+```xml
+<ant-form 
+  onFinish="handleSubmit"
+  onFinishFailed="handleFailed"
+>
+  <ant-form-item 
+    label="Name" 
+    name="name"
+    rules="{{[{required: true, message: 'Name is required'}]}}"
+  >
+    <ant-input value="{{form.name}}" onInput="handleNameInput" />
+  </ant-form-item>
+</ant-form>
+```
+
+### Key Points
+
+- Use ant-form for form container
+- Use ant-form-item for form fields
+- Configure validation rules
+- Handle form submission
+- Use formType="submit" on button

skills/antd-skills/ant-design-mini/examples/components/input.md

@@ -0,0 +1,92 @@
+# Input Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Input component in Ant Design Mini.
+
+### Key Concepts
+
+- Input types
+- Input states
+- Input events
+- Input validation
+
+### Example: Basic Input
+
+```xml
+<!-- Alipay -->
+<ant-input 
+  value="{{value}}" 
+  placeholder="Enter text"
+  onInput="handleInput"
+/>
+```
+
+```xml
+<!-- WeChat -->
+<ant-input 
+  value="{{value}}" 
+  placeholder="Enter text"
+  bindinput="handleInput"
+/>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    value: ''
+  },
+  handleInput(e) {
+    this.setData({
+      value: e.detail.value
+    })
+  }
+})
+```
+
+### Example: Input Types
+
+```xml
+<ant-input type="text" placeholder="Text" />
+<ant-input type="number" placeholder="Number" />
+<ant-input type="password" placeholder="Password" />
+```
+
+### Example: Input States
+
+```xml
+<ant-input disabled placeholder="Disabled" />
+<ant-input readonly value="Readonly" />
+```
+
+### Example: Input with Clear
+
+```xml
+<ant-input 
+  value="{{value}}"
+  allowClear
+  onInput="handleInput"
+/>
+```
+
+### Example: Input Validation
+
+```xml
+<ant-input 
+  value="{{value}}"
+  maxlength="10"
+  onInput="handleInput"
+/>
+```
+
+### Key Points
+
+- Use value and onInput/bindinput for two-way binding
+- Support multiple input types
+- Support disabled and readonly states
+- Allow clear button
+- Support maxlength validation

skills/antd-skills/ant-design-mini/examples/components/list.md

@@ -0,0 +1,80 @@
+# List Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the List component in Ant Design Mini.
+
+### Key Concepts
+
+- List items
+- List rendering
+- List events
+- List styling
+
+### Example: Basic List
+
+```xml
+<ant-list>
+  <ant-list-item>Item 1</ant-list-item>
+  <ant-list-item>Item 2</ant-list-item>
+  <ant-list-item>Item 3</ant-list-item>
+</ant-list>
+```
+
+### Example: List with Data
+
+```xml
+<ant-list>
+  <ant-list-item 
+    wx:for="{{items}}" 
+    wx:key="index"
+    onTap="handleItemTap"
+    data-index="{{index}}"
+  >
+    {{item.title}}
+  </ant-list-item>
+</ant-list>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    items: [
+      { title: 'Item 1' },
+      { title: 'Item 2' },
+      { title: 'Item 3' }
+    ]
+  },
+  handleItemTap(e) {
+    const index = e.currentTarget.dataset.index
+    console.log('Item tapped:', this.data.items[index])
+  }
+})
+```
+
+### Example: List with Actions
+
+```xml
+<ant-list-item 
+  title="Title"
+  brief="Description"
+  arrow
+  onTap="handleTap"
+>
+  <view slot="extra">
+    <ant-button size="small">Action</ant-button>
+  </view>
+</ant-list-item>
+```
+
+### Key Points
+
+- Use ant-list for list container
+- Use ant-list-item for list items
+- Support title, brief, arrow props
+- Handle item tap events
+- Support custom slots

skills/antd-skills/ant-design-mini/examples/components/loading.md

@@ -0,0 +1,65 @@
+# Loading Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Loading component in Ant Design Mini.
+
+### Key Concepts
+
+- Loading display
+- Loading types
+- Loading text
+- Loading API
+
+### Example: Loading Component
+
+```xml
+<ant-loading 
+  visible="{{loading}}"
+  type="spinner"
+  tip="Loading..."
+/>
+```
+
+### Example: Loading API
+
+```javascript
+// Using Loading API
+import { Loading } from 'antd-mini'
+
+// Show loading
+Loading.show({
+  type: 'spinner',
+  tip: 'Loading...'
+})
+
+// Hide loading
+Loading.hide()
+```
+
+### Example: Loading Types
+
+```xml
+<ant-loading type="spinner" />
+<ant-loading type="circular" />
+```
+
+### Example: Loading with Text
+
+```xml
+<ant-loading 
+  visible="{{loading}}"
+  tip="Please wait..."
+/>
+```
+
+### Key Points
+
+- Control visibility with visible prop
+- Use Loading API for programmatic control
+- Multiple loading types
+- Customize loading text
+- Simple loading indicator

skills/antd-skills/ant-design-mini/examples/components/modal.md

@@ -0,0 +1,79 @@
+# Modal Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Modal component in Ant Design Mini.
+
+### Key Concepts
+
+- Modal display
+- Modal content
+- Modal actions
+- Modal events
+
+### Example: Basic Modal
+
+```xml
+<ant-modal 
+  visible="{{visible}}"
+  title="Title"
+  onClose="handleClose"
+>
+  <view>Modal Content</view>
+</ant-modal>
+<ant-button onTap="showModal">Show Modal</ant-button>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    visible: false
+  },
+  showModal() {
+    this.setData({ visible: true })
+  },
+  handleClose() {
+    this.setData({ visible: false })
+  }
+})
+```
+
+### Example: Modal with Actions
+
+```xml
+<ant-modal 
+  visible="{{visible}}"
+  title="Confirm"
+  onOk="handleOk"
+  onCancel="handleCancel"
+>
+  <view>Are you sure?</view>
+</ant-modal>
+```
+
+### Example: Modal API
+
+```javascript
+// Using Modal API
+import { Modal } from 'antd-mini'
+
+Modal.confirm({
+  title: 'Confirm',
+  content: 'Are you sure?',
+  onOk: () => {
+    console.log('Confirmed')
+  }
+})
+```
+
+### Key Points
+
+- Control visibility with visible prop
+- Handle onClose event
+- Support onOk and onCancel
+- Use Modal API for programmatic control
+- Customize modal content

skills/antd-skills/ant-design-mini/examples/components/nav-bar.md

@@ -0,0 +1,64 @@
+# NavBar Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the NavBar component in Ant Design Mini.
+
+### Key Concepts
+
+- NavBar title
+- NavBar back button
+- NavBar actions
+- NavBar events
+
+### Example: Basic NavBar
+
+```xml
+<ant-nav-bar 
+  title="Title"
+  onBack="handleBack"
+/>
+```
+
+```javascript
+// page.js
+Page({
+  handleBack() {
+    // Navigate back
+    my.navigateBack()
+  }
+})
+```
+
+### Example: NavBar with Actions
+
+```xml
+<ant-nav-bar 
+  title="Title"
+  onBack="handleBack"
+>
+  <view slot="right">
+    <ant-button size="small">Action</ant-button>
+  </view>
+</ant-nav-bar>
+```
+
+### Example: NavBar without Back
+
+```xml
+<ant-nav-bar 
+  title="Title"
+  showBack="{{false}}"
+/>
+```
+
+### Key Points
+
+- Set title for navbar
+- Handle onBack event
+- Show/hide back button
+- Support right slot for actions
+- Customize navbar appearance

skills/antd-skills/ant-design-mini/examples/components/overview.md

@@ -0,0 +1,60 @@
+# Components Overview
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example provides an overview of Ant Design Mini components.
+
+### Key Concepts
+
+- Component categories
+- Component list
+- Component usage
+- Platform compatibility
+
+### Example: Component Categories
+
+**Form Components (表单组件)**:
+- Button, Input, Form, FormItem
+- Switch, Checkbox, Radio
+- Picker, DatePicker, Stepper
+
+**Data Display (数据展示)**:
+- List, ListItem
+- Card
+- Avatar, Badge, Tag
+- Empty
+
+**Feedback (反馈)**:
+- Toast, Modal
+- Loading
+- Popup, ActionSheet
+
+**Navigation (导航)**:
+- Tabs, TabItem
+- NavBar
+
+### Example: Component Registration
+
+```json
+// app.json
+{
+  "usingComponents": {
+    "ant-button": "antd-mini/es/Button/index",
+    "ant-input": "antd-mini/es/Input/index",
+    "ant-form": "antd-mini/es/Form/index",
+    "ant-list": "antd-mini/es/List/index",
+    "ant-modal": "antd-mini/es/Modal/index"
+  }
+}
+```
+
+### Key Points
+
+- Components organized by category
+- Register components before use
+- Compatible with Alipay and WeChat
+- Follow Ant Design design specs
+- Rich component ecosystem

skills/antd-skills/ant-design-mini/examples/components/picker.md

@@ -0,0 +1,84 @@
+# Picker Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Picker component in Ant Design Mini.
+
+### Key Concepts
+
+- Picker options
+- Picker selection
+- Picker events
+- Multi-column picker
+
+### Example: Basic Picker
+
+```xml
+<ant-picker 
+  value="{{selectedValue}}"
+  options="{{options}}"
+  onOk="handlePickerOk"
+  onCancel="handlePickerCancel"
+>
+  <view>Select: {{selectedValue}}</view>
+</ant-picker>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    selectedValue: '',
+    options: [
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+      { label: 'Option 3', value: '3' }
+    ]
+  },
+  handlePickerOk(e) {
+    this.setData({
+      selectedValue: e.detail.value
+    })
+  }
+})
+```
+
+### Example: Multi-column Picker
+
+```xml
+<ant-picker 
+  value="{{selectedValues}}"
+  columns="{{columns}}"
+  onOk="handlePickerOk"
+/>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    selectedValues: [],
+    columns: [
+      [
+        { label: 'A', value: 'a' },
+        { label: 'B', value: 'b' }
+      ],
+      [
+        { label: '1', value: '1' },
+        { label: '2', value: '2' }
+      ]
+    ]
+  }
+})
+```
+
+### Key Points
+
+- Configure options array
+- Handle onOk event for selection
+- Support single and multi-column
+- Use value for controlled component
+- Customize picker display

skills/antd-skills/ant-design-mini/examples/components/popup.md

@@ -0,0 +1,74 @@
+# Popup Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Popup component in Ant Design Mini.
+
+### Key Concepts
+
+- Popup display
+- Popup position
+- Popup mask
+- Popup events
+
+### Example: Basic Popup
+
+```xml
+<ant-popup 
+  visible="{{popupVisible}}"
+  onClose="handleClose"
+>
+  <view>Popup Content</view>
+</ant-popup>
+<ant-button onTap="showPopup">Show Popup</ant-button>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    popupVisible: false
+  },
+  showPopup() {
+    this.setData({ popupVisible: true })
+  },
+  handleClose() {
+    this.setData({ popupVisible: false })
+  }
+})
+```
+
+### Example: Popup Position
+
+```xml
+<ant-popup 
+  visible="{{visible}}"
+  position="bottom"
+  onClose="handleClose"
+>
+  <view>Bottom Popup</view>
+</ant-popup>
+```
+
+### Example: Popup without Mask
+
+```xml
+<ant-popup 
+  visible="{{visible}}"
+  mask="{{false}}"
+  onClose="handleClose"
+>
+  <view>Popup</view>
+</ant-popup>
+```
+
+### Key Points
+
+- Control visibility with visible prop
+- Configure position (top, bottom, left, right, center)
+- Show/hide mask
+- Handle onClose event
+- Customize popup content

skills/antd-skills/ant-design-mini/examples/components/radio.md

@@ -0,0 +1,56 @@
+# Radio Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Radio component in Ant Design Mini.
+
+### Key Concepts
+
+- Single radio
+- Radio group
+- Radio states
+- Radio events
+
+### Example: Basic Radio
+
+```xml
+<ant-radio-group 
+  value="{{value}}"
+  onChange="handleChange"
+>
+  <ant-radio value="1">Option 1</ant-radio>
+  <ant-radio value="2">Option 2</ant-radio>
+  <ant-radio value="3">Option 3</ant-radio>
+</ant-radio-group>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    value: '1'
+  },
+  handleChange(e) {
+    this.setData({
+      value: e.detail.value
+    })
+  }
+})
+```
+
+### Example: Radio States
+
+```xml
+<ant-radio value="1" disabled>Disabled</ant-radio>
+```
+
+### Key Points
+
+- Use radio-group for radio groups
+- Set value for each radio
+- Handle onChange/bindchange event
+- Support disabled state
+- Single selection only

skills/antd-skills/ant-design-mini/examples/components/stepper.md

@@ -0,0 +1,76 @@
+# Stepper Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Stepper component in Ant Design Mini.
+
+### Key Concepts
+
+- Stepper value
+- Stepper min/max
+- Stepper step
+- Stepper events
+
+### Example: Basic Stepper
+
+```xml
+<!-- Alipay -->
+<ant-stepper 
+  value="{{value}}"
+  onChange="handleChange"
+/>
+```
+
+```xml
+<!-- WeChat -->
+<ant-stepper 
+  value="{{value}}"
+  bindchange="handleChange"
+/>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    value: 1
+  },
+  handleChange(e) {
+    this.setData({
+      value: e.detail.value
+    })
+  }
+})
+```
+
+### Example: Stepper with Limits
+
+```xml
+<ant-stepper 
+  value="{{value}}"
+  min="0"
+  max="10"
+  step="1"
+  onChange="handleChange"
+/>
+```
+
+### Example: Stepper Disabled
+
+```xml
+<ant-stepper 
+  value="{{value}}"
+  disabled
+/>
+```
+
+### Key Points
+
+- Use value for current value
+- Set min and max limits
+- Configure step increment
+- Handle onChange/bindchange event
+- Support disabled state

skills/antd-skills/ant-design-mini/examples/components/switch.md

@@ -0,0 +1,72 @@
+# Switch Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Switch component in Ant Design Mini.
+
+### Key Concepts
+
+- Switch state
+- Switch events
+- Switch styling
+- Switch sizes
+
+### Example: Basic Switch
+
+```xml
+<!-- Alipay -->
+<ant-switch 
+  checked="{{checked}}"
+  onChange="handleSwitchChange"
+/>
+```
+
+```xml
+<!-- WeChat -->
+<ant-switch 
+  checked="{{checked}}"
+  bindchange="handleSwitchChange"
+/>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    checked: false
+  },
+  handleSwitchChange(e) {
+    this.setData({
+      checked: e.detail.value
+    })
+  }
+})
+```
+
+### Example: Switch with Label
+
+```xml
+<ant-switch 
+  checked="{{checked}}"
+  onChange="handleSwitchChange"
+>
+  Enable Feature
+</ant-switch>
+```
+
+### Example: Switch States
+
+```xml
+<ant-switch checked="{{checked}}" disabled />
+```
+
+### Key Points
+
+- Use checked prop for state
+- Handle onChange/bindchange event
+- Support disabled state
+- Can include label text
+- Simple toggle control

skills/antd-skills/ant-design-mini/examples/components/tabs.md

@@ -0,0 +1,86 @@
+# Tabs Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Tabs component in Ant Design Mini.
+
+### Key Concepts
+
+- Tab items
+- Tab switching
+- Tab events
+- Tab styling
+
+### Example: Basic Tabs
+
+```xml
+<ant-tabs 
+  current="{{currentTab}}"
+  onChange="handleTabChange"
+>
+  <ant-tab-item title="Tab 1" key="1">
+    Content 1
+  </ant-tab-item>
+  <ant-tab-item title="Tab 2" key="2">
+    Content 2
+  </ant-tab-item>
+  <ant-tab-item title="Tab 3" key="3">
+    Content 3
+  </ant-tab-item>
+</ant-tabs>
+```
+
+```javascript
+// page.js
+Page({
+  data: {
+    currentTab: '1'
+  },
+  handleTabChange(e) {
+    this.setData({
+      currentTab: e.detail.key
+    })
+  }
+})
+```
+
+### Example: Tabs with Data
+
+```xml
+<ant-tabs 
+  current="{{currentTab}}"
+  onChange="handleTabChange"
+>
+  <ant-tab-item 
+    wx:for="{{tabs}}" 
+    wx:key="key"
+    title="{{item.title}}" 
+    key="{{item.key}}"
+  >
+    {{item.content}}
+  </ant-tab-item>
+</ant-tabs>
+```
+
+### Example: Scrollable Tabs
+
+```xml
+<ant-tabs 
+  current="{{currentTab}}"
+  scrollable
+  onChange="handleTabChange"
+>
+  <!-- Tab items -->
+</ant-tabs>
+```
+
+### Key Points
+
+- Use ant-tabs for container
+- Use ant-tab-item for each tab
+- Control current tab with current prop
+- Handle onChange event
+- Support scrollable tabs

skills/antd-skills/ant-design-mini/examples/components/tag.md

@@ -0,0 +1,61 @@
+# Tag Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Tag component in Ant Design Mini.
+
+### Key Concepts
+
+- Tag types
+- Tag sizes
+- Tag closable
+- Tag events
+
+### Example: Basic Tag
+
+```xml
+<ant-tag>Tag</ant-tag>
+<ant-tag type="primary">Primary</ant-tag>
+<ant-tag type="success">Success</ant-tag>
+<ant-tag type="warning">Warning</ant-tag>
+<ant-tag type="error">Error</ant-tag>
+```
+
+### Example: Tag Sizes
+
+```xml
+<ant-tag size="large">Large</ant-tag>
+<ant-tag size="medium">Medium</ant-tag>
+<ant-tag size="small">Small</ant-tag>
+```
+
+### Example: Closable Tag
+
+```xml
+<ant-tag 
+  closable
+  onClose="handleClose"
+>
+  Closable Tag
+</ant-tag>
+```
+
+```javascript
+// page.js
+Page({
+  handleClose() {
+    // Remove tag
+  }
+})
+```
+
+### Key Points
+
+- Multiple types: primary, success, warning, error
+- Multiple sizes: large, medium, small
+- Support closable
+- Handle onClose event
+- Customize tag appearance

skills/antd-skills/ant-design-mini/examples/components/toast.md

@@ -0,0 +1,72 @@
+# Toast Component
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates the Toast component in Ant Design Mini.
+
+### Key Concepts
+
+- Toast display
+- Toast types
+- Toast duration
+- Toast API
+
+### Example: Toast Component
+
+```xml
+<ant-toast 
+  visible="{{toastVisible}}"
+  content="{{toastContent}}"
+  type="{{toastType}}"
+/>
+```
+
+### Example: Toast API
+
+```javascript
+// Using Toast API
+import { Toast } from 'antd-mini'
+
+// Success toast
+Toast.show({
+  type: 'success',
+  content: 'Success!',
+  duration: 2000
+})
+
+// Error toast
+Toast.show({
+  type: 'fail',
+  content: 'Error!',
+  duration: 2000
+})
+
+// Loading toast
+Toast.show({
+  type: 'loading',
+  content: 'Loading...'
+})
+
+// Hide toast
+Toast.hide()
+```
+
+### Example: Toast Types
+
+```javascript
+Toast.show({ type: 'success', content: 'Success' })
+Toast.show({ type: 'fail', content: 'Error' })
+Toast.show({ type: 'loading', content: 'Loading' })
+Toast.show({ type: 'none', content: 'Message' })
+```
+
+### Key Points
+
+- Use Toast API for programmatic control
+- Multiple types: success, fail, loading, none
+- Configure duration
+- Auto-hide or manual hide
+- Simple and easy to use

skills/antd-skills/ant-design-mini/examples/getting-started.md

@@ -0,0 +1,90 @@
+# Getting Started
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example demonstrates how to get started with Ant Design Mini.
+
+### Key Concepts
+
+- Installation
+- Component registration
+- Basic usage
+- Platform differences
+
+### Example: Installation
+
+```bash
+# Using npm
+npm install antd-mini
+
+# Using yarn
+yarn add antd-mini
+
+# Using pnpm
+pnpm add antd-mini
+```
+
+### Example: Component Registration (Alipay)
+
+```json
+// app.json
+{
+  "usingComponents": {
+    "ant-button": "antd-mini/es/Button/index"
+  }
+}
+```
+
+### Example: Component Usage (Alipay)
+
+```xml
+<!-- page.axml -->
+<ant-button type="primary" onTap="handleTap">Button</ant-button>
+```
+
+```javascript
+// page.js
+Page({
+  handleTap() {
+    console.log('Button tapped')
+  }
+})
+```
+
+### Example: Component Registration (WeChat)
+
+```json
+// app.json
+{
+  "usingComponents": {
+    "ant-button": "antd-mini/es/Button/index"
+  }
+}
+```
+
+### Example: Component Usage (WeChat)
+
+```xml
+<!-- page.wxml -->
+<ant-button type="primary" bindtap="handleTap">Button</ant-button>
+```
+
+```javascript
+// page.js
+Page({
+  handleTap() {
+    console.log('Button tapped')
+  }
+})
+```
+
+### Key Points
+
+- Install antd-mini package
+- Register components in app.json
+- Use axml for Alipay, wxml for WeChat
+- Use onTap for Alipay, bindtap for WeChat
+- Import component styles if needed

skills/antd-skills/ant-design-mini/examples/quick-start.md

@@ -0,0 +1,80 @@
+# Quick Start
+
+**官方文档**: https://ant-design-mini.antgroup.com
+
+
+## Instructions
+
+This example provides a quick start guide for Ant Design Mini.
+
+### Key Concepts
+
+- Project setup
+- First component
+- Component registration
+- Basic usage
+
+### Example: Complete Setup
+
+```json
+// app.json
+{
+  "usingComponents": {
+    "ant-button": "antd-mini/es/Button/index",
+    "ant-input": "antd-mini/es/Input/index"
+  }
+}
+```
+
+```xml
+<!-- index.axml -->
+<view class="container">
+  <ant-input 
+    value="{{value}}" 
+    placeholder="Enter text"
+    onInput="handleInput"
+  />
+  <ant-button type="primary" onTap="handleTap">
+    Submit
+  </ant-button>
+</view>
+```
+
+```javascript
+// index.js
+Page({
+  data: {
+    value: ''
+  },
+  handleInput(e) {
+    this.setData({
+      value: e.detail.value
+    })
+  },
+  handleTap() {
+    console.log('Value:', this.data.value)
+  }
+})
+```
+
+### Example: Using Multiple Components
+
+```json
+// app.json
+{
+  "usingComponents": {
+    "ant-button": "antd-mini/es/Button/index",
+    "ant-form": "antd-mini/es/Form/index",
+    "ant-form-item": "antd-mini/es/FormItem/index",
+    "ant-input": "antd-mini/es/Input/index"
+  }
+}
+```
+
+### Key Points
+
+- Register all used components
+- Use correct event names (onTap/bindtap)
+- Handle events in page methods
+- Use data binding for two-way binding
+- Follow mini-program syntax

skills/antd-skills/ant-design-mini/templates/component-usage.md

@@ -0,0 +1,116 @@
+# Component Usage Templates
+
+## Button Usage
+
+```xml
+<!-- Alipay -->
+<ant-button type="primary" onTap="handleTap">
+  Click Me
+</ant-button>
+
+<!-- WeChat -->
+<ant-button type="primary" bindtap="handleTap">
+  Click Me
+</ant-button>
+```
+
+```javascript
+Page({
+  handleTap() {
+    console.log('Clicked')
+  }
+})
+```
+
+## Form Usage
+
+```xml
+<ant-form onFinish="handleSubmit">
+  <ant-form-item label="Name" name="name">
+    <ant-input 
+      value="{{form.name}}" 
+      onInput="handleNameInput" 
+    />
+  </ant-form-item>
+  <ant-form-item>
+    <ant-button type="primary" formType="submit">
+      Submit
+    </ant-button>
+  </ant-form-item>
+</ant-form>
+```
+
+```javascript
+Page({
+  data: {
+    form: {
+      name: ''
+    }
+  },
+  handleNameInput(e) {
+    this.setData({
+      'form.name': e.detail.value
+    })
+  },
+  handleSubmit() {
+    console.log('Form:', this.data.form)
+  }
+})
+```
+
+## List Usage
+
+```xml
+<ant-list>
+  <ant-list-item 
+    wx:for="{{items}}" 
+    wx:key="index"
+    onTap="handleItemTap"
+    data-index="{{index}}"
+  >
+    {{item.title}}
+  </ant-list-item>
+</ant-list>
+```
+
+```javascript
+Page({
+  data: {
+    items: [
+      { title: 'Item 1' },
+      { title: 'Item 2' }
+    ]
+  },
+  handleItemTap(e) {
+    const index = e.currentTarget.dataset.index
+    console.log('Item:', this.data.items[index])
+  }
+})
+```
+
+## Modal Usage
+
+```xml
+<ant-modal 
+  visible="{{visible}}"
+  title="Title"
+  onClose="handleClose"
+>
+  <view>Content</view>
+</ant-modal>
+<ant-button onTap="showModal">Show</ant-button>
+```
+
+```javascript
+Page({
+  data: {
+    visible: false
+  },
+  showModal() {
+    this.setData({ visible: true })
+  },
+  handleClose() {
+    this.setData({ visible: false })
+  }
+})
+```

skills/antd-skills/ant-design-mini/templates/installation.md

@@ -0,0 +1,65 @@
+# Installation Templates
+
+## Alipay Mini Program
+
+```json
+// app.json
+{
+  "usingComponents": {
+    "ant-button": "antd-mini/es/Button/index",
+    "ant-input": "antd-mini/es/Input/index",
+    "ant-form": "antd-mini/es/Form/index"
+  }
+}
+```
+
+```xml
+<!-- page.axml -->
+<ant-button type="primary" onTap="handleTap">Button</ant-button>
+```
+
+```javascript
+// page.js
+Page({
+  handleTap() {
+    console.log('Tapped')
+  }
+})
+```
+
+## WeChat Mini Program
+
+```json
+// app.json
+{
+  "usingComponents": {
+    "ant-button": "antd-mini/es/Button/index",
+    "ant-input": "antd-mini/es/Input/index",
+    "ant-form": "antd-mini/es/Form/index"
+  }
+}
+```
+
+```xml
+<!-- page.wxml -->
+<ant-button type="primary" bindtap="handleTap">Button</ant-button>
+```
+
+```javascript
+// page.js
+Page({
+  handleTap() {
+    console.log('Tapped')
+  }
+})
+```
+
+## Complete Setup
+
+```bash
+# Install
+npm install antd-mini
+
+# Register components in app.json
+# Use components in pages
+```

skills/antd-skills/ant-design-mobile/LICENSE.txt

@@ -0,0 +1,203 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+

skills/antd-skills/ant-design-mobile/SKILL.md

@@ -0,0 +1,155 @@
+---
+name: ant-design-mobile
+description: Provides comprehensive guidance for Ant Design Mobile component library including mobile components, themes, and platform adaptations. Use when the user asks about Ant Design Mobile, needs to build mobile applications, or implement mobile UI components.
+license: Complete terms in LICENSE.txt
+---
+
+## When to use this skill
+
+Use this skill whenever the user wants to:
+- Build React mobile applications with Ant Design Mobile components
+- Use mobile UI components (Button, Input, Form, List, Card, Modal, etc.)
+- Create mobile-friendly interfaces
+- Customize Ant Design Mobile theme
+- Implement mobile-specific features (pull-to-refresh, infinite scroll, etc.)
+- Use Ant Design Mobile with React Native or web
+- Handle mobile gestures and interactions
+- Implement mobile navigation patterns
+- Use mobile form components
+- Create mobile data display components
+
+## How to use this skill
+
+This skill is organized to match the Ant Design Mobile official documentation structure (https://ant-design-mobile.antgroup.com/zh/guide/quick-start, https://ant-design-mobile.antgroup.com/zh/components/button). When working with Ant Design Mobile:
+
+1. **Install and setup** Ant Design Mobile:
+   - Load `examples/getting-started/installation.md` for installation instructions
+   - Load `examples/getting-started/basic-usage.md` for basic usage examples
+
+2. **Choose the component** based on the user's requirements:
+   - Button/按钮 → `examples/components/button.md`
+   - Input/输入框 → `examples/components/input.md`
+   - Form/表单 → `examples/components/form.md`
+   - List/列表 → `examples/components/list.md`
+   - Card/卡片 → `examples/components/card.md`
+   - Modal/对话框 → `examples/components/modal.md`
+   - Picker/选择器 → `examples/components/picker.md`
+   - DatePicker/日期选择器 → `examples/components/date-picker.md`
+   - Tabs/标签页 → `examples/components/tabs.md`
+   - PullToRefresh/下拉刷新 → `examples/components/pull-to-refresh.md`
+   - InfiniteScroll/无限滚动 → `examples/components/infinite-scroll.md`
+   - And many more components...
+
+3. **Load the appropriate example file** from the `examples/` directory:
+   - `examples/getting-started/installation.md` - Installation and setup
+   - `examples/getting-started/basic-usage.md` - Basic usage examples
+   - `examples/components/button.md` - Button component
+   - `examples/components/input.md` - Input component
+   - `examples/components/form.md` - Form component
+   - `examples/components/list.md` - List component
+   - `examples/components/card.md` - Card component
+   - `examples/components/modal.md` - Modal component
+   - `examples/components/picker.md` - Picker component
+   - `examples/components/date-picker.md` - DatePicker component
+   - `examples/components/tabs.md` - Tabs component
+   - `examples/components/pull-to-refresh.md` - PullToRefresh component
+   - `examples/components/infinite-scroll.md` - InfiniteScroll component
+   - `examples/components/icon.md` - Icon component
+   - `examples/components/badge.md` - Badge component
+   - `examples/components/tag.md` - Tag component
+   - `examples/components/avatar.md` - Avatar component
+   - `examples/components/image.md` - Image component
+   - `examples/components/image-viewer.md` - ImageViewer component
+   - `examples/components/nav-bar.md` - NavBar component
+   - `examples/components/tab-bar.md` - TabBar component
+   - `examples/components/index-bar.md` - IndexBar component
+   - `examples/components/side-bar.md` - SideBar component
+   - `examples/components/dialog.md` - Dialog component
+   - `examples/components/toast.md` - Toast component
+   - `examples/components/action-sheet.md` - ActionSheet component
+   - `examples/components/popup.md` - Popup component
+   - `examples/components/loading.md` - Loading component
+   - `examples/components/error-block.md` - ErrorBlock component
+   - `examples/components/empty.md` - Empty component
+   - `examples/components/notice-bar.md` - NoticeBar component
+   - `examples/components/mask.md` - Mask component
+   - `examples/components/textarea.md` - Textarea component
+   - `examples/components/switch.md` - Switch component
+   - `examples/components/checkbox.md` - Checkbox component
+   - `examples/components/radio.md` - Radio component
+   - `examples/components/stepper.md` - Stepper component
+   - `examples/components/rate.md` - Rate component
+   - `examples/components/slider.md` - Slider component
+   - `examples/components/uploader.md` - Uploader component
+   - `examples/components/grid.md` - Grid component
+   - `examples/components/swiper.md` - Swiper component
+   - `examples/components/cascader.md` - Cascader component
+   - `examples/components/search-bar.md` - SearchBar component
+   - `examples/components/virtual-input.md` - VirtualInput component
+   - `examples/components/divider.md` - Divider component
+   - `examples/components/space.md` - Space component
+   - `examples/components/safe-area.md` - SafeArea component
+   - `examples/advanced/theme-customization.md` - Theme customization
+   - `examples/advanced/internationalization.md` - Internationalization
+
+4. **Follow the specific instructions** in that example file for syntax, structure, and best practices
+
+5. **Reference the API documentation** when needed:
+   - `api/components.md` - Component API reference
+   - `api/config-provider.md` - ConfigProvider API
+
+6. **Use templates** for quick start:
+   - `templates/project-setup.md` - Project setup templates
+   - `templates/component-template.md` - Component usage templates
+
+
+### Doc mapping (one-to-one with official documentation)
+
+**Guide (指南)**:
+- See guide files in `examples/guide/` or `examples/getting-started/` → https://ant-design-mobile.antgroup.com/zh/guide/quick-start
+
+**Components (组件)**:
+- See component files in `examples/components/` → https://ant-design-mobile.antgroup.com/zh/components/button
+
+## Examples and Templates
+
+This skill includes detailed examples organized to match the official documentation structure. All examples are in the `examples/` directory (see mapping above).
+
+**To use examples:**
+- Identify the topic from the user's request
+- Load the appropriate example file from the mapping above
+- Follow the instructions, syntax, and best practices in that file
+- Adapt the code examples to your specific use case
+
+**To use templates:**
+- Reference templates in `templates/` directory for common scaffolding
+- Adapt templates to your specific needs and coding style
+
+## API Reference
+
+- **Components API**: `api/components.md` - All component props and APIs
+- **ConfigProvider API**: `api/config-provider.md` - ConfigProvider component API and global configuration
+
+## Best Practices
+
+1. **Import styles**: Import Ant Design Mobile CSS in your entry file
+2. **Use ConfigProvider**: Wrap your app with ConfigProvider for global configuration
+3. **Mobile-first**: Design for mobile devices first
+4. **Touch interactions**: Consider touch gestures and interactions
+5. **Performance**: Optimize for mobile performance
+6. **Responsive design**: Test on different screen sizes
+7. **Accessibility**: Follow mobile accessibility guidelines
+8. **Theme customization**: Use design tokens for consistent theming
+9. **Internationalization**: Use ConfigProvider with locale for i18n
+10. **Component composition**: Compose components for complex UIs
+
+## Resources
+
+- **Official Website**: https://ant-design-mobile.antgroup.com/
+- **Getting Started**: https://ant-design-mobile.antgroup.com/zh/guide/quick-start
+- **Components**: https://ant-design-mobile.antgroup.com/zh/components/button
+- **GitHub Repository**: https://github.com/ant-design/ant-design-mobile
+
+## Keywords
+
+Ant Design Mobile, antd-mobile, mobile UI, React mobile, mobile components, Button, Input, Form, List, Card, Modal, Picker, DatePicker, Tabs, PullToRefresh, InfiniteScroll, Swiper, Toast, Dialog, ActionSheet, Popup, Loading, NavBar, TabBar, Icon, Badge, Tag, Avatar, Image, ImageViewer, Switch, Checkbox, Radio, Stepper, Rate, Slider, Uploader, Grid, Cascader, SearchBar, VirtualInput, Divider, Space, SafeArea, ErrorBlock, Empty, NoticeBar, Mask, mobile app, 移动端, 组件库, 按钮, 输入框, 表单, 列表, 卡片, 对话框, 选择器, 日期选择器, 标签页, 下拉刷新, 无限滚动

skills/antd-skills/ant-design-mobile/api/components.md

@@ -0,0 +1,515 @@
+# Components API | 组件 API
+
+## API Reference
+
+Complete Ant Design Mobile component APIs and props reference.
+
+### Common Props
+
+Most components share common props:
+
+- `className`: Additional CSS class
+- `style`: Inline style object
+- `disabled`: Disabled state
+- `loading`: Loading state
+
+### General Components
+
+#### Button API
+
+**Props:**
+- `color`: Button color (primary, success, warning, danger, default)
+- `size`: Button size (large, middle, small, mini)
+- `fill`: Button fill style (solid, outline, none)
+- `block`: Full-width button
+- `loading`: Loading state
+- `disabled`: Disabled state
+- `onClick`: Click handler
+
+#### Icon API
+
+**Props:**
+- `fontSize`: Icon size
+- `color`: Icon color
+- Children: Icon component from `antd-mobile-icons`
+
+#### Badge API
+
+**Props:**
+- `content`: Badge content (number or string)
+- `dot`: Show as dot
+- `color`: Badge color
+- `position`: Badge position (top-right, bottom-right, etc.)
+- `max`: Maximum number to display
+
+#### Tag API
+
+**Props:**
+- `color`: Tag color (default, primary, success, warning, danger)
+- `size`: Tag size (small, middle, large)
+- `round`: Rounded corners
+- `closable`: Show close button
+- `onClose`: Close handler
+- `icon`: Tag icon
+
+#### Avatar API
+
+**Props:**
+- `src`: Image URL
+- `size`: Avatar size (small, middle, large)
+- `shape`: Avatar shape (circle, square, rounded)
+- `style`: Custom styles
+
+#### Divider API
+
+**Props:**
+- `direction`: Divider direction (horizontal, vertical)
+- `contentPosition`: Text position (left, center, right)
+- Children: Divider text
+
+#### Space API
+
+**Props:**
+- `direction`: Space direction (horizontal, vertical)
+- `size`: Space size (small, middle, large)
+- `wrap`: Wrap items
+
+#### SafeArea API
+
+**Props:**
+- `position`: Safe area position (top, bottom, left, right)
+
+### Data Entry Components
+
+#### Input API
+
+**Props:**
+- `value`: Input value
+- `defaultValue`: Default value
+- `placeholder`: Placeholder text
+- `type`: Input type (text, number, password, tel, etc.)
+- `clearable`: Show clear button
+- `prefix`: Prefix element
+- `suffix`: Suffix element
+- `error`: Error message
+- `onChange`: Change handler (receives value)
+
+#### Form API
+
+**Props:**
+- `form`: Form instance from Form.useForm()
+- `onFinish`: Submit handler
+- `onFinishFailed`: Failed submit handler
+- `initialValues`: Initial form values
+
+**Form.Item Props:**
+- `name`: Field name
+- `label`: Field label
+- `rules`: Validation rules
+- `required`: Required field
+- `help`: Help text
+- `error`: Error message
+
+#### Textarea API
+
+**Props:**
+- `value`: Textarea value
+- `defaultValue`: Default value
+- `placeholder`: Placeholder text
+- `maxLength`: Maximum length
+- `showCount`: Show character count
+- `autoSize`: Auto resize (object with minRows, maxRows)
+- `onChange`: Change handler
+
+#### Switch API
+
+**Props:**
+- `checked`: Switch state
+- `defaultChecked`: Default state
+- `disabled`: Disabled state
+- `color`: Switch color
+- `loading`: Loading state
+- `onChange`: Change handler
+
+#### Checkbox API
+
+**Props:**
+- `checked`: Checkbox state
+- `defaultChecked`: Default state
+- `disabled`: Disabled state
+- `shape`: Checkbox shape (square, round)
+- `onChange`: Change handler
+
+**Checkbox.Group Props:**
+- `value`: Selected values array
+- `defaultValue`: Default selected values
+- `onChange`: Change handler
+
+#### Radio API
+
+**Props:**
+- `checked`: Radio state
+- `defaultChecked`: Default state
+- `disabled`: Disabled state
+- `shape`: Radio shape (square, round)
+- `onChange`: Change handler
+
+**Radio.Group Props:**
+- `value`: Selected value
+- `defaultValue`: Default selected value
+- `onChange`: Change handler
+
+#### Stepper API
+
+**Props:**
+- `value`: Stepper value
+- `defaultValue`: Default value
+- `min`: Minimum value
+- `max`: Maximum value
+- `step`: Step increment
+- `disabled`: Disabled state
+- `formatter`: Value formatter function
+- `onChange`: Change handler
+
+#### Rate API
+
+**Props:**
+- `value`: Rate value
+- `defaultValue`: Default value
+- `count`: Star count
+- `allowHalf`: Allow half star
+- `readonly`: Readonly mode
+- `character`: Custom character
+- `onChange`: Change handler
+
+#### Slider API
+
+**Props:**
+- `value`: Slider value
+- `defaultValue`: Default value
+- `min`: Minimum value
+- `max`: Maximum value
+- `step`: Step increment
+- `marks`: Marks object
+- `range`: Range mode
+- `onChange`: Change handler
+
+#### Uploader API
+
+**Props:**
+- `value`: File list
+- `defaultValue`: Default file list
+- `multiple`: Multiple files
+- `maxCount`: Maximum file count
+- `preview`: Show preview
+- `upload`: Custom upload function
+- `onChange`: Change handler
+
+### Data Display Components
+
+#### List API
+
+**Props:**
+- `mode`: List mode (default, card)
+- `header`: List header
+- `footer`: List footer
+
+**List.Item Props:**
+- `title`: Item title
+- `description`: Item description
+- `prefix`: Prefix element
+- `extra`: Extra element
+- `arrow`: Show arrow
+- `onClick`: Click handler
+
+#### Card API
+
+**Props:**
+- `title`: Card title
+- `extra`: Extra content in header
+- `bodyStyle`: Body styles
+- `cover`: Card cover image
+- `bordered`: Show border
+
+#### Grid API
+
+**Props:**
+- `columns`: Column count
+- `gap`: Gap between items
+
+**Grid.Item Props:**
+- `onClick`: Click handler
+
+#### Image API
+
+**Props:**
+- `src`: Image URL
+- `alt`: Alt text
+- `width`: Image width
+- `height`: Image height
+- `lazy`: Lazy load
+- `placeholder`: Loading placeholder
+- `fallback`: Error fallback
+- `preview`: Enable preview
+- `fit`: Image fit mode (contain, cover, fill)
+
+#### ImageViewer API
+
+**Props:**
+- `image`: Image URL or array of URLs
+- `visible`: Visibility
+- `defaultIndex`: Initial index
+- `onIndexChange`: Index change handler
+- `onClose`: Close handler
+- `renderFooter`: Custom footer renderer
+
+### Navigation Components
+
+#### Tabs API
+
+**Props:**
+- `activeKey`: Active tab key
+- `defaultActiveKey`: Default active key
+- `onChange`: Tab change handler
+
+**Tabs.Tab Props:**
+- `key`: Tab key
+- `title`: Tab title
+- `disabled`: Disabled state
+
+#### NavBar API
+
+**Props:**
+- `onBack`: Back button handler
+- `left`: Left content
+- `right`: Right content
+- `style`: Custom styles
+- Children: NavBar title
+
+#### TabBar API
+
+**Props:**
+- `activeKey`: Active tab key
+- `onChange`: Tab change handler
+
+**TabBar.Item Props:**
+- `key`: Tab key
+- `icon`: Tab icon
+- `title`: Tab title
+- `badge`: Tab badge
+
+#### IndexBar API
+
+**Props:**
+- `sticky`: Sticky header
+
+**IndexBar.Panel Props:**
+- `index`: Index value
+- `title`: Section title
+
+#### SideBar API
+
+**Props:**
+- `activeKey`: Active item key
+- `onChange`: Item change handler
+
+**SideBar.Item Props:**
+- `key`: Item key
+- `title`: Item title
+- `badge`: Item badge
+
+### Feedback Components
+
+#### Modal API
+
+**Props:**
+- `visible`: Visibility
+- `title`: Modal title
+- `content`: Modal content
+- `closeOnAction`: Close on action
+- `actions`: Action buttons
+- `onClose`: Close handler
+- `onAction`: Action handler
+
+**Static Methods:**
+- `Modal.alert(options)`: Show alert
+- `Modal.confirm(options)`: Show confirm
+- `Modal.show(options)`: Show custom modal
+
+#### Dialog API
+
+Same as Modal API.
+
+#### Toast API
+
+**Static Methods:**
+- `Toast.show(content | options)`: Show toast
+- `Toast.clear()`: Clear toast
+
+**Options:**
+- `icon`: Toast icon (success, fail, loading)
+- `content`: Toast content
+- `duration`: Display duration (0 for infinite)
+
+#### ActionSheet API
+
+**Static Methods:**
+- `ActionSheet.show(options)`: Show action sheet
+
+**Options:**
+- `actions`: Action options array
+- `cancelText`: Cancel text
+- `onAction`: Action handler
+
+#### Popup API
+
+**Props:**
+- `visible`: Visibility
+- `position`: Popup position (top, bottom, left, right, center)
+- `mask`: Show mask
+- `maskStyle`: Mask styles
+- `showCloseButton`: Show close button
+- `title`: Popup title
+- `onMaskClick`: Mask click handler
+- `onClose`: Close handler
+
+#### Loading API
+
+**Props:**
+- `visible`: Visibility
+- `mask`: Show mask
+- `fullScreen`: Full screen loading
+- Children: Loading text
+
+#### ErrorBlock API
+
+**Props:**
+- `status`: Error status (default, network, busy, empty)
+- `title`: Error title
+- `description`: Error description
+- `actions`: Action buttons
+
+#### Empty API
+
+**Props:**
+- `title`: Empty title
+- `description`: Empty description
+- `image`: Custom image
+- `actions`: Action buttons
+
+#### NoticeBar API
+
+**Props:**
+- `content`: Notice content
+- `icon`: Notice icon
+- `closeable`: Show close button
+- `onClose`: Close handler
+- `extra`: Extra content
+- `onExtraClick`: Extra click handler
+- `wrap`: Text wrapping
+- `color`: Notice color (default, alert)
+
+#### Mask API
+
+**Props:**
+- `visible`: Visibility
+- `opacity`: Mask opacity
+- `disableBodyScroll`: Disable body scroll
+- `onMaskClick`: Mask click handler
+
+### Selector Components
+
+#### Picker API
+
+**Props:**
+- `visible`: Visibility
+- `value`: Selected value
+- `defaultValue`: Default value
+- `columns`: Picker columns
+- `onConfirm`: Confirm handler
+- `onCancel`: Cancel handler
+- `onClose`: Close handler
+
+#### DatePicker API
+
+**Props:**
+- `visible`: Visibility
+- `value`: Selected date
+- `defaultValue`: Default date
+- `precision`: Date precision (year, month, day, hour, minute, second)
+- `min`: Minimum date
+- `max`: Maximum date
+- `onConfirm`: Confirm handler
+- `onCancel`: Cancel handler
+- `onClose`: Close handler
+
+#### Cascader API
+
+**Props:**
+- `visible`: Visibility
+- `value`: Selected value array
+- `defaultValue`: Default value array
+- `options`: Cascader options
+- `onConfirm`: Confirm handler
+- `onCancel`: Cancel handler
+- `onClose`: Close handler
+
+#### SearchBar API
+
+**Props:**
+- `value`: Search value
+- `defaultValue`: Default value
+- `placeholder`: Placeholder text
+- `showCancelButton`: Show cancel button
+- `clearable`: Show clear button
+- `onChange`: Change handler
+- `onSearch`: Search handler
+- `onCancel`: Cancel handler
+
+### Other Components
+
+#### Swiper API
+
+**Props:**
+- `autoplay`: Autoplay
+- `loop`: Loop mode
+- `indicator`: Custom indicator function
+- `onIndexChange`: Index change handler
+
+**Swiper.Item Props:**
+- Children: Swiper item content
+
+#### PullToRefresh API
+
+**Props:**
+- `onRefresh`: Refresh handler
+- `canReleaseText`: Can release text
+- `releaseText`: Release text
+- `refreshingText`: Refreshing text
+- `completeText`: Complete text
+
+#### InfiniteScroll API
+
+**Props:**
+- `hasMore`: Has more data
+- `loadMore`: Load more handler
+- `threshold`: Load threshold
+
+#### VirtualInput API
+
+**Props:**
+- `value`: Input value
+- `defaultValue`: Default value
+- `type`: Keyboard type (number, password, etc.)
+- `placeholder`: Placeholder text
+- `confirmText`: Confirm button text
+- `onChange`: Change handler
+- `onConfirm`: Confirm handler
+
+### Key Points
+
+- All components support `className` and `style` props
+- Most form components support `value`, `defaultValue`, and `onChange`
+- Modal-like components use `visible` prop for visibility control
+- All components are optimized for mobile display
+- Refer to individual component examples for detailed usage

skills/antd-skills/ant-design-mobile/api/config-provider.md

@@ -0,0 +1,45 @@
+# ConfigProvider API | ConfigProvider API
+
+## API Reference
+
+ConfigProvider component API for global configuration.
+
+### ConfigProvider
+
+Provides global configuration for Ant Design Mobile components.
+
+**Props:**
+- `locale`: Locale object for internationalization
+- `theme`: Theme configuration object
+- `componentSize`: Global component size
+
+### Example: Basic Usage
+
+```javascript
+import { ConfigProvider } from 'antd-mobile';
+import zhCN from 'antd-mobile/es/locales/zh-CN';
+
+<ConfigProvider locale={zhCN}>
+  <App />
+</ConfigProvider>
+```
+
+### Example: With Theme
+
+```javascript
+<ConfigProvider
+  theme={{
+    primaryColor: '#00b96b',
+  }}
+>
+  <App />
+</ConfigProvider>
+```
+
+### Key Points
+
+- Wrap app with ConfigProvider for global config
+- Use locale prop for internationalization
+- Use theme prop for theme customization
+- ConfigProvider affects all child components
+- Can nest ConfigProviders for different scopes

skills/antd-skills/ant-design-mobile/examples/advanced/internationalization.md

@@ -0,0 +1,107 @@
+# Internationalization | 国际化
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to set up internationalization in Ant Design Mobile.
+
+### Key Concepts
+
+- Locale configuration
+- ConfigProvider with locale
+- Language switching
+- Custom locale
+- Date and number formatting
+
+### Example: Basic Internationalization
+
+```javascript
+import React from 'react';
+import { ConfigProvider } from 'antd-mobile';
+import zhCN from 'antd-mobile/es/locales/zh-CN';
+import enUS from 'antd-mobile/es/locales/en-US';
+
+function App() {
+  return (
+    <ConfigProvider locale={zhCN}>
+      {/* Your app content */}
+    </ConfigProvider>
+  );
+}
+```
+
+### Example: Language Switching
+
+```javascript
+import React, { useState } from 'react';
+import { ConfigProvider, Button } from 'antd-mobile';
+import zhCN from 'antd-mobile/es/locales/zh-CN';
+import enUS from 'antd-mobile/es/locales/en-US';
+
+function App() {
+  const [locale, setLocale] = useState(zhCN);
+
+  return (
+    <ConfigProvider locale={locale}>
+      <Button onClick={() => setLocale(locale === zhCN ? enUS : zhCN)}>
+        切换语言
+      </Button>
+      {/* Your app content */}
+    </ConfigProvider>
+  );
+}
+```
+
+### Example: Custom Locale
+
+```javascript
+import React from 'react';
+import { ConfigProvider } from 'antd-mobile';
+import zhCN from 'antd-mobile/es/locales/zh-CN';
+
+const customLocale = {
+  ...zhCN,
+  Dialog: {
+    ...zhCN.Dialog,
+    confirm: '确定',
+    cancel: '取消',
+  },
+};
+
+function App() {
+  return (
+    <ConfigProvider locale={customLocale}>
+      {/* Your app content */}
+    </ConfigProvider>
+  );
+}
+```
+
+### Example: Date and Number Formatting
+
+```javascript
+import React from 'react';
+import { ConfigProvider } from 'antd-mobile';
+import zhCN from 'antd-mobile/es/locales/zh-CN';
+import enUS from 'antd-mobile/es/locales/en-US';
+
+function App() {
+  return (
+    <ConfigProvider locale={zhCN}>
+      {/* Date and number formatting will use locale settings */}
+      {/* Your app content */}
+    </ConfigProvider>
+  );
+}
+```
+
+### Key Points
+
+- Use `ConfigProvider` with `locale` prop for internationalization
+- Import locale from `antd-mobile/es/locales/`
+- Support for zh-CN, en-US, and other locales
+- Custom locale by extending existing locale
+- Date and number formatting use locale settings
+- Internationalization is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/advanced/theme-customization.md

@@ -0,0 +1,115 @@
+# Theme Customization | 主题定制
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to customize the theme in Ant Design Mobile.
+
+### Key Concepts
+
+- CSS Variables
+- Design tokens
+- Theme configuration
+- Custom colors
+- Custom styles
+
+### Example: Using CSS Variables
+
+```javascript
+import React from 'react';
+import { ConfigProvider } from 'antd-mobile';
+import 'antd-mobile/es/global.css';
+
+// Custom CSS variables
+const customTheme = {
+  '--adm-color-primary': '#409EFF',
+  '--adm-color-success': '#67C23A',
+  '--adm-color-warning': '#E6A23C',
+  '--adm-color-danger': '#F56C6C',
+};
+
+function App() {
+  return (
+    <ConfigProvider theme={customTheme}>
+      {/* Your app content */}
+    </ConfigProvider>
+  );
+}
+```
+
+### Example: Custom Theme with ConfigProvider
+
+```javascript
+import React from 'react';
+import { ConfigProvider } from 'antd-mobile';
+
+const theme = {
+  '--adm-color-primary': '#409EFF',
+  '--adm-color-text': '#303133',
+  '--adm-color-text-secondary': '#606266',
+  '--adm-border-color': '#DCDFE6',
+  '--adm-font-size-main': '16px',
+};
+
+function App() {
+  return (
+    <ConfigProvider theme={theme}>
+      {/* Your app content */}
+    </ConfigProvider>
+  );
+}
+```
+
+### Example: Custom Component Styles
+
+```css
+/* Custom styles */
+.custom-button {
+  --adm-button-border-radius: 20px;
+  --adm-button-font-size: 18px;
+}
+```
+
+### Example: Using Design Tokens
+
+```javascript
+import React from 'react';
+import { ConfigProvider } from 'antd-mobile';
+
+const theme = {
+  // Colors
+  '--adm-color-primary': '#409EFF',
+  '--adm-color-success': '#67C23A',
+  '--adm-color-warning': '#E6A23C',
+  '--adm-color-danger': '#F56C6C',
+  
+  // Spacing
+  '--adm-spacing-xs': '4px',
+  '--adm-spacing-s': '8px',
+  '--adm-spacing-m': '16px',
+  '--adm-spacing-l': '24px',
+  
+  // Border radius
+  '--adm-border-radius-s': '4px',
+  '--adm-border-radius-m': '8px',
+  '--adm-border-radius-l': '12px',
+};
+
+function App() {
+  return (
+    <ConfigProvider theme={theme}>
+      {/* Your app content */}
+    </ConfigProvider>
+  );
+}
+```
+
+### Key Points
+
+- Use CSS variables for theme customization
+- Use `ConfigProvider` with `theme` prop for global theme
+- Design tokens provide consistent theming
+- Customize colors, spacing, border radius, etc.
+- Theme customization is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/action-sheet.md

@@ -0,0 +1,137 @@
+# ActionSheet | 动作面板
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the ActionSheet component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic action sheet
+- Action sheet with options
+- Action sheet with cancel
+- Action sheet with danger
+- Action sheet with icons
+
+### Example: Basic ActionSheet
+
+```javascript
+import React from 'react';
+import { ActionSheet, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Button
+      onClick={() => {
+        ActionSheet.show({
+          actions: [
+            { text: '选项1', key: '1' },
+            { text: '选项2', key: '2' },
+            { text: '选项3', key: '3' },
+          ],
+          onAction: (action) => {
+            console.log(action);
+          },
+        });
+      }}
+    >
+      显示动作面板
+    </Button>
+  );
+}
+```
+
+### Example: ActionSheet with Cancel
+
+```javascript
+import React from 'react';
+import { ActionSheet, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Button
+      onClick={() => {
+        ActionSheet.show({
+          actions: [
+            { text: '选项1', key: '1' },
+            { text: '选项2', key: '2' },
+          ],
+          cancelText: '取消',
+          onAction: (action) => {
+            console.log(action);
+          },
+        });
+      }}
+    >
+      显示动作面板
+    </Button>
+  );
+}
+```
+
+### Example: ActionSheet with Danger
+
+```javascript
+import React from 'react';
+import { ActionSheet, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Button
+      onClick={() => {
+        ActionSheet.show({
+          actions: [
+            { text: '选项1', key: '1' },
+            { text: '删除', key: 'delete', danger: true },
+          ],
+          onAction: (action) => {
+            console.log(action);
+          },
+        });
+      }}
+    >
+      显示动作面板
+    </Button>
+  );
+}
+```
+
+### Example: ActionSheet with Icons
+
+```javascript
+import React from 'react';
+import { ActionSheet, Button } from 'antd-mobile';
+import { AppOutline, UserOutline } from 'antd-mobile-icons';
+
+function App() {
+  return (
+    <Button
+      onClick={() => {
+        ActionSheet.show({
+          actions: [
+            { text: '选项1', key: '1', icon: <AppOutline /> },
+            { text: '选项2', key: '2', icon: <UserOutline /> },
+          ],
+          onAction: (action) => {
+            console.log(action);
+          },
+        });
+      }}
+    >
+      显示动作面板
+    </Button>
+  );
+}
+```
+
+### Key Points
+
+- Use `ActionSheet.show` to show action sheet
+- Use `actions` prop for action options
+- Use `cancelText` prop for cancel text
+- Use `danger` prop for danger actions
+- Use `icon` prop for action icons
+- Use `onAction` callback for action selection
+- ActionSheet is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/avatar.md

@@ -0,0 +1,111 @@
+# Avatar | 头像
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Avatar component in Ant Design Mobile.
+
+### Key Concepts
+
+- Avatar with image
+- Avatar with text
+- Avatar with icon
+- Avatar sizes
+- Avatar shapes
+
+### Example: Basic Avatar
+
+```javascript
+import React from 'react';
+import { Avatar } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Avatar src="https://via.placeholder.com/100" />
+      <Avatar>U</Avatar>
+      <Avatar style={{ background: '#87d068' }}>U</Avatar>
+    </>
+  );
+}
+```
+
+### Example: Avatar Sizes
+
+```javascript
+import React from 'react';
+import { Avatar } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Avatar size="small" src="https://via.placeholder.com/100" />
+      <Avatar size="middle" src="https://via.placeholder.com/100" />
+      <Avatar size="large" src="https://via.placeholder.com/100" />
+    </>
+  );
+}
+```
+
+### Example: Avatar Shapes
+
+```javascript
+import React from 'react';
+import { Avatar } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Avatar src="https://via.placeholder.com/100" />
+      <Avatar shape="square" src="https://via.placeholder.com/100" />
+      <Avatar shape="rounded" src="https://via.placeholder.com/100" />
+    </>
+  );
+}
+```
+
+### Example: Avatar with Badge
+
+```javascript
+import React from 'react';
+import { Avatar, Badge } from 'antd-mobile';
+
+function App() {
+  return (
+    <Badge content="5">
+      <Avatar src="https://via.placeholder.com/100" />
+    </Badge>
+  );
+}
+```
+
+### Example: Avatar Group
+
+```javascript
+import React from 'react';
+import { Avatar } from 'antd-mobile';
+
+function App() {
+  return (
+    <Avatar.Group>
+      <Avatar src="https://via.placeholder.com/100" />
+      <Avatar src="https://via.placeholder.com/100" />
+      <Avatar src="https://via.placeholder.com/100" />
+      <Avatar>+5</Avatar>
+    </Avatar.Group>
+  );
+}
+```
+
+### Key Points
+
+- Use `src` prop for image URL
+- Use `size` prop for avatar size (small, middle, large)
+- Use `shape` prop for avatar shape (circle, square, rounded)
+- Use children for text avatar
+- Use `style` prop for custom styles
+- Avatar can be used with Badge
+- Avatar.Group for multiple avatars
+- Avatar is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/badge.md

@@ -0,0 +1,137 @@
+# Badge | 徽标
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Badge component in Ant Design Mobile.
+
+### Key Concepts
+
+- Badge with number
+- Badge with text
+- Badge with dot
+- Badge colors
+- Badge positions
+
+### Example: Basic Badge
+
+```javascript
+import React from 'react';
+import { Badge } from 'antd-mobile';
+
+function App() {
+  return (
+    <Badge content="5">
+      <div style={{ width: 40, height: 40, background: '#ddd' }} />
+    </Badge>
+  );
+}
+```
+
+### Example: Badge with Number
+
+```javascript
+import React from 'react';
+import { Badge } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Badge content={5}>
+        <div style={{ width: 40, height: 40, background: '#ddd' }} />
+      </Badge>
+      <Badge content={99}>
+        <div style={{ width: 40, height: 40, background: '#ddd' }} />
+      </Badge>
+      <Badge content={100}>
+        <div style={{ width: 40, height: 40, background: '#ddd' }} />
+      </Badge>
+    </>
+  );
+}
+```
+
+### Example: Badge with Dot
+
+```javascript
+import React from 'react';
+import { Badge } from 'antd-mobile';
+
+function App() {
+  return (
+    <Badge dot>
+      <div style={{ width: 40, height: 40, background: '#ddd' }} />
+    </Badge>
+  );
+}
+```
+
+### Example: Badge Colors
+
+```javascript
+import React from 'react';
+import { Badge } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Badge content="5" color="red">
+        <div style={{ width: 40, height: 40, background: '#ddd' }} />
+      </Badge>
+      <Badge content="5" color="blue">
+        <div style={{ width: 40, height: 40, background: '#ddd' }} />
+      </Badge>
+      <Badge content="5" color="green">
+        <div style={{ width: 40, height: 40, background: '#ddd' }} />
+      </Badge>
+    </>
+  );
+}
+```
+
+### Example: Badge Positions
+
+```javascript
+import React from 'react';
+import { Badge } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Badge content="5" position="top-right">
+        <div style={{ width: 40, height: 40, background: '#ddd' }} />
+      </Badge>
+      <Badge content="5" position="bottom-right">
+        <div style={{ width: 40, height: 40, background: '#ddd' }} />
+      </Badge>
+    </>
+  );
+}
+```
+
+### Example: Badge with Max Count
+
+```javascript
+import React from 'react';
+import { Badge } from 'antd-mobile';
+
+function App() {
+  return (
+    <Badge content={100} max={99}>
+      <div style={{ width: 40, height: 40, background: '#ddd' }} />
+    </Badge>
+  );
+}
+```
+
+### Key Points
+
+- Use `content` prop for badge content (number or string)
+- Use `dot` prop for dot badge
+- Use `color` prop for badge color
+- Use `position` prop for badge position
+- Use `max` prop to limit displayed number
+- Badge wraps children element
+- Badge is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/button.md

@@ -0,0 +1,137 @@
+# Button | 按钮
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Button component in Ant Design Mobile.
+
+### Key Concepts
+
+- Button colors (primary, success, warning, danger)
+- Button sizes (large, middle, small, mini)
+- Button shapes (rectangular, rounded, square)
+- Button states (loading, disabled)
+- Button with icons
+- Block buttons
+
+### Example: Button Colors
+
+```javascript
+import React from 'react';
+import { Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Button color="primary">Primary</Button>
+      <Button color="success">Success</Button>
+      <Button color="warning">Warning</Button>
+      <Button color="danger">Danger</Button>
+      <Button>Default</Button>
+    </>
+  );
+}
+```
+
+### Example: Button Sizes
+
+```javascript
+import React from 'react';
+import { Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Button color="primary" size="large">Large</Button>
+      <Button color="primary" size="middle">Middle</Button>
+      <Button color="primary" size="small">Small</Button>
+      <Button color="primary" size="mini">Mini</Button>
+    </>
+  );
+}
+```
+
+### Example: Button with Icon
+
+```javascript
+import React from 'react';
+import { Button } from 'antd-mobile';
+import { SearchOutline } from 'antd-mobile-icons';
+
+function App() {
+  return (
+    <Button color="primary" fill="outline">
+      <SearchOutline />
+      Search
+    </Button>
+  );
+}
+```
+
+### Example: Loading State
+
+```javascript
+import React, { useState } from 'react';
+import { Button } from 'antd-mobile';
+
+function App() {
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = () => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  };
+
+  return (
+    <Button color="primary" loading={loading} onClick={handleClick}>
+      Click Me
+    </Button>
+  );
+}
+```
+
+### Example: Block Button
+
+```javascript
+import React from 'react';
+import { Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Button color="primary" block>
+      Block Button
+    </Button>
+  );
+}
+```
+
+### Example: Disabled Button
+
+```javascript
+import React from 'react';
+import { Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Button color="primary" disabled>Disabled Primary</Button>
+      <Button disabled>Disabled Default</Button>
+    </>
+  );
+}
+```
+
+### Key Points
+
+- Use `color` prop for button style (primary, success, warning, danger)
+- Use `size` prop for button size (large, middle, small, mini)
+- Use `fill` prop for button fill style (solid, outline, none)
+- Use `icon` or icon components for icon buttons
+- Use `loading` prop for loading state
+- Use `disabled` prop to disable button
+- Use `block` prop for full-width button
+- Button is optimized for mobile touch interactions

skills/antd-skills/ant-design-mobile/examples/components/card.md

@@ -0,0 +1,113 @@
+# Card | 卡片
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Card component in Ant Design Mobile.
+
+### Key Concepts
+
+- Card with title
+- Card with body
+- Card with actions
+- Card with images
+- Card styles
+
+### Example: Basic Card
+
+```javascript
+import React from 'react';
+import { Card } from 'antd-mobile';
+
+function App() {
+  return (
+    <Card title="卡片标题">
+      <div>卡片内容</div>
+    </Card>
+  );
+}
+```
+
+### Example: Card with Body
+
+```javascript
+import React from 'react';
+import { Card } from 'antd-mobile';
+
+function App() {
+  return (
+    <Card title="卡片标题" bodyStyle={{ padding: '20px' }}>
+      <div>这是卡片的内容区域</div>
+    </Card>
+  );
+}
+```
+
+### Example: Card with Actions
+
+```javascript
+import React from 'react';
+import { Card, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Card
+      title="卡片标题"
+      extra={<Button size="small">更多</Button>}
+    >
+      <div>卡片内容</div>
+    </Card>
+  );
+}
+```
+
+### Example: Card with Image
+
+```javascript
+import React from 'react';
+import { Card } from 'antd-mobile';
+
+function App() {
+  return (
+    <Card
+      title="卡片标题"
+      cover={
+        <img
+          alt="example"
+          src="https://via.placeholder.com/300x200"
+          style={{ width: '100%' }}
+        />
+      }
+    >
+      <div>卡片内容</div>
+    </Card>
+  );
+}
+```
+
+### Example: Card Styles
+
+```javascript
+import React from 'react';
+import { Card } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Card title="默认卡片">内容</Card>
+      <Card title="无边框卡片" bordered={false}>内容</Card>
+    </>
+  );
+}
+```
+
+### Key Points
+
+- Use `title` prop for card title
+- Use `bodyStyle` prop to customize body styles
+- Use `extra` prop for additional content in header
+- Use `cover` prop for card cover image
+- Use `bordered` prop to control border display
+- Card is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/cascader.md

@@ -0,0 +1,121 @@
+# Cascader | 级联选择
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Cascader component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic cascader
+- Cascader with options
+- Cascader with value
+- Cascader with visible
+- Cascader with form
+
+### Example: Basic Cascader
+
+```javascript
+import React, { useState } from 'react';
+import { Cascader } from 'antd-mobile';
+
+const options = [
+  {
+    label: '浙江',
+    value: 'zhejiang',
+    children: [
+      {
+        label: '杭州',
+        value: 'hangzhou',
+        children: [
+          { label: '西湖区', value: 'xihu' },
+          { label: '余杭区', value: 'yuhang' },
+        ],
+      },
+    ],
+  },
+  {
+    label: '江苏',
+    value: 'jiangsu',
+    children: [
+      {
+        label: '南京',
+        value: 'nanjing',
+        children: [
+          { label: '玄武区', value: 'xuanwu' },
+        ],
+      },
+    ],
+  },
+];
+
+function App() {
+  const [visible, setVisible] = useState(false);
+  const [value, setValue] = useState([]);
+
+  return (
+    <>
+      <div onClick={() => setVisible(true)}>
+        {value.length ? value.join('/') : '请选择'}
+      </div>
+      <Cascader
+        visible={visible}
+        onClose={() => setVisible(false)}
+        options={options}
+        value={value}
+        onConfirm={(val) => {
+          setValue(val);
+          setVisible(false);
+        }}
+      />
+    </>
+  );
+}
+```
+
+### Example: Cascader with Form
+
+```javascript
+import React from 'react';
+import { Form, Cascader } from 'antd-mobile';
+
+const options = [
+  {
+    label: '浙江',
+    value: 'zhejiang',
+    children: [
+      {
+        label: '杭州',
+        value: 'hangzhou',
+        children: [
+          { label: '西湖区', value: 'xihu' },
+        ],
+      },
+    ],
+  },
+];
+
+function App() {
+  return (
+    <Form>
+      <Form.Item name="area" label="地区">
+        <Cascader options={options}>
+          {(value) => value?.join('/') || '请选择'}
+        </Cascader>
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+### Key Points
+
+- Use `visible` prop to control visibility
+- Use `options` prop for cascader options
+- Use `value` prop for selected value
+- Use `onConfirm` callback for confirm event
+- Use `onClose` callback for close event
+- Cascader works well with Form component
+- Cascader is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/checkbox.md

@@ -0,0 +1,139 @@
+# Checkbox | 复选框
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Checkbox component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic checkbox
+- Checkbox group
+- Checkbox with label
+- Checkbox states
+- Checkbox shapes
+
+### Example: Basic Checkbox
+
+```javascript
+import React, { useState } from 'react';
+import { Checkbox } from 'antd-mobile';
+
+function App() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <Checkbox
+      checked={checked}
+      onChange={(checked) => setChecked(checked)}
+    >
+      选项
+    </Checkbox>
+  );
+}
+```
+
+### Example: Checkbox Group
+
+```javascript
+import React, { useState } from 'react';
+import { Checkbox } from 'antd-mobile';
+
+const options = [
+  { label: '选项1', value: '1' },
+  { label: '选项2', value: '2' },
+  { label: '选项3', value: '3' },
+];
+
+function App() {
+  const [value, setValue] = useState([]);
+
+  return (
+    <Checkbox.Group
+      value={value}
+      onChange={(val) => setValue(val)}
+    >
+      {options.map(option => (
+        <Checkbox key={option.value} value={option.value}>
+          {option.label}
+        </Checkbox>
+      ))}
+    </Checkbox.Group>
+  );
+}
+```
+
+### Example: Checkbox States
+
+```javascript
+import React from 'react';
+import { Checkbox } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Checkbox defaultChecked>默认选中</Checkbox>
+      <Checkbox disabled>禁用</Checkbox>
+      <Checkbox checked disabled>禁用且选中</Checkbox>
+    </>
+  );
+}
+```
+
+### Example: Checkbox Shapes
+
+```javascript
+import React, { useState } from 'react';
+import { Checkbox } from 'antd-mobile';
+
+function App() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <>
+      <Checkbox
+        checked={checked}
+        onChange={(checked) => setChecked(checked)}
+      >
+        默认形状
+      </Checkbox>
+      <Checkbox
+        checked={checked}
+        onChange={(checked) => setChecked(checked)}
+        shape="round"
+      >
+        圆形
+      </Checkbox>
+    </>
+  );
+}
+```
+
+### Example: Checkbox with Form
+
+```javascript
+import React from 'react';
+import { Form, Checkbox } from 'antd-mobile';
+
+function App() {
+  return (
+    <Form>
+      <Form.Item name="agree" label="同意协议">
+        <Checkbox>我已阅读并同意</Checkbox>
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+### Key Points
+
+- Use `checked` prop for checkbox state
+- Use `onChange` callback for state change
+- Use `Checkbox.Group` for multiple checkboxes
+- Use `disabled` prop to disable checkbox
+- Use `shape` prop for checkbox shape (square, round)
+- Checkbox works well with Form component
+- Checkbox is optimized for mobile touch interactions

skills/antd-skills/ant-design-mobile/examples/components/date-picker.md

@@ -0,0 +1,166 @@
+# DatePicker | 日期选择器
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the DatePicker component in Ant Design Mobile.
+
+### Key Concepts
+
+- Date selection
+- Date range selection
+- Date format
+- Date picker modes
+- Date picker with time
+
+### Example: Basic DatePicker
+
+```javascript
+import React, { useState } from 'react';
+import { DatePicker } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+  const [value, setValue] = useState(null);
+
+  return (
+    <>
+      <div onClick={() => setVisible(true)}>
+        {value ? value.toLocaleDateString() : '选择日期'}
+      </div>
+      <DatePicker
+        visible={visible}
+        onClose={() => setVisible(false)}
+        value={value}
+        onConfirm={(val) => {
+          setValue(val);
+          setVisible(false);
+        }}
+      />
+    </>
+  );
+}
+```
+
+### Example: DatePicker with Format
+
+```javascript
+import React, { useState } from 'react';
+import { DatePicker } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+  const [value, setValue] = useState(null);
+
+  return (
+    <>
+      <div onClick={() => setVisible(true)}>
+        {value ? value.toLocaleDateString() : '选择日期'}
+      </div>
+      <DatePicker
+        visible={visible}
+        onClose={() => setVisible(false)}
+        value={value}
+        onConfirm={(val) => {
+          setValue(val);
+          setVisible(false);
+        }}
+        precision="day"
+      />
+    </>
+  );
+}
+```
+
+### Example: DatePicker with Time
+
+```javascript
+import React, { useState } from 'react';
+import { DatePicker } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+  const [value, setValue] = useState(null);
+
+  return (
+    <>
+      <div onClick={() => setVisible(true)}>
+        {value ? value.toLocaleString() : '选择日期时间'}
+      </div>
+      <DatePicker
+        visible={visible}
+        onClose={() => setVisible(false)}
+        value={value}
+        onConfirm={(val) => {
+          setValue(val);
+          setVisible(false);
+        }}
+        precision="minute"
+      />
+    </>
+  );
+}
+```
+
+### Example: DatePicker with Min/Max
+
+```javascript
+import React, { useState } from 'react';
+import { DatePicker } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+  const [value, setValue] = useState(null);
+
+  return (
+    <>
+      <div onClick={() => setVisible(true)}>
+        {value ? value.toLocaleDateString() : '选择日期'}
+      </div>
+      <DatePicker
+        visible={visible}
+        onClose={() => setVisible(false)}
+        value={value}
+        onConfirm={(val) => {
+          setValue(val);
+          setVisible(false);
+        }}
+        min={new Date('2020-01-01')}
+        max={new Date('2030-12-31')}
+      />
+    </>
+  );
+}
+```
+
+### Example: DatePicker with Form
+
+```javascript
+import React from 'react';
+import { Form, DatePicker } from 'antd-mobile';
+
+function App() {
+  return (
+    <Form>
+      <Form.Item name="date" label="日期">
+        <DatePicker precision="day">
+          {(value) => value?.toLocaleDateString() || '请选择日期'}
+        </DatePicker>
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+### Key Points
+
+- Use `visible` prop to control picker visibility
+- Use `value` prop for selected date
+- Use `onConfirm` callback for confirm event
+- Use `onClose` callback for close event
+- Use `precision` prop for date precision (year, month, day, hour, minute, second)
+- Use `min` and `max` props to limit date range
+- DatePicker works well with Form component
+- DatePicker is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/dialog.md

@@ -0,0 +1,131 @@
+# Dialog | 对话框
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Dialog component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic dialog
+- Dialog with title
+- Dialog with content
+- Dialog with actions
+- Dialog with confirm
+
+### Example: Basic Dialog
+
+```javascript
+import React from 'react';
+import { Dialog, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Button
+      onClick={() => {
+        Dialog.alert({
+          content: '这是一个对话框',
+        });
+      }}
+    >
+      显示对话框
+    </Button>
+  );
+}
+```
+
+### Example: Dialog with Title
+
+```javascript
+import React from 'react';
+import { Dialog, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Button
+      onClick={() => {
+        Dialog.alert({
+          title: '标题',
+          content: '这是对话框内容',
+        });
+      }}
+    >
+      显示对话框
+    </Button>
+  );
+}
+```
+
+### Example: Dialog with Confirm
+
+```javascript
+import React from 'react';
+import { Dialog, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Button
+      onClick={() => {
+        Dialog.confirm({
+          title: '确认',
+          content: '确定要删除吗？',
+          onConfirm: () => {
+            console.log('确认');
+          },
+        });
+      }}
+    >
+      显示确认对话框
+    </Button>
+  );
+}
+```
+
+### Example: Dialog with Custom Actions
+
+```javascript
+import React from 'react';
+import { Dialog, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Button
+      onClick={() => {
+        Dialog.show({
+          title: '标题',
+          content: '内容',
+          actions: [
+            {
+              key: 'cancel',
+              text: '取消',
+            },
+            {
+              key: 'confirm',
+              text: '确认',
+              bold: true,
+              onClick: () => {
+                console.log('确认');
+              },
+            },
+          ],
+        });
+      }}
+    >
+      显示自定义对话框
+    </Button>
+  );
+}
+```
+
+### Key Points
+
+- Use `Dialog.alert` for alert dialog
+- Use `Dialog.confirm` for confirm dialog
+- Use `Dialog.show` for custom dialog
+- Use `title` prop for dialog title
+- Use `content` prop for dialog content
+- Use `onConfirm` callback for confirm event
+- Use `actions` prop for custom actions
+- Dialog is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/divider.md

@@ -0,0 +1,91 @@
+# Divider | 分割线
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Divider component in Ant Design Mobile.
+
+### Key Concepts
+
+- Horizontal divider
+- Vertical divider
+- Divider with text
+- Divider styles
+
+### Example: Basic Divider
+
+```javascript
+import React from 'react';
+import { Divider } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <div>内容1</div>
+      <Divider />
+      <div>内容2</div>
+    </>
+  );
+}
+```
+
+### Example: Divider with Text
+
+```javascript
+import React from 'react';
+import { Divider } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <div>内容1</div>
+      <Divider>分割线</Divider>
+      <div>内容2</div>
+    </>
+  );
+}
+```
+
+### Example: Divider Positions
+
+```javascript
+import React from 'react';
+import { Divider } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Divider contentPosition="left">左侧</Divider>
+      <Divider contentPosition="center">居中</Divider>
+      <Divider contentPosition="right">右侧</Divider>
+    </>
+  );
+}
+```
+
+### Example: Vertical Divider
+
+```javascript
+import React from 'react';
+import { Divider } from 'antd-mobile';
+
+function App() {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <span>左侧</span>
+      <Divider direction="vertical" />
+      <span>右侧</span>
+    </div>
+  );
+}
+```
+
+### Key Points
+
+- Use `Divider` for horizontal divider
+- Use `direction="vertical"` for vertical divider
+- Use children for divider text
+- Use `contentPosition` prop for text position (left, center, right)
+- Divider is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/empty.md

@@ -0,0 +1,90 @@
+# Empty | 空状态
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Empty component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic empty
+- Empty with image
+- Empty with title
+- Empty with description
+- Empty with action
+
+### Example: Basic Empty
+
+```javascript
+import React from 'react';
+import { Empty } from 'antd-mobile';
+
+function App() {
+  return (
+    <Empty />
+  );
+}
+```
+
+### Example: Empty with Title
+
+```javascript
+import React from 'react';
+import { Empty } from 'antd-mobile';
+
+function App() {
+  return (
+    <Empty
+      title="暂无数据"
+      description="请稍后再试"
+    />
+  );
+}
+```
+
+### Example: Empty with Image
+
+```javascript
+import React from 'react';
+import { Empty } from 'antd-mobile';
+
+function App() {
+  return (
+    <Empty
+      image="https://via.placeholder.com/200"
+      title="暂无数据"
+    />
+  );
+}
+```
+
+### Example: Empty with Action
+
+```javascript
+import React from 'react';
+import { Empty, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Empty
+      title="暂无数据"
+      description="请稍后再试"
+      actions={
+        <Button color="primary" onClick={() => {}}>
+          刷新
+        </Button>
+      }
+    />
+  );
+}
+```
+
+### Key Points
+
+- Use `title` prop for empty title
+- Use `description` prop for empty description
+- Use `image` prop for custom image
+- Use `actions` prop for action buttons
+- Empty is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/error-block.md

@@ -0,0 +1,94 @@
+# ErrorBlock | 错误区块
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the ErrorBlock component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic error block
+- Error block with status
+- Error block with title
+- Error block with description
+- Error block with action
+
+### Example: Basic ErrorBlock
+
+```javascript
+import React from 'react';
+import { ErrorBlock } from 'antd-mobile';
+
+function App() {
+  return (
+    <ErrorBlock status="default" />
+  );
+}
+```
+
+### Example: ErrorBlock with Status
+
+```javascript
+import React from 'react';
+import { ErrorBlock } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <ErrorBlock status="default" />
+      <ErrorBlock status="network" />
+      <ErrorBlock status="busy" />
+      <ErrorBlock status="empty" />
+    </>
+  );
+}
+```
+
+### Example: ErrorBlock with Title
+
+```javascript
+import React from 'react';
+import { ErrorBlock } from 'antd-mobile';
+
+function App() {
+  return (
+    <ErrorBlock
+      status="default"
+      title="出错了"
+      description="请稍后重试"
+    />
+  );
+}
+```
+
+### Example: ErrorBlock with Action
+
+```javascript
+import React from 'react';
+import { ErrorBlock, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <ErrorBlock
+      status="default"
+      title="出错了"
+      description="请稍后重试"
+      actions={
+        <Button color="primary" onClick={() => window.location.reload()}>
+          重试
+        </Button>
+      }
+    />
+  );
+}
+```
+
+### Key Points
+
+- Use `status` prop for error status (default, network, busy, empty)
+- Use `title` prop for error title
+- Use `description` prop for error description
+- Use `actions` prop for action buttons
+- ErrorBlock is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/form.md

@@ -0,0 +1,131 @@
+# Form | 表单
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Form component with validation in Ant Design Mobile.
+
+### Key Concepts
+
+- Form component setup
+- Form.Item for form fields
+- Form validation rules
+- Form submission
+- Form layout
+- Form methods
+
+### Example: Basic Form
+
+```javascript
+import React from 'react';
+import { Form, Input, Button } from 'antd-mobile';
+
+function App() {
+  const onFinish = (values) => {
+    console.log('Success:', values);
+  };
+
+  return (
+    <Form onFinish={onFinish}>
+      <Form.Item
+        name="username"
+        label="Username"
+        rules={[{ required: true, message: 'Please input your username!' }]}
+      >
+        <Input placeholder="Enter username" />
+      </Form.Item>
+      <Form.Item>
+        <Button color="primary" block type="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+### Example: Form with Validation
+
+```javascript
+import React from 'react';
+import { Form, Input, Button } from 'antd-mobile';
+
+function App() {
+  const onFinish = (values) => {
+    console.log('Success:', values);
+  };
+
+  return (
+    <Form onFinish={onFinish}>
+      <Form.Item
+        name="email"
+        label="Email"
+        rules={[
+          { required: true, message: 'Please input your email!' },
+          { type: 'email', message: 'Please enter a valid email!' }
+        ]}
+      >
+        <Input type="email" placeholder="Enter email" />
+      </Form.Item>
+      <Form.Item
+        name="password"
+        label="Password"
+        rules={[
+          { required: true, message: 'Please input your password!' },
+          { min: 6, message: 'Password must be at least 6 characters!' }
+        ]}
+      >
+        <Input type="password" placeholder="Enter password" />
+      </Form.Item>
+      <Form.Item>
+        <Button color="primary" block type="submit">
+          Submit
+        </Button>
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+### Example: Form with Form.useForm()
+
+```javascript
+import React from 'react';
+import { Form, Input, Button } from 'antd-mobile';
+
+function App() {
+  const [form] = Form.useForm();
+
+  const onFinish = (values) => {
+    console.log('Success:', values);
+  };
+
+  const onReset = () => {
+    form.resetFields();
+  };
+
+  return (
+    <Form form={form} onFinish={onFinish}>
+      <Form.Item name="username" label="Username">
+        <Input placeholder="Enter username" />
+      </Form.Item>
+      <Form.Item>
+        <Button color="primary" block type="submit">Submit</Button>
+        <Button block onClick={onReset}>Reset</Button>
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+### Key Points
+
+- Use `Form` component to wrap form fields
+- Use `Form.Item` for each form field
+- Use `rules` prop for validation
+- Use `onFinish` for form submission
+- Use `Form.useForm()` for form instance and methods
+- Use `type="submit"` for submit button
+- Form is optimized for mobile input experience

skills/antd-skills/ant-design-mobile/examples/components/grid.md

@@ -0,0 +1,153 @@
+# Grid | 宫格
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Grid component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic grid
+- Grid with columns
+- Grid with gap
+- Grid with custom content
+- Grid with icons
+
+### Example: Basic Grid
+
+```javascript
+import React from 'react';
+import { Grid } from 'antd-mobile';
+
+const data = Array.from(new Array(4)).map((_, i) => ({
+  icon: 'https://via.placeholder.com/50',
+  text: `选项${i + 1}`,
+}));
+
+function App() {
+  return (
+    <Grid columns={2} gap={8}>
+      {data.map((item, index) => (
+        <Grid.Item key={index}>
+          <div style={{ textAlign: 'center' }}>
+            <img
+              src={item.icon}
+              alt={item.text}
+              style={{ width: 50, height: 50 }}
+            />
+            <div>{item.text}</div>
+          </div>
+        </Grid.Item>
+      ))}
+    </Grid>
+  );
+}
+```
+
+### Example: Grid with Columns
+
+```javascript
+import React from 'react';
+import { Grid } from 'antd-mobile';
+
+const data = Array.from(new Array(6)).map((_, i) => ({
+  text: `选项${i + 1}`,
+}));
+
+function App() {
+  return (
+    <>
+      <Grid columns={2} gap={8}>
+        {data.map((item, index) => (
+          <Grid.Item key={index}>
+            <div style={{ textAlign: 'center', padding: '20px' }}>
+              {item.text}
+            </div>
+          </Grid.Item>
+        ))}
+      </Grid>
+      <Grid columns={3} gap={8}>
+        {data.map((item, index) => (
+          <Grid.Item key={index}>
+            <div style={{ textAlign: 'center', padding: '20px' }}>
+              {item.text}
+            </div>
+          </Grid.Item>
+        ))}
+      </Grid>
+    </>
+  );
+}
+```
+
+### Example: Grid with Icons
+
+```javascript
+import React from 'react';
+import { Grid } from 'antd-mobile';
+import { AppOutline, UserOutline, SearchOutline } from 'antd-mobile-icons';
+
+const data = [
+  { icon: <AppOutline />, text: '应用' },
+  { icon: <UserOutline />, text: '用户' },
+  { icon: <SearchOutline />, text: '搜索' },
+];
+
+function App() {
+  return (
+    <Grid columns={3} gap={8}>
+      {data.map((item, index) => (
+        <Grid.Item key={index}>
+          <div style={{ textAlign: 'center' }}>
+            <div style={{ fontSize: 24, marginBottom: 8 }}>
+              {item.icon}
+            </div>
+            <div>{item.text}</div>
+          </div>
+        </Grid.Item>
+      ))}
+    </Grid>
+  );
+}
+```
+
+### Example: Grid with Click
+
+```javascript
+import React from 'react';
+import { Grid, Toast } from 'antd-mobile';
+
+const data = Array.from(new Array(4)).map((_, i) => ({
+  text: `选项${i + 1}`,
+}));
+
+function App() {
+  return (
+    <Grid columns={2} gap={8}>
+      {data.map((item, index) => (
+        <Grid.Item
+          key={index}
+          onClick={() => {
+            Toast.show(`点击了${item.text}`);
+          }}
+        >
+          <div style={{ textAlign: 'center', padding: '20px' }}>
+            {item.text}
+          </div>
+        </Grid.Item>
+      ))}
+    </Grid>
+  );
+}
+```
+
+### Key Points
+
+- Use `columns` prop for column count
+- Use `gap` prop for gap between items
+- Use `Grid.Item` for grid items
+- Grid items can have custom content
+- Grid supports click events
+- Grid is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/icon.md

@@ -0,0 +1,114 @@
+# Icon | 图标
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Icon component in Ant Design Mobile.
+
+### Key Concepts
+
+- Icon types and names
+- Icon sizes
+- Icon colors
+- Custom icons
+- Icon with text
+
+### Example: Basic Icon
+
+```javascript
+import React from 'react';
+import { SearchOutline, HeartFill, StarOutline } from 'antd-mobile-icons';
+
+function App() {
+  return (
+    <>
+      <SearchOutline />
+      <HeartFill />
+      <StarOutline />
+    </>
+  );
+}
+```
+
+### Example: Icon Sizes
+
+```javascript
+import React from 'react';
+import { SearchOutline } from 'antd-mobile-icons';
+
+function App() {
+  return (
+    <>
+      <SearchOutline fontSize={16} />
+      <SearchOutline fontSize={24} />
+      <SearchOutline fontSize={32} />
+    </>
+  );
+}
+```
+
+### Example: Icon Colors
+
+```javascript
+import React from 'react';
+import { HeartFill } from 'antd-mobile-icons';
+
+function App() {
+  return (
+    <>
+      <HeartFill color="red" />
+      <HeartFill color="#409EFF" />
+      <HeartFill color="rgb(64, 158, 255)" />
+    </>
+  );
+}
+```
+
+### Example: Icon with Button
+
+```javascript
+import React from 'react';
+import { Button } from 'antd-mobile';
+import { SearchOutline } from 'antd-mobile-icons';
+
+function App() {
+  return (
+    <Button color="primary">
+      <SearchOutline />
+      <span style={{ marginLeft: 4 }}>搜索</span>
+    </Button>
+  );
+}
+```
+
+### Example: Icon in List
+
+```javascript
+import React from 'react';
+import { List } from 'antd-mobile';
+import { RightOutline } from 'antd-mobile-icons';
+
+function App() {
+  return (
+    <List>
+      <List.Item
+        prefix={<RightOutline />}
+        onClick={() => {}}
+      >
+        列表项
+      </List.Item>
+    </List>
+  );
+}
+```
+
+### Key Points
+
+- Import icons from `antd-mobile-icons` package
+- Use `fontSize` prop for icon size
+- Use `color` prop for icon color
+- Icons can be used standalone or with other components
+- Icon names follow the pattern: `NameOutline` or `NameFill`
+- Icons are optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/image-viewer.md

@@ -0,0 +1,150 @@
+# ImageViewer | 图片查看器
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the ImageViewer component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic image viewer
+- Image viewer with multiple images
+- Image viewer with index
+- Image viewer with controls
+- Image viewer with zoom
+
+### Example: Basic ImageViewer
+
+```javascript
+import React, { useState } from 'react';
+import { ImageViewer, Button } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>查看图片</Button>
+      <ImageViewer
+        image="https://via.placeholder.com/800x600"
+        visible={visible}
+        onClose={() => setVisible(false)}
+      />
+    </>
+  );
+}
+```
+
+### Example: ImageViewer with Multiple Images
+
+```javascript
+import React, { useState } from 'react';
+import { ImageViewer, Button, Image } from 'antd-mobile';
+
+const images = [
+  'https://via.placeholder.com/800x600/ff0000',
+  'https://via.placeholder.com/800x600/00ff00',
+  'https://via.placeholder.com/800x600/0000ff',
+];
+
+function App() {
+  const [visible, setVisible] = useState(false);
+  const [index, setIndex] = useState(0);
+
+  return (
+    <>
+      <div>
+        {images.map((img, i) => (
+          <Image
+            key={i}
+            src={img}
+            width={100}
+            height={100}
+            onClick={() => {
+              setIndex(i);
+              setVisible(true);
+            }}
+          />
+        ))}
+      </div>
+      <ImageViewer
+        image={images}
+        visible={visible}
+        onClose={() => setVisible(false)}
+        defaultIndex={index}
+      />
+    </>
+  );
+}
+```
+
+### Example: ImageViewer with Index
+
+```javascript
+import React, { useState } from 'react';
+import { ImageViewer, Button } from 'antd-mobile';
+
+const images = [
+  'https://via.placeholder.com/800x600/ff0000',
+  'https://via.placeholder.com/800x600/00ff00',
+  'https://via.placeholder.com/800x600/0000ff',
+];
+
+function App() {
+  const [visible, setVisible] = useState(false);
+  const [index, setIndex] = useState(0);
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>查看图片</Button>
+      <ImageViewer
+        image={images}
+        visible={visible}
+        onClose={() => setVisible(false)}
+        defaultIndex={index}
+        onIndexChange={(idx) => setIndex(idx)}
+      />
+    </>
+  );
+}
+```
+
+### Example: ImageViewer with Controls
+
+```javascript
+import React, { useState } from 'react';
+import { ImageViewer, Button } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>查看图片</Button>
+      <ImageViewer
+        image="https://via.placeholder.com/800x600"
+        visible={visible}
+        onClose={() => setVisible(false)}
+        renderFooter={() => (
+          <div style={{ padding: '20px', color: '#fff' }}>
+            图片描述
+          </div>
+        )}
+      />
+    </>
+  );
+}
+```
+
+### Key Points
+
+- Use `image` prop for image URL or array of URLs
+- Use `visible` prop to control visibility
+- Use `onClose` callback for close event
+- Use `defaultIndex` prop for initial index
+- Use `onIndexChange` callback for index change
+- Use `renderFooter` prop for custom footer
+- ImageViewer supports zoom and pan gestures
+- ImageViewer is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/image.md

@@ -0,0 +1,155 @@
+# Image | 图片
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Image component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic image
+- Image with lazy load
+- Image with placeholder
+- Image with error fallback
+- Image with preview
+
+### Example: Basic Image
+
+```javascript
+import React from 'react';
+import { Image } from 'antd-mobile';
+
+function App() {
+  return (
+    <Image
+      src="https://via.placeholder.com/300x200"
+      alt="示例图片"
+      width={300}
+      height={200}
+    />
+  );
+}
+```
+
+### Example: Image with Lazy Load
+
+```javascript
+import React from 'react';
+import { Image } from 'antd-mobile';
+
+function App() {
+  return (
+    <Image
+      src="https://via.placeholder.com/300x200"
+      alt="示例图片"
+      width={300}
+      height={200}
+      lazy
+    />
+  );
+}
+```
+
+### Example: Image with Placeholder
+
+```javascript
+import React from 'react';
+import { Image } from 'antd-mobile';
+
+function App() {
+  return (
+    <Image
+      src="https://via.placeholder.com/300x200"
+      alt="示例图片"
+      width={300}
+      height={200}
+      placeholder="加载中..."
+    />
+  );
+}
+```
+
+### Example: Image with Error Fallback
+
+```javascript
+import React from 'react';
+import { Image } from 'antd-mobile';
+
+function App() {
+  return (
+    <Image
+      src="https://invalid-url.com/image.jpg"
+      alt="示例图片"
+      width={300}
+      height={200}
+      fallback="https://via.placeholder.com/300x200?text=Error"
+    />
+  );
+}
+```
+
+### Example: Image with Preview
+
+```javascript
+import React from 'react';
+import { Image } from 'antd-mobile';
+
+function App() {
+  return (
+    <Image
+      src="https://via.placeholder.com/300x200"
+      alt="示例图片"
+      width={300}
+      height={200}
+      fit="cover"
+      preview
+    />
+  );
+}
+```
+
+### Example: Image Fit Modes
+
+```javascript
+import React from 'react';
+import { Image } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Image
+        src="https://via.placeholder.com/300x200"
+        width={150}
+        height={150}
+        fit="contain"
+      />
+      <Image
+        src="https://via.placeholder.com/300x200"
+        width={150}
+        height={150}
+        fit="cover"
+      />
+      <Image
+        src="https://via.placeholder.com/300x200"
+        width={150}
+        height={150}
+        fit="fill"
+      />
+    </>
+  );
+}
+```
+
+### Key Points
+
+- Use `src` prop for image URL
+- Use `alt` prop for alt text
+- Use `width` and `height` props for dimensions
+- Use `lazy` prop for lazy loading
+- Use `placeholder` prop for loading placeholder
+- Use `fallback` prop for error fallback
+- Use `preview` prop for preview
+- Use `fit` prop for image fit mode (contain, cover, fill)
+- Image is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/index-bar.md

@@ -0,0 +1,147 @@
+# IndexBar | 索引栏
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the IndexBar component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic index bar
+- Index bar with sections
+- Index bar with sticky
+- Index bar with custom index
+
+### Example: Basic IndexBar
+
+```javascript
+import React from 'react';
+import { IndexBar } from 'antd-mobile';
+
+const charCodeOfA = 'A'.charCodeAt(0);
+const groups = Array(26)
+  .fill('')
+  .map((_, i) => ({
+    title: String.fromCharCode(charCodeOfA + i),
+    items: Array(Math.floor(Math.random() * 5) + 3)
+      .fill('')
+      .map((_, j) => ({
+        name: `${String.fromCharCode(charCodeOfA + i)}${j + 1}`,
+      })),
+  }));
+
+function App() {
+  return (
+    <IndexBar>
+      {groups.map(group => (
+        <IndexBar.Panel
+          key={group.title}
+          index={group.title}
+          title={`标题 ${group.title}`}
+        >
+          {group.items.map(item => (
+            <div key={item.name} style={{ padding: '10px' }}>
+              {item.name}
+            </div>
+          ))}
+        </IndexBar.Panel>
+      ))}
+    </IndexBar>
+  );
+}
+```
+
+### Example: IndexBar with Sticky
+
+```javascript
+import React from 'react';
+import { IndexBar } from 'antd-mobile';
+
+const charCodeOfA = 'A'.charCodeAt(0);
+const groups = Array(26)
+  .fill('')
+  .map((_, i) => ({
+    title: String.fromCharCode(charCodeOfA + i),
+    items: Array(Math.floor(Math.random() * 5) + 3)
+      .fill('')
+      .map((_, j) => ({
+        name: `${String.fromCharCode(charCodeOfA + i)}${j + 1}`,
+      })),
+  }));
+
+function App() {
+  return (
+    <IndexBar sticky>
+      {groups.map(group => (
+        <IndexBar.Panel
+          key={group.title}
+          index={group.title}
+          title={`标题 ${group.title}`}
+        >
+          {group.items.map(item => (
+            <div key={item.name} style={{ padding: '10px' }}>
+              {item.name}
+            </div>
+          ))}
+        </IndexBar.Panel>
+      ))}
+    </IndexBar>
+  );
+}
+```
+
+### Example: IndexBar with Custom Index
+
+```javascript
+import React from 'react';
+import { IndexBar } from 'antd-mobile';
+
+const groups = [
+  {
+    title: '#',
+    items: [
+      { name: '123' },
+      { name: '456' },
+    ],
+  },
+  {
+    title: 'A',
+    items: [
+      { name: 'Apple' },
+      { name: 'Ant' },
+    ],
+  },
+];
+
+function App() {
+  return (
+    <IndexBar>
+      {groups.map(group => (
+        <IndexBar.Panel
+          key={group.title}
+          index={group.title}
+          title={`标题 ${group.title}`}
+        >
+          {group.items.map(item => (
+            <div key={item.name} style={{ padding: '10px' }}>
+              {item.name}
+            </div>
+          ))}
+        </IndexBar.Panel>
+      ))}
+    </IndexBar>
+  );
+}
+```
+
+### Key Points
+
+- Use `IndexBar` for index bar container
+- Use `IndexBar.Panel` for index sections
+- Use `index` prop for index value
+- Use `title` prop for section title
+- Use `sticky` prop for sticky header
+- IndexBar is optimized for mobile display
+- IndexBar supports touch scrolling

skills/antd-skills/ant-design-mobile/examples/components/infinite-scroll.md

@@ -0,0 +1,89 @@
+# InfiniteScroll | 无限滚动
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the InfiniteScroll component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic InfiniteScroll
+- InfiniteScroll with data loading
+- InfiniteScroll with hasMore
+- InfiniteScroll callbacks
+
+### Example: Basic InfiniteScroll
+
+```javascript
+import React, { useState } from 'react';
+import { InfiniteScroll, List } from 'antd-mobile';
+
+function App() {
+  const [data, setData] = useState(Array.from({ length: 10 }, (_, i) => `Item ${i + 1}`));
+  const [hasMore, setHasMore] = useState(true);
+
+  const loadMore = async () => {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    const newData = Array.from({ length: 10 }, (_, i) => `Item ${data.length + i + 1}`);
+    setData([...data, ...newData]);
+    setHasMore(data.length < 50);
+  };
+
+  return (
+    <>
+      <List>
+        {data.map((item, index) => (
+          <List.Item key={index}>{item}</List.Item>
+        ))}
+      </List>
+      <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
+    </>
+  );
+}
+```
+
+### Example: InfiniteScroll with Loading
+
+```javascript
+import React, { useState } from 'react';
+import { InfiniteScroll, List } from 'antd-mobile';
+
+function App() {
+  const [data, setData] = useState(Array.from({ length: 10 }, (_, i) => `Item ${i + 1}`));
+  const [hasMore, setHasMore] = useState(true);
+
+  const loadMore = async () => {
+    await new Promise(resolve => setTimeout(resolve, 2000));
+    const newData = Array.from({ length: 10 }, (_, i) => `Item ${data.length + i + 1}`);
+    setData([...data, ...newData]);
+    setHasMore(data.length < 50);
+  };
+
+  return (
+    <>
+      <List>
+        {data.map((item, index) => (
+          <List.Item key={index}>{item}</List.Item>
+        ))}
+      </List>
+      <InfiniteScroll
+        loadMore={loadMore}
+        hasMore={hasMore}
+        threshold={10}
+      />
+    </>
+  );
+}
+```
+
+### Key Points
+
+- Use `InfiniteScroll` after scrollable content
+- Use `loadMore` for loading handler (async function)
+- Use `hasMore` prop to control if more data available
+- Use `threshold` prop to set trigger distance
+- Load handler should return a Promise
+- Optimized for mobile scrolling
+- Works with List, ScrollView, etc.

skills/antd-skills/ant-design-mobile/examples/components/input.md

@@ -0,0 +1,131 @@
+# Input | 输入框
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Input component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic Input
+- Input types
+- Input with clear button
+- Input with prefix/suffix
+- Input validation
+- Virtual keyboard
+
+### Example: Basic Input
+
+```javascript
+import React, { useState } from 'react';
+import { Input } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+
+  return (
+    <Input
+      placeholder="Enter text"
+      value={value}
+      onChange={(val) => setValue(val)}
+    />
+  );
+}
+```
+
+### Example: Input Types
+
+```javascript
+import React from 'react';
+import { Input } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Input type="text" placeholder="Text input" />
+      <Input type="number" placeholder="Number input" />
+      <Input type="password" placeholder="Password input" />
+      <Input type="tel" placeholder="Phone input" />
+    </>
+  );
+}
+```
+
+### Example: Input with Clear Button
+
+```javascript
+import React, { useState } from 'react';
+import { Input } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+
+  return (
+    <Input
+      placeholder="Enter text"
+      value={value}
+      onChange={(val) => setValue(val)}
+      clearable
+    />
+  );
+}
+```
+
+### Example: Input with Prefix/Suffix
+
+```javascript
+import React from 'react';
+import { Input } from 'antd-mobile';
+import { SearchOutline } from 'antd-mobile-icons';
+
+function App() {
+  return (
+    <Input
+      placeholder="Search"
+      prefix={<SearchOutline />}
+    />
+  );
+}
+```
+
+### Example: Input Validation
+
+```javascript
+import React, { useState } from 'react';
+import { Input } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+  const [error, setError] = useState('');
+
+  const handleChange = (val) => {
+    setValue(val);
+    if (val.length < 6) {
+      setError('At least 6 characters');
+    } else {
+      setError('');
+    }
+  };
+
+  return (
+    <Input
+      placeholder="Enter text"
+      value={value}
+      onChange={handleChange}
+      error={error}
+    />
+  );
+}
+```
+
+### Key Points
+
+- Use `Input` for text input
+- Use `type` prop for input type (text, number, password, tel, etc.)
+- Use `clearable` prop for clear button
+- Use `prefix` and `suffix` for icons
+- Use `error` prop for validation errors
+- Use `onChange` handler receives value directly
+- Optimized for mobile virtual keyboard

skills/antd-skills/ant-design-mobile/examples/components/list.md

@@ -0,0 +1,108 @@
+# List | 列表
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the List component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic List
+- List with items
+- List with click handlers
+- List with icons
+- List with descriptions
+- List with arrows
+
+### Example: Basic List
+
+```javascript
+import React from 'react';
+import { List } from 'antd-mobile';
+
+function App() {
+  return (
+    <List>
+      <List.Item>Item 1</List.Item>
+      <List.Item>Item 2</List.Item>
+      <List.Item>Item 3</List.Item>
+    </List>
+  );
+}
+```
+
+### Example: List with Click Handlers
+
+```javascript
+import React from 'react';
+import { List, Toast } from 'antd-mobile';
+
+function App() {
+  const handleClick = (item) => {
+    Toast.show(`Clicked: ${item}`);
+  };
+
+  return (
+    <List>
+      <List.Item onClick={() => handleClick('Item 1')}>
+        Item 1
+      </List.Item>
+      <List.Item onClick={() => handleClick('Item 2')}>
+        Item 2
+      </List.Item>
+    </List>
+  );
+}
+```
+
+### Example: List with Icons and Descriptions
+
+```javascript
+import React from 'react';
+import { List } from 'antd-mobile';
+import { RightOutline } from 'antd-mobile-icons';
+
+function App() {
+  return (
+    <List>
+      <List.Item
+        prefix="Prefix"
+        description="Description text"
+        extra={<RightOutline />}
+        onClick={() => {}}
+      >
+        Title
+      </List.Item>
+    </List>
+  );
+}
+```
+
+### Example: List with Arrow
+
+```javascript
+import React from 'react';
+import { List } from 'antd-mobile';
+
+function App() {
+  return (
+    <List>
+      <List.Item arrow>Item with arrow</List.Item>
+      <List.Item arrow="right">Item with right arrow</List.Item>
+      <List.Item arrow="down">Item with down arrow</List.Item>
+    </List>
+  );
+}
+```
+
+### Key Points
+
+- Use `List` component to wrap list items
+- Use `List.Item` for each list item
+- Use `onClick` for item click handlers
+- Use `prefix` and `description` for item content
+- Use `extra` for additional content (icons, etc.)
+- Use `arrow` prop for navigation indicators
+- List is optimized for mobile scrolling

skills/antd-skills/ant-design-mobile/examples/components/loading.md

@@ -0,0 +1,98 @@
+# Loading | 加载
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Loading component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic loading
+- Loading with text
+- Loading with spinner
+- Loading with mask
+- Loading with full screen
+
+### Example: Basic Loading
+
+```javascript
+import React, { useState } from 'react';
+import { Loading, Button } from 'antd-mobile';
+
+function App() {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setLoading(true)}>显示加载</Button>
+      <Loading visible={loading} />
+    </>
+  );
+}
+```
+
+### Example: Loading with Text
+
+```javascript
+import React, { useState } from 'react';
+import { Loading, Button } from 'antd-mobile';
+
+function App() {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setLoading(true)}>显示加载</Button>
+      <Loading visible={loading}>加载中...</Loading>
+    </>
+  );
+}
+```
+
+### Example: Loading with Mask
+
+```javascript
+import React, { useState } from 'react';
+import { Loading, Button } from 'antd-mobile';
+
+function App() {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setLoading(true)}>显示加载</Button>
+      <Loading visible={loading} mask />
+    </>
+  );
+}
+```
+
+### Example: Loading with Full Screen
+
+```javascript
+import React, { useState } from 'react';
+import { Loading, Button } from 'antd-mobile';
+
+function App() {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setLoading(true)}>显示加载</Button>
+      <Loading visible={loading} mask fullScreen>
+        加载中...
+      </Loading>
+    </>
+  );
+}
+```
+
+### Key Points
+
+- Use `visible` prop to control visibility
+- Use children for loading text
+- Use `mask` prop for mask overlay
+- Use `fullScreen` prop for full screen loading
+- Loading is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/mask.md

@@ -0,0 +1,112 @@
+# Mask | 遮罩层
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Mask component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic mask
+- Mask with visible
+- Mask with opacity
+- Mask with clickable
+- Mask with content
+
+### Example: Basic Mask
+
+```javascript
+import React, { useState } from 'react';
+import { Mask, Button } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>显示遮罩</Button>
+      <Mask visible={visible} onMaskClick={() => setVisible(false)} />
+    </>
+  );
+}
+```
+
+### Example: Mask with Opacity
+
+```javascript
+import React, { useState } from 'react';
+import { Mask, Button } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>显示遮罩</Button>
+      <Mask
+        visible={visible}
+        onMaskClick={() => setVisible(false)}
+        opacity={0.5}
+      />
+    </>
+  );
+}
+```
+
+### Example: Mask with Content
+
+```javascript
+import React, { useState } from 'react';
+import { Mask, Button } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>显示遮罩</Button>
+      <Mask
+        visible={visible}
+        onMaskClick={() => setVisible(false)}
+      >
+        <div style={{ padding: '20px', background: '#fff', borderRadius: '8px' }}>
+          内容
+        </div>
+      </Mask>
+    </>
+  );
+}
+```
+
+### Example: Mask with Clickable
+
+```javascript
+import React, { useState } from 'react';
+import { Mask, Button } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>显示遮罩</Button>
+      <Mask
+        visible={visible}
+        onMaskClick={() => setVisible(false)}
+        disableBodyScroll={false}
+      />
+    </>
+  );
+}
+```
+
+### Key Points
+
+- Use `visible` prop to control visibility
+- Use `onMaskClick` callback for mask click
+- Use `opacity` prop for mask opacity
+- Use `disableBodyScroll` prop to disable body scroll
+- Use children for mask content
+- Mask is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/modal.md

@@ -0,0 +1,143 @@
+# Modal | 对话框
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Modal component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic Modal
+- Modal with content
+- Confirm Modal
+- Modal methods (Modal.show, Modal.alert, etc.)
+- Modal with custom content
+- Modal actions
+
+### Example: Basic Modal
+
+```javascript
+import React, { useState } from 'react';
+import { Modal, Button } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button color="primary" onClick={() => setVisible(true)}>
+        Open Modal
+      </Button>
+      <Modal
+        visible={visible}
+        content="Modal content"
+        closeOnAction
+        onClose={() => setVisible(false)}
+        actions={[
+          {
+            key: 'cancel',
+            text: 'Cancel',
+          },
+          {
+            key: 'confirm',
+            text: 'Confirm',
+            primary: true,
+          },
+        ]}
+      />
+    </>
+  );
+}
+```
+
+### Example: Modal Methods
+
+```javascript
+import React from 'react';
+import { Modal, Button } from 'antd-mobile';
+
+function App() {
+  const showAlert = () => {
+    Modal.alert({
+      content: 'This is an alert',
+      onConfirm: () => {
+        console.log('Confirmed');
+      },
+    });
+  };
+
+  const showConfirm = () => {
+    Modal.confirm({
+      content: 'Are you sure?',
+      onConfirm: () => {
+        console.log('Confirmed');
+      },
+      onCancel: () => {
+        console.log('Cancelled');
+      },
+    });
+  };
+
+  return (
+    <>
+      <Button onClick={showAlert}>Show Alert</Button>
+      <Button onClick={showConfirm}>Show Confirm</Button>
+    </>
+  );
+}
+```
+
+### Example: Modal with Custom Content
+
+```javascript
+import React, { useState } from 'react';
+import { Modal, Button, Input } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+  const [value, setValue] = useState('');
+
+  return (
+    <>
+      <Button color="primary" onClick={() => setVisible(true)}>
+        Open Modal
+      </Button>
+      <Modal
+        visible={visible}
+        content={
+          <Input
+            placeholder="Enter text"
+            value={value}
+            onChange={(val) => setValue(val)}
+          />
+        }
+        closeOnAction
+        onClose={() => setVisible(false)}
+        actions={[
+          {
+            key: 'confirm',
+            text: 'Confirm',
+            primary: true,
+            onClick: () => {
+              console.log(value);
+              setVisible(false);
+            },
+          },
+        ]}
+      />
+    </>
+  );
+}
+```
+
+### Key Points
+
+- Use `visible` prop to control modal visibility
+- Use `content` prop for modal content
+- Use `actions` prop for action buttons
+- Use `onClose` for close handler
+- Use `Modal.alert()`, `Modal.confirm()` for static methods
+- Use `closeOnAction` to close on action click
+- Modal is optimized for mobile screens

skills/antd-skills/ant-design-mobile/examples/components/nav-bar.md

@@ -0,0 +1,118 @@
+# NavBar | 导航栏
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the NavBar component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic navbar
+- Navbar with back button
+- Navbar with title
+- Navbar with right content
+- Navbar with custom styles
+
+### Example: Basic NavBar
+
+```javascript
+import React from 'react';
+import { NavBar } from 'antd-mobile';
+
+function App() {
+  return (
+    <NavBar>标题</NavBar>
+  );
+}
+```
+
+### Example: NavBar with Back Button
+
+```javascript
+import React from 'react';
+import { NavBar } from 'antd-mobile';
+
+function App() {
+  return (
+    <NavBar
+      onBack={() => {
+        console.log('返回');
+      }}
+    >
+      标题
+    </NavBar>
+  );
+}
+```
+
+### Example: NavBar with Right Content
+
+```javascript
+import React from 'react';
+import { NavBar, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <NavBar
+      right={
+        <Button size="small" color="primary">
+          操作
+        </Button>
+      }
+    >
+      标题
+    </NavBar>
+  );
+}
+```
+
+### Example: NavBar with Left Content
+
+```javascript
+import React from 'react';
+import { NavBar } from 'antd-mobile';
+import { LeftOutline } from 'antd-mobile-icons';
+
+function App() {
+  return (
+    <NavBar
+      left={<LeftOutline />}
+      right="操作"
+    >
+      标题
+    </NavBar>
+  );
+}
+```
+
+### Example: NavBar with Custom Styles
+
+```javascript
+import React from 'react';
+import { NavBar } from 'antd-mobile';
+
+function App() {
+  return (
+    <NavBar
+      style={{
+        background: '#409EFF',
+        color: '#fff',
+      }}
+    >
+      标题
+    </NavBar>
+  );
+}
+```
+
+### Key Points
+
+- Use children for navbar title
+- Use `onBack` callback for back button
+- Use `left` prop for left content
+- Use `right` prop for right content
+- Use `style` prop for custom styles
+- NavBar is optimized for mobile display
+- NavBar supports safe area insets

skills/antd-skills/ant-design-mobile/examples/components/notice-bar.md

@@ -0,0 +1,117 @@
+# NoticeBar | 通告栏
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the NoticeBar component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic notice bar
+- Notice bar with icon
+- Notice bar with close
+- Notice bar with action
+- Notice bar with scroll
+
+### Example: Basic NoticeBar
+
+```javascript
+import React from 'react';
+import { NoticeBar } from 'antd-mobile';
+
+function App() {
+  return (
+    <NoticeBar content="这是一条通知消息" />
+  );
+}
+```
+
+### Example: NoticeBar with Icon
+
+```javascript
+import React from 'react';
+import { NoticeBar } from 'antd-mobile';
+import { InfoCircleOutline } from 'antd-mobile-icons';
+
+function App() {
+  return (
+    <NoticeBar
+      content="这是一条通知消息"
+      icon={<InfoCircleOutline />}
+    />
+  );
+}
+```
+
+### Example: NoticeBar with Close
+
+```javascript
+import React, { useState } from 'react';
+import { NoticeBar } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(true);
+
+  return (
+    <>
+      {visible && (
+        <NoticeBar
+          content="这是一条通知消息"
+          closeable
+          onClose={() => setVisible(false)}
+        />
+      )}
+    </>
+  );
+}
+```
+
+### Example: NoticeBar with Action
+
+```javascript
+import React from 'react';
+import { NoticeBar } from 'antd-mobile';
+
+function App() {
+  return (
+    <NoticeBar
+      content="这是一条通知消息"
+      extra={<span>查看</span>}
+      onExtraClick={() => {
+        console.log('点击了查看');
+      }}
+    />
+  );
+}
+```
+
+### Example: NoticeBar with Scroll
+
+```javascript
+import React from 'react';
+import { NoticeBar } from 'antd-mobile';
+
+function App() {
+  return (
+    <NoticeBar
+      content="这是一条很长的通知消息，会自动滚动显示"
+      color="alert"
+      wrap
+    />
+  );
+}
+```
+
+### Key Points
+
+- Use `content` prop for notice content
+- Use `icon` prop for notice icon
+- Use `closeable` prop for close button
+- Use `onClose` callback for close event
+- Use `extra` prop for extra content
+- Use `onExtraClick` callback for extra click
+- Use `wrap` prop for text wrapping
+- Use `color` prop for notice color (default, alert)
+- NoticeBar is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/picker.md

@@ -0,0 +1,152 @@
+# Picker | 选择器
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Picker component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic Picker
+- Picker with columns
+- Picker with multiple columns
+- Picker with async data
+- Picker with custom rendering
+
+### Example: Basic Picker
+
+```javascript
+import React, { useState } from 'react';
+import { Picker, Button } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+  const [value, setValue] = useState(null);
+
+  const columns = [
+    [
+      { label: 'Option 1', value: '1' },
+      { label: 'Option 2', value: '2' },
+      { label: 'Option 3', value: '3' },
+    ],
+  ];
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>
+        {value ? columns[0].find(item => item.value === value[0])?.label : 'Select'}
+      </Button>
+      <Picker
+        visible={visible}
+        columns={columns}
+        value={value}
+        onConfirm={(val) => {
+          setValue(val);
+          setVisible(false);
+        }}
+        onCancel={() => setVisible(false)}
+      />
+    </>
+  );
+}
+```
+
+### Example: Multi-column Picker
+
+```javascript
+import React, { useState } from 'react';
+import { Picker, Button } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+  const [value, setValue] = useState(null);
+
+  const columns = [
+    [
+      { label: 'Province 1', value: '1' },
+      { label: 'Province 2', value: '2' },
+    ],
+    [
+      { label: 'City 1', value: '1' },
+      { label: 'City 2', value: '2' },
+    ],
+  ];
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>Select</Button>
+      <Picker
+        visible={visible}
+        columns={columns}
+        value={value}
+        onConfirm={(val) => {
+          setValue(val);
+          setVisible(false);
+        }}
+        onCancel={() => setVisible(false)}
+      />
+    </>
+  );
+}
+```
+
+### Example: Cascading Picker
+
+```javascript
+import React, { useState } from 'react';
+import { Picker, Button } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+  const [value, setValue] = useState(null);
+
+  const [columns, setColumns] = useState([
+    [
+      { label: 'Province 1', value: '1' },
+      { label: 'Province 2', value: '2' },
+    ],
+  ]);
+
+  const handleColumnChange = (val, index) => {
+    // Update columns based on selection
+    const newColumns = [...columns];
+    if (index === 0) {
+      newColumns[1] = [
+        { label: 'City 1', value: '1' },
+        { label: 'City 2', value: '2' },
+      ];
+      setColumns(newColumns);
+    }
+  };
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>Select</Button>
+      <Picker
+        visible={visible}
+        columns={columns}
+        value={value}
+        onColumnChange={handleColumnChange}
+        onConfirm={(val) => {
+          setValue(val);
+          setVisible(false);
+        }}
+        onCancel={() => setVisible(false)}
+      />
+    </>
+  );
+}
+```
+
+### Key Points
+
+- Use `Picker` component for selection
+- Use `columns` prop for picker options
+- Use `visible` prop to control picker visibility
+- Use `value` prop for selected value
+- Use `onConfirm` for confirmation handler
+- Use `onCancel` for cancel handler
+- Use `onColumnChange` for cascading pickers
+- Picker is optimized for mobile touch interaction

skills/antd-skills/ant-design-mobile/examples/components/popup.md

@@ -0,0 +1,122 @@
+# Popup | 弹出层
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Popup component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic popup
+- Popup with position
+- Popup with mask
+- Popup with close button
+- Popup with content
+
+### Example: Basic Popup
+
+```javascript
+import React, { useState } from 'react';
+import { Popup, Button } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>显示弹出层</Button>
+      <Popup
+        visible={visible}
+        onMaskClick={() => setVisible(false)}
+      >
+        <div style={{ padding: '20px' }}>内容</div>
+      </Popup>
+    </>
+  );
+}
+```
+
+### Example: Popup with Position
+
+```javascript
+import React, { useState } from 'react';
+import { Popup, Button } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>显示弹出层</Button>
+      <Popup
+        visible={visible}
+        onMaskClick={() => setVisible(false)}
+        position="bottom"
+      >
+        <div style={{ padding: '20px' }}>内容</div>
+      </Popup>
+    </>
+  );
+}
+```
+
+### Example: Popup with Close Button
+
+```javascript
+import React, { useState } from 'react';
+import { Popup, Button } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>显示弹出层</Button>
+      <Popup
+        visible={visible}
+        onMaskClick={() => setVisible(false)}
+        showCloseButton
+        onClose={() => setVisible(false)}
+      >
+        <div style={{ padding: '20px' }}>内容</div>
+      </Popup>
+    </>
+  );
+}
+```
+
+### Example: Popup with Title
+
+```javascript
+import React, { useState } from 'react';
+import { Popup, Button } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setVisible(true)}>显示弹出层</Button>
+      <Popup
+        visible={visible}
+        onMaskClick={() => setVisible(false)}
+        title="标题"
+      >
+        <div style={{ padding: '20px' }}>内容</div>
+      </Popup>
+    </>
+  );
+}
+```
+
+### Key Points
+
+- Use `visible` prop to control visibility
+- Use `onMaskClick` callback for mask click
+- Use `position` prop for popup position (top, bottom, left, right, center)
+- Use `showCloseButton` prop for close button
+- Use `onClose` callback for close event
+- Use `title` prop for popup title
+- Popup is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/pull-to-refresh.md

@@ -0,0 +1,85 @@
+# PullToRefresh | 下拉刷新
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the PullToRefresh component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic PullToRefresh
+- PullToRefresh with data loading
+- Custom refresh indicator
+- PullToRefresh callbacks
+
+### Example: Basic PullToRefresh
+
+```javascript
+import React, { useState } from 'react';
+import { PullToRefresh, List } from 'antd-mobile';
+
+function App() {
+  const [data, setData] = useState(['Item 1', 'Item 2', 'Item 3']);
+
+  const onRefresh = async () => {
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    setData(['New Item 1', 'New Item 2', 'New Item 3']);
+  };
+
+  return (
+    <PullToRefresh onRefresh={onRefresh}>
+      <List>
+        {data.map((item, index) => (
+          <List.Item key={index}>{item}</List.Item>
+        ))}
+      </List>
+    </PullToRefresh>
+  );
+}
+```
+
+### Example: PullToRefresh with Loading State
+
+```javascript
+import React, { useState } from 'react';
+import { PullToRefresh, List } from 'antd-mobile';
+
+function App() {
+  const [data, setData] = useState(['Item 1', 'Item 2']);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const onRefresh = async () => {
+    setRefreshing(true);
+    try {
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      setData(['Updated Item 1', 'Updated Item 2']);
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
+  return (
+    <PullToRefresh
+      onRefresh={onRefresh}
+      refreshing={refreshing}
+    >
+      <List>
+        {data.map((item, index) => (
+          <List.Item key={index}>{item}</List.Item>
+        ))}
+      </List>
+    </PullToRefresh>
+  );
+}
+```
+
+### Key Points
+
+- Use `PullToRefresh` to wrap scrollable content
+- Use `onRefresh` for refresh handler (async function)
+- Use `refreshing` prop to control loading state
+- Refresh handler should return a Promise
+- Optimized for mobile pull gesture
+- Works with List, ScrollView, etc.

skills/antd-skills/ant-design-mobile/examples/components/radio.md

@@ -0,0 +1,141 @@
+# Radio | 单选框
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Radio component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic radio
+- Radio group
+- Radio with label
+- Radio states
+- Radio shapes
+
+### Example: Basic Radio
+
+```javascript
+import React, { useState } from 'react';
+import { Radio } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('1');
+
+  return (
+    <>
+      <Radio
+        checked={value === '1'}
+        onChange={() => setValue('1')}
+      >
+        选项1
+      </Radio>
+      <Radio
+        checked={value === '2'}
+        onChange={() => setValue('2')}
+      >
+        选项2
+      </Radio>
+    </>
+  );
+}
+```
+
+### Example: Radio Group
+
+```javascript
+import React, { useState } from 'react';
+import { Radio } from 'antd-mobile';
+
+const options = [
+  { label: '选项1', value: '1' },
+  { label: '选项2', value: '2' },
+  { label: '选项3', value: '3' },
+];
+
+function App() {
+  const [value, setValue] = useState('1');
+
+  return (
+    <Radio.Group
+      value={value}
+      onChange={(val) => setValue(val)}
+    >
+      {options.map(option => (
+        <Radio key={option.value} value={option.value}>
+          {option.label}
+        </Radio>
+      ))}
+    </Radio.Group>
+  );
+}
+```
+
+### Example: Radio States
+
+```javascript
+import React from 'react';
+import { Radio } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Radio defaultChecked>默认选中</Radio>
+      <Radio disabled>禁用</Radio>
+      <Radio checked disabled>禁用且选中</Radio>
+    </>
+  );
+}
+```
+
+### Example: Radio Shapes
+
+```javascript
+import React, { useState } from 'react';
+import { Radio } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('1');
+
+  return (
+    <>
+      <Radio.Group value={value} onChange={setValue}>
+        <Radio value="1" shape="square">方形</Radio>
+        <Radio value="2" shape="round">圆形</Radio>
+      </Radio.Group>
+    </>
+  );
+}
+```
+
+### Example: Radio with Form
+
+```javascript
+import React from 'react';
+import { Form, Radio } from 'antd-mobile';
+
+function App() {
+  return (
+    <Form>
+      <Form.Item name="gender" label="性别">
+        <Radio.Group>
+          <Radio value="male">男</Radio>
+          <Radio value="female">女</Radio>
+        </Radio.Group>
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+### Key Points
+
+- Use `checked` prop for radio state
+- Use `onChange` callback for state change
+- Use `Radio.Group` for radio group
+- Use `disabled` prop to disable radio
+- Use `shape` prop for radio shape (square, round)
+- Radio works well with Form component
+- Radio is optimized for mobile touch interactions

skills/antd-skills/ant-design-mobile/examples/components/rate.md

@@ -0,0 +1,143 @@
+# Rate | 评分
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Rate component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic rate
+- Rate with count
+- Rate with allow half
+- Rate with readonly
+- Rate with custom character
+
+### Example: Basic Rate
+
+```javascript
+import React, { useState } from 'react';
+import { Rate } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState(3);
+
+  return (
+    <Rate
+      value={value}
+      onChange={(val) => setValue(val)}
+    />
+  );
+}
+```
+
+### Example: Rate with Count
+
+```javascript
+import React, { useState } from 'react';
+import { Rate } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState(3);
+
+  return (
+    <>
+      <Rate
+        value={value}
+        onChange={(val) => setValue(val)}
+        count={5}
+      />
+      <Rate
+        value={value}
+        onChange={(val) => setValue(val)}
+        count={10}
+      />
+    </>
+  );
+}
+```
+
+### Example: Rate with Allow Half
+
+```javascript
+import React, { useState } from 'react';
+import { Rate } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState(3.5);
+
+  return (
+    <Rate
+      value={value}
+      onChange={(val) => setValue(val)}
+      allowHalf
+    />
+  );
+}
+```
+
+### Example: Rate Readonly
+
+```javascript
+import React from 'react';
+import { Rate } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Rate value={3} readonly />
+      <Rate value={4.5} readonly allowHalf />
+    </>
+  );
+}
+```
+
+### Example: Rate with Custom Character
+
+```javascript
+import React, { useState } from 'react';
+import { Rate } from 'antd-mobile';
+import { HeartFill } from 'antd-mobile-icons';
+
+function App() {
+  const [value, setValue] = useState(3);
+
+  return (
+    <Rate
+      value={value}
+      onChange={(val) => setValue(val)}
+      character={<HeartFill />}
+    />
+  );
+}
+```
+
+### Example: Rate with Form
+
+```javascript
+import React from 'react';
+import { Form, Rate } from 'antd-mobile';
+
+function App() {
+  return (
+    <Form>
+      <Form.Item name="rating" label="评分">
+        <Rate />
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+### Key Points
+
+- Use `value` prop for rate value
+- Use `onChange` callback for value change
+- Use `count` prop for star count
+- Use `allowHalf` prop for half star selection
+- Use `readonly` prop for readonly rate
+- Use `character` prop for custom character
+- Rate works well with Form component
+- Rate is optimized for mobile touch interactions

skills/antd-skills/ant-design-mobile/examples/components/safe-area.md

@@ -0,0 +1,85 @@
+# SafeArea | 安全区域
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the SafeArea component in Ant Design Mobile.
+
+### Key Concepts
+
+- Safe area insets
+- Top safe area
+- Bottom safe area
+- Left/Right safe area
+
+### Example: Basic SafeArea
+
+```javascript
+import React from 'react';
+import { SafeArea } from 'antd-mobile';
+
+function App() {
+  return (
+    <SafeArea position="bottom">
+      <div>内容区域</div>
+    </SafeArea>
+  );
+}
+```
+
+### Example: Top SafeArea
+
+```javascript
+import React from 'react';
+import { SafeArea } from 'antd-mobile';
+
+function App() {
+  return (
+    <SafeArea position="top">
+      <div>顶部内容</div>
+    </SafeArea>
+  );
+}
+```
+
+### Example: Bottom SafeArea
+
+```javascript
+import React from 'react';
+import { SafeArea } from 'antd-mobile';
+
+function App() {
+  return (
+    <SafeArea position="bottom">
+      <div>底部内容</div>
+    </SafeArea>
+  );
+}
+```
+
+### Example: All Sides SafeArea
+
+```javascript
+import React from 'react';
+import { SafeArea } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <SafeArea position="top" />
+      <div>内容区域</div>
+      <SafeArea position="bottom" />
+    </>
+  );
+}
+```
+
+### Key Points
+
+- Use `SafeArea` to handle safe area insets
+- Use `position` prop for position (top, bottom, left, right)
+- SafeArea prevents content from being obscured by notches or system UI
+- SafeArea is essential for modern mobile devices
+- SafeArea is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/search-bar.md

@@ -0,0 +1,111 @@
+# SearchBar | 搜索栏
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the SearchBar component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic search bar
+- Search bar with placeholder
+- Search bar with cancel
+- Search bar with onSearch
+- Search bar with clear
+
+### Example: Basic SearchBar
+
+```javascript
+import React, { useState } from 'react';
+import { SearchBar } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+
+  return (
+    <SearchBar
+      value={value}
+      onChange={setValue}
+      placeholder="搜索"
+    />
+  );
+}
+```
+
+### Example: SearchBar with Cancel
+
+```javascript
+import React, { useState } from 'react';
+import { SearchBar } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+
+  return (
+    <SearchBar
+      value={value}
+      onChange={setValue}
+      placeholder="搜索"
+      showCancelButton
+      onCancel={() => {
+        setValue('');
+      }}
+    />
+  );
+}
+```
+
+### Example: SearchBar with onSearch
+
+```javascript
+import React, { useState } from 'react';
+import { SearchBar, Toast } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+
+  return (
+    <SearchBar
+      value={value}
+      onChange={setValue}
+      placeholder="搜索"
+      onSearch={(val) => {
+        Toast.show(`搜索: ${val}`);
+      }}
+    />
+  );
+}
+```
+
+### Example: SearchBar with Clear
+
+```javascript
+import React, { useState } from 'react';
+import { SearchBar } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+
+  return (
+    <SearchBar
+      value={value}
+      onChange={setValue}
+      placeholder="搜索"
+      clearable
+    />
+  );
+}
+```
+
+### Key Points
+
+- Use `value` prop for search value
+- Use `onChange` callback for value change
+- Use `placeholder` prop for placeholder text
+- Use `showCancelButton` prop for cancel button
+- Use `onCancel` callback for cancel event
+- Use `onSearch` callback for search event
+- Use `clearable` prop for clear button
+- SearchBar is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/side-bar.md

@@ -0,0 +1,109 @@
+# SideBar | 侧边栏
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the SideBar component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic sidebar
+- Sidebar with active key
+- Sidebar with content
+- Sidebar with custom styles
+
+### Example: Basic SideBar
+
+```javascript
+import React, { useState } from 'react';
+import { SideBar } from 'antd-mobile';
+
+const items = [
+  { key: '1', title: '选项1' },
+  { key: '2', title: '选项2' },
+  { key: '3', title: '选项3' },
+];
+
+function App() {
+  const [activeKey, setActiveKey] = useState('1');
+
+  return (
+    <SideBar activeKey={activeKey} onChange={setActiveKey}>
+      {items.map(item => (
+        <SideBar.Item key={item.key} title={item.title} />
+      ))}
+    </SideBar>
+  );
+}
+```
+
+### Example: SideBar with Content
+
+```javascript
+import React, { useState } from 'react';
+import { SideBar } from 'antd-mobile';
+
+const items = [
+  { key: '1', title: '选项1', content: '内容1' },
+  { key: '2', title: '选项2', content: '内容2' },
+  { key: '3', title: '选项3', content: '内容3' },
+];
+
+function App() {
+  const [activeKey, setActiveKey] = useState('1');
+
+  return (
+    <div style={{ display: 'flex', height: '100vh' }}>
+      <SideBar activeKey={activeKey} onChange={setActiveKey}>
+        {items.map(item => (
+          <SideBar.Item key={item.key} title={item.title} />
+        ))}
+      </SideBar>
+      <div style={{ flex: 1, padding: '20px' }}>
+        {items.find(item => item.key === activeKey)?.content}
+      </div>
+    </div>
+  );
+}
+```
+
+### Example: SideBar with Badge
+
+```javascript
+import React, { useState } from 'react';
+import { SideBar, Badge } from 'antd-mobile';
+
+const items = [
+  { key: '1', title: '选项1', badge: '5' },
+  { key: '2', title: '选项2', badge: Badge.dot },
+  { key: '3', title: '选项3' },
+];
+
+function App() {
+  const [activeKey, setActiveKey] = useState('1');
+
+  return (
+    <SideBar activeKey={activeKey} onChange={setActiveKey}>
+      {items.map(item => (
+        <SideBar.Item
+          key={item.key}
+          title={item.title}
+          badge={item.badge}
+        />
+      ))}
+    </SideBar>
+  );
+}
+```
+
+### Key Points
+
+- Use `activeKey` prop for active item
+- Use `onChange` callback for item change
+- Use `SideBar.Item` for sidebar items
+- Use `title` prop for item title
+- Use `badge` prop for item badge
+- SideBar is optimized for mobile display
+- SideBar supports touch interactions

skills/antd-skills/ant-design-mobile/examples/components/slider.md

@@ -0,0 +1,149 @@
+# Slider | 滑动输入条
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Slider component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic slider
+- Slider with min/max
+- Slider with step
+- Slider with marks
+- Slider with range
+
+### Example: Basic Slider
+
+```javascript
+import React, { useState } from 'react';
+import { Slider } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState(50);
+
+  return (
+    <Slider
+      value={value}
+      onChange={(val) => setValue(val)}
+    />
+  );
+}
+```
+
+### Example: Slider with Min/Max
+
+```javascript
+import React, { useState } from 'react';
+import { Slider } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState(50);
+
+  return (
+    <Slider
+      value={value}
+      onChange={(val) => setValue(val)}
+      min={0}
+      max={100}
+    />
+  );
+}
+```
+
+### Example: Slider with Step
+
+```javascript
+import React, { useState } from 'react';
+import { Slider } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState(50);
+
+  return (
+    <Slider
+      value={value}
+      onChange={(val) => setValue(val)}
+      min={0}
+      max={100}
+      step={10}
+    />
+  );
+}
+```
+
+### Example: Slider with Marks
+
+```javascript
+import React, { useState } from 'react';
+import { Slider } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState(50);
+
+  return (
+    <Slider
+      value={value}
+      onChange={(val) => setValue(val)}
+      min={0}
+      max={100}
+      marks={{
+        0: '0',
+        50: '50',
+        100: '100',
+      }}
+    />
+  );
+}
+```
+
+### Example: Slider Range
+
+```javascript
+import React, { useState } from 'react';
+import { Slider } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState([20, 80]);
+
+  return (
+    <Slider
+      value={value}
+      onChange={(val) => setValue(val)}
+      min={0}
+      max={100}
+      range
+    />
+  );
+}
+```
+
+### Example: Slider with Form
+
+```javascript
+import React from 'react';
+import { Form, Slider } from 'antd-mobile';
+
+function App() {
+  return (
+    <Form>
+      <Form.Item name="volume" label="音量">
+        <Slider min={0} max={100} />
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+### Key Points
+
+- Use `value` prop for slider value
+- Use `onChange` callback for value change
+- Use `min` and `max` props to limit value range
+- Use `step` prop for step increment
+- Use `marks` prop for marks display
+- Use `range` prop for range selection
+- Slider works well with Form component
+- Slider is optimized for mobile touch interactions

skills/antd-skills/ant-design-mobile/examples/components/space.md

@@ -0,0 +1,102 @@
+# Space | 间距
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Space component in Ant Design Mobile.
+
+### Key Concepts
+
+- Horizontal spacing
+- Vertical spacing
+- Spacing sizes
+- Spacing with wrap
+
+### Example: Basic Space
+
+```javascript
+import React from 'react';
+import { Space, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Space>
+      <Button>按钮1</Button>
+      <Button>按钮2</Button>
+      <Button>按钮3</Button>
+    </Space>
+  );
+}
+```
+
+### Example: Vertical Space
+
+```javascript
+import React from 'react';
+import { Space, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Space direction="vertical">
+      <Button>按钮1</Button>
+      <Button>按钮2</Button>
+      <Button>按钮3</Button>
+    </Space>
+  );
+}
+```
+
+### Example: Space Sizes
+
+```javascript
+import React from 'react';
+import { Space, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Space size="small">
+        <Button>小间距</Button>
+        <Button>小间距</Button>
+      </Space>
+      <Space size="middle">
+        <Button>中间距</Button>
+        <Button>中间距</Button>
+      </Space>
+      <Space size="large">
+        <Button>大间距</Button>
+        <Button>大间距</Button>
+      </Space>
+    </>
+  );
+}
+```
+
+### Example: Space with Wrap
+
+```javascript
+import React from 'react';
+import { Space, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Space wrap>
+      <Button>按钮1</Button>
+      <Button>按钮2</Button>
+      <Button>按钮3</Button>
+      <Button>按钮4</Button>
+      <Button>按钮5</Button>
+    </Space>
+  );
+}
+```
+
+### Key Points
+
+- Use `Space` to add spacing between components
+- Use `direction` prop for direction (horizontal, vertical)
+- Use `size` prop for spacing size (small, middle, large)
+- Use `wrap` prop for wrapping
+- Space is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/stepper.md

@@ -0,0 +1,147 @@
+# Stepper | 步进器
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Stepper component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic stepper
+- Stepper with min/max
+- Stepper with step
+- Stepper with disabled
+- Stepper with formatter
+
+### Example: Basic Stepper
+
+```javascript
+import React, { useState } from 'react';
+import { Stepper } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState(1);
+
+  return (
+    <Stepper
+      value={value}
+      onChange={(val) => setValue(val)}
+    />
+  );
+}
+```
+
+### Example: Stepper with Min/Max
+
+```javascript
+import React, { useState } from 'react';
+import { Stepper } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState(1);
+
+  return (
+    <Stepper
+      value={value}
+      onChange={(val) => setValue(val)}
+      min={0}
+      max={10}
+    />
+  );
+}
+```
+
+### Example: Stepper with Step
+
+```javascript
+import React, { useState } from 'react';
+import { Stepper } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState(1);
+
+  return (
+    <Stepper
+      value={value}
+      onChange={(val) => setValue(val)}
+      step={2}
+    />
+  );
+}
+```
+
+### Example: Stepper with Disabled
+
+```javascript
+import React, { useState } from 'react';
+import { Stepper } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState(1);
+
+  return (
+    <>
+      <Stepper
+        value={value}
+        onChange={(val) => setValue(val)}
+        disabled
+      />
+      <Stepper
+        value={value}
+        onChange={(val) => setValue(val)}
+        min={0}
+        max={10}
+      />
+    </>
+  );
+}
+```
+
+### Example: Stepper with Formatter
+
+```javascript
+import React, { useState } from 'react';
+import { Stepper } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState(1);
+
+  return (
+    <Stepper
+      value={value}
+      onChange={(val) => setValue(val)}
+      formatter={(value) => `${value}件`}
+    />
+  );
+}
+```
+
+### Example: Stepper with Form
+
+```javascript
+import React from 'react';
+import { Form, Stepper } from 'antd-mobile';
+
+function App() {
+  return (
+    <Form>
+      <Form.Item name="quantity" label="数量">
+        <Stepper min={1} max={99} />
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+### Key Points
+
+- Use `value` prop for stepper value
+- Use `onChange` callback for value change
+- Use `min` and `max` props to limit value range
+- Use `step` prop for step increment
+- Use `disabled` prop to disable stepper
+- Use `formatter` prop to format displayed value
+- Stepper works well with Form component
+- Stepper is optimized for mobile touch interactions

skills/antd-skills/ant-design-mobile/examples/components/swiper.md

@@ -0,0 +1,153 @@
+# Swiper | 走马灯
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Swiper component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic swiper
+- Swiper with autoplay
+- Swiper with loop
+- Swiper with dots
+- Swiper with pagination
+
+### Example: Basic Swiper
+
+```javascript
+import React from 'react';
+import { Swiper } from 'antd-mobile';
+
+const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
+
+function App() {
+  return (
+    <Swiper>
+      {colors.map((color, index) => (
+        <Swiper.Item key={index}>
+          <div
+            style={{
+              background: color,
+              height: '200px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {index + 1}
+          </div>
+        </Swiper.Item>
+      ))}
+    </Swiper>
+  );
+}
+```
+
+### Example: Swiper with Autoplay
+
+```javascript
+import React from 'react';
+import { Swiper } from 'antd-mobile';
+
+const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
+
+function App() {
+  return (
+    <Swiper autoplay>
+      {colors.map((color, index) => (
+        <Swiper.Item key={index}>
+          <div
+            style={{
+              background: color,
+              height: '200px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {index + 1}
+          </div>
+        </Swiper.Item>
+      ))}
+    </Swiper>
+  );
+}
+```
+
+### Example: Swiper with Loop
+
+```javascript
+import React from 'react';
+import { Swiper } from 'antd-mobile';
+
+const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
+
+function App() {
+  return (
+    <Swiper loop>
+      {colors.map((color, index) => (
+        <Swiper.Item key={index}>
+          <div
+            style={{
+              background: color,
+              height: '200px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {index + 1}
+          </div>
+        </Swiper.Item>
+      ))}
+    </Swiper>
+  );
+}
+```
+
+### Example: Swiper with Dots
+
+```javascript
+import React from 'react';
+import { Swiper } from 'antd-mobile';
+
+const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
+
+function App() {
+  return (
+    <Swiper indicator={(total, current) => (
+      <div style={{ textAlign: 'center', padding: '10px' }}>
+        {current + 1} / {total}
+      </div>
+    )}>
+      {colors.map((color, index) => (
+        <Swiper.Item key={index}>
+          <div
+            style={{
+              background: color,
+              height: '200px',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            {index + 1}
+          </div>
+        </Swiper.Item>
+      ))}
+    </Swiper>
+  );
+}
+```
+
+### Key Points
+
+- Use `Swiper` for swiper container
+- Use `Swiper.Item` for swiper items
+- Use `autoplay` prop for autoplay
+- Use `loop` prop for loop
+- Use `indicator` prop for custom indicator
+- Swiper is optimized for mobile touch interactions

skills/antd-skills/ant-design-mobile/examples/components/switch.md

@@ -0,0 +1,144 @@
+# Switch | 开关
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Switch component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic switch
+- Switch with label
+- Switch states
+- Switch colors
+- Switch sizes
+
+### Example: Basic Switch
+
+```javascript
+import React, { useState } from 'react';
+import { Switch } from 'antd-mobile';
+
+function App() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <Switch
+      checked={checked}
+      onChange={(checked) => setChecked(checked)}
+    />
+  );
+}
+```
+
+### Example: Switch with Label
+
+```javascript
+import React, { useState } from 'react';
+import { Switch, List } from 'antd-mobile';
+
+function App() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <List>
+      <List.Item
+        extra={
+          <Switch
+            checked={checked}
+            onChange={(checked) => setChecked(checked)}
+          />
+        }
+      >
+        开关
+      </List.Item>
+    </List>
+  );
+}
+```
+
+### Example: Switch States
+
+```javascript
+import React from 'react';
+import { Switch } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Switch defaultChecked />
+      <Switch disabled />
+      <Switch checked disabled />
+    </>
+  );
+}
+```
+
+### Example: Switch Colors
+
+```javascript
+import React, { useState } from 'react';
+import { Switch } from 'antd-mobile';
+
+function App() {
+  const [checked, setChecked] = useState(false);
+
+  return (
+    <>
+      <Switch
+        checked={checked}
+        onChange={(checked) => setChecked(checked)}
+      />
+      <Switch
+        checked={checked}
+        onChange={(checked) => setChecked(checked)}
+        color="primary"
+      />
+      <Switch
+        checked={checked}
+        onChange={(checked) => setChecked(checked)}
+        color="#ff6b6b"
+      />
+    </>
+  );
+}
+```
+
+### Example: Switch with Loading
+
+```javascript
+import React, { useState } from 'react';
+import { Switch } from 'antd-mobile';
+
+function App() {
+  const [checked, setChecked] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleChange = (val) => {
+    setLoading(true);
+    setTimeout(() => {
+      setChecked(val);
+      setLoading(false);
+    }, 1000);
+  };
+
+  return (
+    <Switch
+      checked={checked}
+      onChange={handleChange}
+      loading={loading}
+    />
+  );
+}
+```
+
+### Key Points
+
+- Use `checked` prop for switch state
+- Use `onChange` callback for state change
+- Use `disabled` prop to disable switch
+- Use `color` prop for switch color
+- Use `loading` prop for loading state
+- Switch is optimized for mobile touch interactions

skills/antd-skills/ant-design-mobile/examples/components/tab-bar.md

@@ -0,0 +1,145 @@
+# TabBar | 标签栏
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the TabBar component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic tabbar
+- TabBar with icons
+- TabBar with badges
+- TabBar with active key
+- TabBar with custom styles
+
+### Example: Basic TabBar
+
+```javascript
+import React, { useState } from 'react';
+import { TabBar } from 'antd-mobile';
+import { AppOutline, UserOutline } from 'antd-mobile-icons';
+
+const tabs = [
+  {
+    key: 'home',
+    title: '首页',
+    icon: <AppOutline />,
+  },
+  {
+    key: 'user',
+    title: '我的',
+    icon: <UserOutline />,
+  },
+];
+
+function App() {
+  const [activeKey, setActiveKey] = useState('home');
+
+  return (
+    <TabBar
+      activeKey={activeKey}
+      onChange={setActiveKey}
+    >
+      {tabs.map(item => (
+        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
+      ))}
+    </TabBar>
+  );
+}
+```
+
+### Example: TabBar with Badges
+
+```javascript
+import React, { useState } from 'react';
+import { TabBar, Badge } from 'antd-mobile';
+import { AppOutline, UserOutline } from 'antd-mobile-icons';
+
+const tabs = [
+  {
+    key: 'home',
+    title: '首页',
+    icon: <AppOutline />,
+    badge: '5',
+  },
+  {
+    key: 'user',
+    title: '我的',
+    icon: <UserOutline />,
+    badge: Badge.dot,
+  },
+];
+
+function App() {
+  const [activeKey, setActiveKey] = useState('home');
+
+  return (
+    <TabBar
+      activeKey={activeKey}
+      onChange={setActiveKey}
+    >
+      {tabs.map(item => (
+        <TabBar.Item
+          key={item.key}
+          icon={item.icon}
+          title={item.title}
+          badge={item.badge}
+        />
+      ))}
+    </TabBar>
+  );
+}
+```
+
+### Example: TabBar with Safe Area
+
+```javascript
+import React, { useState } from 'react';
+import { TabBar, SafeArea } from 'antd-mobile';
+import { AppOutline, UserOutline } from 'antd-mobile-icons';
+
+const tabs = [
+  {
+    key: 'home',
+    title: '首页',
+    icon: <AppOutline />,
+  },
+  {
+    key: 'user',
+    title: '我的',
+    icon: <UserOutline />,
+  },
+];
+
+function App() {
+  const [activeKey, setActiveKey] = useState('home');
+
+  return (
+    <>
+      <TabBar
+        activeKey={activeKey}
+        onChange={setActiveKey}
+      >
+        {tabs.map(item => (
+          <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
+        ))}
+      </TabBar>
+      <SafeArea position="bottom" />
+    </>
+  );
+}
+```
+
+### Key Points
+
+- Use `activeKey` prop for active tab
+- Use `onChange` callback for tab change
+- Use `TabBar.Item` for tab items
+- Use `icon` prop for tab icon
+- Use `title` prop for tab title
+- Use `badge` prop for tab badge
+- TabBar is optimized for mobile display
+- TabBar supports safe area insets

skills/antd-skills/ant-design-mobile/examples/components/tabs.md

@@ -0,0 +1,119 @@
+# Tabs | 标签页
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Tabs component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic Tabs
+- Tabs with content
+- Tabs with icons
+- Tabs with badges
+- Tabs switching
+
+### Example: Basic Tabs
+
+```javascript
+import React, { useState } from 'react';
+import { Tabs } from 'antd-mobile';
+
+function App() {
+  const [activeKey, setActiveKey] = useState('1');
+
+  return (
+    <Tabs activeKey={activeKey} onChange={setActiveKey}>
+      <Tabs.Tab title="Tab 1" key="1">
+        Content 1
+      </Tabs.Tab>
+      <Tabs.Tab title="Tab 2" key="2">
+        Content 2
+      </Tabs.Tab>
+      <Tabs.Tab title="Tab 3" key="3">
+        Content 3
+      </Tabs.Tab>
+    </Tabs>
+  );
+}
+```
+
+### Example: Tabs with Icons
+
+```javascript
+import React, { useState } from 'react';
+import { Tabs } from 'antd-mobile';
+import { AppOutline, UserOutline } from 'antd-mobile-icons';
+
+function App() {
+  const [activeKey, setActiveKey] = useState('1');
+
+  return (
+    <Tabs activeKey={activeKey} onChange={setActiveKey}>
+      <Tabs.Tab
+        title={
+          <span>
+            <AppOutline />
+            Tab 1
+          </span>
+        }
+        key="1"
+      >
+        Content 1
+      </Tabs.Tab>
+      <Tabs.Tab
+        title={
+          <span>
+            <UserOutline />
+            Tab 2
+          </span>
+        }
+        key="2"
+      >
+        Content 2
+      </Tabs.Tab>
+    </Tabs>
+  );
+}
+```
+
+### Example: Tabs with Badges
+
+```javascript
+import React, { useState } from 'react';
+import { Tabs, Badge } from 'antd-mobile';
+
+function App() {
+  const [activeKey, setActiveKey] = useState('1');
+
+  return (
+    <Tabs activeKey={activeKey} onChange={setActiveKey}>
+      <Tabs.Tab
+        title={
+          <Badge content="5">
+            Tab 1
+          </Badge>
+        }
+        key="1"
+      >
+        Content 1
+      </Tabs.Tab>
+      <Tabs.Tab title="Tab 2" key="2">
+        Content 2
+      </Tabs.Tab>
+    </Tabs>
+  );
+}
+```
+
+### Key Points
+
+- Use `Tabs` component with `Tabs.Tab` children
+- Use `activeKey` to control active tab
+- Use `onChange` to handle tab switching
+- Use `title` prop for tab label
+- Use `key` prop for unique tab identifier
+- Tabs support icons and badges
+- Optimized for mobile swipe gestures

skills/antd-skills/ant-design-mobile/examples/components/tag.md

@@ -0,0 +1,140 @@
+# Tag | 标签
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Tag component in Ant Design Mobile.
+
+### Key Concepts
+
+- Tag colors
+- Tag sizes
+- Tag shapes
+- Closable tags
+- Tag with icons
+
+### Example: Basic Tag
+
+```javascript
+import React from 'react';
+import { Tag } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Tag>标签</Tag>
+      <Tag color="primary">主要</Tag>
+      <Tag color="success">成功</Tag>
+      <Tag color="warning">警告</Tag>
+      <Tag color="danger">危险</Tag>
+    </>
+  );
+}
+```
+
+### Example: Tag Sizes
+
+```javascript
+import React from 'react';
+import { Tag } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Tag size="small">小标签</Tag>
+      <Tag size="middle">中标签</Tag>
+      <Tag size="large">大标签</Tag>
+    </>
+  );
+}
+```
+
+### Example: Tag Shapes
+
+```javascript
+import React from 'react';
+import { Tag } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Tag>默认</Tag>
+      <Tag round>圆角</Tag>
+    </>
+  );
+}
+```
+
+### Example: Closable Tag
+
+```javascript
+import React, { useState } from 'react';
+import { Tag } from 'antd-mobile';
+
+function App() {
+  const [visible, setVisible] = useState(true);
+
+  return (
+    <>
+      {visible && (
+        <Tag
+          closable
+          onClose={() => {
+            setVisible(false);
+          }}
+        >
+          可关闭标签
+        </Tag>
+      )}
+    </>
+  );
+}
+```
+
+### Example: Tag with Icon
+
+```javascript
+import React from 'react';
+import { Tag } from 'antd-mobile';
+import { CheckCircleOutline } from 'antd-mobile-icons';
+
+function App() {
+  return (
+    <Tag icon={<CheckCircleOutline />}>
+      带图标标签
+    </Tag>
+  );
+}
+```
+
+### Example: Tag Colors
+
+```javascript
+import React from 'react';
+import { Tag } from 'antd-mobile';
+
+function App() {
+  return (
+    <>
+      <Tag color="default">默认</Tag>
+      <Tag color="primary">主要</Tag>
+      <Tag color="success">成功</Tag>
+      <Tag color="warning">警告</Tag>
+      <Tag color="danger">危险</Tag>
+      <Tag color="#ff6b6b">自定义颜色</Tag>
+    </>
+  );
+}
+```
+
+### Key Points
+
+- Use `color` prop for tag color
+- Use `size` prop for tag size (small, middle, large)
+- Use `round` prop for rounded corners
+- Use `closable` prop for closable tag
+- Use `onClose` callback for close event
+- Use `icon` prop for tag icon
+- Tag is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/textarea.md

@@ -0,0 +1,129 @@
+# Textarea | 文本域
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Textarea component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic textarea
+- Textarea with placeholder
+- Textarea with max length
+- Auto resize textarea
+- Textarea with count
+
+### Example: Basic Textarea
+
+```javascript
+import React, { useState } from 'react';
+import { TextArea } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+
+  return (
+    <TextArea
+      value={value}
+      onChange={(val) => setValue(val)}
+      placeholder="请输入内容"
+    />
+  );
+}
+```
+
+### Example: Textarea with Max Length
+
+```javascript
+import React, { useState } from 'react';
+import { TextArea } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+
+  return (
+    <TextArea
+      value={value}
+      onChange={(val) => setValue(val)}
+      placeholder="最多输入100字"
+      maxLength={100}
+      showCount
+    />
+  );
+}
+```
+
+### Example: Auto Resize Textarea
+
+```javascript
+import React, { useState } from 'react';
+import { TextArea } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+
+  return (
+    <TextArea
+      value={value}
+      onChange={(val) => setValue(val)}
+      placeholder="自动调整高度"
+      autoSize={{ minRows: 2, maxRows: 5 }}
+    />
+  );
+}
+```
+
+### Example: Textarea with Count
+
+```javascript
+import React, { useState } from 'react';
+import { TextArea } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+
+  return (
+    <TextArea
+      value={value}
+      onChange={(val) => setValue(val)}
+      placeholder="输入内容"
+      showCount
+      maxLength={200}
+    />
+  );
+}
+```
+
+### Example: Textarea with Form
+
+```javascript
+import React from 'react';
+import { Form, TextArea } from 'antd-mobile';
+
+function App() {
+  return (
+    <Form>
+      <Form.Item name="content" label="内容">
+        <TextArea
+          placeholder="请输入内容"
+          showCount
+          maxLength={200}
+        />
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+### Key Points
+
+- Use `value` prop for textarea value
+- Use `onChange` callback for value change
+- Use `placeholder` prop for placeholder text
+- Use `maxLength` prop to limit input length
+- Use `showCount` prop to show character count
+- Use `autoSize` prop for auto resize
+- TextArea works well with Form component
+- TextArea is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/toast.md

@@ -0,0 +1,137 @@
+# Toast | 轻提示
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Toast component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic toast
+- Toast with success
+- Toast with error
+- Toast with loading
+- Toast with duration
+
+### Example: Basic Toast
+
+```javascript
+import React from 'react';
+import { Toast, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Button
+      onClick={() => {
+        Toast.show('提示信息');
+      }}
+    >
+      显示提示
+    </Button>
+  );
+}
+```
+
+### Example: Toast with Success
+
+```javascript
+import React from 'react';
+import { Toast, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Button
+      onClick={() => {
+        Toast.show({
+          icon: 'success',
+          content: '操作成功',
+        });
+      }}
+    >
+      成功提示
+    </Button>
+  );
+}
+```
+
+### Example: Toast with Error
+
+```javascript
+import React from 'react';
+import { Toast, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Button
+      onClick={() => {
+        Toast.show({
+          icon: 'fail',
+          content: '操作失败',
+        });
+      }}
+    >
+      错误提示
+    </Button>
+  );
+}
+```
+
+### Example: Toast with Loading
+
+```javascript
+import React from 'react';
+import { Toast, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Button
+      onClick={() => {
+        const handler = Toast.show({
+          icon: 'loading',
+          content: '加载中...',
+          duration: 0,
+        });
+        
+        setTimeout(() => {
+          Toast.clear();
+        }, 2000);
+      }}
+    >
+      加载提示
+    </Button>
+  );
+}
+```
+
+### Example: Toast with Duration
+
+```javascript
+import React from 'react';
+import { Toast, Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <Button
+      onClick={() => {
+        Toast.show({
+          content: '提示信息',
+          duration: 3000,
+        });
+      }}
+    >
+      显示提示
+    </Button>
+  );
+}
+```
+
+### Key Points
+
+- Use `Toast.show` to show toast
+- Use `Toast.clear` to clear toast
+- Use `icon` prop for toast icon (success, fail, loading)
+- Use `content` prop for toast content
+- Use `duration` prop for display duration (0 for infinite)
+- Toast is optimized for mobile display

skills/antd-skills/ant-design-mobile/examples/components/uploader.md

@@ -0,0 +1,154 @@
+# Uploader | 文件上传
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the Uploader component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic uploader
+- Uploader with preview
+- Uploader with multiple
+- Uploader with max count
+- Uploader with custom upload
+
+### Example: Basic Uploader
+
+```javascript
+import React, { useState } from 'react';
+import { Uploader } from 'antd-mobile';
+
+function App() {
+  const [fileList, setFileList] = useState([]);
+
+  return (
+    <Uploader
+      value={fileList}
+      onChange={setFileList}
+    />
+  );
+}
+```
+
+### Example: Uploader with Preview
+
+```javascript
+import React, { useState } from 'react';
+import { Uploader } from 'antd-mobile';
+
+function App() {
+  const [fileList, setFileList] = useState([]);
+
+  return (
+    <Uploader
+      value={fileList}
+      onChange={setFileList}
+      preview
+    />
+  );
+}
+```
+
+### Example: Uploader with Multiple
+
+```javascript
+import React, { useState } from 'react';
+import { Uploader } from 'antd-mobile';
+
+function App() {
+  const [fileList, setFileList] = useState([]);
+
+  return (
+    <Uploader
+      value={fileList}
+      onChange={setFileList}
+      multiple
+    />
+  );
+}
+```
+
+### Example: Uploader with Max Count
+
+```javascript
+import React, { useState } from 'react';
+import { Uploader } from 'antd-mobile';
+
+function App() {
+  const [fileList, setFileList] = useState([]);
+
+  return (
+    <Uploader
+      value={fileList}
+      onChange={setFileList}
+      maxCount={3}
+    />
+  );
+}
+```
+
+### Example: Uploader with Custom Upload
+
+```javascript
+import React, { useState } from 'react';
+import { Uploader } from 'antd-mobile';
+
+function App() {
+  const [fileList, setFileList] = useState([]);
+
+  const upload = async (file) => {
+    // 自定义上传逻辑
+    const formData = new FormData();
+    formData.append('file', file);
+    
+    const response = await fetch('/api/upload', {
+      method: 'POST',
+      body: formData,
+    });
+    
+    const result = await response.json();
+    return {
+      url: result.url,
+    };
+  };
+
+  return (
+    <Uploader
+      value={fileList}
+      onChange={setFileList}
+      upload={upload}
+    />
+  );
+}
+```
+
+### Example: Uploader with Form
+
+```javascript
+import React from 'react';
+import { Form, Uploader } from 'antd-mobile';
+
+function App() {
+  return (
+    <Form>
+      <Form.Item name="files" label="上传文件">
+        <Uploader maxCount={5} />
+      </Form.Item>
+    </Form>
+  );
+}
+```
+
+### Key Points
+
+- Use `value` prop for file list
+- Use `onChange` callback for file list change
+- Use `preview` prop for preview
+- Use `multiple` prop for multiple files
+- Use `maxCount` prop to limit file count
+- Use `upload` prop for custom upload function
+- Uploader works well with Form component
+- Uploader is optimized for mobile file selection

skills/antd-skills/ant-design-mobile/examples/components/virtual-input.md

@@ -0,0 +1,94 @@
+# VirtualInput | 虚拟键盘
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to use the VirtualInput component in Ant Design Mobile.
+
+### Key Concepts
+
+- Basic virtual input
+- Virtual input with type
+- Virtual input with confirm
+- Virtual input with custom keyboard
+
+### Example: Basic VirtualInput
+
+```javascript
+import React, { useState } from 'react';
+import { VirtualInput } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+
+  return (
+    <VirtualInput
+      value={value}
+      onChange={setValue}
+      placeholder="请输入"
+    />
+  );
+}
+```
+
+### Example: VirtualInput with Type
+
+```javascript
+import React, { useState } from 'react';
+import { VirtualInput } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+
+  return (
+    <>
+      <VirtualInput
+        value={value}
+        onChange={setValue}
+        type="number"
+        placeholder="数字键盘"
+      />
+      <VirtualInput
+        value={value}
+        onChange={setValue}
+        type="password"
+        placeholder="密码键盘"
+      />
+    </>
+  );
+}
+```
+
+### Example: VirtualInput with Confirm
+
+```javascript
+import React, { useState } from 'react';
+import { VirtualInput } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+
+  return (
+    <VirtualInput
+      value={value}
+      onChange={setValue}
+      placeholder="请输入"
+      confirmText="确定"
+      onConfirm={(val) => {
+        console.log('确认:', val);
+      }}
+    />
+  );
+}
+```
+
+### Key Points
+
+- Use `value` prop for input value
+- Use `onChange` callback for value change
+- Use `type` prop for keyboard type (number, password, etc.)
+- Use `confirmText` prop for confirm button text
+- Use `onConfirm` callback for confirm event
+- VirtualInput is optimized for mobile virtual keyboards

skills/antd-skills/ant-design-mobile/examples/getting-started/basic-usage.md

@@ -0,0 +1,100 @@
+# Basic Usage | 基本用法
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates basic Ant Design Mobile component usage in React.
+
+### Key Concepts
+
+- Importing components
+- Using component props
+- Component composition
+- Event handling
+- Mobile-specific considerations
+
+### Example: Button Component
+
+```javascript
+import React from 'react';
+import { Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <div>
+      <Button color="primary">Primary</Button>
+      <Button color="success">Success</Button>
+      <Button color="warning">Warning</Button>
+      <Button color="danger">Danger</Button>
+    </div>
+  );
+}
+```
+
+### Example: Button with Events
+
+```javascript
+import React from 'react';
+import { Button, Toast } from 'antd-mobile';
+
+function App() {
+  const handleClick = () => {
+    Toast.show('Button clicked!');
+  };
+
+  return (
+    <Button color="primary" onClick={handleClick}>
+      Click Me
+    </Button>
+  );
+}
+```
+
+### Example: Input Component
+
+```javascript
+import React, { useState } from 'react';
+import { Input } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+
+  return (
+    <Input
+      placeholder="Enter text"
+      value={value}
+      onChange={(val) => setValue(val)}
+    />
+  );
+}
+```
+
+### Example: Multiple Components
+
+```javascript
+import React from 'react';
+import { Button, Input, Card } from 'antd-mobile';
+
+function App() {
+  return (
+    <Card title="Example Card">
+      <Input placeholder="Enter text" />
+      <Button color="primary" style={{ marginTop: 16 }}>
+        Submit
+      </Button>
+    </Card>
+  );
+}
+```
+
+### Key Points
+
+- Import components from 'antd-mobile'
+- Use component props to configure behavior
+- Components are optimized for mobile
+- Handle events with React event handlers
+- Use style prop for inline styles
+- Follow React patterns for state management
+- Consider touch interactions and mobile UX

skills/antd-skills/ant-design-mobile/examples/getting-started/installation.md

@@ -0,0 +1,99 @@
+# Installation | 安装
+
+**官方文档**: https://ant-design-mobile.antgroup.com/zh
+
+
+## Instructions
+
+This example demonstrates how to install Ant Design Mobile and set it up in a React project.
+
+### Key Concepts
+
+- Installing Ant Design Mobile
+- Importing styles
+- Basic component usage
+- Project setup
+
+### Example: Installation
+
+```bash
+# Using npm
+npm install antd-mobile
+
+# Using yarn
+yarn add antd-mobile
+
+# Using pnpm
+pnpm add antd-mobile
+```
+
+### Example: Import Styles
+
+```javascript
+// Import CSS in your entry file (e.g., index.js or App.js)
+import 'antd-mobile/es/global.css';
+```
+
+### Example: Basic Usage
+
+```javascript
+import React from 'react';
+import { Button } from 'antd-mobile';
+
+function App() {
+  return (
+    <div>
+      <Button color="primary">Primary Button</Button>
+      <Button>Default Button</Button>
+    </div>
+  );
+}
+
+export default App;
+```
+
+### Example: Using ConfigProvider
+
+```javascript
+import React from 'react';
+import { ConfigProvider } from 'antd-mobile';
+import zhCN from 'antd-mobile/es/locales/zh-CN';
+import App from './App';
+
+function Root() {
+  return (
+    <ConfigProvider locale={zhCN}>
+      <App />
+    </ConfigProvider>
+  );
+}
+
+export default Root;
+```
+
+### Example: TypeScript Setup
+
+```typescript
+import React from 'react';
+import { Button } from 'antd-mobile';
+
+const App: React.FC = () => {
+  return (
+    <div>
+      <Button color="primary">Primary Button</Button>
+    </div>
+  );
+};
+
+export default App;
+```
+
+### Key Points
+
+- Install antd-mobile package
+- Import global CSS styles in entry file
+- Use ConfigProvider for global configuration
+- Components can be imported individually
+- Works with both JavaScript and TypeScript
+- Use locale prop for internationalization
+- Optimized for mobile devices

skills/antd-skills/ant-design-mobile/templates/component-template.md

@@ -0,0 +1,53 @@
+# Component Template | 组件模板
+
+## Basic Component Usage
+
+```javascript
+import React from 'react';
+import { ComponentName } from 'antd-mobile';
+
+function App() {
+  return (
+    <ComponentName
+      prop1="value1"
+      prop2="value2"
+      onChange={(value) => console.log(value)}
+    />
+  );
+}
+```
+
+## Component with State
+
+```javascript
+import React, { useState } from 'react';
+import { ComponentName } from 'antd-mobile';
+
+function App() {
+  const [value, setValue] = useState('');
+
+  return (
+    <ComponentName
+      value={value}
+      onChange={(val) => setValue(val)}
+    />
+  );
+}
+```
+
+## Component in Form
+
+```javascript
+import React from 'react';
+import { Form, ComponentName } from 'antd-mobile';
+
+function App() {
+  return (
+    <Form>
+      <Form.Item name="field" label="Label">
+        <ComponentName />
+      </Form.Item>
+    </Form>
+  );
+}
+```

skills/antd-skills/ant-design-mobile/templates/project-setup.md

@@ -0,0 +1,96 @@
+# Project Setup Template | 项目设置模板
+
+## Basic React + Ant Design Mobile Setup
+
+```javascript
+// package.json
+{
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "antd-mobile": "^5.0.0"
+  }
+}
+```
+
+```javascript
+// src/index.js
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import 'antd-mobile/es/global.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App />);
+```
+
+```javascript
+// src/App.js
+import React from 'react';
+import { ConfigProvider } from 'antd-mobile';
+import zhCN from 'antd-mobile/es/locales/zh-CN';
+import Main from './Main';
+
+function App() {
+  return (
+    <ConfigProvider locale={zhCN}>
+      <Main />
+    </ConfigProvider>
+  );
+}
+
+export default App;
+```
+
+## With TypeScript
+
+```typescript
+// src/index.tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import 'antd-mobile/es/global.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(<App />);
+```
+
+```typescript
+// src/App.tsx
+import React from 'react';
+import { ConfigProvider } from 'antd-mobile';
+import zhCN from 'antd-mobile/es/locales/zh-CN';
+import Main from './Main';
+
+const App: React.FC = () => {
+  return (
+    <ConfigProvider locale={zhCN}>
+      <Main />
+    </ConfigProvider>
+  );
+};
+
+export default App;
+```
+
+## With Custom Theme
+
+```javascript
+// src/App.js
+import React from 'react';
+import { ConfigProvider } from 'antd-mobile';
+import zhCN from 'antd-mobile/es/locales/zh-CN';
+
+function App() {
+  return (
+    <ConfigProvider
+      locale={zhCN}
+      theme={{
+        primaryColor: '#00b96b',
+      }}
+    >
+      <Main />
+    </ConfigProvider>
+  );
+}
+```

skills/antd-skills/ant-design-react/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

skills/antd-skills/ant-design-react/SKILL.md

@@ -0,0 +1,166 @@
+---
+name: ant-design-react
+description: Provides comprehensive guidance for Ant Design React component library including components, design system, themes, and TypeScript support. Use when the user asks about Ant Design for React, needs to build React applications with Ant Design, or implement design system patterns.
+license: Complete terms in LICENSE.txt
+---
+
+## When to use this skill
+
+Use this skill whenever the user wants to:
+- Build React applications with Ant Design components
+- Use Ant Design UI components (Button, Form, Table, Input, Select, etc.)
+- Customize Ant Design theme and styles
+- Implement internationalization (i18n) with Ant Design
+- Use Ant Design with TypeScript
+- Create forms with validation
+- Display data in tables and lists
+- Implement navigation and layout
+- Use Ant Design icons
+- Handle user feedback (Modal, Message, Notification)
+- Implement data visualization components
+- Use Ant Design design tokens and design system
+
+## How to use this skill
+
+This skill is organized to match the Ant Design React official documentation structure (https://4x-ant-design.antgroup.com/docs/react/introduce-cn, https://4x-ant-design.antgroup.com/components/overview-cn/). When working with Ant Design React:
+
+1. **Identify the topic** from the user's request:
+   - Getting started/快速开始 → `examples/getting-started/installation.md` or `examples/getting-started/basic-usage.md`
+   - Button/按钮 → `examples/components/button.md`
+   - Form/表单 → `examples/components/form.md`
+   - Table/表格 → `examples/components/table.md`
+   - Input/输入框 → `examples/components/input.md`
+   - Select/选择器 → `examples/components/select.md`
+   - DatePicker/日期选择器 → `examples/components/date-picker.md`
+   - Modal/对话框 → `examples/components/modal.md`
+   - Layout/布局 → `examples/components/layout.md`
+   - Menu/菜单 → `examples/components/menu.md`
+   - Theme customization/主题定制 → `examples/advanced/theme-customization.md`
+   - Internationalization/国际化 → `examples/advanced/internationalization.md`
+   - TypeScript/类型支持 → `examples/advanced/typescript.md`
+
+2. **Load the appropriate example file** from the `examples/` directory:
+
+   **Getting Started (快速开始) - `examples/getting-started/`**:
+   - `examples/getting-started/installation.md` - Installing Ant Design and basic setup
+   - `examples/getting-started/basic-usage.md` - Basic component usage
+
+   **Components (组件) - `examples/components/`**:
+   - `examples/components/button.md` - Button component
+   - `examples/components/input.md` - Input component
+   - `examples/components/form.md` - Form component with validation
+   - `examples/components/table.md` - Table component
+   - `examples/components/select.md` - Select component
+   - `examples/components/date-picker.md` - DatePicker component
+   - `examples/components/modal.md` - Modal component
+   - `examples/components/layout.md` - Layout component
+   - `examples/components/menu.md` - Menu component
+   - `examples/components/icon.md` - Icon component
+   - `examples/components/typography.md` - Typography component
+   - `examples/components/grid.md` - Grid component
+   - `examples/components/space.md` - Space component
+   - `examples/components/card.md` - Card component
+   - `examples/components/tabs.md` - Tabs component
+   - `examples/components/pagination.md` - Pagination component
+   - `examples/components/upload.md` - Upload component
+   - `examples/components/upload.md` - Upload component
+   - `examples/components/message.md` - Message component
+   - `examples/components/notification.md` - Notification component
+   - `examples/components/alert.md` - Alert component
+   - `examples/components/spin.md` - Spin component
+   - `examples/components/progress.md` - Progress component
+
+   **Advanced (高级) - `examples/advanced/`**:
+   - `examples/advanced/theme-customization.md` - Customizing theme
+   - `examples/advanced/internationalization.md` - Internationalization setup
+   - `examples/advanced/typescript.md` - TypeScript support
+
+3. **Follow the specific instructions** in that example file for syntax, structure, and best practices
+
+   **Important Notes**:
+   - All examples follow Ant Design React 4.x API
+   - Examples include both JavaScript and TypeScript versions where applicable
+   - Each example file includes key concepts, code examples, and key points
+   - Always check the example file for best practices and common patterns
+
+4. **Reference API documentation** in the `api/` directory when needed:
+   - `api/components.md` - Component API reference
+   - `api/config-provider.md` - ConfigProvider API
+   - `api/design-tokens.md` - Design tokens API
+
+5. **Use templates** from the `templates/` directory:
+   - `templates/project-setup.md` - Project setup templates
+   - `templates/component-template.md` - Component usage templates
+
+
+### Doc mapping (one-to-one with official documentation)
+
+**Guide (指南)**:
+- See guide files in `examples/guide/` or `examples/getting-started/` → https://4x-ant-design.antgroup.com/docs/react/introduce-cn
+
+**Components (组件)**:
+- See component files in `examples/components/` → https://4x-ant-design.antgroup.com/components/overview-cn/
+
+## Examples and Templates
+
+This skill includes detailed examples organized to match the official documentation structure. All examples are in the `examples/` directory (see mapping above).
+
+**To use examples:**
+- Identify the topic from the user's request
+- Load the appropriate example file from the mapping above
+- Follow the instructions, syntax, and best practices in that file
+- Adapt the code examples to your specific use case
+
+**To use templates:**
+- Reference templates in `templates/` directory for common scaffolding
+- Adapt templates to your specific needs and coding style
+
+## API Reference
+
+Detailed API documentation is available in the `api/` directory, organized to match the official Ant Design React API documentation structure:
+
+### Components API (`api/components.md`)
+- All component props and APIs
+- Component methods and events
+- Component types and interfaces
+
+### ConfigProvider API (`api/config-provider.md`)
+- ConfigProvider component API
+- Global configuration options
+- Locale configuration
+
+### Design Tokens API (`api/design-tokens.md`)
+- Design tokens reference
+- Theme customization tokens
+- CSS variables
+
+**To use API reference:**
+1. Identify the API you need help with
+2. Load the corresponding API file from the `api/` directory
+3. Find the API signature, parameters, return type, and examples
+4. Reference the linked example files for detailed usage patterns
+5. All API files include links to relevant example files in the `examples/` directory
+
+## Best Practices
+
+1. **Import styles**: Import Ant Design CSS in your entry file
+2. **Use ConfigProvider**: Wrap your app with ConfigProvider for global configuration
+3. **Form validation**: Use Form component with validation rules
+4. **TypeScript**: Use TypeScript for better type safety
+5. **Theme customization**: Use design tokens for consistent theming
+6. **Internationalization**: Use ConfigProvider with locale for i18n
+7. **Component composition**: Compose components for complex UIs
+8. **Performance**: Use React.memo and useMemo for optimization
+9. **Accessibility**: Follow Ant Design accessibility guidelines
+10. **Responsive design**: Use Grid and responsive utilities
+
+## Resources
+
+- **Official Website**: https://4x-ant-design.antgroup.com/index-cn
+- **Getting Started**: https://4x-ant-design.antgroup.com/docs/react/introduce-cn
+- **Components**: https://4x-ant-design.antgroup.com/components/overview-cn/
+- **GitHub Repository**: https://github.com/ant-design/ant-design
+
+## Keywords
+
+Ant Design, Ant Design React, antd, React UI library, components, Button, Form, Table, Input, Select, DatePicker, Modal, Layout, Menu, theme, customization, internationalization, i18n, TypeScript, design system, 组件库, 按钮, 表单, 表格, 输入框, 选择器, 日期选择器, 对话框, 布局, 菜单, 主题, 国际化, 类型支持

skills/antd-skills/ant-design-react/api/components.md

@@ -0,0 +1,98 @@
+# Components API | 组件 API
+
+## API Reference
+
+Ant Design React component APIs and props.
+
+### Common Props
+
+Most components share common props:
+
+- `className`: Additional CSS class
+- `style`: Inline style object
+- `disabled`: Disabled state
+- `loading`: Loading state
+- `size`: Component size (large, middle, small)
+
+### Button API
+
+**Props:**
+- `type`: Button type (primary, default, dashed, text, link)
+- `size`: Button size (large, middle, small)
+- `shape`: Button shape (default, round, circle)
+- `icon`: Icon component
+- `loading`: Loading state
+- `disabled`: Disabled state
+- `onClick`: Click handler
+
+### Form API
+
+**Props:**
+- `form`: Form instance from Form.useForm()
+- `layout`: Form layout (horizontal, vertical, inline)
+- `onFinish`: Submit handler
+- `onFinishFailed`: Failed submit handler
+- `initialValues`: Initial form values
+
+**Form.Item Props:**
+- `name`: Field name
+- `label`: Field label
+- `rules`: Validation rules
+- `required`: Required indicator
+
+### Table API
+
+**Props:**
+- `columns`: Column definitions
+- `dataSource`: Table data
+- `pagination`: Pagination config
+- `rowSelection`: Row selection config
+- `onChange`: Table change handler
+
+**Column Props:**
+- `title`: Column title
+- `dataIndex`: Data field name
+- `key`: Unique key
+- `sorter`: Sort function
+- `render`: Custom render function
+
+### Input API
+
+**Props:**
+- `value`: Input value
+- `defaultValue`: Default value
+- `placeholder`: Placeholder text
+- `size`: Input size
+- `prefix`: Prefix element
+- `suffix`: Suffix element
+- `onChange`: Change handler
+
+### Select API
+
+**Props:**
+- `value`: Selected value
+- `defaultValue`: Default value
+- `mode`: Selection mode (multiple, tags)
+- `showSearch`: Enable search
+- `onChange`: Change handler
+
+### Modal API
+
+**Props:**
+- `open`: Modal visibility
+- `title`: Modal title
+- `onOk`: OK button handler
+- `onCancel`: Cancel button handler
+- `footer`: Custom footer
+- `width`: Modal width
+
+**Static Methods:**
+- `Modal.info()`, `Modal.success()`, `Modal.error()`, `Modal.warning()`, `Modal.confirm()`
+
+### Key Points
+
+- All components support className and style props
+- Most components support size and disabled props
+- Form components use controlled/uncontrolled pattern
+- Table uses columns and dataSource pattern
+- Modal supports both component and static method usage

skills/antd-skills/ant-design-react/api/config-provider.md

@@ -0,0 +1,69 @@
+# ConfigProvider API | ConfigProvider API
+
+## API Reference
+
+ConfigProvider component API for global configuration.
+
+### ConfigProvider
+
+Provides global configuration for Ant Design components.
+
+**Props:**
+- `locale`: Locale object for internationalization
+- `theme`: Theme configuration object
+- `componentSize`: Global component size
+- `direction`: Text direction (ltr, rtl)
+- `autoInsertSpaceInButton`: Auto insert space in Chinese button
+- `renderEmpty`: Custom empty component renderer
+
+### Theme Configuration
+
+```typescript
+interface ThemeConfig {
+  token?: {
+    colorPrimary?: string;
+    borderRadius?: number;
+    // ... other design tokens
+  };
+  components?: {
+    Button?: {
+      colorPrimary?: string;
+      // ... component-specific tokens
+    };
+    // ... other components
+  };
+}
+```
+
+### Example: Basic Usage
+
+```javascript
+import { ConfigProvider } from 'antd';
+import zhCN from 'antd/locale/zh-CN';
+
+<ConfigProvider locale={zhCN}>
+  <App />
+</ConfigProvider>
+```
+
+### Example: With Theme
+
+```javascript
+<ConfigProvider
+  theme={{
+    token: {
+      colorPrimary: '#00b96b',
+    },
+  }}
+>
+  <App />
+</ConfigProvider>
+```
+
+### Key Points
+
+- Wrap app with ConfigProvider for global config
+- Use locale prop for internationalization
+- Use theme prop for theme customization
+- ConfigProvider affects all child components
+- Can nest ConfigProviders for different scopes

skills/antd-skills/ant-design-react/examples/advanced/internationalization.md

@@ -0,0 +1,90 @@
+# Internationalization | 国际化
+
+## Instructions
+
+This example demonstrates how to implement internationalization with Ant Design React.
+
+### Key Concepts
+
+- Using ConfigProvider with locale
+- Importing locale files
+- Switching languages
+- Custom locale messages
+
+### Example: Basic i18n Setup
+
+```javascript
+import React from 'react';
+import { ConfigProvider } from 'antd';
+import zhCN from 'antd/locale/zh-CN';
+import enUS from 'antd/locale/en_US';
+
+function App() {
+  return (
+    <ConfigProvider locale={zhCN}>
+      <YourApp />
+    </ConfigProvider>
+  );
+}
+```
+
+### Example: Language Switching
+
+```javascript
+import React, { useState } from 'react';
+import { ConfigProvider, Button } from 'antd';
+import zhCN from 'antd/locale/zh-CN';
+import enUS from 'antd/locale/en_US';
+
+function App() {
+  const [locale, setLocale] = useState(zhCN);
+
+  const switchLocale = () => {
+    setLocale(locale === zhCN ? enUS : zhCN);
+  };
+
+  return (
+    <ConfigProvider locale={locale}>
+      <Button onClick={switchLocale}>Switch Language</Button>
+      <YourApp />
+    </ConfigProvider>
+  );
+}
+```
+
+### Example: Custom Locale
+
+```javascript
+import React from 'react';
+import { ConfigProvider } from 'antd';
+import zhCN from 'antd/locale/zh-CN';
+
+const customLocale = {
+  ...zhCN,
+  DatePicker: {
+    ...zhCN.DatePicker,
+    lang: {
+      ...zhCN.DatePicker.lang,
+      month: '月',
+      year: '年',
+    },
+  },
+};
+
+function App() {
+  return (
+    <ConfigProvider locale={customLocale}>
+      <YourApp />
+    </ConfigProvider>
+  );
+}
+```
+
+### Key Points
+
+- Import locale from 'antd/locale/'
+- Use `ConfigProvider` with `locale` prop
+- Switch languages by changing locale prop
+- Can customize locale messages
+- Supports all Ant Design components
+- Works with date pickers, calendars, etc.

skills/antd-skills/ant-design-react/examples/advanced/theme-customization.md

@@ -0,0 +1,97 @@
+# Theme Customization | 主题定制
+
+## Instructions
+
+This example demonstrates how to customize Ant Design theme.
+
+### Key Concepts
+
+- Using ConfigProvider
+- Customizing design tokens
+- Less variables
+- CSS variables
+- Theme switching
+
+### Example: Basic Theme Customization
+
+```javascript
+import React from 'react';
+import { ConfigProvider } from 'antd';
+
+function App() {
+  return (
+    <ConfigProvider
+      theme={{
+        token: {
+          colorPrimary: '#00b96b',
+          borderRadius: 2,
+        },
+      }}
+    >
+      <YourApp />
+    </ConfigProvider>
+  );
+}
+```
+
+### Example: Customizing Multiple Tokens
+
+```javascript
+import React from 'react';
+import { ConfigProvider } from 'antd';
+
+function App() {
+  return (
+    <ConfigProvider
+      theme={{
+        token: {
+          colorPrimary: '#00b96b',
+          colorSuccess: '#52c41a',
+          colorWarning: '#faad14',
+          colorError: '#ff4d4f',
+          borderRadius: 4,
+          fontFamily: 'Arial, sans-serif',
+        },
+      }}
+    >
+      <YourApp />
+    </ConfigProvider>
+  );
+}
+```
+
+### Example: Component Theme Customization
+
+```javascript
+import React from 'react';
+import { ConfigProvider } from 'antd';
+
+function App() {
+  return (
+    <ConfigProvider
+      theme={{
+        components: {
+          Button: {
+            colorPrimary: '#00b96b',
+            borderRadius: 2,
+          },
+          Input: {
+            borderRadius: 4,
+          },
+        },
+      }}
+    >
+      <YourApp />
+    </ConfigProvider>
+  );
+}
+```
+
+### Key Points
+
+- Use `ConfigProvider` with `theme` prop
+- Customize design tokens via `token` property
+- Customize component styles via `components` property
+- Theme changes apply to all child components
+- Supports both Less variables and CSS variables
+- Can switch themes dynamically