mcpField
A
ant-design-mobile

ant-design-mobile

github.com/full-stack-skills开发259 次安装4 周前更新
代码仓库

关于 ant-design-mobile

面向使用 Ant Design Mobile 和 React 构建移动界面的开发者提供文档指导。它按主题提供示例、API 参考和模板，涵盖移动组件及交互。

主要功能

  1. 01移动组件示例
  2. 02下拉刷新与无限滚动指导
  3. 03主题与国际化指导
  4. 04API 参考和项目模板

适用场景

  1. 01构建移动端表单和列表
  2. 02添加下拉刷新交互
  3. 03创建移动导航与对话框

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/full-stack-skills/antd-skills --skill ant-design-mobile

安装后在 Claude Code 中输入/ant-design-mobile确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
api/
components.md
config-provider.md
examples/advanced/
internationalization.md
theme-customization.md
examples/components/
action-sheet.md
avatar.md
badge.md
button.md
card.md
cascader.md
checkbox.md
date-picker.md
dialog.md
divider.md
empty.md
error-block.md
form.md
grid.md
icon.md
image-viewer.md
image.md
index-bar.md
infinite-scroll.md
input.md
list.md
loading.md
mask.md
modal.md
nav-bar.md

详细介绍

何时使用此技能

当用户希望执行以下操作时，使用此技能：

  • 使用 Ant Design Mobile 组件构建 React 移动应用
  • 使用移动端 UI 组件（Button、Input、Form、List、Card、Modal 等）
  • 创建适配移动设备的界面
  • 自定义 Ant Design Mobile 主题
  • 实现移动端专属功能（下拉刷新、无限滚动等）
  • 在 React Native 或 Web 中使用 Ant Design Mobile
  • 处理移动端手势和交互
  • 实现移动端导航模式
  • 使用移动端表单组件
  • 创建移动端数据展示组件

如何使用此技能

此技能按照 Ant Design Mobile 官方文档的结构组织（https://ant-design-mobile.antgroup.com/zh/guide/quick-start, https://ant-design-mobile.antgroup.com/zh/components/button）。使用 Ant Design Mobile 时：

  1. 安装和设置 Ant Design Mobile：

    • 加载 examples/getting-started/installation.md 查看安装说明
    • 加载 examples/getting-started/basic-usage.md 查看基本用法示例

  2. 根据用户需求选择组件：

    • Button/按钮 → examples/components/button.md
    • Input/输入框 → examples/components/input.md
    • Form/表单 → examples/components/form.md
    • List/列表 → examples/components/list.md
    • Card/卡片 → examples/components/card.md
    • Modal/对话框 → examples/components/modal.md
    • Picker/选择器 → examples/components/picker.md
    • DatePicker/日期选择器 → examples/components/date-picker.md
    • Tabs/标签页 → examples/components/tabs.md
    • PullToRefresh/下拉刷新 → examples/components/pull-to-refresh.md
    • InfiniteScroll/无限滚动 → examples/components/infinite-scroll.md
    • 以及更多组件……

  3. 从 examples/ 目录中加载相应的示例文件：

    • examples/getting-started/installation.md - 安装和设置
    • examples/getting-started/basic-usage.md - 基本用法示例
    • examples/components/button.md - Button 组件
    • examples/components/input.md - Input 组件
    • examples/components/form.md - Form 组件
    • examples/components/list.md - List 组件
    • examples/components/card.md - Card 组件
    • examples/components/modal.md - Modal 组件
    • examples/components/picker.md - Picker 组件
    • examples/components/date-picker.md - DatePicker 组件
    • examples/components/tabs.md - Tabs 组件
    • examples/components/pull-to-refresh.md - PullToRefresh 组件
    • examples/components/infinite-scroll.md - InfiniteScroll 组件
    • examples/components/icon.md - Icon 组件
    • examples/components/badge.md - Badge 组件
    • examples/components/tag.md - Tag 组件
    • examples/components/avatar.md - Avatar 组件
    • examples/components/image.md - Image 组件
    • examples/components/image-viewer.md - ImageViewer 组件
    • examples/components/nav-bar.md - NavBar 组件
    • examples/components/tab-bar.md - TabBar 组件
    • examples/components/index-bar.md - IndexBar 组件
    • examples/components/side-bar.md - SideBar 组件
    • examples/components/dialog.md - Dialog 组件
    • examples/components/toast.md - Toast 组件
    • examples/components/action-sheet.md - ActionSheet 组件
    • examples/components/popup.md - Popup 组件
    • examples/components/loading.md - Loading 组件
    • examples/components/error-block.md - ErrorBlock 组件
    • examples/components/empty.md - Empty 组件
    • examples/components/notice-bar.md - NoticeBar 组件
    • examples/components/mask.md - Mask 组件
    • examples/components/textarea.md - Textarea 组件
    • examples/components/switch.md - Switch 组件
    • examples/components/checkbox.md - Checkbox 组件
    • examples/components/radio.md - Radio 组件
    • examples/components/stepper.md - Stepper 组件
    • examples/components/rate.md - Rate 组件
    • examples/components/slider.md - Slider 组件
    • examples/components/uploader.md - Uploader 组件
    • examples/components/grid.md - Grid 组件
    • examples/components/swiper.md - Swiper 组件
    • examples/components/cascader.md - Cascader 组件
    • examples/components/search-bar.md - SearchBar 组件
    • examples/components/virtual-input.md - VirtualInput 组件
    • examples/components/divider.md - Divider 组件
    • examples/components/space.md - Space 组件
    • examples/components/safe-area.md - SafeArea 组件
    • examples/advanced/theme-customization.md - 主题自定义
    • examples/advanced/internationalization.md - 国际化

  4. 遵循该示例文件中关于语法、结构和最佳实践的具体说明

  5. 必要时参考 API 文档：

    • api/components.md - 组件 API 参考
    • api/config-provider.md - ConfigProvider API

  6. 使用模板快速开始：

    • templates/project-setup.md - 项目设置模板
    • templates/component-template.md - 组件用法模板
文档映射（与官方文档一一对应）

指南：

组件：

示例和模板

此技能包含详细示例，按官方文档结构组织。所有示例都位于 examples/ 目录中（参见上方映射）。

使用示例：

  • 根据用户请求确定主题
  • 从上方映射中加载相应的示例文件
  • 遵循该文件中的说明、语法和最佳实践
  • 根据具体用例调整代码示例

使用模板：

  • 参考 templates/ 目录中的模板，获取常用脚手架
  • 根据具体需求和编码风格调整模板

API 参考

  • Components API：api/components.md - 所有组件属性和 API
  • ConfigProvider API：api/config-provider.md - ConfigProvider 组件 API 和全局配置

最佳实践

  1. 导入样式：在入口文件中导入 Ant Design Mobile CSS
  2. 使用 ConfigProvider：使用 ConfigProvider 包裹应用，以进行全局配置
  3. 移动端优先：优先为移动设备进行设计
  4. 触控交互：考虑触控手势和交互
  5. 性能：针对移动端性能进行优化
  6. 响应式设计：在不同屏幕尺寸上进行测试
  7. 无障碍访问：遵循移动端无障碍访问指南
  8. 主题自定义：使用设计令牌，确保主题风格一致
  9. 国际化：使用带有 locale 的 ConfigProvider 实现 i18n
  10. 组件组合：组合组件以构建复杂 UI

资源

关键词

Ant Design Mobile, antd-mobile, 移动端 UI, React 移动端, 移动端组件, Button, Input, Form, List, Card, Modal, Picker, DatePicker, Tabs, PullToRefresh, InfiniteScroll, Swiper, Toast, Dialog, ActionSheet, Popup, Loading, NavBar, TabBar, Icon, Badge, Tag, Avatar, Image, ImageViewer, Switch, Checkbox, Radio, Stepper, Rate, Slider, Uploader, Grid, Cascader, SearchBar, VirtualInput, Divider, Space, SafeArea, ErrorBlock, Empty, NoticeBar, Mask, 移动应用, 移动端, 组件库, 按钮, 输入框, 表单, 列表, 卡片, 对话框, 选择器, 日期选择器, 标签页, 下拉刷新, 无限滚动

评论

支持 Markdown