ant-design-mobile Skill

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-mobile and 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 APIs
api/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-primary etc. 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

Agent Skills: ant-design-mobile

Install this agent skill to your local

Skill Files