ant-design-mobile

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.

261 stars

bypartme-ai

View on GitHub Installation ↓

Best use case

ant-design-mobile is best used when you need a repeatable AI agent workflow instead of a one-off prompt. It is especially useful for teams working in multi. 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.

Users should expect a more consistent workflow output, faster repeated execution, and less time spent rewriting prompts from scratch.

Practical example

Example input

Use the "ant-design-mobile" skill to help with this workflow task. Context: 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.

Example output

A structured workflow result with clearer steps, more consistent formatting, and an output that is easier to reuse in the next run.

When to use this skill

Use this skill when you want a reusable workflow rather than writing the same prompt again and again.

When not to use this skill

Do not use this when you only need a one-off answer and do not need a reusable workflow.
Do not use it if you cannot install or maintain the related files, repository context, or supporting tools.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/ant-design-mobile/SKILL.md --create-dirs "https://raw.githubusercontent.com/partme-ai/full-stack-skills/main/skills/antd-skills/ant-design-mobile/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/ant-design-mobile/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How ant-design-mobile Compares

Feature / Agent	ant-design-mobile	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

## 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

1. **Install** - `npm install antd-mobile` and import CSS
2. **Choose components** - Match the UI need to the component from the reference below
3. **Load the example file** - Each component has a detailed example in `examples/components/`
4. **Customize theme** - Use ConfigProvider or CSS variables for theming

### Quick-Start Example: Mobile Form with Validation

```tsx
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

1. **Import CSS first** - Add `import 'antd-mobile/es/global'` in your entry file
2. **Wrap with ConfigProvider** - Set locale and theme at the app root
3. **Use CSS variables for theming** - Override `--adm-color-primary` etc. for custom branding
4. **Tree-shake imports** - Import individual components (`import { Button } from 'antd-mobile'`) for smaller bundles
5. **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

course-designer

261

from partme-ai/full-stack-skills

Design structured courses including syllabi, learning objectives using Bloom's taxonomy, lesson plans, and assessment rubrics. Use when the user asks about course design, needs to create a curriculum, write learning objectives, structure educational modules, or build assessment plans.

tauri-mobile

261

from partme-ai/full-stack-skills

Set up Tauri v2 for Android and iOS development including build configuration, bundle identifiers, and mobile debugging. Use when adding mobile targets to a Tauri app, configuring Android/iOS bundle IDs, or debugging on mobile devices and emulators.

stitch-ui-designer

261

from partme-ai/full-stack-skills

Master orchestrator for end-to-end Stitch UI design and generation. Use when the user asks to design, create, or make a UI screen using Stitch. Coordinates design spec generation, framework contract injection, prompt assembly, and MCP execution (create_project, generate_screen_from_text, get_screen) in a single workflow.

stitch-ui-design-variants

261

from partme-ai/full-stack-skills

Generate alternative Stitch design variant prompts for A/B testing and creative exploration. Use when the user wants multiple style, layout, or content options for a Stitch screen. Takes a base Design Spec or prompt and produces 3 distinct variants (layout, style, or content variations).

stitch-ui-design-spec-vant

261

from partme-ai/full-stack-skills

Vant 4 (Vue 3/Mobile) design spec for Stitch screen generation. Use when the user mentions Vant, vant4, or vant-ui in a Stitch design request. Outputs a hard-constraints prefix with Vant tokens (Primary #1989fa, van-button/van-field/van-nav-bar components, mobile-first 375px) or a CONTRACT_SELECTION_JSON_V1 selector.

stitch-ui-design-spec-uviewpro

261

from partme-ai/full-stack-skills

uView Pro (uni-app/Vue 3) design spec for Stitch screen generation. Use when the user mentions uview-pro, uviewpro, or uview 3.0 in a Stitch design request. Outputs a hard-constraints prefix with uView Pro tokens (Primary #3c9cff, rpx units, u-button/u-form/u-navbar components, script setup) or a CONTRACT_SELECTION_JSON_V1 selector.

stitch-ui-design-spec-uview

261

from partme-ai/full-stack-skills

uView 2.0 (uni-app/Vue 2) design spec for Stitch screen generation. Use when the user mentions uview, uview2, or u-view in a Stitch design request. Do NOT use for uView Pro requests. Outputs a hard-constraints prefix with uView 2 tokens (Primary #3c9cff, u-row/u-col/u-button components) or a CONTRACT_SELECTION_JSON_V1 selector.

stitch-ui-design-spec-layui

261

from partme-ai/full-stack-skills

Layui-Vue design spec for Stitch screen generation. Use when the user mentions Layui, layui-vue, or layui admin in a Stitch design request. Outputs a hard-constraints prefix with Layui tokens (Primary #16baaa, Nav-bg #393D49, layui-btn/input/card components) or a CONTRACT_SELECTION_JSON_V1 selector with assembled prompt.

stitch-ui-design-spec-generator

261

from partme-ai/full-stack-skills

Translate user requirements into a structured Stitch Design Spec JSON covering theme, primaryColor, font, roundness, density, designMode, styleKeywords, and deviceType. Use when starting a new Stitch design task to determine visual direction before prompt assembly. Supports one-shot user requests and PRD documents as input.

stitch-ui-design-spec-element-plus

261

from partme-ai/full-stack-skills

Element Plus design spec for Stitch screen generation. Use when the user mentions Element Plus, element-ui, or el-plus in a Stitch design request. Outputs a hard-constraints prefix with Element Plus tokens (colors, typography, radius, el-* components) or a CONTRACT_SELECTION_JSON_V1 selector with assembled prompt.

stitch-ui-design-spec-bootstrap

261

from partme-ai/full-stack-skills

Bootstrap-Vue (Bootstrap 5/Vue) design spec for Stitch screen generation. Use when the user mentions Bootstrap, bootstrap-vue, bs-vue, or bs5 in a Stitch design request. Outputs a hard-constraints prefix with Bootstrap tokens (Primary #0d6efd, b-container/b-row/b-col/b-button components, mobile-first grid) or a CONTRACT_SELECTION_JSON_V1 selector.

stitch-design-md

261

from partme-ai/full-stack-skills

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md. Use when the user wants to extract a style guide, create visual consistency across Stitch screens, or document design tokens (colors, typography, spacing) from existing Stitch designs. Retrieves screens via Stitch MCP and outputs a markdown design system file.