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 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/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<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="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.5 | $0.00026 | $0.00834 |
| Sonnet 5.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 1mo 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.
- 1mo 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 25d ago), licensed MIT. It adds 66 tokens to every session and 2,085 once invoked, about $0.0003 per session on Opus 5.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
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.
react-native-docs
Comprehensive React Native reference covering core components, APIs, styling, flexbox, navigation, networking, animations, platform-specific code, debugging, performance, TypeScript integration, Fast Refresh, environment setup, React fundamentals, running on devices, and the New Architecture (Fabric, JSI…
react-native-developer
Build production React Native apps with Expo or bare workflow. Covers navigation, state management, native modules, performance, and deployment.
rn-data-fetching
Expert guidance on TanStack Query v5 in React Native -- queries, mutations, optimistic updates, polling, retries, and offline behavior. Use when asked about data fetching, caching, or server state.
class-to-hooks
Guidance on migrating legacy React Native class components to function components with hooks. Use when asked to modernize, refactor, or remove class components.
rn-navigation
Expert guidance on React Navigation 7 with native-stack, typed routes, deep links, and tab+stack composition. Use when asked about navigation, routing, deep linking, or screen typing.