ant-design-mobile

Name: ant-design-mobile
Author: partme-ai

github.com/partme-aiDesign & UI71688 installsUpdated 3w ago

About ant-design-mobile

ant-design-mobile is a component guide for developers building React mobile applications. It provides examples and API references for mobile UI, touch interactions, theming, and internationalization.

Key features

01Mobile UI component examples
02Forms and data-entry components
03Pull-to-refresh and infinite scroll
04ConfigProvider i18n and theming
05CSS variable theme customization

Use cases

01Build interfaces for React mobile apps
02Implement form validation and notifications
03Add pull-to-refresh or infinite scrolling
04Configure app locale and theme styles

Install

Copy the command and run it in a terminal.

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

After installing, type/ant-design-mobilein Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

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

notice-bar.md

Details

From the project README

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

Comments

Markdown supported