3 months ago · dcb1e9d1d2
--- a/README.md
+++ b/README.md
@@ -1,664 +0,0 @@
 
				-<div align="center">
			
 
				-
			
 
				-# Full Stack Skills（Alpha）
			
 
				-
			
 
				-**基于 Agent Skills 规范的分组式全栈技能仓库**
			
 
				-
			
 
				-![Version](https://img.shields.io/badge/Version-0.0.1-red)
			
 
				-![License](https://img.shields.io/badge/License-Apache%202.0-green)
			
 
				-![Skill Docs](https://img.shields.io/badge/SKILL.md-422-orange)
			
 
				-![Skill Groups](https://img.shields.io/badge/Groups-42-blue)
			
 
				-![Marketplace Plugins](https://img.shields.io/badge/Plugins-40-brightgreen)
			
 
				-
			
 
				-</div>
			
 
				-
			
 
				-## 📖 简介
			
 
				-
			
 
				-**Full-Stack-Skills（Alpha）** 是一个开源的 Agent Skills 仓库，面向 Claude Code、Claude.ai 与兼容 Agent Skills 生态的平台。当前仓库采用 `skills/<group>/<skill>/SKILL.md` 的分组式结构，覆盖产品、设计、前端、后端、测试、运维、文档、Spec 驱动开发等全链路场景。
			
 
				-
			
 
				-> **⚠️ 注意：** 当前文档口径以仓库内 `skills/` 实际目录和 `.claude-plugin/marketplace.json` 为准。
			
 
				-
			
 
				-> **说明：** 当前仓库内共有 **42 个技能组目录**、**422 个 `SKILL.md` 文件**；其中 Marketplace 当前发布 **40 个插件**、共 **411 条技能路径**。未进入 Marketplace 的仓库内技能组为 `threejs-skills` 与 `vscode-skills`。
			
 
				-
			
 
				-## ⚡ 5 分钟安装与转换示例
			
 
				-
			
 
				-如果你只想尽快把仓库里的 skills 安装到本地项目或其它平台，按下面的最短路径执行即可。
			
 
				-
			
 
				-### 1. 安装 `fskill`
			
 
				-
			
 
				-```bash
			
 
				-git clone https://github.com/partme-ai/full-stack-skills.git
			
 
				-cd full-stack-skills
			
 
				-npm install -g ./adapters
			
 
				-fskill --version
			
 
				-```
			
 
				-
			
 
				-### 2. 查看平台与审计仓库
			
 
				-
			
 
				-```bash
			
 
				-fskill platforms
			
 
				-fskill audit
			
 
				-```
			
 
				-
			
 
				-### 3. 默认安装到当前项目 `.agents/skills/`
			
 
				-
			
 
				-```bash
			
 
				-mkdir demo-project && cd demo-project
			
 
				-fskill install --skills-dir ../full-stack-skills/skills
			
 
				-```
			
 
				-
			
 
				-这条命令会把 skills 安装到当前项目的 `.agents/skills/`，适用于 `amp`、`kimi-cli`、`replit`、`universal`、`cursor`、`codex`、`cline`、`warp`、`opencode` 等标准路径兼容平台。
			
 
				-
			
 
				-### 4. 安装到 Cursor
			
 
				-
			
 
				-```bash
			
 
				-fskill install --platform cursor --scope project --skills-dir ../full-stack-skills/skills
			
 
				-```
			
 
				-
			
 
				-- **项目级路径**：`.agents/skills/`
			
 
				-- **全局路径**：`~/.cursor/skills/`
			
 
				-
			
 
				-如需安装到 Cursor 全局目录：
			
 
				-
			
 
				-```bash
			
 
				-fskill install --platform cursor --scope global --skills-dir ./skills
			
 
				-```
			
 
				-
			
 
				-### 5. 导出全部平台目录
			
 
				-
			
 
				-```bash
			
 
				-cd full-stack-skills
			
 
				-fskill convert --platform all --output ./adapters-output
			
 
				-```
			
 
				-
			
 
				-导出结果会按平台写入：
			
 
				-
			
 
				-```text
			
 
				-adapters-output/<platform>/<project-path>/<skill-name>/
			
 
				-```
			
 
				-
			
 
				-### 6. 常用场景
			
 
				-
			
 
				-```bash
			
 
				-# 安装到 Claude Code 项目目录
			
 
				-fskill install --platform claude-code --scope project --skills-dir ./skills
			
 
				-
			
 
				-# 安装到 Antigravity 全局目录
			
 
				-fskill install --platform antigravity --scope global --skills-dir ./skills
			
 
				-
			
 
				-# 只安装指定 skill
			
 
				-fskill install --platform cursor --scope global --skills-dir ./skills --skill react --skill vue3
			
 
				-```
			
 
				-
			
 
				-更多适配器细节请直接查看：
			
 
				-
			
 
				-- [平台适配器工具](adapters/README.md)
			
 
				-- [跨平台使用指南](PLATFORM_GUIDE.md)
			
 
				-
			
 
				-## 什么是 Skills？
			
 
				-
			
 
				-Skills 是由说明、脚本和资源组成的文件夹，Claude 会按需动态加载它们，以提升在特定任务上的表现。Skills 用于以可复用的方式教会 Claude 完成具体工作，例如：按团队规范创建文档、执行特定技术流程、沉淀设计系统知识，或自动化重复性工程任务。
			
 
				-
			
 
				-### 更多信息
			
 
				-
			
 
				-- [什么是技能？](https://support.claude.com/en/articles/12512176-what-are-skills)
			
 
				-- [在 Claude 中使用技能](https://support.claude.com/en/articles/12512180-using-skills-in-claude)
			
 
				-- [如何创建自定义技能](https://support.claude.com/en/articles/12512198-creating-custom-skills)
			
 
				-- [用 Agent Skills 为现实世界装备智能体](https://anthropic.com/engineering/equipping-agents-for-the-real-world-with-agent-skills)
			
 
				-- [Agent Skills 规范](https://agentskills.io/)
			
 
				-
			
 
				-### 各平台 Agent Skills 文档
			
 
				-
			
 
				-- Antigravity Agent Skills: https://antigravity.google/docs/skills
			
 
				-- Claude Agent Skills: https://code.claude.com/docs/en/skills
			
 
				-- Cursor Agent Skills: https://cursor.com/cn/docs/context/skills
			
 
				-- Codex Agent Skills: https://developers.openai.com/codex/skills
			
 
				-- Codex Agent Skills (Create Skill): https://developers.openai.com/codex/skills/create-skill
			
 
				-- Codebuddy Agent Skills: https://www.codebuddy.ai/docs/zh/ide/Features/Skills
			
 
				-- Qoder Agent Skills: https://docs.qoder.com/extensions/skills
			
 
				-- Trae Agent Skills: https://docs.trae.ai/ide/skills?_lang=en
			
 
				-
			
 
				-## 关于本仓库
			
 
				-
			
 
				-**full-stack-skills** 是一个面向团队与独立开发者的开源技能仓库与 Marketplace 发布源。它不再采用早期的少量大类聚合方式，而是按技能组进行目录拆分与发布管理。
			
 
				-
			
 
				-### 📊 仓库快照
			
 
				-
			
 
				-| 指标 | 当前值 |
			
 
				-|---|---:|
			
 
				-| `skills/` 下技能组目录 | 42 |
			
 
				-| 仓库内 `SKILL.md` 文件 | 422 |
			
 
				-| Marketplace 插件数 | 40 |
			
 
				-| Marketplace 技能路径数 | 411 |
			
 
				-| 仓库内未发布技能组 | 2 |
			
 
				-
			
 
				-### ✨ 核心特性
			
 
				-
			
 
				-#### 1. 分组式组织
			
 
				-- **42 个技能组目录**：按领域、框架和工作流拆分，便于维护与扩展
			
 
				-- **40 个 Marketplace 插件**：按技能组发布，便于按需安装与组合使用
			
 
				-- **422 个 `SKILL.md` 文件**：沉淀可复用的 Agent Skills 资产
			
 
				-
			
 
				-#### 2. 全链路覆盖
			
 
				-- **前端与 UI**：Vue、React、Angular、Svelte、各类 UI 组件库与构建工具
			
 
				-- **后端与跨端**：Spring、Node.js、Python、Go、Electron、Tauri、UniApp、Flutter
			
 
				-- **工程化与交付**：测试、DevOps、Docker、数据库、nvm、Spec 驱动开发
			
 
				-- **设计与文档**：Figma、流程图、OCR、Mermaid、PlantUML、Pencil、Stitch、T2UI
			
 
				-
			
 
				-#### 3. 工程友好
			
 
				-- **统一规范**：严格遵循 Agent Skills 规范
			
 
				-- **结构清晰**：统一使用 `SKILL.md`、`examples/`、`references/`、`scripts/`、`assets/` 等结构
			
 
				-- **跨平台适配**：提供 TypeScript 标准转换器，覆盖 43 个平台并统一输出标准 skills 目录
			
 
				-
			
 
				-### 技能组织方式
			
 
				-
			
 
				-当前仓库按**技能组**组织，核心分布如下：
			
 
				-
			
 
				-- **前端与 UI**：`vue-skills`、`react-skills`、`angular-skills`、`svelte-skills`、`build-skills`、`vue-ui-skills`、`antd-skills`、`uview-skills`、`avue-skills`
			
 
				-- **后端与跨端开发**：`spring-skills`、`nodejs-skills`、`python-skills`、`go-skills`、`electron-skills`、`tauri-skills`、`uniapp-skills`、`flutter-skills`、`mobile-native-skills`、`cocos-skills`、`chart-skills`
			
 
				-- **工程化与架构**：`dev-utils-skills`、`ddd-skills`、`testing-skills`、`devops-skills`、`docker-skills`、`database-skills`、`nvm-skills`
			
 
				-- **设计、文档与流程**：`design-skills`、`document-skills`、`ocrmypdf-skills`、`drawio-skills`、`ascii-skills`
			
 
				-- **Spec 与设计生态**：`speckit-skills`、`openspec-skills`、`t2ui-skills`、`stitch-skills`、`pencil-skills`
			
 
				-- **通用支持**：`social-skills`、`teaching-skills`、`utility-skills`
			
 
				-
			
 
				-### 能力覆盖矩阵
			
 
				-
			
 
				-| 领域 | 代表技能组 | 覆盖重点 |
			
 
				-|---|---|---|
			
 
				-| 前端与 UI | `vue-skills`、`react-skills`、`angular-skills`、`svelte-skills`、`antd-skills`、`vue-ui-skills`、`build-skills` | 框架开发、组件库、构建体系、界面实现 |
			
 
				-| 服务端与跨端 | `spring-skills`、`nodejs-skills`、`python-skills`、`go-skills`、`electron-skills`、`tauri-skills`、`uniapp-skills`、`flutter-skills` | 服务开发、桌面应用、移动与混合交付 |
			
 
				-| 工程化与交付 | `dev-utils-skills`、`ddd-skills`、`testing-skills`、`devops-skills`、`docker-skills`、`database-skills`、`nvm-skills` | 脚手架、架构模式、测试体系、交付与运维 |
			
 
				-| 设计与文档 | `design-skills`、`document-skills`、`ocrmypdf-skills`、`drawio-skills`、`ascii-skills` | 设计执行、文档处理、OCR、图表与文本可视化 |
			
 
				-| Spec 与设计协同 | `speckit-skills`、`openspec-skills`、`t2ui-skills`、`stitch-skills`、`pencil-skills` | Spec 驱动交付、界面生成、设计系统协作 |
			
 
				-| 通用支持 | `social-skills`、`teaching-skills`、`utility-skills` | 沟通协作、教学资源、通用工具能力 |
			
 
				-
			
 
				-### 当前发布面说明
			
 
				-
			
 
				-- `threejs-skills` 当前在仓库中包含 18 个技能，但未进入 Marketplace 发布面。
			
 
				-- `vscode-skills` 当前在仓库中包含 4 个技能，但未进入 Marketplace 发布面。
			
 
				-- `document-skills` 当前目录中有 7 个技能（含 `full-stack-doc`、`processon-diagram-generator`），而 Marketplace 仍引用 11 个条目，其中 `docx`、`pptx`、`pdf`、`xlsx` 为缺失目录引用。
			
 
				-- `tauri-skills` 当前目录中有 52 个技能，而 Marketplace 当前发布 51 个条目；`tauri-app-updater` 目前仅存在于仓库目录中。
			
 
				-
			
 
				-### 阅读路径建议
			
 
				-
			
 
				-- **先理解仓库全貌**：先阅读本 README 与 `docs/repository-map.md`，快速掌握目录结构、发布面和当前差异。
			
 
				-- **按技能组导航**：如果你关心某一技术域，直接从 `docs/skill-group-mapping.md` 与对应 `skills/<group>-skills/` 目录进入。
			
 
				-- **按研发流程导航**：如果你关心需求、设计、开发、测试、交付的串联关系，优先阅读 `docs/pipeline-stage-to-skills.md`。
			
 
				-- **按设计生态导航**：如果你关注界面生成、设计系统与 Spec 驱动协作，优先阅读 `stitch-skills`、`pencil-skills`、`t2ui-skills`、`speckit-skills`、`openspec-skills`。
			
 
				-
			
 
				-### 技能生态与主文档入口
			
 
				-
			
 
				-本仓库提供全链路**阶段→技能**映射，以及面向 Spec 驱动开发、界面设计、全栈开发、测试与交付的基础技能集合。请优先参考以下文档：
			
 
				-
			
 
				-- [docs/repository-map.md](docs/repository-map.md)
			
 
				-- [docs/skill-group-mapping.md](docs/skill-group-mapping.md)
			
 
				-- [docs/pipeline-stage-to-skills.md](docs/pipeline-stage-to-skills.md)
			
 
				-- [docs/skills-ecosystem.md](docs/skills-ecosystem.md)
			
 
				-
			
 
				-### 🎯 核心设计理念
			
 
				-
			
 
				-#### **技能标准化**
			
 
				-- **Agent Skills 规范**：严格遵循 [Agent Skills 规范](https://agentskills.io/)
			
 
				-- **统一格式**：统一采用 `SKILL.md` 与结构化子目录
			
 
				-- **渐进式披露**：通过 `examples/`、`references/`、`scripts/`、`assets/` 承载增量内容
			
 
				-
			
 
				-#### **按组发布**
			
 
				-- **目录与发布面解耦**：目录结构以 `skills/` 为准，发布面以 Marketplace 为准
			
 
				-- **灵活组合**：按技能组安装，不绑定单一岗位模型
			
 
				-- **可扩展**：支持在仓库内继续引入未发布技能组
			
 
				-
			
 
				-#### **面向交付**
			
 
				-- **覆盖需求到部署**：支持从需求、设计到研发、测试、交付的全过程
			
 
				-- **支持多生态协作**：兼容 T2UI、Stitch、Pencil、Tauri、OpenSpec、SpecKit 等流程
			
 
				-- **适合团队沉淀**：可作为技能资产库与内部标准库使用
			
 
				-
			
 
				-### 📦 项目定位
			
 
				-
			
 
				-**Full-Stack-Skills** 是一个以实际技能目录为核心、以 Marketplace 为发布面的技能基础设施仓库，适用于：
			
 
				-
			
 
				-- 团队内部技能资产沉淀
			
 
				-- Claude Code Marketplace 发布
			
 
				-- Agent Skills 设计参考与模板复用
			
 
				-- Spec 驱动研发与设计协作流程落地
			
 
				-
			
 
				-### 🏗️ 项目架构
			
 
				-
			
 
				-**当前仓库结构**：
			
 
				-
			
 
				-```text
			
 
				-full-stack-skills/
			
 
				-├── .claude-plugin/
			
 
				-│   └── marketplace.json          # Marketplace 配置
			
 
				-├── adapters/                     # TypeScript 标准转换器与平台路径注册表
			
 
				-├── agents/                       # 代理角色与编排入口
			
 
				-├── bundles/                      # 打包与聚合产物
			
 
				-├── dist/                         # 分发产物
			
 
				-├── docs/                         # 目录映射、阶段映射、生态说明
			
 
				-├── media/                        # 截图与展示素材
			
 
				-├── skills/                       # 技能主目录（按组拆分）
			
 
				-│   ├── vue-skills/
			
 
				-│   │   └── vue3/
			
 
				-│   │       └── SKILL.md
			
 
				-│   ├── react-skills/
			
 
				-│   ├── spring-skills/
			
 
				-│   ├── tauri-skills/
			
 
				-│   └── ...
			
 
				-├── spec/                         # 规范与规格说明
			
 
				-├── template/                     # 技能模板
			
 
				-├── tools/                        # 辅助工具
			
 
				-├── AGENTS.md                     # 仓库级 Agent 约束
			
 
				-└── README.md                     # 项目说明
			
 
				-```
			
 
				-
			
 
				-**目录模型说明**：
			
 
				-
			
 
				-- 本仓库统一采用 `skills/<group>-skills/<skill>/SKILL.md` 作为技能存储模型。
			
 
				-- `references/` 用于承载较长的技术说明与官方资料，避免 `SKILL.md` 过长。
			
 
				-- `scripts/` 用于固化可复用的自动化流程，优先替代大段内联命令。
			
 
				-- `docs/` 用于描述仓库级结构、阶段映射、技能生态与发布状态。
			
 
				-
			
 
				-**当前状态**：
			
 
				-
			
 
				-| 项目 | 当前值 |
			
 
				-|---|---:|
			
 
				-| 技能组目录 | 42 |
			
 
				-| `SKILL.md` 文件 | 422 |
			
 
				-| Marketplace 插件 | 40 |
			
 
				-| Marketplace 技能路径 | 411 |
			
 
				-| 仓库内未发布技能组 | 2 |
			
 
				-
			
 
				-### 免责声明
			
 
				-
			
 
				-**这些技能仅用于演示与教育用途。** 虽然其中部分能力可能在 Claude 中可用，但你从 Claude 获得的实现与行为可能与这些技能所展示的不同。这些技能旨在展示模式与可能性。在依赖它们处理关键任务之前，请务必在你自己的环境中充分测试。
			
 
				-
			
 
				-## 📖 快速开始
			
 
				-
			
 
				-### 前置要求
			
 
				-
			
 
				-- **Claude Code** 或 **Claude.ai**（付费套餐）或 **Claude API**
			
 
				-- **Git**（用于克隆仓库，可选）
			
 
				-- **Node.js LTS 与 npm**（用于 TypeScript 跨平台转换器，可选）
			
 
				-
			
 
				-### 在 Claude Code 中使用
			
 
				-
			
 
				-#### 1. 注册 Marketplace
			
 
				-
			
 
				-在 Claude Code 中运行以下命令，将本仓库注册为 Claude Code 的插件市场：
			
 
				-
			
 
				-```
			
 
				-/plugin marketplace add https://github.com/partme-ai/full-stack-skills.git
			
 
				-```
			
 
				-
			
 
				-![add_marketplace.png](./media/add_marketplace.png)
			
 
				-
			
 
				-安装成功！
			
 
				-
			
 
				-![add_marketplace_success.png](media/add_marketplace_success.png)
			
 
				-
			
 
				-或者使用简写形式：
			
 
				-
			
 
				-```
			
 
				-/plugin marketplace add partme-ai/full-stack-skills
			
 
				-# 删除插件
			
 
				-/plugin marketplace remove full-stack-skills
			
 
				-```
			
 
				-
			
 
				-#### 2. 安装插件
			
 
				-
			
 
				-安装插件有两种方式：
			
 
				-
			
 
				-**方式一：通过界面安装**
			
 
				-
			
 
				-1. 选择 `Browse and install plugins`
			
 
				-2. 选择 `full-stack-skills`
			
 
				-3. 选择要安装的插件（见下方可用插件列表）
			
 
				-4. 选择 `Install now`
			
 
				-
			
 
				-**方式二：通过命令安装**
			
 
				-
			
 
				-直接使用命令安装插件：
			
 
				-
			
 
				-```
			
 
				-# 按当前技能组安装示例
			
 
				-/plugin install vue-skills@full-stack-skills
			
 
				-/plugin install react-skills@full-stack-skills
			
 
				-/plugin install spring-skills@full-stack-skills
			
 
				-/plugin install dev-utils-skills@full-stack-skills
			
 
				-/plugin install testing-skills@full-stack-skills
			
 
				-/plugin install tauri-skills@full-stack-skills
			
 
				-/plugin install t2ui-skills@full-stack-skills
			
 
				-/plugin install stitch-skills@full-stack-skills
			
 
				-```
			
 
				-
			
 
				-![install-tauri-skills.png](media/install-tauri-skills.png)
			
 
				-#### 3. 使用技能
			
 
				-
			
 
				-安装插件后，您只需提到该技能即可使用。Claude 会根据技能描述自动判断何时使用该技能。
			
 
				-
			
 
				-### 在 Claude.ai 中使用
			
 
				-
			
 
				-这些示例技能在 Claude.ai 的付费套餐中已默认可用。
			
 
				-
			
 
				-如需使用本仓库中的任意技能或上传自定义技能，请参考 [在 Claude 中使用技能](https://support.claude.com/en/articles/12512180-using-skills-in-claude#h_a4222fa77b) 的说明。
			
 
				-
			
 
				-### 在 Claude API 中使用
			
 
				-
			
 
				-你可以通过 Claude API 使用 Anthropic 预置的技能并上传自定义技能。详情参见 [Skills API Quickstart](https://docs.claude.com/en/api/skills-guide#creating-a-skill)。
			
 
				-
			
 
				-### 在其他平台使用
			
 
				-
			
 
				-本仓库提供一个 **TypeScript 标准转换器**，将 `skills/<group>/<skill>/` 导出为标准 skills 目录，并按目标平台写入其项目级或全局级路径。转换器不再生成 Cursor rule、Trae plugin、Qoder agent、CodeBuddy workflow 这类平台专有包装物，统一以标准技能目录作为输出。
			
 
				-
			
 
				-#### 适配器说明
			
 
				-
			
 
				-- **命令行名称**：`fskill`
			
 
				-- **仓库位置**：`adapters/`
			
 
				-- **输入结构**：仓库内的 `skills/<group>/<skill>/`
			
 
				-- **输出结构**：标准技能目录 `SKILL.md` + 资源目录
			
 
				-- **核心命令**：`platforms`、`audit`、`convert`、`install`
			
 
				-- **默认安装目标**：当前项目 `.agents/skills/`
			
 
				-- **平台安装方式**：通过 `--platform` 切换目标平台，通过 `--scope project|global` 切换项目级或全局级路径
			
 
				-- **适配原则**：保留原始技能目录内容，只变更安装路径，不生成平台专有包装文件
			
 
				-
			
 
				-#### 适配器工作流
			
 
				-
			
 
				-1. 用 `fskill audit` 检查仓库技能是否完整、数量是否正确
			
 
				-2. 用 `fskill platforms` 查看支持的平台 ID、项目路径和全局路径
			
 
				-3. 用 `fskill convert --platform <id|all>` 生成可分发的标准输出目录
			
 
				-4. 用 `fskill install` 或 `fskill install --platform <id>` 直接安装到目标平台目录
			
 
				-
			
 
				-#### 常用适配命令
			
 
				-
			
 
				-```bash
			
 
				-# 查看支持的平台与路径
			
 
				-fskill platforms
			
 
				-
			
 
				-# 审计仓库技能
			
 
				-fskill audit
			
 
				-
			
 
				-# 导出到 Cursor 结构
			
 
				-fskill convert --platform cursor --output ./adapters-output
			
 
				-
			
 
				-# 安装到当前项目的 Cursor 路径
			
 
				-fskill install --platform cursor --scope project
			
 
				-
			
 
				-# 安装到 Cursor 全局路径 ~/.cursor/skills/
			
 
				-fskill install --platform cursor --scope global
			
 
				-
			
 
				-# 默认安装到当前项目 .agents/skills/
			
 
				-fskill install
			
 
				-```
			
 
				-
			
 
				-#### Cursor 与其他平台的关系
			
 
				-
			
 
				-- **Cursor**：项目级使用 `.agents/skills/`，全局级使用 `~/.cursor/skills/`
			
 
				-- **Claude Code**：项目级使用 `.claude/skills/`
			
 
				-- **OpenClaw**：项目级使用 `skills/`
			
 
				-- **Antigravity**：项目级使用 `.agents/skills/`，全局级使用 `~/.gemini/antigravity/skills/`
			
 
				-- **其它平台**：全部由 `fskill platforms` 输出的平台注册表统一管理
			
 
				-
			
 
				-**安装与执行命令：**
			
 
				-```bash
			
 
				-git clone https://github.com/partme-ai/full-stack-skills.git
			
 
				-cd full-stack-skills
			
 
				-npm install -g ./adapters
			
 
				-fskill --version
			
 
				-fskill platforms
			
 
				-fskill audit
			
 
				-fskill convert --platform all --output ./adapters-output
			
 
				-fskill install
			
 
				-```
			
 
				-
			
 
				-默认情况下，`fskill install` 会把技能安装到当前项目的 `.agents/skills/` 目录；这是标准 Agent Skills 兼容路径。如需其他平台目录，再显式传入 `--platform` 与 `--scope`。
			
 
				-如果只想在仓库开发态使用，也可以进入 `adapters/` 执行 `npm install && npm link`，随后直接运行 `fskill ...`。
			
 
				-
			
 
				-**平台覆盖：**
			
 
				-- **共享 `.agents/skills/` 路径族**：`amp`、`kimi-cli`、`replit`、`universal`、`antigravity`、`cline`、`warp`、`codex`、`cursor`、`deepagents`、`gemini-cli`、`github-copilot`、`opencode`
			
 
				-- **专属目录路径族**：`augment`、`claude-code`、`openclaw`、`codebuddy`、`command-code`、`continue`、`cortex`、`crush`、`droid`、`goose`、`junie`、`iflow-cli`、`kilo`、`kiro-cli`、`kode`、`mcpjam`、`mistral-vibe`、`mux`、`openhands`、`pi`、`qoder`、`qwen-code`、`roo`、`trae`、`trae-cn`、`windsurf`、`zencoder`、`neovate`、`pochi`、`adal`
			
 
				-- **Antigravity 基线**：项目级使用 `.agents/skills/`，全局级使用 `~/.gemini/antigravity/skills/`
			
 
				-
			
 
				-**详细文档：**
			
 
				-- [跨平台使用指南](PLATFORM_GUIDE.md) - 完整平台矩阵、安装路径与执行示例
			
 
				-- [平台适配器工具](adapters/README.md) - CLI 命令、审计规则、导出与安装说明
			
 
				-
			
 
				-## 📝 核心功能
			
 
				-
			
 
				-### 1. 技能管理
			
 
				-- **技能分类**：按技能组组织，并通过 Marketplace 插件发布
			
 
				-- **技能搜索**：通过技能名称快速查找所需技能
			
 
				-- **技能安装**：支持按插件类别批量安装或单独安装技能
			
 
				-
			
 
				-### 2. 跨平台支持
			
 
				-- **Claude Code**：原生支持，通过插件市场安装
			
 
				-- **Claude.ai**：支持上传自定义技能
			
 
				-- **Claude API**：通过 API 使用技能
			
 
				-- **标准目录兼容**：统一导出标准 skills 目录，并按平台路径矩阵安装
			
 
				-- **43 平台覆盖**：覆盖 `.agents/skills/` 共享路径平台与各类专属目录平台
			
 
				-- **可审计与可安装**：内置 `platforms`、`audit`、`convert`、`install` 命令
			
 
				-
			
 
				-### 3. 技能创建
			
 
				-- **规范指导**：提供技能创建规范和最佳实践
			
 
				-- **模板支持**：提供技能模板，快速创建新技能
			
 
				-- **文档生成**：自动生成技能文档结构
			
 
				-
			
 
				-### 4. 文档处理
			
 
				-- **办公文档**：支持 Word、PowerPoint、Excel、PDF 等文档处理
			
 
				-- **OCR 识别**：支持 OCRmyPDF 扫描件 OCR（100+ 语言、图像处理、优化压缩、批量处理、Python API、多引擎插件）
			
 
				-- **图表绘制**：支持 Mermaid、PlantUML、Draw.io 等图表绘制
			
 
				-- **文档协作**：支持多人协作编辑
			
 
				-
			
 
				-### 5. 开发工具
			
 
				-- **代码生成**：支持代码生成和模板化
			
 
				-- **项目构建**：支持 DDD 项目构建（单体单模块、单体多模块、微服务）
			
 
				-- **文档生成**：支持全栈文档生成（14种文档模板）
			
 
				-
			
 
				-### 6. 仓库治理
			
 
				-- **目录即事实**：`skills/` 目录代表仓库中的真实技能资产
			
 
				-- **Marketplace 即发布面**：`.claude-plugin/marketplace.json` 代表对外可安装范围
			
 
				-- **差异需显式记录**：目录与发布面不一致时，README 与 `docs/repository-map.md` 需要同步说明
			
 
				-- **结构优先稳定**：新增技能优先归入已有技能组，只有在职责明显独立时才引入新技能组
			
 
				-
			
 
				-## 可用插件和技能
			
 
				-
			
 
				-以下表格以当前 `skills/` 实际目录与 `.claude-plugin/marketplace.json` 为准，展示仓库中的技能组、目录技能数与当前发布状态。
			
 
				-
			
 
				-| 技能组 | 目录内技能数 | 已发布 | 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` | 12 | 是 | 12 | 已与当前发布面对应；`full-stack-doc` 已迁至 `document-skills` |
			
 
				-| `devops-skills` | 6 | 是 | 6 | 已与当前发布面对应 |
			
 
				-| `docker-skills` | 2 | 是 | 2 | 已与当前发布面对应 |
			
 
				-| `document-skills` | 7 | 是 | 11 | 目录技能数与 Marketplace 引用数不一致（含缺失的 docx/pptx/pdf/xlsx），详见 repository-map |
			
 
				-| `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 引用数不一致，详见 repository-map |
			
 
				-| `teaching-skills` | 3 | 是 | 3 | 已与当前发布面对应 |
			
 
				-| `testing-skills` | 9 | 是 | 9 | 已与当前发布面对应 |
			
 
				-| `threejs-skills` | 18 | 否 | 0 | 仓库内存在，当前未写入 Marketplace |
			
 
				-| `uniapp-skills` | 13 | 是 | 13 | 已与当前发布面对应 |
			
 
				-| `utility-skills` | 3 | 是 | 3 | 已与当前发布面对应 |
			
 
				-| `uview-skills` | 2 | 是 | 2 | 已与当前发布面对应 |
			
 
				-| `vscode-skills` | 4 | 否 | 0 | 仓库内存在，当前未写入 Marketplace |
			
 
				-| `vue-skills` | 7 | 是 | 7 | 已与当前发布面对应 |
			
 
				-| `vue-ui-skills` | 4 | 是 | 4 | 已与当前发布面对应 |
			
 
				-
			
 
				-### 当前一致性说明
			
 
				-
			
 
				-- 对仓库内容的理解，应以 `skills/` 目录为准。
			
 
				-- 对外发布面的理解，应以 `.claude-plugin/marketplace.json` 为准。
			
 
				-- 当前真实存在的差异仅有三类：仓库内未发布技能组、Marketplace 缺失目录引用、仓库内新增但未发布的单个技能。
			
 
				-- 上表已经明确标识这些差异，因此 README 现在对应的是“当前仓库状态”，而不是历史分类口径。
			
 
				-
			
 
				-### 安装建议
			
 
				-
			
 
				-- 需要前端能力：优先安装 `vue-skills`、`react-skills`、`build-skills`、`antd-skills`、`vue-ui-skills`
			
 
				-- 需要后端与跨端能力：优先安装 `spring-skills`、`nodejs-skills`、`python-skills`、`go-skills`、`tauri-skills`、`uniapp-skills`
			
 
				-- 需要设计与文档能力：优先安装 `design-skills`、`document-skills`、`ocrmypdf-skills`、`drawio-skills`
			
 
				-- 需要交付与工程化能力：优先安装 `dev-utils-skills`、`testing-skills`、`devops-skills`、`docker-skills`、`database-skills`、`nvm-skills`
			
 
				-- 需要 Spec / 设计工作流：优先安装 `speckit-skills`、`openspec-skills`、`t2ui-skills`、`stitch-skills`、`pencil-skills`
			
 
				-
			
 
				-### 场景化安装路径
			
 
				-
			
 
				-- **前端应用开发**：先安装 `vue-skills` 或 `react-skills`，再按需要补充 `build-skills`、`antd-skills`、`vue-ui-skills`。
			
 
				-- **后端服务开发**：将 `spring-skills`、`nodejs-skills`、`python-skills`、`go-skills` 与 `testing-skills`、`database-skills` 组合使用。
			
 
				-- **桌面与跨端产品**：按目标平台选择 `tauri-skills`、`electron-skills`、`uniapp-skills`、`flutter-skills`。
			
 
				-- **Spec 驱动协作**：建议成套安装 `speckit-skills`、`openspec-skills`、`t2ui-skills`、`stitch-skills`、`pencil-skills`。
			
 
				-- **文档与图形表达**：建议组合 `document-skills`、`ocrmypdf-skills`、`drawio-skills`、`ascii-skills`。
			
 
				-
			
 
				-### 业务域导航
			
 
				-
			
 
				-| 目标 | 建议优先阅读 | 建议安装组合 |
			
 
				-|---|---|---|
			
 
				-| Web 前端交付 | `vue-skills`、`react-skills`、`build-skills` | `vue-skills` / `react-skills` + `build-skills` + `testing-skills` |
			
 
				-| 企业后台与服务 | `spring-skills`、`nodejs-skills`、`database-skills` | `spring-skills` / `nodejs-skills` + `database-skills` + `devops-skills` |
			
 
				-| 桌面与跨端应用 | `tauri-skills`、`electron-skills`、`uniapp-skills`、`flutter-skills` | 按目标平台选 1–2 个运行时组，再补 `testing-skills` |
			
 
				-| Spec 驱动产品研发 | `speckit-skills`、`openspec-skills`、`t2ui-skills` | `speckit-skills` + `openspec-skills` + `t2ui-skills` |
			
 
				-| 设计系统与界面生产 | `stitch-skills`、`pencil-skills`、`design-skills` | `stitch-skills` + `pencil-skills` + `design-skills` |
			
 
				-| 文档、OCR 与图表 | `document-skills`、`ocrmypdf-skills`、`drawio-skills`、`ascii-skills` | `document-skills` + `ocrmypdf-skills` + `drawio-skills` |
			
 
				-
			
 
				-
			
 
				-## 🛠️ 技术栈
			
 
				-
			
 
				-### 核心规范
			
 
				-- **Agent Skills 规范**：严格遵循 [Agent Skills 规范](https://agentskills.io/)，确保技能质量和兼容性
			
 
				-- **Markdown 格式**：所有技能文档采用 Markdown 格式，便于阅读和维护
			
 
				-- **YAML Frontmatter**：使用 YAML Frontmatter 定义技能元数据
			
 
				-
			
 
				-### 技能结构
			
 
				-- **SKILL.md**：技能主文档，包含描述、使用说明、示例等
			
 
				-- **examples/**：示例文件目录，包含各种使用场景的示例
			
 
				-- **references/**：参考资料目录，用于承载较长说明与官方链接
			
 
				-- **scripts/**：脚本文件目录，包含自动化脚本
			
 
				-- **assets/**：资源文件目录，用于存放图片、素材或辅助文件
			
 
				-
			
 
				-### 编写原则
			
 
				-- **描述准确**：`description` 必须明确说明技能的触发场景与适用任务
			
 
				-- **正文精简**：`SKILL.md` 保持精炼，复杂材料优先放入 `references/`
			
 
				-- **路径一致**：目录名、frontmatter 中的 `name` 与 Marketplace 路径保持一致
			
 
				-- **任务导向**：优先描述工作流、输入输出、边界条件，而不是泛化概念说明
			
 
				-- **脚本优先**：可复用流程优先沉淀到 `scripts/`，减少内联命令噪音
			
 
				-
			
 
				-### 文档维护规则
			
 
				-- **计数更新同步**：当技能组数量、`SKILL.md` 数量或 Marketplace 路径变化时，需同步更新 README 中的快照数据
			
 
				-- **状态说明同步**：当出现 repo-only 技能组或 Marketplace 漂移时，README 与 `docs/repository-map.md` 必须同时更新
			
 
				-- **示例命令同步**：安装命令示例只能使用当前 Marketplace 中实际存在的插件名
			
 
				-- **路径说明同步**：路径示例必须遵循 `skills/<group>-skills/<skill>/` 结构，避免回退到历史写法
			
 
				-
			
 
				-### 跨平台支持
			
 
				-- **Claude Code**：原生支持，通过插件市场安装
			
 
				-- **Claude.ai**：支持上传自定义技能
			
 
				-- **Claude API**：通过 API 使用技能
			
 
				-- **标准转换器**：以 TypeScript CLI 统一导出标准 skills 目录
			
 
				-- **路径矩阵**：覆盖 43 个平台的项目级与全局级安装路径
			
 
				-
			
 
				-## 📦 版本信息
			
 
				-
			
 
				-| 项目 | 当前版本          |
			
 
				-|---|---------------|
			
 
				-| full-stack-skills | 0.0.1 (Alpha) |
			
 
				-| 技能组目录 | 42            |
			
 
				-| `SKILL.md` 文件 | 421           |
			
 
				-| Marketplace 插件 | 40            |
			
 
				-| Marketplace 技能路径 | 410           |
			
 
				-| Agent Skills 规范 | 最新版本          |
			
 
				-
			
 
				-## 🔗 相关链接
			
 
				-
			
 
				-### 官方资源
			
 
				-- **Agent Skills 规范**：[https://agentskills.io/](https://agentskills.io/)
			
 
				-- **Claude Skills 文档**：[https://support.claude.com/en/articles/12512176-what-are-skills](https://support.claude.com/en/articles/12512176-what-are-skills)
			
 
				-- **使用技能指南**：[https://support.claude.com/en/articles/12512180-using-skills-in-claude](https://support.claude.com/en/articles/12512180-using-skills-in-claude)
			
 
				-- **创建自定义技能**：[https://support.claude.com/en/articles/12512198-creating-custom-skills](https://support.claude.com/en/articles/12512198-creating-custom-skills)
			
 
				-- **Skills API 快速开始**：[https://docs.claude.com/en/api/skills-guide#creating-a-skill](https://docs.claude.com/en/api/skills-guide#creating-a-skill)
			
 
				-
			
 
				-### 项目资源
			
 
				-- **跨平台使用指南**：[PLATFORM_GUIDE.md](PLATFORM_GUIDE.md)
			
 
				-- **平台适配器工具**：[adapters/README.md](adapters/README.md)
			
 
				-- **角色定义**：[ROLE_DEFINITIONS.md](ROLE_DEFINITIONS.md)
			
 
				-- **智能体提示词**：[AGENTS_PROMPT.md](AGENTS_PROMPT.md)
			
 
				-
			
 
				-### 联系我们
			
 
				-- **GitHub Issues**：提交问题或建议
			
 
				-- **问题反馈**：通过 GitHub Issues 反馈
			
 
				-
			
 
				-## 🤝 贡献指南
			
 
				-
			
 
				-欢迎您为 Full-Stack-Skills 做出贡献！请遵循以下步骤：
			
 
				-
			
 
				-1. **Fork 本仓库**
			
 
				-2. **创建特性分支** (`git checkout -b feature/AmazingFeature`)
			
 
				-3. **提交更改** (`git commit -m 'Add some AmazingFeature'`)
			
 
				-4. **推送到分支** (`git push origin feature/AmazingFeature`)
			
 
				-5. **提交 Pull Request**
			
 
				-
			
 
				-### 贡献类型
			
 
				-- **新增技能**：添加新的技能到相应类别
			
 
				-- **改进现有技能**：完善技能文档、示例或模板
			
 
				-- **修复问题**：修复技能中的错误或问题
			
 
				-- **文档改进**：改进项目文档或使用指南
			
 
				-
			
 
				-### 技能创建规范
			
 
				-- 严格遵循 [Agent Skills 规范](https://agentskills.io/)
			
 
				-- 路径遵循 `skills/<group>-skills/<skill>/SKILL.md`
			
 
				-- 参考现有技能的结构和格式
			
 
				-- 包含完整的官方文档链接
			
 
				-- 提供清晰的使用示例
			
 
				-- 需要发布时同步更新 `.claude-plugin/marketplace.json`
			
 
				-
			
 
				-### 提交前检查清单
			
 
				-- 确认技能目录名、frontmatter `name` 与实际用途一致
			
 
				-- 确认 `SKILL.md` 足够精炼，长说明已移动至 `references/`
			
 
				-- 确认脚本、示例、资源文件路径可被仓库内直接解析
			
 
				-- 确认 README、映射文档、Marketplace 配置之间没有新的口径差异
			
 
				-
			
 
				-## 📄 许可证
			
 
				-
			
 
				-本项目采用 [Apache License 2.0](LICENSE) 许可证。
			
 
				-
			
 
				-**注意**：本仓库中的许多技能是开源的（Apache 2.0）。我们还在 [`skills/document-skills/docx`](skills/document-skills/docx)、[`skills/document-skills/pdf`](skills/document-skills/pdf)、[`skills/document-skills/pptx`](skills/document-skills/pptx) 和 [`skills/document-skills/xlsx`](skills/document-skills/xlsx) 子目录中包含了用于支撑 [Claude 文档能力](https://www.anthropic.com/news/create-files) 的文档创建与编辑技能。这些技能是“可查看源码”的（source-available），但并非开源；它们同时也是构建复杂文档类技能的参考实现。
			
 
				-
			
 
				-## 🙏 致谢
			
 
				-
			
 
				-感谢以下开源项目和社区：
			
 
				-
			
 
				-- [Anthropic](https://www.anthropic.com/) - Claude AI 和 Agent Skills 规范
			
 
				-- [Agent Skills](https://agentskills.io/) - Agent Skills 规范制定
			
 
				-- [Spring Boot](https://spring.io/projects/spring-boot) - Java 应用开发框架
			
 
				-- [Vue.js](https://vuejs.org/) - 渐进式 JavaScript 框架
			
 
				-- [React](https://react.dev/) - 用于构建用户界面的 JavaScript 库
			
 
				-- 以及所有贡献者和技能维护者
			
 
				-
			
 
				----
			
 
				-
			
 
				-<div align="center">
			
 
				-
			
 
				-**如果这个项目对你有帮助，请给我们一个 ⭐️**
			
 
				-
			
 
				-Made with ❤️ by partme-ai Team
			
 
				-
			
 
				-</div>
			
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -0,0 +1,291 @@
 
				+<div align="center">
			
 
				+
			
 
				+# Full Stack Skills
			
 
				+
			
 
				+**460+ 个 Agent Skills。42+ 个技能包。一个统一生态。**
			
 
				+
			
 
				+*前端 · 后端 · 移动端 · DevOps · AI 设计工具 — 生产级品质，独立安装。*
			
 
				+
			
 
				+[![Stars](https://img.shields.io/github/stars/partme-ai/full-stack-skills?style=social)](https://github.com/partme-ai/full-stack-skills)
			
 
				+[![License](https://img.shields.io/badge/License-Apache%202.0-green)](LICENSE)
			
 
				+[![Agent Skills](https://img.shields.io/badge/Agent%20Skills-Compatible-purple)](https://agentskills.io)
			
 
				+
			
 
				+[English](./README.md) | 简体中文
			
 
				+
			
 
				+[简介](#-简介) ·
			
 
				+[安装](#-安装) ·
			
 
				+[技能目录](#-技能目录) ·
			
 
				+[架构](#-架构) ·
			
 
				+[Claude Code 用户](#-claude-code-用户) ·
			
 
				+[生态](#-生态) ·
			
 
				+[贡献](#-贡献指南)
			
 
				+
			
 
				+</div>
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## 简介
			
 
				+
			
 
				+**Full Stack Skills** 是面向 AI 编码智能体的最全面 Agent Skills 集合的导航站。原为 460+ stars 的 monorepo，现已拆分为 [full-statck-skills](https://github.com/full-statck-skills) GitHub 组织下的 **42 个可独立安装的包**。
			
 
				+
			
 
				+每个包提供专业知识、工作流和参考资料，AI 智能体按需加载 — 保持上下文占用最小化，同时在需要时提供深度领域专业知识。
			
 
				+
			
 
				+> **迁移完成（2026 年 6 月）**：全部 454 个技能已迁移到独立仓库。本仓库现在是目录和导航站。所有现有 stars 和历史记录均保留在此。
			
 
				+
			
 
				+### 我们要解决的问题
			
 
				+
			
 
				+| 缺口 | 问题 | 解决方案 |
			
 
				+|------|------|----------|
			
 
				+| **上下文溢出** | 一次加载所有技能会超过 token 限制 | 通过 `npx skills add` 按包按需加载 |
			
 
				+| **领域专业知识** | 通用 AI 缺乏深度框架知识 | 跨 15 个领域的 454 个专业技能 |
			
 
				+| **可发现性** | 技能分散在各个仓库，难以查找 | 本目录 — 一个 README，所有包链接 |
			
 
				+| **版本锁定** | monorepo 强制协调发布 | 每个包独立版本管理和发布 |
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## 安装
			
 
				+
			
 
				+一条命令安装任意技能包：
			
 
				+
			
 
				+```bash
			
 
				+npx skills add full-statck-skills/vue-skills      # Vue.js 生态（7 个技能）
			
 
				+npx skills add full-statck-skills/tauri-skills     # Tauri 桌面/移动（52 个技能）
			
 
				+npx skills add full-statck-skills/spring-skills    # Spring Boot 生态（7 个技能）
			
 
				+```
			
 
				+
			
 
				+或安装包中的特定技能：
			
 
				+
			
 
				+```bash
			
 
				+npx skills add full-statck-skills/vue-skills --skill vue3
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## 技能目录
			
 
				+
			
 
				+### 前端框架（15 个技能）
			
 
				+
			
 
				+| 包 | 技能数 | 安装 |
			
 
				+|---|--------|------|
			
 
				+| [vue-skills](https://github.com/full-statck-skills/vue-skills) | 7 | `npx skills add full-statck-skills/vue-skills` |
			
 
				+| [react-skills](https://github.com/full-statck-skills/react-skills) | 6 | `npx skills add full-statck-skills/react-skills` |
			
 
				+| [angular-skills](https://github.com/full-statck-skills/angular-skills) | 1 | `npx skills add full-statck-skills/angular-skills` |
			
 
				+| [svelte-skills](https://github.com/full-statck-skills/svelte-skills) | 1 | `npx skills add full-statck-skills/svelte-skills` |
			
 
				+
			
 
				+### 前端 UI 库（13 个技能）
			
 
				+
			
 
				+| 包 | 技能数 | 安装 |
			
 
				+|---|--------|------|
			
 
				+| [vue-ui-skills](https://github.com/full-statck-skills/vue-ui-skills) | 4 | `npx skills add full-statck-skills/vue-ui-skills` |
			
 
				+| [antd-skills](https://github.com/full-statck-skills/antd-skills) | 4 | `npx skills add full-statck-skills/antd-skills` |
			
 
				+| [uview-skills](https://github.com/full-statck-skills/uview-skills) | 2 | `npx skills add full-statck-skills/uview-skills` |
			
 
				+| [avue-skills](https://github.com/full-statck-skills/avue-skills) | 3 | `npx skills add full-statck-skills/avue-skills` |
			
 
				+
			
 
				+### 构建与工具（44 个技能）
			
 
				+
			
 
				+| 包 | 技能数 | 安装 |
			
 
				+|---|--------|------|
			
 
				+| [build-skills](https://github.com/full-statck-skills/build-skills) | 6 | `npx skills add full-statck-skills/build-skills` |
			
 
				+| [nvm-skills](https://github.com/full-statck-skills/nvm-skills) | 15 | `npx skills add full-statck-skills/nvm-skills` |
			
 
				+| [vscode-skills](https://github.com/full-statck-skills/vscode-skills) | 4 | `npx skills add full-statck-skills/vscode-skills` |
			
 
				+| [utility-skills](https://github.com/full-statck-skills/utility-skills) | 7 | `npx skills add full-statck-skills/utility-skills` |
			
 
				+| [dev-utils-skills](https://github.com/full-statck-skills/dev-utils-skills) | 12 | `npx skills add full-statck-skills/dev-utils-skills` |
			
 
				+
			
 
				+### 图表与 ASCII 艺术（15 个技能）
			
 
				+
			
 
				+| 包 | 技能数 | 安装 |
			
 
				+|---|--------|------|
			
 
				+| [chart-skills](https://github.com/full-statck-skills/chart-skills) | 2 | `npx skills add full-statck-skills/chart-skills` |
			
 
				+| [ascii-skills](https://github.com/full-statck-skills/ascii-skills) | 13 | `npx skills add full-statck-skills/ascii-skills` |
			
 
				+
			
 
				+### 后端框架（19 个技能）
			
 
				+
			
 
				+| 包 | 技能数 | 安装 |
			
 
				+|---|--------|------|
			
 
				+| [spring-skills](https://github.com/full-statck-skills/spring-skills) | 7 | `npx skills add full-statck-skills/spring-skills` |
			
 
				+| [nodejs-skills](https://github.com/full-statck-skills/nodejs-skills) | 4 | `npx skills add full-statck-skills/nodejs-skills` |
			
 
				+| [python-skills](https://github.com/full-statck-skills/python-skills) | 3 | `npx skills add full-statck-skills/python-skills` |
			
 
				+| [go-skills](https://github.com/full-statck-skills/go-skills) | 2 | `npx skills add full-statck-skills/go-skills` |
			
 
				+| [java-skills](https://github.com/full-statck-skills/java-skills) | 3 | `npx skills add full-statck-skills/java-skills` |
			
 
				+
			
 
				+### 跨平台与桌面（72 个技能）
			
 
				+
			
 
				+| 包 | 技能数 | 安装 |
			
 
				+|---|--------|------|
			
 
				+| [uniapp-skills](https://github.com/full-statck-skills/uniapp-skills) | 13 | `npx skills add full-statck-skills/uniapp-skills` |
			
 
				+| [flutter-skills](https://github.com/full-statck-skills/flutter-skills) | 2 | `npx skills add full-statck-skills/flutter-skills` |
			
 
				+| [electron-skills](https://github.com/full-statck-skills/electron-skills) | 3 | `npx skills add full-statck-skills/electron-skills` |
			
 
				+| [tauri-skills](https://github.com/full-statck-skills/tauri-skills) | 52 | `npx skills add full-statck-skills/tauri-skills` |
			
 
				+| [mobile-native-skills](https://github.com/full-statck-skills/mobile-native-skills) | 2 | `npx skills add full-statck-skills/mobile-native-skills` |
			
 
				+
			
 
				+### 3D 与游戏（19 个技能）
			
 
				+
			
 
				+| 包 | 技能数 | 安装 |
			
 
				+|---|--------|------|
			
 
				+| [threejs-skills](https://github.com/full-statck-skills/threejs-skills) | 18 | `npx skills add full-statck-skills/threejs-skills` |
			
 
				+| [cocos-skills](https://github.com/full-statck-skills/cocos-skills) | 1 | `npx skills add full-statck-skills/cocos-skills` |
			
 
				+
			
 
				+### 架构与设计模式（35 个技能）
			
 
				+
			
 
				+| 包 | 技能数 | 安装 |
			
 
				+|---|--------|------|
			
 
				+| [ddd-skills](https://github.com/full-statck-skills/ddd-skills) | 16 | `npx skills add full-statck-skills/ddd-skills` |
			
 
				+| [design-skills](https://github.com/full-statck-skills/design-skills) | 4 | `npx skills add full-statck-skills/design-skills` |
			
 
				+| [drawio-skills](https://github.com/full-statck-skills/drawio-skills) | 2 | `npx skills add full-statck-skills/drawio-skills` |
			
 
				+| [document-skills](https://github.com/full-statck-skills/document-skills) | 8 | `npx skills add full-statck-skills/document-skills` |
			
 
				+| [ocrmypdf-skills](https://github.com/full-statck-skills/ocrmypdf-skills) | 5 | `npx skills add full-statck-skills/ocrmypdf-skills` |
			
 
				+
			
 
				+### 数据库与存储（5 个技能）
			
 
				+
			
 
				+| 包 | 技能数 | 安装 |
			
 
				+|---|--------|------|
			
 
				+| [database-skills](https://github.com/full-statck-skills/database-skills) | 5 | `npx skills add full-statck-skills/database-skills` |
			
 
				+
			
 
				+### DevOps 与容器（22 个技能）
			
 
				+
			
 
				+| 包 | 技能数 | 安装 |
			
 
				+|---|--------|------|
			
 
				+| [devops-skills](https://github.com/full-statck-skills/devops-skills) | 6 | `npx skills add full-statck-skills/devops-skills` |
			
 
				+| [docker-skills](https://github.com/full-statck-skills/docker-skills) | 16 | `npx skills add full-statck-skills/docker-skills` |
			
 
				+
			
 
				+### 测试（9 个技能）
			
 
				+
			
 
				+| 包 | 技能数 | 安装 |
			
 
				+|---|--------|------|
			
 
				+| [testing-skills](https://github.com/full-statck-skills/testing-skills) | 9 | `npx skills add full-statck-skills/testing-skills` |
			
 
				+
			
 
				+### 规范驱动开发（28 个技能）
			
 
				+
			
 
				+| 包 | 技能数 | 安装 |
			
 
				+|---|--------|------|
			
 
				+| [speckit-skills](https://github.com/full-statck-skills/speckit-skills) | 13 | `npx skills add full-statck-skills/speckit-skills` |
			
 
				+| [openspec-skills](https://github.com/full-statck-skills/openspec-skills) | 15 | `npx skills add full-statck-skills/openspec-skills` |
			
 
				+
			
 
				+### AI 设计工具 — MCP（153 个技能）
			
 
				+
			
 
				+| 包 | 技能数 | 安装 |
			
 
				+|---|--------|------|
			
 
				+| [stitch-skills](https://github.com/full-statck-skills/stitch-skills) | 28 | `npx skills add full-statck-skills/stitch-skills` |
			
 
				+| [pencil-skills](https://github.com/full-statck-skills/pencil-skills) | 28 | `npx skills add full-statck-skills/pencil-skills` |
			
 
				+| [t2ui-skills](https://github.com/full-statck-skills/t2ui-skills) | 97 | `npx skills add full-statck-skills/t2ui-skills` |
			
 
				+
			
 
				+### 教学与学习（3 个技能）
			
 
				+
			
 
				+| 包 | 技能数 | 安装 |
			
 
				+|---|--------|------|
			
 
				+| [teaching-skills](https://github.com/full-statck-skills/teaching-skills) | 3 | `npx skills add full-statck-skills/teaching-skills` |
			
 
				+
			
 
				+### 社交与沟通（2 个技能）
			
 
				+
			
 
				+| 包 | 技能数 | 安装 |
			
 
				+|---|--------|------|
			
 
				+| [social-skills](https://github.com/full-statck-skills/social-skills) | 2 | `npx skills add full-statck-skills/social-skills` |
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## 架构
			
 
				+
			
 
				+### 技能工作原理
			
 
				+
			
 
				+每个技能遵循 [Agent Skills 规范](https://agentskills.io)：
			
 
				+
			
 
				+```
			
 
				+<package>/
			
 
				+├── skills/
			
 
				+│   ├── <skill-name>/
			
 
				+│   │   ├── SKILL.md          # 必需 — AI 智能体按需加载
			
 
				+│   │   ├── examples/         # 可选 — 使用示例
			
 
				+│   │   ├── references/       # 可选 — 详细参考文档
			
 
				+│   │   └── scripts/          # 可选 — 可执行脚本
			
 
				+│   └── ...
			
 
				+├── .claude-plugin/           # 插件元数据
			
 
				+└── README.md
			
 
				+```
			
 
				+
			
 
				+### 按需加载
			
 
				+
			
 
				+技能使用**渐进式披露**：
			
 
				+1. **启动时**：仅加载技能名称和描述（最小上下文）
			
 
				+2. **按需**：当智能体识别到相关任务时加载完整的 `SKILL.md`
			
 
				+3. **深入**：仅在明确需要时读取参考文件
			
 
				+
			
 
				+这保持上下文占用最小化，同时在需要时提供深度专业知识。
			
 
				+
			
 
				+### 包组织
			
 
				+
			
 
				+| 分类 | 包数 | 技能总数 |
			
 
				+|------|------|----------|
			
 
				+| 前端框架 | 4 | 15 |
			
 
				+| 前端 UI 库 | 4 | 13 |
			
 
				+| 构建与工具 | 5 | 44 |
			
 
				+| 图表与 ASCII 艺术 | 2 | 15 |
			
 
				+| 后端框架 | 5 | 19 |
			
 
				+| 跨平台与桌面 | 5 | 72 |
			
 
				+| 3D 与游戏 | 2 | 19 |
			
 
				+| 架构与设计 | 5 | 35 |
			
 
				+| 数据库与存储 | 1 | 5 |
			
 
				+| DevOps 与容器 | 2 | 22 |
			
 
				+| 测试 | 1 | 9 |
			
 
				+| 规范驱动开发 | 2 | 28 |
			
 
				+| AI 设计工具（MCP） | 3 | 153 |
			
 
				+| 教学与学习 | 1 | 3 |
			
 
				+| 社交与沟通 | 1 | 2 |
			
 
				+| **总计** | **42** | **454** |
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## Claude Code 用户
			
 
				+
			
 
				+将市场添加到 Claude Code 以发现所有技能：
			
 
				+
			
 
				+```bash
			
 
				+claude mcp add full-stack-skills --marketplace https://github.com/partme-ai/full-stack-skills
			
 
				+```
			
 
				+
			
 
				+或安装单个包：
			
 
				+
			
 
				+```bash
			
 
				+npx skills add full-statck-skills/tauri-skills    # 52 个 Tauri 技能
			
 
				+npx skills add full-statck-skills/spring-skills   # 7 个 Spring Boot 技能
			
 
				+npx skills add full-statck-skills/threejs-skills  # 18 个 Three.js 技能
			
 
				+```
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## 生态
			
 
				+
			
 
				+| 资源 | 链接 |
			
 
				+|------|------|
			
 
				+| **所有包** | [github.com/full-statck-skills](https://github.com/full-statck-skills) |
			
 
				+| **Agent Skills 规范** | [agentskills.io](https://agentskills.io) |
			
 
				+| **Skills CLI** | [github.com/vercel-labs/skills](https://github.com/vercel-labs/skills) |
			
 
				+| **Skills 目录** | [skills.sh](https://skills.sh) |
			
 
				+| **PartMe.AI** | [github.com/partme-ai](https://github.com/partme-ai) |
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## 贡献指南
			
 
				+
			
 
				+欢迎贡献！每个技能包是 [full-statck-skills](https://github.com/full-statck-skills) 组织下的独立仓库。
			
 
				+
			
 
				+1. Fork 相关包仓库
			
 
				+2. 按照 [Agent Skills 规范](https://agentskills.io) 添加你的技能
			
 
				+3. 提交 PR
			
 
				+
			
 
				+详见 [AGENTS.md](AGENTS.md) 创建技能的详细指南。
			
 
				+
			
 
				+---
			
 
				+
			
 
				+## 许可证
			
 
				+
			
 
				+Apache 2.0 — 详见 [LICENSE](LICENSE)。
			
 
				+
			
 
				+---
			
 
				+
			
 
				+<div align="center">
			
 
				+
			
 
				+**如果这个项目对你有帮助，请给我们一个 ⭐️**
			
 
				+
			
 
				+Made with ❤️ by PartMe.AI Team
			
 
				+
			
 
				+</div>
			
--- a/adapters/.gitignore
+++ b/adapters/.gitignore
@@ -1,95 +0,0 @@
 
				-target/
			
 
				-bin/
			
 
				-!.mvn/wrapper/maven-wrapper.jar
			
 
				-!**/src/main/**/target/
			
 
				-!**/src/test/**/target/
			
 
				-.flattened-pom.xml
			
 
				-.fastRequest
			
 
				-Cargo.lock
			
 
				-*.swp
			
 
				-*.swo
			
 
				-
			
 
				-### STS ###
			
 
				-.apt_generated
			
 
				-.classpath
			
 
				-.factorypath
			
 
				-.project
			
 
				-.settings
			
 
				-.springBeans
			
 
				-.sts4-cache
			
 
				-rebel.xml
			
 
				-
			
 
				-### IntelliJ IDEA ###
			
 
				-.idea
			
 
				-*.iws
			
 
				-*.iml
			
 
				-*.ipr
			
 
				-
			
 
				-### NetBeans ###
			
 
				-/nbproject/private/
			
 
				-/nbbuild/
			
 
				-/dist/
			
 
				-/nbdist/
			
 
				-/.nb-gradle/
			
 
				-build/
			
 
				-!**/src/main/**/build/
			
 
				-!**/src/test/**/build/
			
 
				-
			
 
				-### VS Code ###
			
 
				-.vscode/
			
 
				-.claude/
			
 
				-
			
 
				-### Mac OS ###
			
 
				-.DS_Store
			
 
				-
			
 
				-**/dependency-reduced-pom.xml
			
 
				-
			
 
				-### Python
			
 
				-__pycache__/
			
 
				-*.py[cod]
			
 
				-*$py.class
			
 
				-*.egg-info/
			
 
				-
			
 
				-### Docs
			
 
				-docs/_build
			
 
				-.venv/
			
 
				-
			
 
				-
			
 
				-# vibe coding
			
 
				-.claude
			
 
				-openspec
			
 
				-AGENTS.md
			
 
				-CLAUDE.md
			
 
				-
			
 
				-##Log
			
 
				-logs/
			
 
				-
			
 
				-## Frontend (all frontend/ directories across examples and extensions)
			
 
				-# Dependencies
			
 
				-**/node_modules/
			
 
				-# Build output
			
 
				-**/dist/
			
 
				-**/build/
			
 
				-**/.output/
			
 
				-# Vite / bundler caches
			
 
				-**/.vite/
			
 
				-**/.cache/
			
 
				-**/.parcel-cache/
			
 
				-# Type-check / tsc output
			
 
				-**/*.tsbuildinfo
			
 
				-# Env files (may contain secrets)
			
 
				-**/.env.local
			
 
				-**/.env.*.local
			
 
				-# Coverage
			
 
				-**/coverage/
			
 
				-# Storybook
			
 
				-**/storybook-static/
			
 
				-# boba-tea-shop: generated static assets served by the supervisor-agent
			
 
				-**/boba-tea-shop/supervisor-agent/**/static/
			
 
				-
			
 
				-##agentscope
			
 
				-.agentscope/
			
 
				-
			
 
				-## harness db
			
 
				-**/*.db
			
 
				-
			
--- a/adapters/README.md
+++ b/adapters/README.md
@@ -1,155 +0,0 @@
 
				-# Cross-Platform Skills Adapter
			
 
				-
			
 
				-`adapters/` is the repository’s only cross-platform converter. It ships an independent CLI named `fskill`, exports the grouped repository structure in `skills/<group>/<skill>/` as standard skill directories, and installs them into the path layout required by each supported platform.
			
 
				-
			
 
				-## Compatibility baseline
			
 
				-
			
 
				-- **Skill format**: standard `SKILL.md`-based directory layout
			
 
				-- **Platform paths**: aligned to the current `vercel-labs/skills` compatibility matrix
			
 
				-- **Repository source layout**: `skills/<group>/<skill>/`
			
 
				-
			
 
				-The adapter does not generate platform-specific manifests, plugins, or workflow wrappers. It preserves the original skill directory and changes only the destination path for each platform.
			
 
				-
			
 
				-## Install
			
 
				-
			
 
				-```bash
			
 
				-git clone https://github.com/partme-ai/full-stack-skills.git
			
 
				-cd full-stack-skills
			
 
				-npm install -g ./adapters
			
 
				-```
			
 
				-
			
 
				-Or, for repository-local development:
			
 
				-
			
 
				-```bash
			
 
				-cd adapters
			
 
				-npm install
			
 
				-npm link
			
 
				-```
			
 
				-
			
 
				-Or, inside the adapter package only:
			
 
				-
			
 
				-```bash
			
 
				-cd adapters
			
 
				-npm install -g ./adapters
			
 
				-```
			
 
				-
			
 
				-After installation, call `fskill` directly.
			
 
				-
			
 
				-## Commands
			
 
				-
			
 
				-```bash
			
 
				-fskill --version
			
 
				-fskill platforms
			
 
				-fskill audit
			
 
				-fskill convert --platform all --output ./adapters-output
			
 
				-fskill install
			
 
				-```
			
 
				-
			
 
				-`fskill install` defaults to the current project's `.agents/skills/`, which is the standard Agent Skills-compatible path.
			
 
				-
			
 
				-## Command reference
			
 
				-
			
 
				-### List supported platforms
			
 
				-
			
 
				-```bash
			
 
				-fskill platforms
			
 
				-```
			
 
				-
			
 
				-### Show CLI version
			
 
				-
			
 
				-```bash
			
 
				-fskill --version
			
 
				-```
			
 
				-
			
 
				-### Audit the repository skills
			
 
				-
			
 
				-```bash
			
 
				-fskill audit
			
 
				-```
			
 
				-
			
 
				-### Export all platforms
			
 
				-
			
 
				-```bash
			
 
				-fskill convert --platform all --output ./adapters-output
			
 
				-```
			
 
				-
			
 
				-### Export one platform
			
 
				-
			
 
				-```bash
			
 
				-fskill convert --platform claude-code --output ./adapters-output
			
 
				-```
			
 
				-
			
 
				-### Install into a project
			
 
				-
			
 
				-```bash
			
 
				-fskill install --platform claude-code --scope project
			
 
				-```
			
 
				-
			
 
				-### Install globally
			
 
				-
			
 
				-```bash
			
 
				-fskill install --platform antigravity --scope global
			
 
				-```
			
 
				-
			
 
				-### Install selected skills only
			
 
				-
			
 
				-```bash
			
 
				-fskill install --platform codex --scope global --skill react --skill vue3
			
 
				-```
			
 
				-
			
 
				-### Preview without writing
			
 
				-
			
 
				-```bash
			
 
				-fskill convert --platform all --output ./adapters-output --dry-run
			
 
				-fskill install --platform windsurf --scope project --dry-run
			
 
				-```
			
 
				-
			
 
				-## Supported platforms
			
 
				-
			
 
				-Run `fskill platforms --markdown` for the generated Markdown table that matches the CLI registry.
			
 
				-
			
 
				-## Discovery rules
			
 
				-
			
 
				-- A directory is treated as a skill only when it contains `SKILL.md`
			
 
				-- `skills/pencil-skills/docs` is treated as supporting documentation, not a skill
			
 
				-- `__pycache__`, `.pyc`, `.DS_Store`, and hidden garbage files are excluded
			
 
				-- `references/`, `examples/`, `scripts/`, `assets/`, and `templates/` are preserved
			
 
				-
			
 
				-## Output layout
			
 
				-
			
 
				-The converter writes standard skill directories under:
			
 
				-
			
 
				-```text
			
 
				-adapters-output/<platform>/<project-path>/<skill-name>/
			
 
				-```
			
 
				-
			
 
				-Examples:
			
 
				-
			
 
				-```text
			
 
				-adapters-output/claude-code/.claude/skills/react/
			
 
				-adapters-output/cursor/.agents/skills/react/
			
 
				-adapters-output/openclaw/skills/react/
			
 
				-adapters-output/antigravity/.agents/skills/react/
			
 
				-```
			
 
				-
			
 
				-## Install behavior
			
 
				-
			
 
				-- `fskill install` defaults to `<cwd>/.agents/skills/`
			
 
				-- `--scope project` installs into `<cwd>/<projectPath>`
			
 
				-- `--scope global` installs into the platform’s global directory
			
 
				-- default mode copies directories
			
 
				-- `--link` creates symlinks instead of copying
			
 
				-- existing destination directories are replaced to keep installs deterministic
			
 
				-
			
 
				-## Source of truth
			
 
				-
			
 
				-- Platform registry: `adapters/src/platform-registry.ts`
			
 
				-- Skill discovery and audit: `adapters/src/skills.ts`
			
 
				-- CLI entry: `adapters/src/index.ts`
			
 
				-
			
 
				-## Validation expectations
			
 
				-
			
 
				-- `platforms` lists every supported platform and path mapping
			
 
				-- `audit` reports actual skill counts, missing `SKILL.md` directories, and platform totals
			
 
				-- `convert --dry-run` shows the exact destination layout before writing
			
 
				-- `install --dry-run` shows exact project or global install targets before writing
			
--- a/adapters/fskill
+++ b/adapters/fskill
@@ -1,5 +0,0 @@
 
				-#!/usr/bin/env sh
			
 
				-set -e
			
 
				-
			
 
				-SCRIPT_DIR="$(CDPATH= cd -- "$(dirname -- "$0")" && pwd)"
			
 
				-exec node "$SCRIPT_DIR/dist/index.js" "$@"
			
--- a/adapters/package-lock.json
+++ b/adapters/package-lock.json
@@ -1,54 +0,0 @@
 
				-{
			
 
				-  "name": "fskill",
			
 
				-  "version": "1.0.0",
			
 
				-  "lockfileVersion": 3,
			
 
				-  "requires": true,
			
 
				-  "packages": {
			
 
				-    "": {
			
 
				-      "name": "fskill",
			
 
				-      "version": "1.0.0",
			
 
				-      "license": "MIT",
			
 
				-      "bin": {
			
 
				-        "fskill": "dist/index.js"
			
 
				-      },
			
 
				-      "devDependencies": {
			
 
				-        "@types/node": "^24.5.2",
			
 
				-        "typescript": "^5.9.2"
			
 
				-      },
			
 
				-      "engines": {
			
 
				-        "node": ">=18"
			
 
				-      }
			
 
				-    },
			
 
				-    "node_modules/@types/node": {
			
 
				-      "version": "24.12.0",
			
 
				-      "resolved": "https://packages.aliyun.com/5fdc0afd99b59ba3c5ead757/npm/repo-cxytb/@types/node/-/node-24.12.0.tgz",
			
 
				-      "integrity": "sha512-GYDxsZi3ChgmckRT9HPU0WEhKLP08ev/Yfcq2AstjrDASOYCSXeyjDsHg4v5t4jOj7cyDX3vmprafKlWIG9MXQ==",
			
 
				-      "dev": true,
			
 
				-      "license": "MIT",
			
 
				-      "dependencies": {
			
 
				-        "undici-types": "~7.16.0"
			
 
				-      }
			
 
				-    },
			
 
				-    "node_modules/typescript": {
			
 
				-      "version": "5.9.3",
			
 
				-      "resolved": "https://packages.aliyun.com/5fdc0afd99b59ba3c5ead757/npm/repo-cxytb/typescript/-/typescript-5.9.3.tgz",
			
 
				-      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
			
 
				-      "dev": true,
			
 
				-      "license": "Apache-2.0",
			
 
				-      "bin": {
			
 
				-        "tsc": "bin/tsc",
			
 
				-        "tsserver": "bin/tsserver"
			
 
				-      },
			
 
				-      "engines": {
			
 
				-        "node": ">=14.17"
			
 
				-      }
			
 
				-    },
			
 
				-    "node_modules/undici-types": {
			
 
				-      "version": "7.16.0",
			
 
				-      "resolved": "https://packages.aliyun.com/5fdc0afd99b59ba3c5ead757/npm/repo-cxytb/undici-types/-/undici-types-7.16.0.tgz",
			
 
				-      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
			
 
				-      "dev": true,
			
 
				-      "license": "MIT"
			
 
				-    }
			
 
				-  }
			
 
				-}
			
--- a/adapters/package.json
+++ b/adapters/package.json
@@ -1,49 +0,0 @@
 
				-{
			
 
				-  "name": "fskill",
			
 
				-  "version": "1.0.0",
			
 
				-  "type": "module",
			
 
				-  "license": "MIT",
			
 
				-  "description": "Standard cross-platform skills CLI for full-stack-skills.",
			
 
				-  "main": "./dist/index.js",
			
 
				-  "repository": {
			
 
				-    "type": "git",
			
 
				-    "url": "https://github.com/partme-ai/full-stack-skills.git",
			
 
				-    "directory": "adapters"
			
 
				-  },
			
 
				-  "homepage": "https://github.com/partme-ai/full-stack-skills",
			
 
				-  "bugs": {
			
 
				-    "url": "https://github.com/partme-ai/full-stack-skills/issues"
			
 
				-  },
			
 
				-  "keywords": [
			
 
				-    "agent-skills",
			
 
				-    "skills",
			
 
				-    "claude",
			
 
				-    "codex",
			
 
				-    "cursor",
			
 
				-    "ai-agents",
			
 
				-    "converter"
			
 
				-  ],
			
 
				-  "engines": {
			
 
				-    "node": ">=18"
			
 
				-  },
			
 
				-  "bin": {
			
 
				-    "fskill": "./dist/index.js"
			
 
				-  },
			
 
				-  "files": [
			
 
				-    "dist",
			
 
				-    "fskill",
			
 
				-    "README.md"
			
 
				-  ],
			
 
				-  "scripts": {
			
 
				-    "build": "tsc -p tsconfig.json",
			
 
				-    "prepare": "npm run build",
			
 
				-    "platforms": "node dist/index.js platforms",
			
 
				-    "audit": "node dist/index.js audit",
			
 
				-    "convert": "node dist/index.js convert",
			
 
				-    "cli:install": "node dist/index.js install"
			
 
				-  },
			
 
				-  "devDependencies": {
			
 
				-    "@types/node": "^24.5.2",
			
 
				-    "typescript": "^5.9.2"
			
 
				-  }
			
 
				-}
			
--- a/adapters/src/commands.ts
+++ b/adapters/src/commands.ts
@@ -1,280 +0,0 @@
 
				-import fs from 'node:fs/promises';
			
 
				-import path from 'node:path';
			
 
				-import {
			
 
				-  formatDisplayPath,
			
 
				-  getPlatformProjectPath,
			
 
				-  platformRegistry,
			
 
				-  renderPlatformTableMarkdown,
			
 
				-  resolvePlatform,
			
 
				-  type PlatformRecord
			
 
				-} from './platform-registry.js';
			
 
				-import {
			
 
				-  copySkillDirectory,
			
 
				-  createAuditReport,
			
 
				-  discoverSkillEntries,
			
 
				-  resolveSkillsRoot,
			
 
				-  type SkillEntry
			
 
				-} from './skills.js';
			
 
				-
			
 
				-export interface ParsedOptions {
			
 
				-  positional: string[];
			
 
				-  flags: Map<string, string[]>;
			
 
				-}
			
 
				-
			
 
				-export interface ConvertOptions {
			
 
				-  platform: string;
			
 
				-  output?: string;
			
 
				-  skillsDir?: string;
			
 
				-  dryRun: boolean;
			
 
				-  selectedSkills: string[];
			
 
				-}
			
 
				-
			
 
				-export interface InstallOptions {
			
 
				-  platform: string;
			
 
				-  scope: 'project' | 'global';
			
 
				-  projectRoot: string;
			
 
				-  skillsDir?: string;
			
 
				-  dryRun: boolean;
			
 
				-  link: boolean;
			
 
				-  selectedSkills: string[];
			
 
				-  target?: string;
			
 
				-}
			
 
				-
			
 
				-export function parseArgv(argv: string[]): ParsedOptions {
			
 
				-  const positional: string[] = [];
			
 
				-  const flags = new Map<string, string[]>();
			
 
				-
			
 
				-  for (let index = 0; index < argv.length; index += 1) {
			
 
				-    const token = argv[index];
			
 
				-    if (!token.startsWith('--')) {
			
 
				-      positional.push(token);
			
 
				-      continue;
			
 
				-    }
			
 
				-
			
 
				-    const [flagName, inlineValue] = token.split('=', 2);
			
 
				-    if (inlineValue !== undefined) {
			
 
				-      flags.set(flagName, [...(flags.get(flagName) || []), inlineValue]);
			
 
				-      continue;
			
 
				-    }
			
 
				-
			
 
				-    const nextToken = argv[index + 1];
			
 
				-    if (nextToken && !nextToken.startsWith('--')) {
			
 
				-      flags.set(flagName, [...(flags.get(flagName) || []), nextToken]);
			
 
				-      index += 1;
			
 
				-      continue;
			
 
				-    }
			
 
				-
			
 
				-    flags.set(flagName, [...(flags.get(flagName) || []), 'true']);
			
 
				-  }
			
 
				-
			
 
				-  return { positional, flags };
			
 
				-}
			
 
				-
			
 
				-function getFlagValue(options: ParsedOptions, flag: string, fallback?: string): string | undefined {
			
 
				-  return options.flags.get(flag)?.at(-1) || fallback;
			
 
				-}
			
 
				-
			
 
				-function getFlagValues(options: ParsedOptions, flag: string): string[] {
			
 
				-  return options.flags.get(flag) || [];
			
 
				-}
			
 
				-
			
 
				-function hasFlag(options: ParsedOptions, flag: string): boolean {
			
 
				-  return options.flags.has(flag);
			
 
				-}
			
 
				-
			
 
				-function filterSkillEntries(entries: SkillEntry[], selectedSkills: string[]): SkillEntry[] {
			
 
				-  if (selectedSkills.length === 0) {
			
 
				-    return entries;
			
 
				-  }
			
 
				-  const wanted = new Set(selectedSkills);
			
 
				-  return entries.filter((entry) => wanted.has(entry.name) || wanted.has(entry.relativeDir));
			
 
				-}
			
 
				-
			
 
				-async function ensureRemoved(targetPath: string): Promise<void> {
			
 
				-  await fs.rm(targetPath, { recursive: true, force: true });
			
 
				-}
			
 
				-
			
 
				-async function ensureParentDir(targetPath: string): Promise<void> {
			
 
				-  await fs.mkdir(path.dirname(targetPath), { recursive: true });
			
 
				-}
			
 
				-
			
 
				-function printJson(data: unknown): void {
			
 
				-  console.log(JSON.stringify(data, null, 2));
			
 
				-}
			
 
				-
			
 
				-export function buildConvertOptions(parsed: ParsedOptions): ConvertOptions {
			
 
				-  const platform = getFlagValue(parsed, '--platform', 'all');
			
 
				-  if (!platform) {
			
 
				-    throw new Error('Missing --platform value.');
			
 
				-  }
			
 
				-  return {
			
 
				-    platform,
			
 
				-    output: getFlagValue(parsed, '--output'),
			
 
				-    skillsDir: getFlagValue(parsed, '--skills-dir'),
			
 
				-    dryRun: hasFlag(parsed, '--dry-run'),
			
 
				-    selectedSkills: getFlagValues(parsed, '--skill')
			
 
				-  };
			
 
				-}
			
 
				-
			
 
				-export function buildInstallOptions(parsed: ParsedOptions): InstallOptions {
			
 
				-  const platform = getFlagValue(parsed, '--platform', 'universal') || 'universal';
			
 
				-  const scope = getFlagValue(parsed, '--scope', 'project');
			
 
				-  if (scope !== 'project' && scope !== 'global') {
			
 
				-    throw new Error(`Unsupported --scope value: ${scope}`);
			
 
				-  }
			
 
				-  return {
			
 
				-    platform,
			
 
				-    scope,
			
 
				-    projectRoot: path.resolve(
			
 
				-      getFlagValue(parsed, '--project-root', process.env.INIT_CWD || process.cwd()) ||
			
 
				-        process.env.INIT_CWD ||
			
 
				-        process.cwd()
			
 
				-    ),
			
 
				-    skillsDir: getFlagValue(parsed, '--skills-dir'),
			
 
				-    dryRun: hasFlag(parsed, '--dry-run'),
			
 
				-    link: hasFlag(parsed, '--link'),
			
 
				-    selectedSkills: getFlagValues(parsed, '--skill'),
			
 
				-    target: getFlagValue(parsed, '--target')
			
 
				-  };
			
 
				-}
			
 
				-
			
 
				-export async function runPlatformsCommand(parsed: ParsedOptions): Promise<void> {
			
 
				-  if (hasFlag(parsed, '--json')) {
			
 
				-    printJson(platformRegistry);
			
 
				-    return;
			
 
				-  }
			
 
				-
			
 
				-  if (hasFlag(parsed, '--markdown')) {
			
 
				-    console.log(renderPlatformTableMarkdown());
			
 
				-    return;
			
 
				-  }
			
 
				-
			
 
				-  console.log(`Supported platforms: ${platformRegistry.length}`);
			
 
				-  for (const platform of platformRegistry) {
			
 
				-    const aliases = platform.aliases.length > 0 ? ` (${platform.aliases.join(', ')})` : '';
			
 
				-    console.log(
			
 
				-      `- ${platform.displayName} [${platform.id}${aliases}] -> project: ${platform.projectPath}/ | global: ${formatDisplayPath(platform.globalPath)}/`
			
 
				-    );
			
 
				-  }
			
 
				-}
			
 
				-
			
 
				-export async function runAuditCommand(parsed: ParsedOptions): Promise<void> {
			
 
				-  const report = await createAuditReport(getFlagValue(parsed, '--skills-dir'), platformRegistry.length);
			
 
				-
			
 
				-  if (hasFlag(parsed, '--json')) {
			
 
				-    printJson(report);
			
 
				-    return;
			
 
				-  }
			
 
				-
			
 
				-  console.log(`Skills root: ${report.skillsDir}`);
			
 
				-  console.log(`Convertible skills: ${report.skillCount}`);
			
 
				-  console.log(`Supported platforms: ${report.platformCount}`);
			
 
				-  console.log(`Excluded directories: ${report.excludedDirectories.join(', ')}`);
			
 
				-  if (report.missingSkillDirectories.length === 0) {
			
 
				-    console.log('Missing SKILL.md directories: none');
			
 
				-    return;
			
 
				-  }
			
 
				-  console.log(`Missing SKILL.md directories (${report.missingSkillDirectories.length}):`);
			
 
				-  for (const entry of report.missingSkillDirectories) {
			
 
				-    console.log(`- ${entry}`);
			
 
				-  }
			
 
				-}
			
 
				-
			
 
				-async function convertForPlatform(platform: PlatformRecord, options: ConvertOptions): Promise<void> {
			
 
				-  const skillsDir = await resolveSkillsRoot(options.skillsDir);
			
 
				-  const outputRoot = path.resolve(options.output || path.join('..', 'adapters-output'));
			
 
				-  const entries = filterSkillEntries(await discoverSkillEntries(skillsDir), options.selectedSkills);
			
 
				-  const targetRoot = path.join(outputRoot, platform.id, platform.projectPath);
			
 
				-
			
 
				-  if (options.dryRun) {
			
 
				-    console.log(`[dry-run] ${platform.id} -> ${targetRoot}`);
			
 
				-    for (const entry of entries) {
			
 
				-      console.log(`  - ${entry.relativeDir} => ${path.join(targetRoot, entry.name)}`);
			
 
				-    }
			
 
				-    return;
			
 
				-  }
			
 
				-
			
 
				-  await fs.mkdir(targetRoot, { recursive: true });
			
 
				-  for (const entry of entries) {
			
 
				-    const destination = path.join(targetRoot, entry.name);
			
 
				-    await ensureRemoved(destination);
			
 
				-    await copySkillDirectory(entry.dir, destination);
			
 
				-  }
			
 
				-  console.log(`Converted ${entries.length} skills for ${platform.id} -> ${targetRoot}`);
			
 
				-}
			
 
				-
			
 
				-export async function runConvertCommand(parsed: ParsedOptions): Promise<void> {
			
 
				-  const options = buildConvertOptions(parsed);
			
 
				-  const platforms = options.platform === 'all' ? platformRegistry : [resolvePlatform(options.platform)];
			
 
				-  for (const platform of platforms) {
			
 
				-    await convertForPlatform(platform, options);
			
 
				-  }
			
 
				-}
			
 
				-
			
 
				-async function installSkillEntry(
			
 
				-  entry: SkillEntry,
			
 
				-  targetRoot: string,
			
 
				-  dryRun: boolean,
			
 
				-  link: boolean
			
 
				-): Promise<void> {
			
 
				-  const destination = path.join(targetRoot, entry.name);
			
 
				-  if (dryRun) {
			
 
				-    console.log(`[dry-run] ${entry.relativeDir} => ${destination}`);
			
 
				-    return;
			
 
				-  }
			
 
				-
			
 
				-  await ensureParentDir(destination);
			
 
				-  await ensureRemoved(destination);
			
 
				-  if (link) {
			
 
				-    await fs.symlink(entry.dir, destination, 'dir');
			
 
				-    return;
			
 
				-  }
			
 
				-  await copySkillDirectory(entry.dir, destination);
			
 
				-}
			
 
				-
			
 
				-export async function runInstallCommand(parsed: ParsedOptions): Promise<void> {
			
 
				-  const options = buildInstallOptions(parsed);
			
 
				-  const platform = resolvePlatform(options.platform);
			
 
				-  const entries = filterSkillEntries(await discoverSkillEntries(options.skillsDir), options.selectedSkills);
			
 
				-  const targetRoot = options.target
			
 
				-    ? path.resolve(options.target)
			
 
				-    : options.scope === 'global'
			
 
				-      ? platform.globalPath
			
 
				-      : getPlatformProjectPath(platform, options.projectRoot);
			
 
				-
			
 
				-  if (!options.dryRun) {
			
 
				-    await fs.mkdir(targetRoot, { recursive: true });
			
 
				-  }
			
 
				-
			
 
				-  for (const entry of entries) {
			
 
				-    await installSkillEntry(entry, targetRoot, options.dryRun, options.link);
			
 
				-  }
			
 
				-
			
 
				-  const action = options.link ? 'Linked' : 'Installed';
			
 
				-  console.log(`${action} ${entries.length} skills for ${platform.id} (${options.scope}) -> ${formatDisplayPath(targetRoot)}`);
			
 
				-}
			
 
				-
			
 
				-export function printHelp(): void {
			
 
				-  console.log(`fskill
			
 
				-
			
 
				-Usage:
			
 
				-  fskill platforms [--json|--markdown]
			
 
				-  fskill audit [--skills-dir <path>] [--json]
			
 
				-  fskill convert --platform <id|all> [--skills-dir <path>] [--output <path>] [--skill <name>]... [--dry-run]
			
 
				-  fskill install [--platform <id>] [--scope project|global] [--project-root <path>] [--skills-dir <path>] [--target <path>] [--skill <name>]... [--link] [--dry-run]
			
 
				-  fskill version
			
 
				-
			
 
				-Defaults:
			
 
				-  fskill install               -> installs to .agents/skills/ under the current project
			
 
				-  fskill install --scope global -> installs to ~/.config/agents/skills/
			
 
				-
			
 
				-Examples:
			
 
				-  fskill platforms
			
 
				-  fskill audit --json
			
 
				-  fskill convert --platform all --output ./adapters-output
			
 
				-  fskill convert --platform claude-code --output ./adapters-output
			
 
				-  fskill install
			
 
				-  fskill install --platform antigravity --scope global
			
 
				-  fskill install --platform codex --scope global --skill react --skill vue3
			
 
				-`);
			
 
				-}
			
--- a/adapters/src/index.ts
+++ b/adapters/src/index.ts
@@ -1,56 +0,0 @@
 
				-#!/usr/bin/env node
			
 
				-import fs from 'node:fs';
			
 
				-import path from 'node:path';
			
 
				-import { fileURLToPath } from 'node:url';
			
 
				-import {
			
 
				-  parseArgv,
			
 
				-  printHelp,
			
 
				-  runAuditCommand,
			
 
				-  runConvertCommand,
			
 
				-  runInstallCommand,
			
 
				-  runPlatformsCommand
			
 
				-} from './commands.js';
			
 
				-
			
 
				-const __filename = fileURLToPath(import.meta.url);
			
 
				-const __dirname = path.dirname(__filename);
			
 
				-const packageJsonPath = path.resolve(__dirname, '..', 'package.json');
			
 
				-const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8')) as { version?: string };
			
 
				-
			
 
				-async function main(): Promise<void> {
			
 
				-  const [command, ...rest] = process.argv.slice(2);
			
 
				-
			
 
				-  if (!command || command === 'help' || command === '--help' || command === '-h') {
			
 
				-    printHelp();
			
 
				-    return;
			
 
				-  }
			
 
				-
			
 
				-  if (command === '--version' || command === '-v' || command === 'version') {
			
 
				-    console.log(packageJson.version || '0.0.0');
			
 
				-    return;
			
 
				-  }
			
 
				-
			
 
				-  const parsed = parseArgv(rest);
			
 
				-
			
 
				-  switch (command) {
			
 
				-    case 'platforms':
			
 
				-      await runPlatformsCommand(parsed);
			
 
				-      return;
			
 
				-    case 'audit':
			
 
				-      await runAuditCommand(parsed);
			
 
				-      return;
			
 
				-    case 'convert':
			
 
				-      await runConvertCommand(parsed);
			
 
				-      return;
			
 
				-    case 'install':
			
 
				-      await runInstallCommand(parsed);
			
 
				-      return;
			
 
				-    default:
			
 
				-      throw new Error(`Unknown command: ${command}`);
			
 
				-  }
			
 
				-}
			
 
				-
			
 
				-main().catch((error: unknown) => {
			
 
				-  const message = error instanceof Error ? error.message : String(error);
			
 
				-  console.error(`Error: ${message}`);
			
 
				-  process.exitCode = 1;
			
 
				-});
			
--- a/adapters/src/platform-registry.ts
+++ b/adapters/src/platform-registry.ts
@@ -1,107 +0,0 @@
 
				-import os from 'node:os';
			
 
				-import path from 'node:path';
			
 
				-
			
 
				-export type InstallMode = 'copy-or-link';
			
 
				-
			
 
				-export interface PlatformRecord {
			
 
				-  id: string;
			
 
				-  aliases: string[];
			
 
				-  displayName: string;
			
 
				-  projectPath: string;
			
 
				-  globalPath: string;
			
 
				-  installMode: InstallMode;
			
 
				-  notes?: string;
			
 
				-}
			
 
				-
			
 
				-const home = os.homedir();
			
 
				-const configHome = process.env.XDG_CONFIG_HOME?.trim() || path.join(home, '.config');
			
 
				-const codexHome = process.env.CODEX_HOME?.trim() || path.join(home, '.codex');
			
 
				-const claudeHome = process.env.CLAUDE_CONFIG_DIR?.trim() || path.join(home, '.claude');
			
 
				-
			
 
				-const sharedAgentsProjectPath = '.agents/skills';
			
 
				-const sharedAgentsGlobalPath = path.join(configHome, 'agents', 'skills');
			
 
				-
			
 
				-export const platformRegistry: PlatformRecord[] = [
			
 
				-  { id: 'amp', aliases: [], displayName: 'Amp', projectPath: sharedAgentsProjectPath, globalPath: sharedAgentsGlobalPath, installMode: 'copy-or-link' },
			
 
				-  { id: 'kimi-cli', aliases: [], displayName: 'Kimi Code CLI', projectPath: sharedAgentsProjectPath, globalPath: sharedAgentsGlobalPath, installMode: 'copy-or-link' },
			
 
				-  { id: 'replit', aliases: [], displayName: 'Replit', projectPath: sharedAgentsProjectPath, globalPath: sharedAgentsGlobalPath, installMode: 'copy-or-link' },
			
 
				-  { id: 'universal', aliases: [], displayName: 'Universal', projectPath: sharedAgentsProjectPath, globalPath: sharedAgentsGlobalPath, installMode: 'copy-or-link' },
			
 
				-  { id: 'antigravity', aliases: [], displayName: 'Antigravity', projectPath: sharedAgentsProjectPath, globalPath: path.join(home, '.gemini', 'antigravity', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'augment', aliases: [], displayName: 'Augment', projectPath: '.augment/skills', globalPath: path.join(home, '.augment', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'claude-code', aliases: ['claude'], displayName: 'Claude Code', projectPath: '.claude/skills', globalPath: path.join(claudeHome, 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'openclaw', aliases: [], displayName: 'OpenClaw', projectPath: 'skills', globalPath: path.join(home, '.openclaw', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'cline', aliases: [], displayName: 'Cline', projectPath: sharedAgentsProjectPath, globalPath: sharedAgentsGlobalPath, installMode: 'copy-or-link' },
			
 
				-  { id: 'warp', aliases: [], displayName: 'Warp', projectPath: sharedAgentsProjectPath, globalPath: sharedAgentsGlobalPath, installMode: 'copy-or-link' },
			
 
				-  { id: 'codebuddy', aliases: [], displayName: 'CodeBuddy', projectPath: '.codebuddy/skills', globalPath: path.join(home, '.codebuddy', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'codex', aliases: [], displayName: 'Codex', projectPath: sharedAgentsProjectPath, globalPath: path.join(codexHome, 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'command-code', aliases: [], displayName: 'Command Code', projectPath: '.commandcode/skills', globalPath: path.join(home, '.commandcode', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'continue', aliases: [], displayName: 'Continue', projectPath: '.continue/skills', globalPath: path.join(home, '.continue', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'cortex', aliases: [], displayName: 'Cortex Code', projectPath: '.cortex/skills', globalPath: path.join(home, '.snowflake', 'cortex', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'crush', aliases: [], displayName: 'Crush', projectPath: '.crush/skills', globalPath: path.join(configHome, 'crush', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'cursor', aliases: [], displayName: 'Cursor', projectPath: sharedAgentsProjectPath, globalPath: path.join(home, '.cursor', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'deepagents', aliases: ['deep-agents'], displayName: 'Deep Agents', projectPath: sharedAgentsProjectPath, globalPath: path.join(home, '.deepagents', 'agent', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'droid', aliases: [], displayName: 'Droid', projectPath: '.factory/skills', globalPath: path.join(home, '.factory', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'gemini-cli', aliases: [], displayName: 'Gemini CLI', projectPath: sharedAgentsProjectPath, globalPath: path.join(home, '.gemini', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'github-copilot', aliases: ['copilot'], displayName: 'GitHub Copilot', projectPath: sharedAgentsProjectPath, globalPath: path.join(home, '.copilot', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'goose', aliases: [], displayName: 'Goose', projectPath: '.goose/skills', globalPath: path.join(configHome, 'goose', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'junie', aliases: [], displayName: 'Junie', projectPath: '.junie/skills', globalPath: path.join(home, '.junie', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'iflow-cli', aliases: [], displayName: 'iFlow CLI', projectPath: '.iflow/skills', globalPath: path.join(home, '.iflow', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'kilo', aliases: [], displayName: 'Kilo Code', projectPath: '.kilocode/skills', globalPath: path.join(home, '.kilocode', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'kiro-cli', aliases: [], displayName: 'Kiro CLI', projectPath: '.kiro/skills', globalPath: path.join(home, '.kiro', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'kode', aliases: [], displayName: 'Kode', projectPath: '.kode/skills', globalPath: path.join(home, '.kode', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'mcpjam', aliases: [], displayName: 'MCPJam', projectPath: '.mcpjam/skills', globalPath: path.join(home, '.mcpjam', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'mistral-vibe', aliases: ['vibe'], displayName: 'Mistral Vibe', projectPath: '.vibe/skills', globalPath: path.join(home, '.vibe', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'mux', aliases: [], displayName: 'Mux', projectPath: '.mux/skills', globalPath: path.join(home, '.mux', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'opencode', aliases: [], displayName: 'OpenCode', projectPath: sharedAgentsProjectPath, globalPath: path.join(configHome, 'opencode', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'openhands', aliases: [], displayName: 'OpenHands', projectPath: '.openhands/skills', globalPath: path.join(home, '.openhands', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'pi', aliases: [], displayName: 'Pi', projectPath: '.pi/skills', globalPath: path.join(home, '.pi', 'agent', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'qoder', aliases: [], displayName: 'Qoder', projectPath: '.qoder/skills', globalPath: path.join(home, '.qoder', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'qwen-code', aliases: [], displayName: 'Qwen Code', projectPath: '.qwen/skills', globalPath: path.join(home, '.qwen', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'roo', aliases: [], displayName: 'Roo Code', projectPath: '.roo/skills', globalPath: path.join(home, '.roo', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'trae', aliases: [], displayName: 'Trae', projectPath: '.trae/skills', globalPath: path.join(home, '.trae', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'trae-cn', aliases: [], displayName: 'Trae CN', projectPath: '.trae/skills', globalPath: path.join(home, '.trae-cn', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'windsurf', aliases: [], displayName: 'Windsurf', projectPath: '.windsurf/skills', globalPath: path.join(home, '.codeium', 'windsurf', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'zencoder', aliases: [], displayName: 'Zencoder', projectPath: '.zencoder/skills', globalPath: path.join(home, '.zencoder', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'neovate', aliases: [], displayName: 'Neovate', projectPath: '.neovate/skills', globalPath: path.join(home, '.neovate', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'pochi', aliases: [], displayName: 'Pochi', projectPath: '.pochi/skills', globalPath: path.join(home, '.pochi', 'skills'), installMode: 'copy-or-link' },
			
 
				-  { id: 'adal', aliases: [], displayName: 'AdaL', projectPath: '.adal/skills', globalPath: path.join(home, '.adal', 'skills'), installMode: 'copy-or-link' }
			
 
				-];
			
 
				-
			
 
				-const registryMap = new Map<string, PlatformRecord>();
			
 
				-
			
 
				-for (const platform of platformRegistry) {
			
 
				-  registryMap.set(platform.id, platform);
			
 
				-  for (const alias of platform.aliases) {
			
 
				-    registryMap.set(alias, platform);
			
 
				-  }
			
 
				-}
			
 
				-
			
 
				-export function resolvePlatform(input: string): PlatformRecord {
			
 
				-  const resolved = registryMap.get(input);
			
 
				-  if (!resolved) {
			
 
				-    throw new Error(`Unsupported platform: ${input}`);
			
 
				-  }
			
 
				-  return resolved;
			
 
				-}
			
 
				-
			
 
				-export function getPlatformProjectPath(platform: PlatformRecord, projectRoot: string): string {
			
 
				-  return path.join(projectRoot, platform.projectPath);
			
 
				-}
			
 
				-
			
 
				-export function formatDisplayPath(targetPath: string): string {
			
 
				-  return targetPath.startsWith(home) ? targetPath.replace(home, '~') : targetPath;
			
 
				-}
			
 
				-
			
 
				-export function renderPlatformTableMarkdown(): string {
			
 
				-  const lines = [
			
 
				-    '| Platform | ID / Aliases | Project Path | Global Path |',
			
 
				-    '|---|---|---|---|'
			
 
				-  ];
			
 
				-  for (const platform of platformRegistry) {
			
 
				-    const aliases = [platform.id, ...platform.aliases].join(', ');
			
 
				-    lines.push(
			
 
				-      `| ${platform.displayName} | \`${aliases}\` | \`${platform.projectPath}/\` | \`${formatDisplayPath(platform.globalPath)}/\` |`
			
 
				-    );
			
 
				-  }
			
 
				-  return lines.join('\n');
			
 
				-}
			
--- a/adapters/src/skills.ts
+++ b/adapters/src/skills.ts
@@ -1,149 +0,0 @@
 
				-import fs from 'node:fs/promises';
			
 
				-import path from 'node:path';
			
 
				-
			
 
				-const IGNORED_DIR_NAMES = new Set(['__pycache__']);
			
 
				-const IGNORED_FILE_NAMES = new Set(['.DS_Store']);
			
 
				-const EXCLUDED_SKILL_DIRECTORIES = new Set([path.join('skills', 'pencil-skills', 'docs')]);
			
 
				-
			
 
				-export interface SkillEntry {
			
 
				-  name: string;
			
 
				-  group: string;
			
 
				-  dir: string;
			
 
				-  relativeDir: string;
			
 
				-  skillFile: string;
			
 
				-}
			
 
				-
			
 
				-export interface AuditReport {
			
 
				-  skillsDir: string;
			
 
				-  skillCount: number;
			
 
				-  missingSkillDirectories: string[];
			
 
				-  excludedDirectories: string[];
			
 
				-  platformCount: number;
			
 
				-}
			
 
				-
			
 
				-async function pathExists(targetPath: string): Promise<boolean> {
			
 
				-  try {
			
 
				-    await fs.access(targetPath);
			
 
				-    return true;
			
 
				-  } catch {
			
 
				-    return false;
			
 
				-  }
			
 
				-}
			
 
				-
			
 
				-function isExcludedSkillDirectory(relativeDir: string): boolean {
			
 
				-  return EXCLUDED_SKILL_DIRECTORIES.has(relativeDir);
			
 
				-}
			
 
				-
			
 
				-export async function resolveSkillsRoot(input?: string): Promise<string> {
			
 
				-  const direct = input ? path.resolve(input) : path.resolve(process.cwd(), '..', 'skills');
			
 
				-  if (await pathExists(direct)) {
			
 
				-    return direct;
			
 
				-  }
			
 
				-  const fromRepoRoot = path.resolve(process.cwd(), 'skills');
			
 
				-  if (await pathExists(fromRepoRoot)) {
			
 
				-    return fromRepoRoot;
			
 
				-  }
			
 
				-  throw new Error(`Unable to locate skills directory. Checked: ${direct} and ${fromRepoRoot}`);
			
 
				-}
			
 
				-
			
 
				-export async function discoverSkillEntries(skillsDirInput?: string): Promise<SkillEntry[]> {
			
 
				-  const skillsDir = await resolveSkillsRoot(skillsDirInput);
			
 
				-  const groups = await fs.readdir(skillsDir, { withFileTypes: true });
			
 
				-  const entries: SkillEntry[] = [];
			
 
				-
			
 
				-  for (const group of groups) {
			
 
				-    if (!group.isDirectory() || IGNORED_DIR_NAMES.has(group.name) || group.name.startsWith('.')) {
			
 
				-      continue;
			
 
				-    }
			
 
				-    const groupDir = path.join(skillsDir, group.name);
			
 
				-    const skillCandidates = await fs.readdir(groupDir, { withFileTypes: true });
			
 
				-    for (const candidate of skillCandidates) {
			
 
				-      if (!candidate.isDirectory() || IGNORED_DIR_NAMES.has(candidate.name) || candidate.name.startsWith('.')) {
			
 
				-        continue;
			
 
				-      }
			
 
				-      const absoluteDir = path.join(groupDir, candidate.name);
			
 
				-      const relativeDir = path.relative(path.dirname(skillsDir), absoluteDir);
			
 
				-      if (isExcludedSkillDirectory(relativeDir)) {
			
 
				-        continue;
			
 
				-      }
			
 
				-      const skillFile = path.join(absoluteDir, 'SKILL.md');
			
 
				-      if (!(await pathExists(skillFile))) {
			
 
				-        continue;
			
 
				-      }
			
 
				-      entries.push({
			
 
				-        name: candidate.name,
			
 
				-        group: group.name,
			
 
				-        dir: absoluteDir,
			
 
				-        relativeDir,
			
 
				-        skillFile
			
 
				-      });
			
 
				-    }
			
 
				-  }
			
 
				-
			
 
				-  return entries.sort((left, right) => left.relativeDir.localeCompare(right.relativeDir));
			
 
				-}
			
 
				-
			
 
				-export async function findMissingSkillDirectories(skillsDirInput?: string): Promise<string[]> {
			
 
				-  const skillsDir = await resolveSkillsRoot(skillsDirInput);
			
 
				-  const groups = await fs.readdir(skillsDir, { withFileTypes: true });
			
 
				-  const missing: string[] = [];
			
 
				-
			
 
				-  for (const group of groups) {
			
 
				-    if (!group.isDirectory() || IGNORED_DIR_NAMES.has(group.name) || group.name.startsWith('.')) {
			
 
				-      continue;
			
 
				-    }
			
 
				-    const groupDir = path.join(skillsDir, group.name);
			
 
				-    const skillCandidates = await fs.readdir(groupDir, { withFileTypes: true });
			
 
				-    for (const candidate of skillCandidates) {
			
 
				-      if (!candidate.isDirectory() || candidate.name.startsWith('.') || IGNORED_DIR_NAMES.has(candidate.name)) {
			
 
				-        continue;
			
 
				-      }
			
 
				-      const absoluteDir = path.join(groupDir, candidate.name);
			
 
				-      const relativeDir = path.relative(path.dirname(skillsDir), absoluteDir);
			
 
				-      if (isExcludedSkillDirectory(relativeDir)) {
			
 
				-        continue;
			
 
				-      }
			
 
				-      const skillFile = path.join(absoluteDir, 'SKILL.md');
			
 
				-      if (!(await pathExists(skillFile))) {
			
 
				-        missing.push(relativeDir);
			
 
				-      }
			
 
				-    }
			
 
				-  }
			
 
				-  return missing.sort();
			
 
				-}
			
 
				-
			
 
				-export async function copySkillDirectory(sourceDir: string, destinationDir: string): Promise<void> {
			
 
				-  await fs.mkdir(destinationDir, { recursive: true });
			
 
				-  const items = await fs.readdir(sourceDir, { withFileTypes: true });
			
 
				-
			
 
				-  for (const item of items) {
			
 
				-    if (IGNORED_FILE_NAMES.has(item.name) || IGNORED_DIR_NAMES.has(item.name) || item.name.startsWith('.')) {
			
 
				-      continue;
			
 
				-    }
			
 
				-    const source = path.join(sourceDir, item.name);
			
 
				-    const destination = path.join(destinationDir, item.name);
			
 
				-
			
 
				-    if (item.isDirectory()) {
			
 
				-      await copySkillDirectory(source, destination);
			
 
				-      continue;
			
 
				-    }
			
 
				-
			
 
				-    if (item.isFile()) {
			
 
				-      await fs.copyFile(source, destination);
			
 
				-    }
			
 
				-  }
			
 
				-}
			
 
				-
			
 
				-export async function createAuditReport(skillsDirInput: string | undefined, platformCount: number): Promise<AuditReport> {
			
 
				-  const skillsDir = await resolveSkillsRoot(skillsDirInput);
			
 
				-  const skillEntries = await discoverSkillEntries(skillsDir);
			
 
				-  const missing = await findMissingSkillDirectories(skillsDir);
			
 
				-
			
 
				-  return {
			
 
				-    skillsDir,
			
 
				-    skillCount: skillEntries.length,
			
 
				-    missingSkillDirectories: missing,
			
 
				-    excludedDirectories: Array.from(EXCLUDED_SKILL_DIRECTORIES.values()).sort(),
			
 
				-    platformCount
			
 
				-  };
			
 
				-}
			
--- a/adapters/tsconfig.json
+++ b/adapters/tsconfig.json
@@ -1,15 +0,0 @@
 
				-{
			
 
				-  "compilerOptions": {
			
 
				-    "target": "ES2022",
			
 
				-    "module": "NodeNext",
			
 
				-    "moduleResolution": "NodeNext",
			
 
				-    "rootDir": "./src",
			
 
				-    "outDir": "./dist",
			
 
				-    "strict": true,
			
 
				-    "esModuleInterop": true,
			
 
				-    "forceConsistentCasingInFileNames": true,
			
 
				-    "skipLibCheck": true,
			
 
				-    "types": ["node"]
			
 
				-  },
			
 
				-  "include": ["src/**/*.ts"]
			
 
				-}
			
--- a/bundles/3d-threejs.yaml
+++ b/bundles/3d-threejs.yaml
@@ -1,42 +0,0 @@
 
				-id: 3d-threejs
			
 
				-title: 3D（三维 / Three.js）岗位包
			
 
				-description: 面向 Three.js 场景搭建、交互、性能优化与资源加载的常用技能组合。
			
 
				-tags: [3d, threejs, webgl, performance]
			
 
				-recommended:
			
 
				-  platforms: [cursor, claude, codex, trae]
			
 
				-  scope: project
			
 
				-skills:
			
 
				-  - name: threejs-fundamentals
			
 
				-    repo: threejs-skills
			
 
				-  - name: threejs-loaders
			
 
				-    repo: threejs-skills
			
 
				-  - name: threejs-lighting
			
 
				-    repo: threejs-skills
			
 
				-  - name: threejs-shaders
			
 
				-    repo: threejs-skills
			
 
				-  - name: threejs-postprocessing
			
 
				-    repo: threejs-skills
			
 
				-  - name: threejs-interaction
			
 
				-    repo: threejs-skills
			
 
				-prompts:
			
 
				-  - title: 创建基础场景
			
 
				-    prompt: |
			
 
				-      Use threejs-fundamentals.
			
 
				-      帮我创建一个基础 Three.js 场景（renderer/camera/resize/animation loop），并渲染一个旋转立方体。
			
 
				-  - title: 加载 GLTF 并播放动画
			
 
				-    prompt: |
			
 
				-      Use threejs-loaders.
			
 
				-      加载一个 GLTF 模型（包含动画），创建 AnimationMixer 播放动画，并处理加载失败与资源释放。
			
 
				-  - title: 灯光与阴影
			
 
				-    prompt: |
			
 
				-      Use threejs-lighting.
			
 
				-      给我的场景添加真实感灯光与阴影（阴影参数建议、性能注意事项、调试 helper）。
			
 
				-  - title: 自定义 Shader 效果
			
 
				-    prompt: |
			
 
				-      Use threejs-shaders.
			
 
				-      写一个 ShaderMaterial 实现 Fresnel 边缘光效果，并说明 uniform 与坐标空间注意点。
			
 
				-  - title: 后期效果链
			
 
				-    prompt: |
			
 
				-      Use threejs-postprocessing.
			
 
				-      用 EffectComposer 添加 bloom + FXAA，并解释如何与透明物体/性能做平衡。
			
 
				-
			
--- a/bundles/frontend-vue.yaml
+++ b/bundles/frontend-vue.yaml
@@ -1,37 +0,0 @@
 
				-id: frontend-vue
			
 
				-title: 前端（Vue）岗位包
			
 
				-description: 面向 Vue 3 前端开发的常用技能组合（Vue/Pinia/Vite/测试/工程化）。
			
 
				-tags: [frontend, vue, typescript, testing]
			
 
				-recommended:
			
 
				-  platforms: [cursor, claude, codex, trae]
			
 
				-  scope: project
			
 
				-skills:
			
 
				-  - name: vue3
			
 
				-  - name: pinia
			
 
				-  - name: vite
			
 
				-  - name: vitest
			
 
				-  - name: jest
			
 
				-  - name: webpack
			
 
				-  - name: rspack
			
 
				-prompts:
			
 
				-  - title: 新建 Vue 3 页面
			
 
				-    prompt: |
			
 
				-      Use vue3 skill.
			
 
				-      帮我用 Vue 3 + TypeScript 写一个可复用的表格组件，支持排序、分页、空状态，并给出示例用法。
			
 
				-  - title: 修复 Vue 类型报错
			
 
				-    prompt: |
			
 
				-      Use vue3 skill.
			
 
				-      我在 <template> 里访问 props 的字段时报 TS 报错，请给出正确的 props 定义与模板写法，并解释原因。
			
 
				-  - title: Pinia 状态设计
			
 
				-    prompt: |
			
 
				-      Use pinia skill.
			
 
				-      设计一个 Pinia store 管理用户登录态（token、profile、刷新、退出），并提供单测示例。
			
 
				-  - title: Vite 构建优化
			
 
				-    prompt: |
			
 
				-      Use vite skill.
			
 
				-      我的 Vite 项目首屏慢，请给出可操作的优化清单（分包、预构建、懒加载、资源压缩）并说明验证方法。
			
 
				-  - title: 组件测试
			
 
				-    prompt: |
			
 
				-      Use vitest skill.
			
 
				-      给这个 Vue 组件写 Vitest 单元测试，覆盖 props、事件、异步请求与快照（如适用）。
			
 
				-
			
--- a/bundles/qa-testing.yaml
+++ b/bundles/qa-testing.yaml
@@ -1,39 +0,0 @@
 
				-id: qa-testing
			
 
				-title: 测试（QA / 自动化）岗位包
			
 
				-description: 面向单测/集成测试/E2E/移动端自动化的常用技能组合。
			
 
				-tags: [qa, testing, e2e, automation]
			
 
				-recommended:
			
 
				-  platforms: [cursor, claude, codex, trae]
			
 
				-  scope: project
			
 
				-skills:
			
 
				-  - name: pytest
			
 
				-  - name: junit
			
 
				-  - name: jest
			
 
				-  - name: vitest
			
 
				-  - name: cypress
			
 
				-  - name: playwright
			
 
				-  - name: selenium
			
 
				-  - name: appium
			
 
				-  - name: detox
			
 
				-prompts:
			
 
				-  - title: Python 单测与夹具
			
 
				-    prompt: |
			
 
				-      Use pytest skill.
			
 
				-      给这个 Python 模块补齐 pytest 单测：包含 fixture、参数化、mock 外部依赖，并说明最佳实践。
			
 
				-  - title: Java 单测
			
 
				-    prompt: |
			
 
				-      Use junit skill.
			
 
				-      给这个 Java Service 写 JUnit5 单测，覆盖异常、边界条件，并提供合理的测试命名与结构。
			
 
				-  - title: Web E2E（Playwright）
			
 
				-    prompt: |
			
 
				-      Use playwright skill.
			
 
				-      给登录-下单-支付流程写 Playwright E2E，用 Page Object 模式组织，并在 CI 中稳定运行。
			
 
				-  - title: Web E2E（Cypress）
			
 
				-    prompt: |
			
 
				-      Use cypress skill.
			
 
				-      设计一套 Cypress 测试覆盖关键路径与回归点，并给出 flaky case 的治理方法。
			
 
				-  - title: 移动端自动化
			
 
				-    prompt: |
			
 
				-      Use appium skill.
			
 
				-      我需要对 iOS/Android 做跨端自动化测试，给出 Appium 的工程结构、capabilities 配置与稳定性策略。
			
 
				-
			
--- a/skills/__init__.py
+++ b/skills/__init__.py
--- a/skills/angular-skills/angular/LICENSE.txt
+++ b/skills/angular-skills/angular/LICENSE.txt
@@ -1,202 +0,0 @@
 
				-
			
 
				-                                 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.
			
--- a/skills/angular-skills/angular/SKILL.md
+++ b/skills/angular-skills/angular/SKILL.md
@@ -1,117 +0,0 @@
 
				----
			
 
				-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:
			
 
				-- Build single-page applications (SPA) with Angular
			
 
				-- Create Angular components, services, directives, and pipes
			
 
				-- Implement routing, lazy-loading, and navigation guards
			
 
				-- Work with reactive forms or template-driven forms
			
 
				-- Use dependency injection and Angular modules
			
 
				-- Integrate RxJS observables and the async pipe
			
 
				-- Set up Angular CLI projects and generate scaffolding
			
 
				-- Optimize performance with OnPush change detection
			
 
				-
			
 
				-## How to use this skill
			
 
				-
			
 
				-### Workflow
			
 
				-
			
 
				-1. **Identify the request area** from the user's question (component creation, routing, forms, services, etc.)
			
 
				-2. **Apply Angular best practices** following the official style guide
			
 
				-3. **Generate TypeScript code** using Angular conventions and decorators
			
 
				-4. **Verify** the solution compiles and follows the dependency injection pattern
			
 
				-
			
 
				-### 1. Project Setup
			
 
				-
			
 
				-```bash
			
 
				-# Create a new Angular project
			
 
				-ng new my-app --routing --style=scss
			
 
				-
			
 
				-# Generate components and services
			
 
				-ng generate component features/user-list
			
 
				-ng generate service core/services/user
			
 
				-```
			
 
				-
			
 
				-### 2. Component Example
			
 
				-
			
 
				-```typescript
			
 
				-import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
			
 
				-import { Observable } from 'rxjs';
			
 
				-import { UserService } from '../../core/services/user.service';
			
 
				-import { User } from '../../core/models/user.model';
			
 
				-
			
 
				-@Component({
			
 
				-  selector: 'app-user-list',
			
 
				-  templateUrl: './user-list.component.html',
			
 
				-  changeDetection: ChangeDetectionStrategy.OnPush
			
 
				-})
			
 
				-export class UserListComponent implements OnInit {
			
 
				-  users$!: Observable<User[]>;
			
 
				-
			
 
				-  constructor(private userService: UserService) {}
			
 
				-
			
 
				-  ngOnInit(): void {
			
 
				-    this.users$ = this.userService.getUsers();
			
 
				-  }
			
 
				-}
			
 
				-```
			
 
				-
			
 
				-### 3. Service with HttpClient
			
 
				-
			
 
				-```typescript
			
 
				-import { Injectable } from '@angular/core';
			
 
				-import { HttpClient } from '@angular/common/http';
			
 
				-import { Observable } from 'rxjs';
			
 
				-
			
 
				-@Injectable({ providedIn: 'root' })
			
 
				-export class UserService {
			
 
				-  private readonly apiUrl = '/api/users';
			
 
				-
			
 
				-  constructor(private http: HttpClient) {}
			
 
				-
			
 
				-  getUsers(): Observable<User[]> {
			
 
				-    return this.http.get<User[]>(this.apiUrl);
			
 
				-  }
			
 
				-
			
 
				-  createUser(user: User): Observable<User> {
			
 
				-    return this.http.post<User>(this.apiUrl, user);
			
 
				-  }
			
 
				-}
			
 
				-```
			
 
				-
			
 
				-### 4. Routing with Lazy Loading
			
 
				-
			
 
				-```typescript
			
 
				-const routes: Routes = [
			
 
				-  { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
			
 
				-  { path: 'dashboard', component: DashboardComponent },
			
 
				-  {
			
 
				-    path: 'users',
			
 
				-    loadChildren: () =>
			
 
				-      import('./features/users/users.module').then(m => m.UsersModule)
			
 
				-  }
			
 
				-];
			
 
				-```
			
 
				-
			
 
				-## Best Practices
			
 
				-
			
 
				-- Use `OnPush` change detection and pure pipes for performance
			
 
				-- Organize code into Core, Shared, and Feature modules
			
 
				-- Prefer constructor injection; register services with `providedIn: 'root'` for singletons
			
 
				-- Unsubscribe from observables to prevent memory leaks (use `takeUntil` or the `async` pipe)
			
 
				-- Use reactive forms for complex validation scenarios
			
 
				-- Lazy-load feature modules to reduce initial bundle size
			
 
				-
			
 
				-## Resources
			
 
				-
			
 
				-- Official documentation: https://angular.io/docs
			
 
				-- Angular CLI: https://angular.io/cli
			
 
				-- RxJS: https://rxjs.dev/
			
 
				-
			
 
				-## Keywords
			
 
				-
			
 
				-angular, Angular CLI, components, services, RxJS, dependency injection, routing, reactive forms, TypeScript, SPA, OnPush, lazy loading, modules, directives, pipes
			
--- a/skills/antd-skills/ant-design-mini/LICENSE.txt
+++ b/skills/antd-skills/ant-design-mini/LICENSE.txt
@@ -1,202 +0,0 @@
 
				-
			
 
				-                                 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.
			
--- a/skills/antd-skills/ant-design-mini/SKILL.md
+++ b/skills/antd-skills/ant-design-mini/SKILL.md
@@ -1,204 +0,0 @@
 
				----
			
 
				-name: ant-design-mini
			
 
				-description: "Builds mini-program UIs with Ant Design Mini components for Alipay and WeChat mini-programs. Covers Button, Form, List, Modal, Tabs, NavBar, and 60+ components with theme customization and CSS variable theming. Use when the user needs to create mini-program interfaces with Ant Design Mini, configure themes, or implement mini-program-specific UI patterns."
			
 
				-license: Complete terms in LICENSE.txt
			
 
				----
			
 
				-
			
 
				-## When to use this skill
			
 
				-
			
 
				-Use this skill whenever the user wants to:
			
 
				-- Build Alipay or WeChat mini-program UIs with Ant Design Mini components
			
 
				-- Use form, data display, feedback, or navigation components in mini-programs
			
 
				-- Customize the Ant Design Mini theme via CSS variables
			
 
				-- Handle component events and lifecycle in mini-program contexts
			
 
				-
			
 
				-## How to use this skill
			
 
				-
			
 
				-### Quick-Start Example: Button and Form in Mini-Program
			
 
				-
			
 
				-```xml
			
 
				-<!-- pages/index/index.axml -->
			
 
				-<ant-button type="primary" onTap="handleClick">Submit</ant-button>
			
 
				-
			
 
				-<ant-form onFinish="onFormFinish">
			
 
				-  <ant-form-item label="Name" name="name" required="{{true}}">
			
 
				-    <ant-input placeholder="Enter your name" />
			
 
				-  </ant-form-item>
			
 
				-  <ant-form-item label="Phone" name="phone">
			
 
				-    <ant-input type="number" placeholder="Enter phone" />
			
 
				-  </ant-form-item>
			
 
				-  <ant-button type="primary" form-type="submit">Submit</ant-button>
			
 
				-</ant-form>
			
 
				-```
			
 
				-
			
 
				-```javascript
			
 
				-// pages/index/index.js
			
 
				-Page({
			
 
				-  handleClick() { my.showToast({ content: 'Clicked!' }); },
			
 
				-  onFormFinish(values) { console.log('Form values:', values); }
			
 
				-});
			
 
				-```
			
 
				-
			
 
				-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, 按钮, 表单, 列表, 弹窗, 提示, 标签页, 导航栏
			
--- a/skills/antd-skills/ant-design-mini/api/component-api.md
+++ b/skills/antd-skills/ant-design-mini/api/component-api.md
@@ -1,72 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/api/props-and-events.md
+++ b/skills/antd-skills/ant-design-mini/api/props-and-events.md
@@ -1,87 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/action-sheet.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/action-sheet.md
@@ -1,75 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/avatar.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/avatar.md
@@ -1,55 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/badge.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/badge.md
@@ -1,61 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/button.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/button.md
@@ -1,81 +0,0 @@
 
				-# 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)
			
--- a/skills/antd-skills/ant-design-mini/examples/components/card.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/card.md
@@ -1,58 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/checkbox.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/checkbox.md
@@ -1,94 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/date-picker.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/date-picker.md
@@ -1,78 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/empty.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/empty.md
@@ -1,56 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/form.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/form.md
@@ -1,81 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/input.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/input.md
@@ -1,92 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/list.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/list.md
@@ -1,80 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/loading.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/loading.md
@@ -1,65 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/modal.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/modal.md
@@ -1,79 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/nav-bar.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/nav-bar.md
@@ -1,64 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/overview.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/overview.md
@@ -1,60 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/picker.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/picker.md
@@ -1,84 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/popup.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/popup.md
@@ -1,74 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/radio.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/radio.md
@@ -1,56 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/stepper.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/stepper.md
@@ -1,76 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/switch.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/switch.md
@@ -1,72 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/tabs.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/tabs.md
@@ -1,86 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/tag.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/tag.md
@@ -1,61 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/components/toast.md
+++ b/skills/antd-skills/ant-design-mini/examples/components/toast.md
@@ -1,72 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/getting-started.md
+++ b/skills/antd-skills/ant-design-mini/examples/getting-started.md
@@ -1,90 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/examples/quick-start.md
+++ b/skills/antd-skills/ant-design-mini/examples/quick-start.md
@@ -1,80 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mini/templates/component-usage.md
+++ b/skills/antd-skills/ant-design-mini/templates/component-usage.md
@@ -1,116 +0,0 @@
 
				-# 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 })
			
 
				-  }
			
 
				-})
			
 
				-```
			
--- a/skills/antd-skills/ant-design-mini/templates/installation.md
+++ b/skills/antd-skills/ant-design-mini/templates/installation.md
@@ -1,65 +0,0 @@
 
				-# 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
			
 
				-```
			
--- a/skills/antd-skills/ant-design-mobile/LICENSE.txt
+++ b/skills/antd-skills/ant-design-mobile/LICENSE.txt
@@ -1,203 +0,0 @@
 
				-
			
 
				-                                 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.
			
 
				-
			
--- a/skills/antd-skills/ant-design-mobile/SKILL.md
+++ b/skills/antd-skills/ant-design-mobile/SKILL.md
@@ -1,85 +0,0 @@
 
				----
			
 
				-name: ant-design-mobile
			
 
				-description: "Builds React mobile UIs with Ant Design Mobile (antd-mobile) components including Button, Form, List, Modal, Picker, Tabs, PullToRefresh, InfiniteScroll, and 50+ mobile-optimized components. Use when the user needs to create mobile-first React interfaces, implement mobile navigation, forms, or data display with Ant Design Mobile."
			
 
				-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, Form, List, Card, Modal, Tabs, etc.)
			
 
				-- Implement mobile-specific features (pull-to-refresh, infinite scroll, gestures)
			
 
				-- Customize the Ant Design Mobile theme with CSS variables
			
 
				-- Set up internationalization with ConfigProvider
			
 
				-
			
 
				-## How to use this skill
			
 
				-
			
 
				-### Workflow
			
 
				-
			
 
				-1. **Install** - `npm install antd-mobile` and import CSS
			
 
				-2. **Choose components** - Match the UI need to the component from the reference below
			
 
				-3. **Load the example file** - Each component has a detailed example in `examples/components/`
			
 
				-4. **Customize theme** - Use ConfigProvider or CSS variables for theming
			
 
				-
			
 
				-### Quick-Start Example: Mobile Form with Validation
			
 
				-
			
 
				-```tsx
			
 
				-import { Button, Form, Input, Toast } from 'antd-mobile';
			
 
				-
			
 
				-function LoginForm() {
			
 
				-  const [form] = Form.useForm();
			
 
				-
			
 
				-  const onSubmit = async () => {
			
 
				-    const values = await form.validateFields();
			
 
				-    Toast.show({ content: `Welcome, ${values.username}!` });
			
 
				-  };
			
 
				-
			
 
				-  return (
			
 
				-    <Form form={form} layout="horizontal" footer={
			
 
				-      <Button block type="submit" color="primary" onClick={onSubmit}>
			
 
				-        Login
			
 
				-      </Button>
			
 
				-    }>
			
 
				-      <Form.Item name="username" label="Username" rules={[{ required: true }]}>
			
 
				-        <Input placeholder="Enter username" />
			
 
				-      </Form.Item>
			
 
				-      <Form.Item name="password" label="Password" rules={[{ required: true }]}>
			
 
				-        <Input type="password" placeholder="Enter password" />
			
 
				-      </Form.Item>
			
 
				-    </Form>
			
 
				-  );
			
 
				-}
			
 
				-```
			
 
				-
			
 
				-### Component Categories
			
 
				-
			
 
				-| Category | Components | Example Files |
			
 
				-|----------|-----------|---------------|
			
 
				-| Navigation | NavBar, TabBar, Tabs, SideBar | `examples/components/nav-bar.md`, `tabs.md` |
			
 
				-| Data Entry | Input, Form, Picker, DatePicker, Switch, Checkbox | `examples/components/form.md`, `picker.md` |
			
 
				-| Data Display | List, Card, Badge, Tag, Avatar, Image | `examples/components/list.md`, `card.md` |
			
 
				-| Feedback | Modal, Toast, Dialog, ActionSheet, Loading | `examples/components/modal.md`, `toast.md` |
			
 
				-| Gestures | PullToRefresh, InfiniteScroll, Swiper | `examples/components/pull-to-refresh.md` |
			
 
				-
			
 
				-### API Reference
			
 
				-
			
 
				-- `api/components.md` - All component props and APIs
			
 
				-- `api/config-provider.md` - Global configuration and theming
			
 
				-
			
 
				-## Best Practices
			
 
				-
			
 
				-1. **Import CSS first** - Add `import 'antd-mobile/es/global'` in your entry file
			
 
				-2. **Wrap with ConfigProvider** - Set locale and theme at the app root
			
 
				-3. **Use CSS variables for theming** - Override `--adm-color-primary` etc. for custom branding
			
 
				-4. **Tree-shake imports** - Import individual components (`import { Button } from 'antd-mobile'`) for smaller bundles
			
 
				-5. **Test on real devices** - Mobile touch behavior differs from desktop browser emulation
			
 
				-
			
 
				-## Resources
			
 
				-
			
 
				-- **Official Website**: https://ant-design-mobile.antgroup.com/
			
 
				-- **GitHub**: https://github.com/ant-design/ant-design-mobile
			
 
				-
			
 
				-## Keywords
			
 
				-
			
 
				-antd-mobile, Ant Design Mobile, React mobile, mobile UI, 移动端, 组件库, Button, Form, List, Modal, Tabs, PullToRefresh, InfiniteScroll, Toast, NavBar, TabBar, mobile components
			
--- a/skills/antd-skills/ant-design-mobile/api/components.md
+++ b/skills/antd-skills/ant-design-mobile/api/components.md
@@ -1,515 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/api/config-provider.md
+++ b/skills/antd-skills/ant-design-mobile/api/config-provider.md
@@ -1,45 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/advanced/internationalization.md
+++ b/skills/antd-skills/ant-design-mobile/examples/advanced/internationalization.md
@@ -1,107 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/advanced/theme-customization.md
+++ b/skills/antd-skills/ant-design-mobile/examples/advanced/theme-customization.md
@@ -1,115 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/action-sheet.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/action-sheet.md
@@ -1,137 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/avatar.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/avatar.md
@@ -1,111 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/badge.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/badge.md
@@ -1,137 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/button.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/button.md
@@ -1,137 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/card.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/card.md
@@ -1,113 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/cascader.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/cascader.md
@@ -1,121 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/checkbox.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/checkbox.md
@@ -1,139 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/date-picker.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/date-picker.md
@@ -1,166 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/dialog.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/dialog.md
@@ -1,131 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/divider.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/divider.md
@@ -1,91 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/empty.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/empty.md
@@ -1,90 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/error-block.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/error-block.md
@@ -1,94 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/form.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/form.md
@@ -1,131 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/grid.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/grid.md
@@ -1,153 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/icon.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/icon.md
@@ -1,114 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/image-viewer.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/image-viewer.md
@@ -1,150 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/image.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/image.md
@@ -1,155 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/index-bar.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/index-bar.md
@@ -1,147 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/infinite-scroll.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/infinite-scroll.md
@@ -1,89 +0,0 @@
 
				-# 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.
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/input.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/input.md
@@ -1,131 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/list.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/list.md
@@ -1,108 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/loading.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/loading.md
@@ -1,98 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/mask.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/mask.md
@@ -1,112 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/modal.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/modal.md
@@ -1,143 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/nav-bar.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/nav-bar.md
@@ -1,118 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/notice-bar.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/notice-bar.md
@@ -1,117 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/picker.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/picker.md
@@ -1,152 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/popup.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/popup.md
@@ -1,122 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/pull-to-refresh.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/pull-to-refresh.md
@@ -1,85 +0,0 @@
 
				-# 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.
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/radio.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/radio.md
@@ -1,141 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/rate.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/rate.md
@@ -1,143 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/safe-area.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/safe-area.md
@@ -1,85 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/search-bar.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/search-bar.md
@@ -1,111 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/side-bar.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/side-bar.md
@@ -1,109 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/slider.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/slider.md
@@ -1,149 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/space.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/space.md
@@ -1,102 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/stepper.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/stepper.md
@@ -1,147 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/swiper.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/swiper.md
@@ -1,153 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/switch.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/switch.md
@@ -1,144 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/tab-bar.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/tab-bar.md
@@ -1,145 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/tabs.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/tabs.md
@@ -1,119 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/tag.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/tag.md
@@ -1,140 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/textarea.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/textarea.md
@@ -1,129 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/toast.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/toast.md
@@ -1,137 +0,0 @@
 
				-# 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
			
--- a/skills/antd-skills/ant-design-mobile/examples/components/uploader.md
+++ b/skills/antd-skills/ant-design-mobile/examples/components/uploader.md
@@ -1,154 +0,0 @@
 
				-# 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