Taro UI Guide

What it does

When your agent uses it

• Integrating taro-ui into a Taro project
• Choosing and combining At components and checking their props
• Customizing the theme, internationalization or on-demand style loading
• Developing or fixing components in the taro-ui repository

Example prompts

• “Add taro-ui to my Taro 3 project and import only the button and modal styles.”
• “Build a settings page with AtList, AtListItem and AtSwitch.”
• “My taro-ui page renders blank on H5. Check the Taro config.”

Requirements

• A Taro project
• react and react-dom 16.13 or later

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

1. 1globalClass：在 Page 级 SCSS 用 .my-btn.at-button { } 覆盖（自定义组件内无效）。
2. 2customStyle：仅部分组件支持，优先用前两种方式。

What it can do on your machine

Read from SKILL.md and the folder at commit d065330. It shows what the files ask for, not the result of running them.

• Tool permissions

  Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

  From allowed-tools in the SKILL.md frontmatter.

• Runs code

  Shell commands in SKILL.md call:

  • pnpm

  From the folder's file list and the shell code blocks in SKILL.md.

• Network

  Links to these hosts (documentation or services it may open):

  • jd-opensource.github.io

  From URLs in SKILL.md, links to its own repository left out.

• Credentials

  Names no API keys, tokens, secrets or passwords.

  From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Taro UI Guide loads about 1.3k tokens when it runs, and up to ~14k if it reads all its reference files. Until then it costs about 59 tokens; SKILL.md has 252 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it

~59

When it runs · the whole SKILL.md, loaded when a task matches

~1.3k

With references · SKILL.md plus every file in references/, read only if the agent opens them

~14k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from jd-opensource/taro-ui at commit d065330, republished under its MIT licence (© jd-opensource). 252 words, ~1,325 tokens.

name

taro-ui-guide

description

Guides installation, Taro config, styling, and usage of taro-ui (At* components) for WeChat/Alipay/H5/RN. Use when building Taro apps with taro-ui, picking components, theming, i18n, or modifying packages/taro-ui source.

pnpm add taro-ui
# 或 npm install taro-ui@latest

h5: {
  esnextModules: ['taro-ui']
}

compiler: {
  type: 'webpack5',
  prebundle: {
    exclude: ['taro-ui']
  }
}

import 'taro-ui/dist/style/index.scss'

@import 'taro-ui/dist/style/index.scss';

@import 'taro-ui/dist/style/components/button.scss';

// 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']

import { View } from '@tarojs/components'
import { AtButton } from 'taro-ui'

export default function Page() {
  return (
    <View>
      <AtButton type="primary" onClick={() => {}}>
        按钮
      </AtButton>
    </View>
  )
}

import Taro from '@tarojs/taro'
import { AtMessage } from 'taro-ui'

// render 中: <AtMessage />
Taro.atMessage({ message: '提示', type: 'success', duration: 3000 })
// type: info | success | error | warning

import { ConfigProvider, AtLoadMore, enUS } from 'taro-ui'

export default function App({ children }) {
  return (
    <ConfigProvider locale={enUS}>
      {children}
    </ConfigProvider>
  )
}

$color-brand: #6190e8;
@import 'taro-ui/dist/style/index.scss';

pnpm install          # 根目录，仅允许 pnpm
pnpm build:ui         # 构建 packages/taro-ui → dist/
pnpm --filter demo dev:h5
pnpm --filter demo dev:weapp
pnpm --filter docs dev

© jd-opensource, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 48 other files (references) in packages/taro-ui-guide of jd-opensource/taro-ui.

• SKILL.md
• references/README.md
• references/accordion.md
• references/action-sheet.md
• references/activity-indicator.md
• references/avatar.md
• references/badge.md
• references/button.md
• references/calendar.md
• references/card.md
• references/checkbox.md
• references/config-provider.md
• references/countdown.md
• references/curtain.md
• references/divider.md
• references/drawer.md
• references/fab.md
• references/float-layout.md
• references/form.md
• references/grid.md
• … and 29 more

Open the folder on GitHubat commit d065330