When to use this skill
Use this skill whenever the user wants to:
- Build React mobile applications with Ant Design Mobile components
- Use mobile UI components (Button, Input, Form, List, Card, Modal, etc.)
- Create mobile-friendly interfaces
- Customize Ant Design Mobile theme
- Implement mobile-specific features (pull-to-refresh, infinite scroll, etc.)
- Use Ant Design Mobile with React Native or web
- Handle mobile gestures and interactions
- Implement mobile navigation patterns
- Use mobile form components
- Create mobile data display components
How to use this skill
This skill is organized to match the Ant Design Mobile official documentation structure (https://ant-design-mobile.antgroup.com/zh/guide/quick-start, https://ant-design-mobile.antgroup.com/zh/components/button). When working with Ant Design Mobile:
Install and setup Ant Design Mobile:
- Load
examples/getting-started/installation.md for installation instructions
- Load
examples/getting-started/basic-usage.md for basic usage examples
Choose the component based on the user's requirements:
- Button/按钮 →
examples/components/button.md
- Input/输入框 →
examples/components/input.md
- Form/表单 →
examples/components/form.md
- List/列表 →
examples/components/list.md
- Card/卡片 →
examples/components/card.md
- Modal/对话框 →
examples/components/modal.md
- Picker/选择器 →
examples/components/picker.md
- DatePicker/日期选择器 →
examples/components/date-picker.md
- Tabs/标签页 →
examples/components/tabs.md
- PullToRefresh/下拉刷新 →
examples/components/pull-to-refresh.md
- InfiniteScroll/无限滚动 →
examples/components/infinite-scroll.md
- And many more components...
Load 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 - Internationalization
Follow 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 API
Use templates for quick start:
templates/project-setup.md - Project setup templatestemplates/component-template.md - Component usage templates
Doc mapping (one-to-one with official documentation)
Guide (指南):
Components (组件):
Examples and Templates
This skill includes detailed examples organized to match the official documentation structure. All examples are in the examples/ directory (see mapping above).
To use examples:
- Identify the topic from the user's request
- Load the appropriate example file from the mapping above
- Follow the instructions, syntax, and best practices in that file
- Adapt the code examples to your specific use case
To use templates:
- Reference templates in
templates/ directory for common scaffolding
- Adapt templates to your specific needs and coding style
API Reference
- Components API:
api/components.md - All component props and APIs
- ConfigProvider API:
api/config-provider.md - ConfigProvider component API and global configuration
Best Practices
- Import styles: Import Ant Design Mobile CSS in your entry file
- Use ConfigProvider: Wrap your app with ConfigProvider for global configuration
- Mobile-first: Design for mobile devices first
- Touch interactions: Consider touch gestures and interactions
- Performance: Optimize for mobile performance
- Responsive design: Test on different screen sizes
- Accessibility: Follow mobile accessibility guidelines
- Theme customization: Use design tokens for consistent theming
- Internationalization: Use ConfigProvider with locale for i18n
- Component composition: Compose components for complex UIs
Resources
Keywords
Ant Design Mobile, antd-mobile, mobile UI, React mobile, mobile components, Button, Input, Form, List, Card, Modal, Picker, DatePicker, Tabs, PullToRefresh, InfiniteScroll, Swiper, Toast, Dialog, ActionSheet, Popup, Loading, NavBar, TabBar, Icon, Badge, Tag, Avatar, Image, ImageViewer, Switch, Checkbox, Radio, Stepper, Rate, Slider, Uploader, Grid, Cascader, SearchBar, VirtualInput, Divider, Space, SafeArea, ErrorBlock, Empty, NoticeBar, Mask, mobile app, 移动端, 组件库, 按钮, 输入框, 表单, 列表, 卡片, 对话框, 选择器, 日期选择器, 标签页, 下拉刷新, 无限滚动
1---2name: ant-design-mobile3description: 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.4license: Complete terms in LICENSE.txt5---67## When to use this skill89Use this skill whenever the user wants to:10- Build React mobile applications with Ant Design Mobile components11- Use mobile UI components (Button, Input, Form, List, Card, Modal, etc.)12- Create mobile-friendly interfaces13- Customize Ant Design Mobile theme14- Implement mobile-specific features (pull-to-refresh, infinite scroll, etc.)15- Use Ant Design Mobile with React Native or web16- Handle mobile gestures and interactions17- Implement mobile navigation patterns18- Use mobile form components19- Create mobile data display components2021## How to use this skill2223This 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:24251. **Install and setup** Ant Design Mobile:26 - Load `examples/getting-started/installation.md` for installation instructions27 - Load `examples/getting-started/basic-usage.md` for basic usage examples28292. **Choose the component** based on the user's requirements:30 - Button/按钮 → `examples/components/button.md`31 - Input/输入框 → `examples/components/input.md`32 - Form/表单 → `examples/components/form.md`33 - List/列表 → `examples/components/list.md`34 - Card/卡片 → `examples/components/card.md`35 - Modal/对话框 → `examples/components/modal.md`36 - Picker/选择器 → `examples/components/picker.md`37 - DatePicker/日期选择器 → `examples/components/date-picker.md`38 - Tabs/标签页 → `examples/components/tabs.md`39 - PullToRefresh/下拉刷新 → `examples/components/pull-to-refresh.md`40 - InfiniteScroll/无限滚动 → `examples/components/infinite-scroll.md`41 - And many more components...42433. **Load the appropriate example file** from the `examples/` directory:44 - `examples/getting-started/installation.md` - Installation and setup45 - `examples/getting-started/basic-usage.md` - Basic usage examples46 - `examples/components/button.md` - Button component47 - `examples/components/input.md` - Input component48 - `examples/components/form.md` - Form component49 - `examples/components/list.md` - List component50 - `examples/components/card.md` - Card component51 - `examples/components/modal.md` - Modal component52 - `examples/components/picker.md` - Picker component53 - `examples/components/date-picker.md` - DatePicker component54 - `examples/components/tabs.md` - Tabs component55 - `examples/components/pull-to-refresh.md` - PullToRefresh component56 - `examples/components/infinite-scroll.md` - InfiniteScroll component57 - `examples/components/icon.md` - Icon component58 - `examples/components/badge.md` - Badge component59 - `examples/components/tag.md` - Tag component60 - `examples/components/avatar.md` - Avatar component61 - `examples/components/image.md` - Image component62 - `examples/components/image-viewer.md` - ImageViewer component63 - `examples/components/nav-bar.md` - NavBar component64 - `examples/components/tab-bar.md` - TabBar component65 - `examples/components/index-bar.md` - IndexBar component66 - `examples/components/side-bar.md` - SideBar component67 - `examples/components/dialog.md` - Dialog component68 - `examples/components/toast.md` - Toast component69 - `examples/components/action-sheet.md` - ActionSheet component70 - `examples/components/popup.md` - Popup component71 - `examples/components/loading.md` - Loading component72 - `examples/components/error-block.md` - ErrorBlock component73 - `examples/components/empty.md` - Empty component74 - `examples/components/notice-bar.md` - NoticeBar component75 - `examples/components/mask.md` - Mask component76 - `examples/components/textarea.md` - Textarea component77 - `examples/components/switch.md` - Switch component78 - `examples/components/checkbox.md` - Checkbox component79 - `examples/components/radio.md` - Radio component80 - `examples/components/stepper.md` - Stepper component81 - `examples/components/rate.md` - Rate component82 - `examples/components/slider.md` - Slider component83 - `examples/components/uploader.md` - Uploader component84 - `examples/components/grid.md` - Grid component85 - `examples/components/swiper.md` - Swiper component86 - `examples/components/cascader.md` - Cascader component87 - `examples/components/search-bar.md` - SearchBar component88 - `examples/components/virtual-input.md` - VirtualInput component89 - `examples/components/divider.md` - Divider component90 - `examples/components/space.md` - Space component91 - `examples/components/safe-area.md` - SafeArea component92 - `examples/advanced/theme-customization.md` - Theme customization93 - `examples/advanced/internationalization.md` - Internationalization94954. **Follow the specific instructions** in that example file for syntax, structure, and best practices96975. **Reference the API documentation** when needed:98 - `api/components.md` - Component API reference99 - `api/config-provider.md` - ConfigProvider API1001016. **Use templates** for quick start:102 - `templates/project-setup.md` - Project setup templates103 - `templates/component-template.md` - Component usage templates104105106### Doc mapping (one-to-one with official documentation)107108**Guide (指南)**:109- See guide files in `examples/guide/` or `examples/getting-started/` → https://ant-design-mobile.antgroup.com/zh/guide/quick-start110111**Components (组件)**:112- See component files in `examples/components/` → https://ant-design-mobile.antgroup.com/zh/components/button113114## Examples and Templates115116This skill includes detailed examples organized to match the official documentation structure. All examples are in the `examples/` directory (see mapping above).117118**To use examples:**119- Identify the topic from the user's request120- Load the appropriate example file from the mapping above121- Follow the instructions, syntax, and best practices in that file122- Adapt the code examples to your specific use case123124**To use templates:**125- Reference templates in `templates/` directory for common scaffolding126- Adapt templates to your specific needs and coding style127128## API Reference129130- **Components API**: `api/components.md` - All component props and APIs131- **ConfigProvider API**: `api/config-provider.md` - ConfigProvider component API and global configuration132133## Best Practices1341351. **Import styles**: Import Ant Design Mobile CSS in your entry file1362. **Use ConfigProvider**: Wrap your app with ConfigProvider for global configuration1373. **Mobile-first**: Design for mobile devices first1384. **Touch interactions**: Consider touch gestures and interactions1395. **Performance**: Optimize for mobile performance1406. **Responsive design**: Test on different screen sizes1417. **Accessibility**: Follow mobile accessibility guidelines1428. **Theme customization**: Use design tokens for consistent theming1439. **Internationalization**: Use ConfigProvider with locale for i18n14410. **Component composition**: Compose components for complex UIs145146## Resources147148- **Official Website**: https://ant-design-mobile.antgroup.com/149- **Getting Started**: https://ant-design-mobile.antgroup.com/zh/guide/quick-start150- **Components**: https://ant-design-mobile.antgroup.com/zh/components/button151- **GitHub Repository**: https://github.com/ant-design/ant-design-mobile152153## Keywords154155Ant 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, 移动端, 组件库, 按钮, 输入框, 表单, 列表, 卡片, 对话框, 选择器, 日期选择器, 标签页, 下拉刷新, 无限滚动
diegosouzapw