研究检索需要联网github未标认证来源可访问clear审计未展示

ant-design-mobile（蚂蚁设计手机）

Agent Skill

用于辅助界面设计、视觉规范、排版、配色、布局和交互体验优化。它适合让 Agent 根据产品场景整理页面结构、生成 UI 方案、检查视觉一致性或改进组件层级。使用时需要结合现有品牌、设计系统和用户任务，不应只堆装饰元素；涉及真实页面改动时，应通过截图或浏览器预览检查文本溢出、对齐和响应式表现。

总安装

428

周安装

GitHub Stars

公开资料未说明

下载量

150

CodexClaudeCursorGemini CLI

安装说明

本站只整理中文说明和来源信息，不托管安装包，也不代用户安装。

GitHub

来源数

许可证

MIT

最后核验

2026-05-01

来源状态

来源可访问

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手，先确认命令和权限，再让它执行。

请帮我安装这个 Agent Skill：ant-design-mobile（蚂蚁设计手机）
来源仓库：https://github.com/teachingai/agent-skills
仓库路径：skills/ant-design-mobile
安装命令：
npx skills add teachingai/agent-skills --skill "ant-design-mobile"
安装前请先检查当前环境是否支持对应 CLI，并向我确认将要执行的命令、安装目录、联网范围和文件读写权限；确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill；本站只展示命令，不托管安装包，也不自动执行。

AgentSkills.tonpx skills

npx skills add teachingai/agent-skills --skill "ant-design-mobile"

简介

ant-design-mobile 是专为移动端优化的 React 组件库，涵盖基础控件和复杂业务场景解决方案。

适合 H5 应用或混合 App 开发，提供手势交互、懒加载和性能优化内置支持。
通过 props 灵活配置组件行为，如 TabBar 切换动画、Modal 弹出层层级管理等。
安装需配合 React 16.8+ 和现代构建工具（如 Vite），低版本浏览器可能缺少 polyfill 支持。
注意避免过度嵌套组件导致渲染性能下降，建议合理使用 shouldComponentUpdate 或 memo 优化。

SKILL.md

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 setup - examples/getting-started/basic-usage.md - Basic usage examples - examples/components/button.md - Button component - examples/components/input.md - Input component - examples/components/form.md - Form component - examples/components/list.md - List component - examples/components/card.md - Card component - examples/components/modal.md - Modal component - examples/components/picker.md - Picker component - examples/components/date-picker.md - DatePicker component - examples/components/tabs.md - Tabs component - examples/components/pull-to-refresh.md - PullToRefresh component - examples/components/infinite-scroll.md - InfiniteScroll component - examples/components/icon.md - Icon component - examples/components/badge.md - Badge component - examples/components/tag.md - Tag component - examples/components/avatar.md - Avatar component - examples/components/image.md - Image component - examples/components/image-viewer.md - ImageViewer component - examples/components/nav-bar.md - NavBar component - examples/components/tab-bar.md - TabBar component - examples/components/index-bar.md - IndexBar component - examples/components/side-bar.md - SideBar component - examples/components/dialog.md - Dialog component - examples/components/toast.md - Toast component - examples/components/action-sheet.md - ActionSheet component - examples/components/popup.md - Popup component - examples/components/loading.md - Loading component - examples/components/error-block.md - ErrorBlock component - examples/components/empty.md - Empty component - examples/components/notice-bar.md - NoticeBar component - examples/components/mask.md - Mask component - examples/components/textarea.md - Textarea component - examples/components/switch.md - Switch component - examples/components/checkbox.md - Checkbox component - examples/components/radio.md - Radio component - examples/components/stepper.md - Stepper component - examples/components/rate.md - Rate component - examples/components/slider.md - Slider component - examples/components/uploader.md - Uploader component - examples/components/grid.md - Grid component - examples/components/swiper.md - Swiper component - examples/components/cascader.md - Cascader component - examples/components/search-bar.md - SearchBar component - examples/components/virtual-input.md - VirtualInput component - examples/components/divider.md - Divider component - examples/components/space.md - Space component - examples/components/safe-area.md - SafeArea component - examples/advanced/theme-customization.md - Theme customization - examples/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 reference - api/config-provider.md - ConfigProvider API

Use templates for quick start:

- templates/project-setup.md - Project setup templates - templates/component-template.md - Component usage templates

Doc mapping (one-to-one with official documentation)

Guide (指南):

See guide files in examples/guide/ or examples/getting-started/ → https://ant-design-mobile.antgroup.com/zh/guide/quick-start

Components (组件):

See component files in examples/components/ → https://ant-design-mobile.antgroup.com/zh/components/button

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

Official Website: https://ant-design-mobile.antgroup.com/
Getting Started: https://ant-design-mobile.antgroup.com/zh/guide/quick-start
Components: https://ant-design-mobile.antgroup.com/zh/components/button
GitHub Repository: https://github.com/ant-design/ant-design-mobile

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, 移动端, 组件库, 按钮, 输入框, 表单, 列表, 卡片, 对话框, 选择器, 日期选择器, 标签页, 下拉刷新, 无限滚动

适合场景

用户想查找某类 Agent Skill 时

需要根据任务场景推荐可安装能力包时

需要对比不同来源的安装命令和来源信息时

需要参考平台分布和安装热度时

能力概览

能力 1

按任务关键词查找相关 Skills

能力 2

展示可复制的安装命令

能力 3

保留来源站点、仓库和原始说明，方便继续核验

能力 4

补充不同宿主或平台的使用分布数据

安装后应在对应宿主中按原始 README 的触发条件使用；具体调用方式请以来源页面和 README 为准。

平台分布

Claude Code

30.35%

按下载量换算46

OpenCode

22.94%

按下载量换算34

Antigravity

18.14%

按下载量换算27

Codex

13.27%

按下载量换算20

windsurf

8.32%

按下载量换算12

Gemini CLI

3.8%

按下载量换算6

安全审计

暂无安全审计结果可展示。

权限和风险

需要联网

该 Skill 可能需要联网访问来源站点、仓库或外部 API；具体网络访问范围需要结合源码和 README 复核。

安装前确认

本站仅展示第三方公开信息，不托管安装包，不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。当前只有一个来源，正式发布前建议补源仓库或其他目录站核验。

来源信息

GitHub 仓库

github.com

/teachingai/agent-skills

SKILL.md 来源

github.com

/teachingai/agent-skills/tree/main/skills/ant-design-mobile

agentskills-to

agentskills.to

/teachingai/agent-skills/ant-design-mobile

继续浏览同类 Skills

更多研究检索 Skills（73,675）返回 Skills 目录

上一个 Skill

ant-design-mini（蚂蚁设计迷你）

下一个 Skill

ant-design-react（ANT 设计 React）

用于辅助前端页面、组件、样式和交互逻辑的开发与维护。它适合让 Agent 生成或审查 React、Next.js、Vue、Tailwind、CSS 等相关代码，整理组件结构，或定位布局和性能问题。使用时需要结合项目现有设计系统、路由和构建方式，避免只生成孤立片段；涉及页面改动时，应配合本地预览和构建检查确认视觉效果。