Taro UI is a user-interface component library built for the Taro framework, allowing the same components to run in WeChat, Alipay, and Baidu mini-programs, H5 pages, and React Native. It is for developers building applications across these platforms from a shared codebase. The catalogue includes a skill that adds AI-oriented support for using Taro UI.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/jd-opensource/taro-ui/taro-ui-guidenpx skills add jd-opensource/taro-ui --skill taro-ui-guidegit clone --depth 1 https://github.com/jd-opensource/taro-uiWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/jd-opensource/taro-ui/taro-ui-guide)<a href="https://agentmods.dev/skills/jd-opensource/taro-ui/taro-ui-guide"><img src="https://agentmods.dev/badge/skills/jd-opensource/taro-ui/taro-ui-guide.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00066 | $0.02085 |
| Opus 5 | $0.00033 | $0.01043 |
| Sonnet 5 | $0.00013 | $0.00417 |
| Haiku 4.5 | $0.00007 | $0.00209 |
Grade A, and why
taro-ui-guide scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 5d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 235 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Taro UI 使用指南
基于 Taro 3+ 的多端 React 组件库。组件均以 At 前缀导出（如 AtButton），样式与逻辑分离，需单独引入 SCSS。
官方文档：https://jd-opensource.github.io/taro-ui/#/
源码：packages/taro-ui/（本 monorepo）
何时使用本 Skill
- 在 Taro 项目中集成、配置或排查 taro-ui
- 选择/组合组件、查 Props、写示例页面
- 自定义主题、国际化、按需加载
- 在本仓库内开发/修复
packages/taro-ui组件
版本与安装
| Taro 版本 | taro-ui 版本 |
|---|---|
| < 3 | [email protected] |
| ≥ 3 | taro-ui@latest（当前 monorepo 为 3.x） |
pnpm add taro-ui
# 或 npm install taro-ui@latest
Peer 依赖：@tarojs/taro、@tarojs/components、@tarojs/react、react、react-dom（≥16.13）。RN 端另需 react-native、react-native-modal（可选）。
微信小程序需基础库 ≥ 2.2.3（globalClass 与样式穿透）。
Taro 项目必配项
在消费方项目的 config/index.ts（或 config/index.js）中：
1. H5 编译 node_modules 中的 taro-ui
h5: {
esnextModules: ['taro-ui']
}
2. Taro 3.5+ 关闭对 taro-ui 的 prebundle（否则 @tarojs/components 可能未打进 bundle，页面异常）
compiler: {
type: 'webpack5',
prebundle: {
exclude: ['taro-ui']
}
}
样式引入
样式在 taro-ui/dist/style/，不会随 JS 自动注入，必须显式引入。
全量（开发/原型）
入口或 app.scss：
import 'taro-ui/dist/style/index.scss'
@import 'taro-ui/dist/style/index.scss';
按需（推荐生产）
页面/全局 SCSS 按组件名引入（AtButton → button.scss）：
@import 'taro-ui/dist/style/components/button.scss';
或用 babel-plugin-import（见 docs/docs/guide/quickstart.md）：
// babel.config.js plugins
['import', {
libraryName: 'taro-ui',
customName: name => `taro-ui/lib/components/${name.slice(3)}`,
customStyleName: name => `taro-ui/dist/style/components/${name.slice(3)}.scss`
}, 'taro-ui']
At 前缀去掉后即为目录名：AtActionSheet → action-sheet。
组件使用模式
基础引入
import { View } from '@tarojs/components'
import { AtButton } from 'taro-ui'
export default function Page() {
return (
<View>
<AtButton type="primary" onClick={() => {}}>
按钮
</AtButton>
</View>
)
}
公共 Props（AtComponent）
多数组件支持：
| Prop | 说明 |
|---|---|
className |
外层类名（小程序可用 globalClass 覆盖内部 BEM 类） |
customStyle |
内联样式，string 或 CSSProperties |
children |
子节点 |
What ships with it
48 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
- references/accordion.md 921 B
- references/action-sheet.md 878 B
- references/activity-indicator.md 846 B
- references/avatar.md 885 B
- references/badge.md 641 B
- references/button.md 902 B
- references/calendar.md 1.4 KB
- references/card.md 994 B
- references/checkbox.md 671 B
- references/config-provider.md 740 B
- references/countdown.md 1.1 KB
- references/curtain.md 765 B
- references/divider.md 791 B
- references/drawer.md 830 B
- references/fab.md 604 B
- references/float-layout.md 1.4 KB
- references/form.md 914 B
- references/grid.md 739 B
- references/icon.md 619 B
- references/image-picker.md 1.4 KB
- references/indexes.md 960 B
- references/input-number.md 1.2 KB
- references/input.md 2.3 KB
- references/list.md 1.3 KB
- references/load-more.md 1.1 KB
- references/loading.md 512 B
- references/message.md 786 B
- references/modal.md 1.2 KB
- references/nav-bar.md 1.3 KB
- references/noticebar.md 1.0 KB
- references/pagination.md 790 B
- references/progress.md 765 B
- references/radio.md 835 B
- references/range.md 1.1 KB
- references/rate.md 952 B
- references/README.md 2.9 KB
- references/search-bar.md 1.3 KB
- references/segmented-control.md 1.1 KB
- references/slider.md 1.1 KB
- references/steps.md 853 B
- references/swipe-action.md 1.2 KB
- references/switch.md 850 B
- references/tab-bar.md 1.0 KB
- references/tabs.md 1.6 KB
- references/tag.md 820 B
- references/textarea.md 2.4 KB
- references/timeline.md 714 B
- references/toast.md 1.1 KB
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 5d ago First seen · 235 lines · 66 tokens per session scan A fc1f6551efc4
taro-ui-guide is a skill published in the GitHub repository jd-opensource/taro-ui (4,730 stars, last pushed 1mo ago), licensed MIT. It adds 66 tokens to every session and 2,085 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
phone-ui-demos
把产品/知识点/文案做成"手机系统 UI 风格"的电影化网页演示动画——观众像在看一台真手机的精心编排录屏：锁屏通知、聊天、设置页、控制中心、App 界面逐镜头呈现，HyperOS/MIUI 级手感动效 + 虚拟时钟播放器，可全屏录屏当成片。只要用户提到：手机 UI 演示、手机录屏风格动画、App 演示网页、把产品做成手机里的演示、锁屏通知动画、系统 UI 风格演示页、或要求改造升级一批手机风格演示页——就用本 Skill。内容完全开放不设限：任何产品功能、课程知识、科普叙事都能转译成"手机里发生的事"。.
react-native-expert
Expert in React Native, cross-platform mobile development, native modules, and performance optimization. Use when the user mentions mobile, JavaScript, TypeScript, cross platform, iOS, or Android, or when the task involves React Native Architecture, Component Types, Hooks Essentials, or Navigation.
mini-program-engineering-suite
Orchestrate evidence-first engineering for WeChat and other mini programs from a vague idea or existing repository through project discovery, product specification, architecture, implementation, debugging, device adaptation, verification, and release readiness. Use when users ask to build a mini program from zero to…
mini-program-ui-device-skill
Design, preview, implement, and assess mini-program interfaces against an approved prototype, screenshot, visual reference, design system, or bounded UI request while preserving product semantics and existing accepted behavior. Use when users ask to reproduce a mini-program screen, refine visual hierarchy, adapt…
mini-program-verification-skill
Verify mini-program implementations and fixes with risk-calibrated evidence across static checks, unit tests, integration tests, state matrices, simulators, real devices, cloud environments, and release artifacts. Use when users ask to test, validate, accept, regression-check, quality-check, confirm readiness, or…
wechat-mini-program-platform-skill
Analyze WeChat Mini Program platform constraints and evidence layers for an idea or existing repository, including source configuration, build output, WeChat DevTools loading, device behavior, permissions, privacy declarations, cloud or backend linkage, upload, trial, review, and production status. Use when users ask…