Provides comprehensive guidance for Ant Design Mobile component library including mobile components, themes, and platform adaptations. Use when the user asks about Ant Design Mobile, needs to build mobile applications, or implement mobile UI components.
Use this skill whenever the user wants to:
This skill is organized to match the Ant Design Mobile official documentation structure (https://ant-design-mobile.antgroup.com/zh/guide/quick-start, https://ant-design-mobile.antgroup.com/zh/components/button). When working with Ant Design Mobile:
Install and setup Ant Design Mobile:
examples/getting-started/installation.md for installation instructionsexamples/getting-started/basic-usage.md for basic usage examplesChoose the component based on the user's requirements:
examples/components/button.mdexamples/components/input.mdexamples/components/form.mdexamples/components/list.mdexamples/components/card.mdexamples/components/modal.mdexamples/components/picker.mdexamples/components/date-picker.mdexamples/components/tabs.mdexamples/components/pull-to-refresh.mdexamples/components/infinite-scroll.mdLoad the appropriate example file from the examples/ directory:
examples/getting-started/installation.md - Installation and setupexamples/getting-started/basic-usage.md - Basic usage examplesexamples/components/button.md - Button componentexamples/components/input.md - Input componentexamples/components/form.md - Form componentexamples/components/list.md - List componentexamples/components/card.md - Card componentexamples/components/modal.md - Modal componentexamples/components/picker.md - Picker componentexamples/components/date-picker.md - DatePicker componentexamples/components/tabs.md - Tabs componentexamples/components/pull-to-refresh.md - PullToRefresh componentexamples/components/infinite-scroll.md - InfiniteScroll componentexamples/components/icon.md - Icon componentexamples/components/badge.md - Badge componentexamples/components/tag.md - Tag componentexamples/components/avatar.md - Avatar componentexamples/components/image.md - Image componentexamples/components/image-viewer.md - ImageViewer componentexamples/components/nav-bar.md - NavBar componentexamples/components/tab-bar.md - TabBar componentexamples/components/index-bar.md - IndexBar componentexamples/components/side-bar.md - SideBar componentexamples/components/dialog.md - Dialog componentexamples/components/toast.md - Toast componentexamples/components/action-sheet.md - ActionSheet componentexamples/components/popup.md - Popup componentexamples/components/loading.md - Loading componentexamples/components/error-block.md - ErrorBlock componentexamples/components/empty.md - Empty componentexamples/components/notice-bar.md - NoticeBar componentexamples/components/mask.md - Mask componentexamples/components/textarea.md - Textarea componentexamples/components/switch.md - Switch componentexamples/components/checkbox.md - Checkbox componentexamples/components/radio.md - Radio componentexamples/components/stepper.md - Stepper componentexamples/components/rate.md - Rate componentexamples/components/slider.md - Slider componentexamples/components/uploader.md - Uploader componentexamples/components/grid.md - Grid componentexamples/components/swiper.md - Swiper componentexamples/components/cascader.md - Cascader componentexamples/components/search-bar.md - SearchBar componentexamples/components/virtual-input.md - VirtualInput componentexamples/components/divider.md - Divider componentexamples/components/space.md - Space componentexamples/components/safe-area.md - SafeArea componentexamples/advanced/theme-customization.md - Theme customizationexamples/advanced/internationalization.md - InternationalizationFollow the specific instructions in that example file for syntax, structure, and best practices
Reference the API documentation when needed:
api/components.md - Component API referenceapi/config-provider.md - ConfigProvider APIUse templates for quick start:
templates/project-setup.md - Project setup templatestemplates/component-template.md - Component usage templatesGuide (指南):
examples/guide/ or examples/getting-started/ → https://ant-design-mobile.antgroup.com/zh/guide/quick-startComponents (组件):
examples/components/ → https://ant-design-mobile.antgroup.com/zh/components/buttonThis skill includes detailed examples organized to match the official documentation structure. All examples are in the examples/ directory (see mapping above).
To use examples:
To use templates:
templates/ directory for common scaffoldingapi/components.md - All component props and APIsapi/config-provider.md - ConfigProvider component API and global configurationAnt Design Mobile, antd-mobile, mobile UI, React mobile, mobile components, Button, Input, Form, List, Card, Modal, Picker, DatePicker, Tabs, PullToRefresh, InfiniteScroll, Swiper, Toast, Dialog, ActionSheet, Popup, Loading, NavBar, TabBar, Icon, Badge, Tag, Avatar, Image, ImageViewer, Switch, Checkbox, Radio, Stepper, Rate, Slider, Uploader, Grid, Cascader, SearchBar, VirtualInput, Divider, Space, SafeArea, ErrorBlock, Empty, NoticeBar, Mask, mobile app, 移动端, 组件库, 按钮, 输入框, 表单, 列表, 卡片, 对话框, 选择器, 日期选择器, 标签页, 下拉刷新, 无限滚动
确保开发环境已安装必要的依赖和工具。
根据项目需求进行基础配置。
按照示例代码实现核心功能。
运行测试确保功能正常。
完成开发后进行部署和监控。