teachingai/ant-design-mobile
skills/antd-skills/ant-design-mobile/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add teachingai/agent-skills ant-design-mobileInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 10, 2026, 8:43 AM9.9s56 files scanned
SKILL.md
- 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
- Install -
npm install antd-mobileand import CSS - Choose components - Match the UI need to the component from the reference below
- Load the example file - Each component has a detailed example in
examples/components/ - Customize theme - Use ConfigProvider or CSS variables for theming
Quick-Start Example: Mobile Form with Validation
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 APIsapi/config-provider.md- Global configuration and theming
Best Practices
- Import CSS first - Add
import 'antd-mobile/es/global'in your entry file - Wrap with ConfigProvider - Set locale and theme at the app root
- Use CSS variables for theming - Override
--adm-color-primaryetc. for custom branding - Tree-shake imports - Import individual components (
import { Button } from 'antd-mobile') for smaller bundles - 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
Related Skills
teachingai/nextjs
development
VerifiedTrustedCommunity
Guidance for Next.js using the official docs at nextjs.org/docs. Use when the user needs Next.js concepts, configuration, routing, data fetching, or API reference details.
284SKILL.mdUpdated Apr 14, 2026
teachingai/flask
tools
VerifiedTrustedCommunity
Provides comprehensive guidance for Flask framework including routing, templates, forms, database integration, extensions, and deployment. Use when the user asks about Flask, needs to create web applications, implement routes, or build Python web services.
284SKILL.mdUpdated Apr 14, 2026
teachingai/fastapi
development
VerifiedTrustedCommunity
Provides comprehensive guidance for FastAPI framework including routing, request validation, dependency injection, async operations, OpenAPI documentation, and database integration. Use when the user asks about FastAPI, needs to create REST APIs, or build high-performance Python web services.
284SKILL.mdUpdated Apr 14, 2026
teachingai/django
development
VerifiedTrustedCommunity
Provides comprehensive guidance for Django framework including models, views, templates, forms, admin, REST framework, and deployment. Use when the user asks about Django, needs to create web applications, implement models and views, or build Django REST APIs.
284SKILL.mdUpdated Apr 14, 2026