diff --git a/packages/nutui-react-cli/CHANGELOG.md b/packages/nutui-react-cli/CHANGELOG.md new file mode 100644 index 0000000000..c47b57e4cc --- /dev/null +++ b/packages/nutui-react-cli/CHANGELOG.md @@ -0,0 +1,13 @@ +# Changelog + +本包版本号自 `4.0.0` 起与组件包 `@nutui/nutui-react` 对齐,便于未来支持多版本查询。 + +## v4.0.0 + +`2026-08-21` + +- :sparkles: 版本号对齐 `@nutui/nutui-react`(此前为独立的 `0.1.x`),同一大版本的 CLI 与组件库保持一致,为未来多版本支持奠定基础。 +- :sparkles: 离线知识查询 CLI:`list` / `info` / `doc` / `demo` / `token`,元数据随包分发,无需网络与 API Key。 +- :sparkles: 内置 stdio MCP Server(`mcp` 命令),暴露 5 个工具与 2 个 prompt,供 Claude Code / Cursor / VS Code / Codex 等 IDE 集成。 +- :sparkles: 随包分发 Skill:`nutui-react`(编写 / 调试 NutUI React 代码时查询组件知识)、`nutui-react-to-taro`(将 H5 代码迁移到 Taro)。 +- :sparkles: 每个 Skill 补充 `metadata.json`,声明版本、兼容性、触发词等元信息。 diff --git a/packages/nutui-react-cli/README.md b/packages/nutui-react-cli/README.md index faf8f29486..468995100f 100644 --- a/packages/nutui-react-cli/README.md +++ b/packages/nutui-react-cli/README.md @@ -105,6 +105,15 @@ npx skills add ./node_modules/@nutui/nutui-react-cli/skills/nutui-react 兼容 Claude Code / Cursor / VS Code / Codex 等所有支持 [skills](https://github.com/vercel-labs/skills) 协议的 Agent。安装后,Agent 在遇到 NutUI React 相关任务时会自动遵循「先查后写」的流程。 +### 迁移 Skill:H5 → Taro + +本包额外内置一份 [迁移 Skill](./skills/nutui-react-to-taro/SKILL.md),用于把使用 `@nutui/nutui-react`(H5)的项目迁移到 `@nutui/nutui-react-taro`(Taro 跨端 / 小程序)。它编排「包名/原生标签/样式单位/事件类型」等规则化改写,并同时调用本包与 `@nutui/nutui-react-taro-cli` 的 `info` 交叉核对两端 Props 差异(少数组件如 Uploader / Image 两端属性不同),对 Web API、canvas 等无法机械转换的场景给出重写指引。 + +```bash +npm i -D @nutui/nutui-react-cli +npx skills add ./node_modules/@nutui/nutui-react-cli/skills/nutui-react-to-taro +``` + ## 本地开发 ```bash diff --git a/packages/nutui-react-cli/package.json b/packages/nutui-react-cli/package.json index 3d050a3549..fc57ac82f4 100644 --- a/packages/nutui-react-cli/package.json +++ b/packages/nutui-react-cli/package.json @@ -1,6 +1,6 @@ { "name": "@nutui/nutui-react-cli", - "version": "0.1.1", + "version": "4.0.0", "type": "module", "description": "NutUI React 面向 AI Coding 的离线知识查询 CLI:list / info / doc / demo / token。", "keywords": [ diff --git a/packages/nutui-react-cli/skills/nutui-react-to-taro/SKILL.en.md b/packages/nutui-react-cli/skills/nutui-react-to-taro/SKILL.en.md new file mode 100644 index 0000000000..f1b65b541f --- /dev/null +++ b/packages/nutui-react-cli/skills/nutui-react-to-taro/SKILL.en.md @@ -0,0 +1,248 @@ +--- +name: nutui-react-to-taro +description: > + Use when migrating a project (or a code snippet) from NutUI React + (@nutui/nutui-react, H5) to NutUI React Taro (@nutui/nutui-react-taro, + mini-program / cross-platform Taro). Trigger scenarios such as "migrate NutUI + React to Taro", "make this H5 NutUI page run inside a mini-program", or + converting H5 NutUI components to the Taro runtime. The two packages share the + same set of components, and the vast majority map one-to-one — so the real + work is package-name / import rewrites, native-tag → Taro-component + replacement, style-unit fixes, and cross-checking the few components whose + props differ across the two ends. +allowed-tools: + - Bash(nutui-react *) + - Bash(nutui-react-taro *) + - Bash(npx -y @nutui/nutui-react-cli *) + - Bash(npx -y @nutui/nutui-react-taro-cli *) + - Bash(which nutui-react) + - Bash(which nutui-react-taro) +--- + +# NutUI React (H5) → NutUI React Taro migration + +You are responsible for migrating code from `@nutui/nutui-react` (H5) to +`@nutui/nutui-react-taro` (Taro mini-program / cross-platform). The two packages +are built from the **same codebase**, so nearly every component shares the same +name and largely the same props across both ends. This makes the migration +highly rule-based — but a few steps still require real judgment and cannot be +done with blind find-and-replace. + +Two CLIs back this work; both are offline, with metadata shipped alongside the packages: + +- `@nutui/nutui-react-cli` — **source-end** (H5) source of truth: `nutui-react info ` +- `@nutui/nutui-react-taro-cli` — **target-end** (Taro) source of truth: `nutui-react-taro info ` + +If a CLI is not on PATH, invoke it via npx (no install needed): + +```bash +which nutui-react || echo "use: npx -y @nutui/nutui-react-cli info --format json" +which nutui-react-taro || echo "use: npx -y @nutui/nutui-react-taro-cli info --format json" +``` + +**The most important habit: for every component you touch, diff its props with +both CLIs before rewriting.** Props are usually identical, but once they differ +(Uploader, Image, InputNumber, etc.) blindly copying them produces code that +silently fails on the mini-program. Always pass `--format json` and parse it. + +## Migration flow + +Execute the phases below in order. Do not skip the scan — it is what tells you which files are risky. + +### Phase 0 — Environment setup (project config, do this first) + +Migrated code can only run in Taro if the project is configured properly. The +authoritative source is NutUI's official "Getting Started" (start-react) docs. + +1. **Install dependencies** (ask the user for consent before running the install): + - `@nutui/nutui-react-taro`, `@nutui/icons-react-taro` + - `@tarojs/plugin-html` — **its version must match the project's Taro version** + - `babel-plugin-import` (only if the project needs on-demand imports) +2. **Modify `config/index.js`** — enable the HTML plugin and set the design size + so NutUI (a 375-based library) scales correctly: + ```js + config = { + plugins: ['@tarojs/plugin-html'], + designWidth(input) { + if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) return 375 + return 750 + }, + deviceRatio: { 640: 2.34 / 2, 750: 1, 828: 1.81 / 2, 375: 2 / 1 }, + } + ``` +3. **Import the global stylesheet at the app entry** (`app.tsx` / `app.ts`): + ```js + import '@nutui/nutui-react-taro/dist/style.css' + ``` + +You may edit `config/index.js` and the entry file directly. Confirm with the +user before installing dependencies. + +### Phase 1 — Scan and inventory + +Find all NutUI usage and flag high-risk files up front: + +```bash +# which files import the H5 package +grep -rn "@nutui/nutui-react\b\|@nutui/icons-react\b" src --include=*.tsx --include=*.ts + +# high-risk signals — these files need line-by-line human / AI judgment (see Phase 3): +grep -rln "\bAudio\b" src # Audio has no counterpart on the Taro end (see pitfalls) +grep -rln "document\.\|window\.\|localStorage\|URL.createObjectURL\|addEventListener" src +grep -rln "getElementById\|querySelector\|createElement\|canvas" src # canvas / DOM logic +``` + +List the components involved, then confirm each one exists on the Taro end: + +```bash +nutui-react-taro list --format json # confirm component names / spot the Audio gap +``` + +### Phase 2 — Mechanical rewrite (rules ①–④) + +Process each file with the rule table below. These are rule-based enough to do +quickly, but ② and ③ still need light judgment (see notes). + +### Phase 3 — Semantic rewrite and props cross-check (rules ⑤–⑥) + +For every high-risk file flagged in Phase 1, and every component you migrate: + +```bash +# diff props: what the H5 end has vs. what the Taro end accepts +nutui-react info Uploader --format json +nutui-react-taro info Uploader --format json +# for components needing a semantic rewrite (e.g. Signature), read the full Taro doc first +nutui-react-taro doc Signature --format json +``` + +Rewrite Web-only APIs into Taro APIs, remove / replace props the Taro end does +not accept, and handle the pitfalls below. + +### Phase 4 — Verification + +- Build the Taro target and confirm it compiles: e.g. + `taro build --type weapp --watch` (or `--type h5`). +- Manually re-check every high-risk file — **a passing compile does not mean** + the canvas / Web API rewrites behave correctly. +- Report which files were fully auto-migrated and which need user review. + +## Rule table (before → after) + +### ① Package names and imports — pure replacement + +```diff +- import { Button, Cell } from '@nutui/nutui-react' ++ import { Button, Cell } from '@nutui/nutui-react-taro' +- import { Dongdong } from '@nutui/icons-react' ++ import { Dongdong } from '@nutui/icons-react-taro' +``` + +### ② Native HTML tags → Taro components — replace + add import + +Taro has no DOM. Replace native tags and add the corresponding import from `@tarojs/components`. + +| H5 | Taro | Notes | +| --- | --- | --- | +| `
` | `` | block-level container | +| `

` | `` | | +| `` | `` or `` | **`` is for pure inline text only; use `` if it contains child elements** | +| `` | `` | | + +```diff ++ import { View } from '@tarojs/components' + setIsVisible(!isVisible)}> +- Basic usage +-

{val}
++ Basic usage ++ {val} + +``` + +### ③ Style units — bare px and logical properties + +- Bare numeric px must become strings: `margin: 8` → `margin: '8px'`. +- Mini-programs do not support logical properties: `marginInlineStart` → + `marginLeft`, `insetInlineStart` → `left`, etc. +- For values that need cross-device scaling, use `pxTransform(10)` imported from + `@nutui/nutui-react-taro` (returns an rpx-adapted length). + +```diff +- const marginStyle = { margin: 8 } ++ const marginStyle = { margin: '8px' } +``` + +### ④ Touch event types + +Mini-program touch events are not `MouseEvent`. Loosen the type and import +`ITouchEvent` from `@tarojs/components`. + +```diff ++ import { ITouchEvent } from '@tarojs/components' +- const testClick = (event: React.MouseEvent) => {} ++ const testClick = (event: React.MouseEvent | ITouchEvent) => {} +``` + +### ⑤ Web-only API → Taro API — requires reasoning, rewrite case by case + +The Taro runtime provides only a **limited emulation** of `window` / `document` / +DOM, and its coverage drifts by target version — **do not delete wholesale**. +Judge case by case: map to `@tarojs/taro` or the component's own capabilities +where possible; keep what the runtime genuinely supports (e.g. the async +`getBoundingClientRect`); delete only logic that truly cannot be migrated. Common +mappings: + +| H5 pattern | Taro replacement | +| --- | --- | +| `alert` / popping a toast via DOM | `Taro.showToast(...)` (`import Taro from '@tarojs/taro'`) | +| `URL.createObjectURL(file)` | pick the matching Taro chooser/upload API by file type (`Taro.chooseMedia` for images/video; check the `@tarojs/taro` docs for other types), then use its temp path — don't force video / audio / generic files through image picking | +| `document.createElement` + manual DOM manipulation | prefer component props / ref; when you genuinely need to touch nodes use APIs like `Taro.createSelectorQuery`, don't blindly delete the logic | +| `window.location` / route navigation | `Taro.navigateTo` / `Taro.redirectTo` | +| `localStorage` | `Taro.setStorageSync` / `Taro.getStorageSync` | +| `addEventListener('scroll')` | Taro page / scroll events or component props | + +### ⑥ Component prop differences — cross-check with both CLIs + +The vast majority of props are identical, but some components genuinely differ. +**Never assume — diff.** Confirmed examples (verify live at migration time, +versions drift): + +| Component | H5-only props | Taro-only props | Handling | +| --- | --- | --- | --- | +| `Uploader` | `accept`, `capture` | `mediaType`, `sizeType`, `sourceType`, `camera` | re-express the intent with Taro's file-picking props | +| `Image` | `fit`, `lazy`, `position`, `alt` | — | remove / remap (e.g. `fit` → check the CLI doc for `mode` semantics) | +| `InputNumber` | `select` | `type` | check the CLI doc | +| `Button` | — | (`openType`, `hoverClass` … are mini-program pass-through attrs) | add mini-program-specific props as needed | + +## Pitfalls (blind replacement gets these wrong) + +1. **`Audio` has no counterpart on the Taro end.** It only exists in the H5 + package. When a file uses NutUI's `Audio`, stop and tell the user — suggest + `Taro.createInnerAudioContext()` or a custom solution. Do not invent an + import out of thin air. +2. **Do not blindly replace every `document`.** Some components accept it as-is + — e.g. `Popup`'s `portal={document.body}` **stays unchanged** on the Taro end + (the component handles it). Judge by component semantics / CLI doc, not by grep. +3. **Canvas-based components (e.g. `Signature`) are a semantic rewrite.** The H5 + end often has hand-written DOM manipulation (`document.createElement('img')`, + appending to a node). On the Taro end, delete that DOM logic and use the + component's `canvasId` prop + ref methods. Read `nutui-react-taro doc + Signature` first. +4. **`` → `` or ``.** `` is inline and for pure text + only; wrapping child elements in `` breaks the layout. Use `` + when there are nested elements. + +## Core rules + +1. **Before rewriting each component, cross-check its props with `nutui-react + info ` and `nutui-react-taro info `.** This is the heart of the whole + migration — see rule ⑥. +2. **Always use `--format json`** — parse the structured output, do not regex + the text. +3. **Confirm the component exists on the Taro end** with `nutui-react-taro + list`; watch for the `Audio` gap. +4. **Rules ①–④ are mechanical; ⑤–⑥ and the pitfalls need judgment** — handle + the latter case by case, and flag anything that cannot be safely + auto-migrated for user review. Do not claim a file is fully migrated until + the Taro build compiles. +5. **Do the environment setup first** — migrating code is pointless if the + project cannot compile Taro + NutUI. diff --git a/packages/nutui-react-cli/skills/nutui-react-to-taro/SKILL.md b/packages/nutui-react-cli/skills/nutui-react-to-taro/SKILL.md new file mode 100644 index 0000000000..a4d9f3ead3 --- /dev/null +++ b/packages/nutui-react-cli/skills/nutui-react-to-taro/SKILL.md @@ -0,0 +1,195 @@ +--- +name: nutui-react-to-taro +description: > + 当需要把项目(或代码片段)从 NutUI React(@nutui/nutui-react,H5)迁移到 NutUI React Taro(@nutui/nutui-react-taro,小程序 / 跨端 Taro)时使用。触发场景如「把 NutUI React 迁移到 Taro」「让这个 H5 的 NutUI 页面能在小程序里跑」,或将 H5 的 NutUI 组件转换到 Taro 运行时。两个包共用同一套组件,绝大多数组件一一对应——真正的工作是包名 / import 改写、原生标签 → Taro 组件替换、样式单位修正,以及对少数两端 props 不同的组件做交叉核对。 +allowed-tools: + - Bash(nutui-react *) + - Bash(nutui-react-taro *) + - Bash(npx -y @nutui/nutui-react-cli *) + - Bash(npx -y @nutui/nutui-react-taro-cli *) + - Bash(which nutui-react) + - Bash(which nutui-react-taro) +--- + +# NutUI React(H5)→ NutUI React Taro 迁移 + +你负责把代码从 `@nutui/nutui-react`(H5)迁移到 `@nutui/nutui-react-taro`(Taro 小程序 / 跨端)。两个包由**同一套 codebase** 构建,因此几乎每个组件在两端都同名、props 也大体一致。这让迁移高度规则化——但仍有少数环节需要真正的判断,不能无脑查找替换。 + +有两个 CLI 支撑本工作,均离线、元数据随包分发: + +- `@nutui/nutui-react-cli` —— **源端**(H5)真值:`nutui-react info ` +- `@nutui/nutui-react-taro-cli` —— **目标端**(Taro)真值:`nutui-react-taro info ` + +若某个 CLI 不在 PATH 上,用 npx 调用(无需安装): + +```bash +which nutui-react || echo "use: npx -y @nutui/nutui-react-cli info --format json" +which nutui-react-taro || echo "use: npx -y @nutui/nutui-react-taro-cli info --format json" +``` + +**最重要的习惯:每碰一个组件,改写前先用两个 CLI 对比它的 props。** props 通常一致,但一旦不同(Uploader、Image、InputNumber 等),盲目照搬会产出在小程序上悄悄失效的代码。始终传 `--format json` 并解析它。 + +## 迁移流程 + +按序执行以下阶段。不要跳过扫描——正是它告诉你哪些文件有风险。 + +### 阶段 0 —— 环境准备(项目配置,最先做) + +迁移后的代码在 Taro 里跑起来的前提是项目已配置好。 + +1. **安装依赖**(执行安装前先征求用户同意): + - `@nutui/nutui-react-taro`、`@nutui/icons-react-taro` + - `@tarojs/plugin-html` —— **版本必须与项目的 Taro 版本一致** + - `babel-plugin-import`(仅当项目需要按需引入时) +2. **修改 `config/index.js`** —— 开启 HTML 插件并设置设计尺寸,让 NutUI 正确缩放: + ```js + config = { + plugins: ['@tarojs/plugin-html'], + designWidth(input) { + if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) return 375 + return 750 + }, + deviceRatio: { 640: 2.34 / 2, 750: 1, 828: 1.81 / 2, 375: 2 / 1 }, + } + ``` +3. **在应用入口引入全局样式**(`app.tsx` / `app.ts`): + ```js + import '@nutui/nutui-react-taro/dist/style.css' + ``` + +你可以直接改 `config/index.js` 和入口文件。安装依赖前请与用户确认。 + +### 阶段 1 —— 扫描盘点 + +找出所有 NutUI 用法,并在开头标记高风险文件: + +```bash +# 哪些文件 import 了 H5 包 +grep -rn "@nutui/nutui-react\b\|@nutui/icons-react\b" src --include=*.tsx --include=*.ts + +# 高风险信号——这些文件需要逐行的人工 / AI 判断(见阶段 3): +grep -rln "\bAudio\b" src # Audio 在 Taro 端无对应组件(见陷阱) +grep -rln "document\.\|window\.\|localStorage\|URL.createObjectURL\|addEventListener" src +grep -rln "getElementById\|querySelector\|createElement\|canvas" src # canvas / DOM 逻辑 +``` + +列出涉及的组件,再确认每个在 Taro 端都存在: + +```bash +nutui-react-taro list --format json # 确认组件名 / 发现 Audio 缺口 +``` + +### 阶段 2 —— 机械改写(规则 ①–④) + +按下方规则表逐文件处理。这些足够规则化、可快速完成,但 ② 和 ③ 仍需轻度判断(见备注)。 + +### 阶段 3 —— 语义改写与 props 交叉核对(规则 ⑤–⑥) + +对阶段 1 标记的每个高风险文件、以及你迁移的每个组件: + +```bash +# 对比 props:H5 端有哪些 vs. Taro 端接受哪些 +nutui-react info Uploader --format json +nutui-react-taro info Uploader --format json +# 需要语义改写的组件(如 Signature)先读完整 Taro 文档 +nutui-react-taro doc Signature --format json +``` + +把 Web-only API 改写成 Taro API,删除 / 替换 Taro 端不接受的 props,并处理下方陷阱。 + +### 阶段 4 —— 验证 + +- 构建 Taro 目标端并确认编译通过:如 `taro build --type weapp --watch`(或 `--type h5`)。 +- 手动复查每个高风险文件——**编译通过不代表** canvas / Web API 的改写行为正确。 +- 报告哪些文件已完全自动迁移、哪些需要用户复核。 + +## 规则表(改写前 → 改写后) + +### ① 包名与 import —— 纯替换 + +```diff +- import { Button, Cell } from '@nutui/nutui-react' ++ import { Button, Cell } from '@nutui/nutui-react-taro' +- import { Dongdong } from '@nutui/icons-react' ++ import { Dongdong } from '@nutui/icons-react-taro' +``` + +### ② 原生 HTML 标签 → Taro 组件 —— 替换 + 补 import + +替换原生标签并补上 `@tarojs/components` 的 import。 + +| H5 | Taro | 备注 | +| --- | --- | --- | +| `
` | `` | 块级容器 | +| `

` | `` | | +| `` | `` 或 `` | **`` 仅用于纯行内文本;若含子元素则用 ``** | +| `` | `` | | + +```diff ++ import { View } from '@tarojs/components' + setIsVisible(!isVisible)}> +- 基础用法 +-

{val}
++ 基础用法 ++ {val} + +``` + +### ③ 样式单位 —— 裸 px 与逻辑属性 + +- 裸数字 px 必须转成字符串:`margin: 8` → `margin: '8px'`。 +- 小程序不支持逻辑属性:`marginInlineStart` → `marginLeft`、`insetInlineStart` → `left` 等。 +- 需要跨设备缩放的值,用从 `@nutui/nutui-react-taro` 引入的 `pxTransform(10)`(返回按 rpx 适配的长度)。 + +```diff +- const marginStyle = { margin: 8 } ++ const marginStyle = { margin: '8px' } +``` + +### ④ 触摸事件类型 + +小程序的触摸事件不是 `MouseEvent`。放宽类型,并从 `@tarojs/components` 引入 `ITouchEvent`。 + +```diff ++ import { ITouchEvent } from '@tarojs/components' +- const testClick = (event: React.MouseEvent) => {} ++ const testClick = (event: React.MouseEvent | ITouchEvent) => {} +``` + +### ⑤ Web-only API → Taro API —— 需要推理,逐处改写 + +Taro 运行时对 `window` / `document` / DOM 只做了**受限模拟**,能力随目标版本漂移——**别一律删除**。逐处判断:能映射到 `@tarojs/taro` 或组件自身能力的就映射;运行时确实支持的(如异步版 `getBoundingClientRect`)保留;只有真正无法迁移的才删。常见映射: + +| H5 写法 | Taro 替代 | +| --- | --- | +| `alert` / 用 DOM 弹 toast | `Taro.showToast(...)`(`import Taro from '@tarojs/taro'`) | +| `document.createElement` + 手动 DOM 操作 | 优先用组件 props / ref 表达;确需操作节点时用 `Taro.createSelectorQuery` 等 API,勿盲目删逻辑 | +| `window.location` / 路由跳转 | `Taro.navigateTo` / `Taro.redirectTo` | +| `localStorage` | `Taro.setStorageSync` / `Taro.getStorageSync` | +| `addEventListener('scroll')` | Taro 页面 / 滚动事件或组件 props | + +### ⑥ 组件 props 差异 —— 用两个 CLI 交叉核对 + +绝大多数 props 一致,但有些组件确实不同。**永远不要假设,去 diff。** 已确认的例子(迁移时请实时核对,版本会漂移): + +| 组件 | 仅 H5 有的 props | 仅 Taro 有的 props | 处理 | +| --- | --- | --- | --- | +| `Uploader` | `accept`、`capture` | `mediaType`、`sizeType`、`sourceType`、`camera` | 用 Taro 的文件选择 props 重新表达意图 | +| `Image` | `fit`、`lazy`、`position`、`alt` | —— | 删除 / 重映射(如 `fit` → 查 CLI doc 看 `mode` 语义) | +| `InputNumber` | `select` | `type` | 查 CLI doc | +| `Button` | —— | (`openType`、`hoverClass` … 是小程序透传属性) | 按需补上小程序专属 props | + +## 陷阱(盲目替换会做错) + +1. **`Audio` 在 Taro 端无对应组件。** 它只存在于 H5 包。当某文件用到 NutUI 的 `Audio` 时,停下并告知用户——建议改用 `Taro.createInnerAudioContext()` 或自定义方案。不要凭空编一个 import。 +2. **不要盲目替换每一个 `document`。** 有些组件原样接受它——如 `Popup` 的 `portal={document.body}` 在 Taro 端**保持不变**(组件已处理)。按组件语义 / CLI doc 判断,而非按 grep。 +3. **canvas 类组件(如 `Signature`)是语义改写。** H5 端常有手写 DOM 操作(`document.createElement('img')`、往节点里 append)。在 Taro 端删掉那段 DOM 逻辑,改用组件的 `canvasId` prop + ref 方法。先读 `nutui-react-taro doc Signature`。 +4. **`` → `` 还是 ``。** `` 是行内、仅用于纯文本;把子元素包进 `` 会破坏布局。有嵌套元素时用 ``。 + +## 核心规则 + +1. **改写每个组件前,用 `nutui-react info ` 和 `nutui-react-taro info ` 交叉核对它的 props。** 这是整个迁移的核心——见规则 ⑥。 +2. **始终 `--format json`** —— 解析结构化输出,不要正则抓文本。 +3. **确认组件在 Taro 端存在**,用 `nutui-react-taro list`;留意 `Audio` 缺口。 +4. **规则 ①–④ 是机械的;⑤–⑥ 及陷阱需要判断** —— 后者逐处处理,对无法安全自动迁移的地方标记出来交用户复核。在 Taro 构建编译通过前,不要声称某文件已迁移完成。 +5. **先做环境准备** —— 若项目无法编译 Taro + NutUI,代码迁移就没有意义。 diff --git a/packages/nutui-react-cli/skills/nutui-react/SKILL.en.md b/packages/nutui-react-cli/skills/nutui-react/SKILL.en.md new file mode 100644 index 0000000000..ddbc3dfdac --- /dev/null +++ b/packages/nutui-react-cli/skills/nutui-react/SKILL.en.md @@ -0,0 +1,135 @@ +--- +name: nutui-react +description: > + Use when the user's task involves NutUI React (@nutui/nutui-react) — writing + NutUI React components, debugging NutUI issues, or querying NutUI component + APIs/props/docs/demos/design-tokens. Triggers on NutUI-related code, imports + from '@nutui/nutui-react', or explicit NutUI questions. NutUI React is JD's + lightweight mobile (H5) component library. +allowed-tools: + - Bash(nutui-react *) + - Bash(npx -y @nutui/nutui-react-cli *) + - Bash(which nutui-react) +--- + +# NutUI React CLI + +You have access to `@nutui/nutui-react-cli` — a local CLI tool with bundled NutUI React metadata (component props, full docs, runnable demos, and Design Tokens). Use it to query component knowledge before writing code. All data is offline and packaged with the CLI — no network and no API key needed. + +## Setup + +Before first use, check if the CLI is available. If not, invoke it via `npx` (no global install required): + +```bash +which nutui-react || echo "use: npx -y @nutui/nutui-react-cli " +``` + +Both forms work — use whichever is available: + +- Installed globally: `nutui-react info Button` +- Via npx (no install): `npx -y @nutui/nutui-react-cli info Button` + +Examples below use the `nutui-react` form for brevity. + +**Always pass `--format json` for structured output you can parse programmatically** (default output is human-readable `text`). + +## Scenarios + +### 1. Writing NutUI React component code + +Before writing any NutUI component code, look up its API first — don't rely on memory. + +```bash +# Check what props are available (grouped by table, e.g. Props / sub-component props) +nutui-react info Button --format json + +# Get a runnable demo as a starting point +nutui-react demo Button # list all demo names first +nutui-react demo Button demo1 --format json # then fetch one demo's source + +# Check component-level Design Tokens for theming (var(--nutui-*) system) +nutui-react token Button --format json +``` + +**Workflow:** `nutui-react info` → understand props → `nutui-react demo` → grab a runnable example → write code. + +### 2. Looking up full documentation + +When you need comprehensive component docs (not just the props table): + +```bash +nutui-react doc Cell --format json # full markdown docs (Chinese, default) +nutui-react doc Cell --lang en --format json # English docs +``` + +`--lang` accepts `zh` (default) or `en`. + +### 3. Exploring available components + +When the user is choosing which component to use, or you need to confirm a component exists before importing it: + +```bash +# List all components with Chinese name and version, grouped by category +nutui-react list --format json + +# Filter to a category (pass the category enName, e.g. base / feedback / nav) +nutui-react list --category feedback --format json +``` + +If you query a component name that doesn't exist, the CLI returns a "did you mean" suggestion (e.g. `Buttn` → `Button`) — use it to correct the name rather than guessing. + +### 4. Querying Design Tokens + +When customizing theme/colors/spacing, use the `var(--nutui-*)` token system rather than hardcoding values: + +```bash +# Global tokens (colors, spacing, radius, etc.) +nutui-react token --format json + +# Component-level tokens +nutui-react token Button --format json +``` + +### 5. Using as an MCP server + +If working in an IDE that supports MCP (Claude Code, Cursor, VS Code, Codex, etc.), the CLI can run as a local stdio MCP server, exposing the same knowledge-query capabilities as IDE-native tools: + +```json +{ + "mcpServers": { + "nutui-react": { + "command": "npx", + "args": ["-y", "@nutui/nutui-react-cli", "mcp"] + } + } +} +``` + +This provides 5 tools (`nutui_list`, `nutui_info`, `nutui_doc`, `nutui_demo`, `nutui_token`) and 2 prompts (`nutui-expert`, `nutui-page-generator`) via the MCP protocol. When these tools are available in the conversation, prefer calling them directly over shelling out to the CLI. + +## Commands + +| Command | Purpose | +| --- | --- | +| `nutui-react list [--category ]` | List all components (name / Chinese name / version), grouped by category | +| `nutui-react info ` | Component props table (prop / desc / type / default), grouped by table | +| `nutui-react doc [--lang zh\|en]` | Full component markdown docs (default Chinese) | +| `nutui-react demo [name]` | Omit `name` to list demos; pass `name` (e.g. `demo1`) for source | +| `nutui-react token [Component]` | Design Tokens — omit component for global tokens | +| `nutui-react mcp` | Start a local stdio MCP server for IDE integration | + +## Global Flags + +| Flag | Purpose | +| --- | --- | +| `--format, -f ` | Output format; agents should prefer `json` (default: `text`) | +| `--lang, -l ` | Doc language for `doc` / `mcp` (default: `zh`) | +| `--help, -h` | Show help | +| `--version, -v` | Print CLI version | + +## Key Rules + +1. **Always query before writing** — Don't guess NutUI APIs, prop names, or enum values from memory. Run `nutui-react info` (and `nutui-react demo` for a working example) first. +2. **Use `--format json`** — Every command supports it. Parse the JSON output rather than regex-matching the human-readable text. +3. **Confirm the component exists** — If unsure of the exact name, run `nutui-react list` or rely on the CLI's "did you mean" suggestion instead of importing a guessed name. +4. **Use Design Tokens for styling** — NutUI uses `nut-` flat BEM class names and the `var(--nutui-*)` token system. When customizing appearance, query `nutui-react token` and use tokens rather than hardcoding colors or spacing. diff --git a/packages/nutui-react-cli/skills/nutui-react/SKILL.md b/packages/nutui-react-cli/skills/nutui-react/SKILL.md index ddbc3dfdac..8b813f0400 100644 --- a/packages/nutui-react-cli/skills/nutui-react/SKILL.md +++ b/packages/nutui-react-cli/skills/nutui-react/SKILL.md @@ -1,11 +1,7 @@ --- name: nutui-react description: > - Use when the user's task involves NutUI React (@nutui/nutui-react) — writing - NutUI React components, debugging NutUI issues, or querying NutUI component - APIs/props/docs/demos/design-tokens. Triggers on NutUI-related code, imports - from '@nutui/nutui-react', or explicit NutUI questions. NutUI React is JD's - lightweight mobile (H5) component library. + 当用户的任务涉及 NutUI React(@nutui/nutui-react)时使用 —— 编写 NutUI React 组件、调试 NutUI 问题,或查询 NutUI 组件的 API/属性/文档/示例/设计变量(Design Token)。触发场景:与 NutUI 相关的代码、从 '@nutui/nutui-react' 导入,或明确的 NutUI 相关提问。NutUI React 是京东的轻量级移动端(H5)组件库。 allowed-tools: - Bash(nutui-react *) - Bash(npx -y @nutui/nutui-react-cli *) @@ -14,85 +10,85 @@ allowed-tools: # NutUI React CLI -You have access to `@nutui/nutui-react-cli` — a local CLI tool with bundled NutUI React metadata (component props, full docs, runnable demos, and Design Tokens). Use it to query component knowledge before writing code. All data is offline and packaged with the CLI — no network and no API key needed. +你可以使用 `@nutui/nutui-react-cli` —— 一个内置了 NutUI React 元数据(组件属性、完整文档、可运行示例和 Design Token)的本地 CLI 工具。在编写代码前用它查询组件知识。所有数据均为离线数据并随 CLI 一起打包 —— 无需联网,也无需 API Key。 -## Setup +## 准备工作 -Before first use, check if the CLI is available. If not, invoke it via `npx` (no global install required): +首次使用前,先检查该 CLI 是否可用。若不可用,可通过 `npx` 调用(无需全局安装): ```bash which nutui-react || echo "use: npx -y @nutui/nutui-react-cli " ``` -Both forms work — use whichever is available: +两种方式均可 —— 用哪种取决于哪种可用: -- Installed globally: `nutui-react info Button` -- Via npx (no install): `npx -y @nutui/nutui-react-cli info Button` +- 全局安装:`nutui-react info Button` +- 通过 npx(免安装):`npx -y @nutui/nutui-react-cli info Button` -Examples below use the `nutui-react` form for brevity. +下文示例为简洁起见统一使用 `nutui-react` 形式。 -**Always pass `--format json` for structured output you can parse programmatically** (default output is human-readable `text`). +**始终传入 `--format json` 以获得可编程解析的结构化输出**。 -## Scenarios +## 使用场景 -### 1. Writing NutUI React component code +### 1. 编写 NutUI React 组件代码 -Before writing any NutUI component code, look up its API first — don't rely on memory. +在编写任何 NutUI 组件代码前,先查询它的 API —— 不要依赖记忆。 ```bash -# Check what props are available (grouped by table, e.g. Props / sub-component props) +# 查看有哪些可用属性(按表格分组,例如 Props / 子组件属性) nutui-react info Button --format json -# Get a runnable demo as a starting point -nutui-react demo Button # list all demo names first -nutui-react demo Button demo1 --format json # then fetch one demo's source +# 获取一个可运行的示例作为起点 +nutui-react demo Button # 先列出所有示例名称 +nutui-react demo Button demo1 --format json # 再获取某个示例的源码 -# Check component-level Design Tokens for theming (var(--nutui-*) system) +# 查看组件级 Design Token 以便主题定制(var(--nutui-*) 体系) nutui-react token Button --format json ``` -**Workflow:** `nutui-react info` → understand props → `nutui-react demo` → grab a runnable example → write code. +**工作流:** `nutui-react info` → 理解属性 → `nutui-react demo` → 获取可运行示例 → 编写代码。 -### 2. Looking up full documentation +### 2. 查阅完整文档 -When you need comprehensive component docs (not just the props table): +当你需要完整的组件文档(而不仅仅是属性表)时: ```bash -nutui-react doc Cell --format json # full markdown docs (Chinese, default) -nutui-react doc Cell --lang en --format json # English docs +nutui-react doc Cell --format json # 完整的 Markdown 文档(默认中文) +nutui-react doc Cell --lang en --format json # 英文文档 ``` -`--lang` accepts `zh` (default) or `en`. +`--lang` 可取 `zh`(默认)或 `en`。 -### 3. Exploring available components +### 3. 浏览可用组件 -When the user is choosing which component to use, or you need to confirm a component exists before importing it: +当用户在挑选使用哪个组件,或你需要在导入前确认某个组件是否存在时: ```bash -# List all components with Chinese name and version, grouped by category +# 列出所有组件(含中文名与版本),按分类分组 nutui-react list --format json -# Filter to a category (pass the category enName, e.g. base / feedback / nav) +# 按分类筛选(传入分类的英文名,例如 base / feedback / nav) nutui-react list --category feedback --format json ``` -If you query a component name that doesn't exist, the CLI returns a "did you mean" suggestion (e.g. `Buttn` → `Button`) — use it to correct the name rather than guessing. +如果你查询的组件名称不存在,CLI 会返回「你是不是想找」的建议(例如 `Buttn` → `Button`)—— 用它来纠正名称,而不是靠猜。 -### 4. Querying Design Tokens +### 4. 查询 Design Token -When customizing theme/colors/spacing, use the `var(--nutui-*)` token system rather than hardcoding values: +在定制主题/颜色/间距时,使用 `var(--nutui-*)` 变量体系,而不是硬编码具体数值: ```bash -# Global tokens (colors, spacing, radius, etc.) +# 全局 Token(颜色、间距、圆角等) nutui-react token --format json -# Component-level tokens +# 组件级 Token nutui-react token Button --format json ``` -### 5. Using as an MCP server +### 5. 作为 MCP 服务器使用 -If working in an IDE that supports MCP (Claude Code, Cursor, VS Code, Codex, etc.), the CLI can run as a local stdio MCP server, exposing the same knowledge-query capabilities as IDE-native tools: +如果你在支持 MCP 的 IDE(Claude Code、Cursor、VS Code、Codex 等)中工作,该 CLI 可以作为本地 stdio MCP 服务器运行,以 IDE 原生工具的形式暴露相同的知识查询能力: ```json { @@ -105,31 +101,31 @@ If working in an IDE that supports MCP (Claude Code, Cursor, VS Code, Codex, etc } ``` -This provides 5 tools (`nutui_list`, `nutui_info`, `nutui_doc`, `nutui_demo`, `nutui_token`) and 2 prompts (`nutui-expert`, `nutui-page-generator`) via the MCP protocol. When these tools are available in the conversation, prefer calling them directly over shelling out to the CLI. +它通过 MCP 协议提供 5 个工具(`nutui_list`、`nutui_info`、`nutui_doc`、`nutui_demo`、`nutui_token`)和 2 个提示词(`nutui-expert`、`nutui-page-generator`)。当这些工具在对话中可用时,优先直接调用它们,而不是通过 shell 执行 CLI。 -## Commands +## 命令 -| Command | Purpose | +| 命令 | 用途 | | --- | --- | -| `nutui-react list [--category ]` | List all components (name / Chinese name / version), grouped by category | -| `nutui-react info ` | Component props table (prop / desc / type / default), grouped by table | -| `nutui-react doc [--lang zh\|en]` | Full component markdown docs (default Chinese) | -| `nutui-react demo [name]` | Omit `name` to list demos; pass `name` (e.g. `demo1`) for source | -| `nutui-react token [Component]` | Design Tokens — omit component for global tokens | -| `nutui-react mcp` | Start a local stdio MCP server for IDE integration | +| `nutui-react list [--category ]` | 列出所有组件(名称 / 中文名 / 版本),按分类分组 | +| `nutui-react info ` | 组件属性表(属性 / 说明 / 类型 / 默认值),按表格分组 | +| `nutui-react doc [--lang zh\|en]` | 组件完整 Markdown 文档(默认中文) | +| `nutui-react demo [name]` | 省略 `name` 列出示例;传入 `name`(如 `demo1`)获取源码 | +| `nutui-react token [Component]` | Design Token —— 省略组件名则返回全局 Token | +| `nutui-react mcp` | 启动本地 stdio MCP 服务器,供 IDE 集成 | -## Global Flags +## 全局参数 -| Flag | Purpose | +| 参数 | 用途 | | --- | --- | -| `--format, -f ` | Output format; agents should prefer `json` (default: `text`) | -| `--lang, -l ` | Doc language for `doc` / `mcp` (default: `zh`) | -| `--help, -h` | Show help | -| `--version, -v` | Print CLI version | +| `--format, -f ` | 输出格式;agent 应优先使用 `json`(默认:`text`) | +| `--lang, -l ` | `doc` / `mcp` 的文档语言(默认:`zh`) | +| `--help, -h` | 显示帮助 | +| `--version, -v` | 打印 CLI 版本 | -## Key Rules +## 核心规则 -1. **Always query before writing** — Don't guess NutUI APIs, prop names, or enum values from memory. Run `nutui-react info` (and `nutui-react demo` for a working example) first. -2. **Use `--format json`** — Every command supports it. Parse the JSON output rather than regex-matching the human-readable text. -3. **Confirm the component exists** — If unsure of the exact name, run `nutui-react list` or rely on the CLI's "did you mean" suggestion instead of importing a guessed name. -4. **Use Design Tokens for styling** — NutUI uses `nut-` flat BEM class names and the `var(--nutui-*)` token system. When customizing appearance, query `nutui-react token` and use tokens rather than hardcoding colors or spacing. +1. **先查询,再编写** —— 不要凭记忆猜测 NutUI 的 API、属性名或枚举值。先运行 `nutui-react info`(并用 `nutui-react demo` 获取一个可用示例)。 +2. **使用 `--format json`** —— 每个命令都支持它。解析 JSON 输出,而不是用正则匹配人类可读的文本。 +3. **确认组件存在** —— 如果不确定确切名称,运行 `nutui-react list`,或借助 CLI 的「你是不是想找」建议,而不是导入一个猜测的名称。 +4. **使用 Design Token 做样式** —— NutUI 采用 `nut-` 扁平 BEM 类名和 `var(--nutui-*)` 变量体系。定制外观时,查询 `nutui-react token` 并使用 Token,而不是硬编码颜色或间距。 diff --git a/packages/nutui-react-taro-cli/CHANGELOG.md b/packages/nutui-react-taro-cli/CHANGELOG.md new file mode 100644 index 0000000000..c3d777bb6e --- /dev/null +++ b/packages/nutui-react-taro-cli/CHANGELOG.md @@ -0,0 +1,13 @@ +# Changelog + +本包版本号自 `4.0.0` 起与组件包 `@nutui/nutui-react-taro` 对齐,便于未来支持多版本查询。 + +## v4.0.0 + +`2026-08-21` + +- :sparkles: 版本号对齐 `@nutui/nutui-react-taro`(此前为独立的 `0.1.x`),同一大版本的 CLI 与组件库保持一致,为未来多版本支持奠定基础。 +- :sparkles: 离线知识查询 CLI:`list` / `info` / `doc` / `demo` / `token`,元数据随包分发,无需网络与 API Key。 +- :sparkles: 内置 stdio MCP Server(`mcp` 命令),暴露 5 个工具与 2 个 prompt,供 Claude Code / Cursor / VS Code / Codex 等 IDE 集成。 +- :sparkles: 随包分发 Skill:`nutui-react-taro`(编写 / 调试 NutUI React Taro 小程序 / 跨端代码时查询组件知识)。 +- :sparkles: 为 Skill 补充 `metadata.json`,声明版本、兼容性、触发词等元信息。 diff --git a/packages/nutui-react-taro-cli/package.json b/packages/nutui-react-taro-cli/package.json index c9c1294c91..2ef4092357 100644 --- a/packages/nutui-react-taro-cli/package.json +++ b/packages/nutui-react-taro-cli/package.json @@ -1,6 +1,6 @@ { "name": "@nutui/nutui-react-taro-cli", - "version": "0.1.0", + "version": "4.0.0", "type": "module", "description": "NutUI React Taro 面向 AI Coding 的离线知识查询 CLI:list / info / doc / demo / token。", "keywords": [ diff --git a/packages/nutui-react-taro-cli/skills/nutui-react-taro/SKILL.en.md b/packages/nutui-react-taro-cli/skills/nutui-react-taro/SKILL.en.md new file mode 100644 index 0000000000..687575e7fc --- /dev/null +++ b/packages/nutui-react-taro-cli/skills/nutui-react-taro/SKILL.en.md @@ -0,0 +1,136 @@ +--- +name: nutui-react-taro +description: > + Use when the user's task involves NutUI React Taro (@nutui/nutui-react-taro) — + writing NutUI React Taro components for mini-programs / cross-platform (Taro) + apps, debugging NutUI Taro issues, or querying NutUI Taro component + APIs/props/docs/demos/design-tokens. Triggers on NutUI Taro-related code, + imports from '@nutui/nutui-react-taro', or explicit NutUI Taro questions. + NutUI React Taro is JD's mobile component library for Taro (mini-program / + multi-platform), sharing one codebase to target H5 and mini-programs. +allowed-tools: + - Bash(nutui-react-taro *) + - Bash(npx -y @nutui/nutui-react-taro-cli *) + - Bash(which nutui-react-taro) +--- + +# NutUI React Taro CLI + +You have access to `@nutui/nutui-react-taro-cli` — a local CLI tool with bundled NutUI React Taro metadata (component props, full docs, runnable Taro demos, and Design Tokens). Use it to query component knowledge before writing code. All data is offline and packaged with the CLI — no network and no API key needed. + +## Setup + +Before first use, check if the CLI is available. If not, invoke it via `npx` (no global install required): + +```bash +which nutui-react-taro || echo "use: npx -y @nutui/nutui-react-taro-cli " +``` + +Both forms work — use whichever is available: + +- Installed globally: `nutui-react-taro info Button` +- Via npx (no install): `npx -y @nutui/nutui-react-taro-cli info Button` + +Examples below use the `nutui-react-taro` form for brevity. + +**Always pass `--format json` for structured output you can parse programmatically** (default output is human-readable `text`). + +## Scenarios + +### 1. Writing NutUI React Taro component code + +Before writing any NutUI Taro component code, look up its API first — don't rely on memory. Note that Taro-side props may differ from the H5 package. + +```bash +# Check what props are available (grouped by table, e.g. Props / sub-component props) +nutui-react-taro info Button --format json + +# Get a runnable Taro demo as a starting point +nutui-react-taro demo Button # list all demo names first +nutui-react-taro demo Button demo1 --format json # then fetch one demo's source + +# Check component-level Design Tokens for theming (var(--nutui-*) system) +nutui-react-taro token Button --format json +``` + +**Workflow:** `nutui-react-taro info` → understand props → `nutui-react-taro demo` → grab a runnable example → write code. + +### 2. Looking up full documentation + +When you need comprehensive component docs (not just the props table): + +```bash +nutui-react-taro doc Cell --format json # full markdown docs (Chinese) +``` + +Taro docs are Chinese-only. + +### 3. Exploring available components + +When the user is choosing which component to use, or you need to confirm a component exists before importing it: + +```bash +# List all components with Chinese name and version, grouped by category +nutui-react-taro list --format json + +# Filter to a category (pass the category enName, e.g. base / feedback / nav) +nutui-react-taro list --category feedback --format json +``` + +If you query a component name that doesn't exist, the CLI returns a "did you mean" suggestion (e.g. `Buttn` → `Button`) — use it to correct the name rather than guessing. + +### 4. Querying Design Tokens + +When customizing theme/colors/spacing, use the `var(--nutui-*)` token system rather than hardcoding values: + +```bash +# Global tokens (colors, spacing, radius, etc.) +nutui-react-taro token --format json + +# Component-level tokens +nutui-react-taro token Button --format json +``` + +### 5. Using as an MCP server + +If working in an IDE that supports MCP (Claude Code, Cursor, VS Code, Codex, etc.), the CLI can run as a local stdio MCP server, exposing the same knowledge-query capabilities as IDE-native tools: + +```json +{ + "mcpServers": { + "nutui-react-taro": { + "command": "npx", + "args": ["-y", "@nutui/nutui-react-taro-cli", "mcp"] + } + } +} +``` + +This provides 5 tools (`nutui_list`, `nutui_info`, `nutui_doc`, `nutui_demo`, `nutui_token`) and 2 prompts (`nutui-expert`, `nutui-page-generator`) via the MCP protocol. When these tools are available in the conversation, prefer calling them directly over shelling out to the CLI. + +## Commands + +| Command | Purpose | +| --- | --- | +| `nutui-react-taro list [--category ]` | List all components (name / Chinese name / version), grouped by category | +| `nutui-react-taro info ` | Component props table (prop / desc / type / default), grouped by table | +| `nutui-react-taro doc ` | Full component markdown docs (Chinese) | +| `nutui-react-taro demo [name]` | Omit `name` to list demos; pass `name` (e.g. `demo1`) for source | +| `nutui-react-taro token [Component]` | Design Tokens — omit component for global tokens | +| `nutui-react-taro mcp` | Start a local stdio MCP server for IDE integration | + +## Global Flags + +| Flag | Purpose | +| --- | --- | +| `--format, -f ` | Output format; agents should prefer `json` (default: `text`) | +| `--help, -h` | Show help | +| `--version, -v` | Print CLI version | + +## Key Rules + +1. **Always query before writing** — Don't guess NutUI Taro APIs, prop names, or enum values from memory. Run `nutui-react-taro info` (and `nutui-react-taro demo` for a working example) first. Taro props can differ from the H5 package. +2. **Use `--format json`** — Every command supports it. Parse the JSON output rather than regex-matching the human-readable text. +3. **Confirm the component exists** — If unsure of the exact name, run `nutui-react-taro list` or rely on the CLI's "did you mean" suggestion instead of importing a guessed name. +4. **Use Design Tokens for styling** — NutUI uses `nut-` flat BEM class names and the `var(--nutui-*)` token system. When customizing appearance, query `nutui-react-taro token` and use tokens rather than hardcoding colors or spacing. +5. **Import from `@nutui/nutui-react-taro`** — Not `@nutui/nutui-react`. This is the Taro (mini-program / cross-platform) package. diff --git a/packages/nutui-react-taro-cli/skills/nutui-react-taro/SKILL.md b/packages/nutui-react-taro-cli/skills/nutui-react-taro/SKILL.md index 687575e7fc..66370e1540 100644 --- a/packages/nutui-react-taro-cli/skills/nutui-react-taro/SKILL.md +++ b/packages/nutui-react-taro-cli/skills/nutui-react-taro/SKILL.md @@ -1,13 +1,7 @@ --- name: nutui-react-taro description: > - Use when the user's task involves NutUI React Taro (@nutui/nutui-react-taro) — - writing NutUI React Taro components for mini-programs / cross-platform (Taro) - apps, debugging NutUI Taro issues, or querying NutUI Taro component - APIs/props/docs/demos/design-tokens. Triggers on NutUI Taro-related code, - imports from '@nutui/nutui-react-taro', or explicit NutUI Taro questions. - NutUI React Taro is JD's mobile component library for Taro (mini-program / - multi-platform), sharing one codebase to target H5 and mini-programs. + 当用户的任务涉及 NutUI React Taro(@nutui/nutui-react-taro)时使用 —— 为小程序 / 跨端(Taro)应用编写 NutUI React Taro 组件、调试 NutUI Taro 问题,或查询 NutUI Taro 组件的 API/属性/文档/示例/设计变量(Design Token)。 触发场景:与 NutUI Taro 相关的代码、从 '@nutui/nutui-react-taro' 导入,或明确的 NutUI Taro 相关提问。NutUI React Taro 是京东面向 Taro(小程序 / 多端)的移动端组件库,一套代码同时支持 H5 与小程序。 allowed-tools: - Bash(nutui-react-taro *) - Bash(npx -y @nutui/nutui-react-taro-cli *) @@ -16,84 +10,84 @@ allowed-tools: # NutUI React Taro CLI -You have access to `@nutui/nutui-react-taro-cli` — a local CLI tool with bundled NutUI React Taro metadata (component props, full docs, runnable Taro demos, and Design Tokens). Use it to query component knowledge before writing code. All data is offline and packaged with the CLI — no network and no API key needed. +你可以使用 `@nutui/nutui-react-taro-cli` —— 一个内置了 NutUI React Taro 元数据(组件属性、完整文档、可运行的 Taro 示例和 Design Token)的本地 CLI 工具。在编写代码前用它查询组件知识。所有数据均为离线数据并随 CLI 一起打包 —— 无需联网,也无需 API Key。 -## Setup +## 准备工作 -Before first use, check if the CLI is available. If not, invoke it via `npx` (no global install required): +首次使用前,先检查该 CLI 是否可用。若不可用,可通过 `npx` 调用(无需全局安装): ```bash which nutui-react-taro || echo "use: npx -y @nutui/nutui-react-taro-cli " ``` -Both forms work — use whichever is available: +两种方式均可 —— 用哪种取决于哪种可用: -- Installed globally: `nutui-react-taro info Button` -- Via npx (no install): `npx -y @nutui/nutui-react-taro-cli info Button` +- 全局安装:`nutui-react-taro info Button` +- 通过 npx(免安装):`npx -y @nutui/nutui-react-taro-cli info Button` -Examples below use the `nutui-react-taro` form for brevity. +下文示例为简洁起见统一使用 `nutui-react-taro` 形式。 -**Always pass `--format json` for structured output you can parse programmatically** (default output is human-readable `text`). +**始终传入 `--format json` 以获得可编程解析的结构化输出**(默认输出为人类可读的 `text`)。 -## Scenarios +## 使用场景 -### 1. Writing NutUI React Taro component code +### 1. 编写 NutUI React Taro 组件代码 -Before writing any NutUI Taro component code, look up its API first — don't rely on memory. Note that Taro-side props may differ from the H5 package. +在编写任何 NutUI Taro 组件代码前,先查询它的 API —— 不要依赖记忆。注意:Taro 端的属性可能与 H5 包不同。 ```bash -# Check what props are available (grouped by table, e.g. Props / sub-component props) +# 查看有哪些可用属性(按表格分组,例如 Props / 子组件属性) nutui-react-taro info Button --format json -# Get a runnable Taro demo as a starting point -nutui-react-taro demo Button # list all demo names first -nutui-react-taro demo Button demo1 --format json # then fetch one demo's source +# 获取一个可运行的 Taro 示例作为起点 +nutui-react-taro demo Button # 先列出所有示例名称 +nutui-react-taro demo Button demo1 --format json # 再获取某个示例的源码 -# Check component-level Design Tokens for theming (var(--nutui-*) system) +# 查看组件级 Design Token 以便主题定制(var(--nutui-*) 体系) nutui-react-taro token Button --format json ``` -**Workflow:** `nutui-react-taro info` → understand props → `nutui-react-taro demo` → grab a runnable example → write code. +**工作流:** `nutui-react-taro info` → 理解属性 → `nutui-react-taro demo` → 获取可运行示例 → 编写代码。 -### 2. Looking up full documentation +### 2. 查阅完整文档 -When you need comprehensive component docs (not just the props table): +当你需要完整的组件文档(而不仅仅是属性表)时: ```bash -nutui-react-taro doc Cell --format json # full markdown docs (Chinese) +nutui-react-taro doc Cell --format json # 完整的 Markdown 文档(中文) ``` -Taro docs are Chinese-only. +Taro 文档仅提供中文。 -### 3. Exploring available components +### 3. 浏览可用组件 -When the user is choosing which component to use, or you need to confirm a component exists before importing it: +当用户在挑选使用哪个组件,或你需要在导入前确认某个组件是否存在时: ```bash -# List all components with Chinese name and version, grouped by category +# 列出所有组件(含中文名与版本),按分类分组 nutui-react-taro list --format json -# Filter to a category (pass the category enName, e.g. base / feedback / nav) +# 按分类筛选(传入分类的英文名,例如 base / feedback / nav) nutui-react-taro list --category feedback --format json ``` -If you query a component name that doesn't exist, the CLI returns a "did you mean" suggestion (e.g. `Buttn` → `Button`) — use it to correct the name rather than guessing. +如果你查询的组件名称不存在,CLI 会返回「你是不是想找」的建议(例如 `Buttn` → `Button`)—— 用它来纠正名称,而不是靠猜。 -### 4. Querying Design Tokens +### 4. 查询 Design Token -When customizing theme/colors/spacing, use the `var(--nutui-*)` token system rather than hardcoding values: +在定制主题/颜色/间距时,使用 `var(--nutui-*)` 变量体系,而不是硬编码具体数值: ```bash -# Global tokens (colors, spacing, radius, etc.) +# 全局 Token(颜色、间距、圆角等) nutui-react-taro token --format json -# Component-level tokens +# 组件级 Token nutui-react-taro token Button --format json ``` -### 5. Using as an MCP server +### 5. 作为 MCP 服务器使用 -If working in an IDE that supports MCP (Claude Code, Cursor, VS Code, Codex, etc.), the CLI can run as a local stdio MCP server, exposing the same knowledge-query capabilities as IDE-native tools: +如果你在支持 MCP 的 IDE(Claude Code、Cursor、VS Code、Codex 等)中工作,该 CLI 可以作为本地 stdio MCP 服务器运行,以 IDE 原生工具的形式暴露相同的知识查询能力: ```json { @@ -106,31 +100,31 @@ If working in an IDE that supports MCP (Claude Code, Cursor, VS Code, Codex, etc } ``` -This provides 5 tools (`nutui_list`, `nutui_info`, `nutui_doc`, `nutui_demo`, `nutui_token`) and 2 prompts (`nutui-expert`, `nutui-page-generator`) via the MCP protocol. When these tools are available in the conversation, prefer calling them directly over shelling out to the CLI. +它通过 MCP 协议提供 5 个工具(`nutui_list`、`nutui_info`、`nutui_doc`、`nutui_demo`、`nutui_token`)和 2 个提示词(`nutui-expert`、`nutui-page-generator`)。当这些工具在对话中可用时,优先直接调用它们,而不是通过 shell 执行 CLI。 -## Commands +## 命令 -| Command | Purpose | +| 命令 | 用途 | | --- | --- | -| `nutui-react-taro list [--category ]` | List all components (name / Chinese name / version), grouped by category | -| `nutui-react-taro info ` | Component props table (prop / desc / type / default), grouped by table | -| `nutui-react-taro doc ` | Full component markdown docs (Chinese) | -| `nutui-react-taro demo [name]` | Omit `name` to list demos; pass `name` (e.g. `demo1`) for source | -| `nutui-react-taro token [Component]` | Design Tokens — omit component for global tokens | -| `nutui-react-taro mcp` | Start a local stdio MCP server for IDE integration | +| `nutui-react-taro list [--category ]` | 列出所有组件(名称 / 中文名 / 版本),按分类分组 | +| `nutui-react-taro info ` | 组件属性表(属性 / 说明 / 类型 / 默认值),按表格分组 | +| `nutui-react-taro doc ` | 组件完整 Markdown 文档(中文) | +| `nutui-react-taro demo [name]` | 省略 `name` 列出示例;传入 `name`(如 `demo1`)获取源码 | +| `nutui-react-taro token [Component]` | Design Token —— 省略组件名则返回全局 Token | +| `nutui-react-taro mcp` | 启动本地 stdio MCP 服务器,供 IDE 集成 | -## Global Flags +## 全局参数 -| Flag | Purpose | +| 参数 | 用途 | | --- | --- | -| `--format, -f ` | Output format; agents should prefer `json` (default: `text`) | -| `--help, -h` | Show help | -| `--version, -v` | Print CLI version | +| `--format, -f ` | 输出格式;agent 应优先使用 `json`(默认:`text`) | +| `--help, -h` | 显示帮助 | +| `--version, -v` | 打印 CLI 版本 | -## Key Rules +## 核心规则 -1. **Always query before writing** — Don't guess NutUI Taro APIs, prop names, or enum values from memory. Run `nutui-react-taro info` (and `nutui-react-taro demo` for a working example) first. Taro props can differ from the H5 package. -2. **Use `--format json`** — Every command supports it. Parse the JSON output rather than regex-matching the human-readable text. -3. **Confirm the component exists** — If unsure of the exact name, run `nutui-react-taro list` or rely on the CLI's "did you mean" suggestion instead of importing a guessed name. -4. **Use Design Tokens for styling** — NutUI uses `nut-` flat BEM class names and the `var(--nutui-*)` token system. When customizing appearance, query `nutui-react-taro token` and use tokens rather than hardcoding colors or spacing. -5. **Import from `@nutui/nutui-react-taro`** — Not `@nutui/nutui-react`. This is the Taro (mini-program / cross-platform) package. +1. **先查询,再编写** —— 不要凭记忆猜测 NutUI Taro 的 API、属性名或枚举值。先运行 `nutui-react-taro info`(并用 `nutui-react-taro demo` 获取一个可用示例)。Taro 属性可能与 H5 包不同。 +2. **使用 `--format json`** —— 每个命令都支持它。解析 JSON 输出,而不是用正则匹配人类可读的文本。 +3. **确认组件存在** —— 如果不确定确切名称,运行 `nutui-react-taro list`,或借助 CLI 的「你是不是想找」建议,而不是导入一个猜测的名称。 +4. **使用 Design Token 做样式** —— NutUI 采用 `nut-` 扁平 BEM 类名和 `var(--nutui-*)` 变量体系。定制外观时,查询 `nutui-react-taro token` 并使用 Token,而不是硬编码颜色或间距。 +5. **从 `@nutui/nutui-react-taro` 导入** —— 不是 `@nutui/nutui-react`。这是 Taro(小程序 / 跨端)包。 diff --git a/src/sites/sites-react/doc/components/nav/nav.tsx b/src/sites/sites-react/doc/components/nav/nav.tsx index 69b8e38ae0..e76a8bde5b 100644 --- a/src/sites/sites-react/doc/components/nav/nav.tsx +++ b/src/sites/sites-react/doc/components/nav/nav.tsx @@ -76,6 +76,16 @@ const Nav = () => { MCP Server +
  • + + isPending ? '' : isActive ? 'active' : '' + } + to={`${lang ? `/${lang}` : ''}/ai/skill`} + > + Skill + +
  • diff --git a/src/sites/sites-react/doc/docs/ai-react/cli.en-US.md b/src/sites/sites-react/doc/docs/ai-react/cli.en-US.md index 6acae8157c..e5487552b2 100644 --- a/src/sites/sites-react/doc/docs/ai-react/cli.en-US.md +++ b/src/sites/sites-react/doc/docs/ai-react/cli.en-US.md @@ -86,6 +86,7 @@ If your IDE supports MCP, the CLI can also run as an MCP server, registering the ## Learn more +- [Skill](/#/en-US/ai/skill) - [MCP Server](/#/en-US/ai/mcp) - [LLMs.txt](/#/en-US/ai/llms) - [For Agents](/#/en-US/ai/for-agents) diff --git a/src/sites/sites-react/doc/docs/ai-react/cli.md b/src/sites/sites-react/doc/docs/ai-react/cli.md index 4772d759c5..172b2af161 100644 --- a/src/sites/sites-react/doc/docs/ai-react/cli.md +++ b/src/sites/sites-react/doc/docs/ai-react/cli.md @@ -86,6 +86,7 @@ npx skills add ./node_modules/@nutui/nutui-react-cli/skills/nutui-react ## 了解更多 +- [Skill](/#/zh-CN/ai/skill) - [MCP Server](/#/zh-CN/ai/mcp) - [LLMs.txt](/#/zh-CN/ai/llms) - [For Agents](/#/zh-CN/ai/for-agents) diff --git a/src/sites/sites-react/doc/docs/ai-react/skill.en-US.md b/src/sites/sites-react/doc/docs/ai-react/skill.en-US.md new file mode 100644 index 0000000000..16a93caa6f --- /dev/null +++ b/src/sites/sites-react/doc/docs/ai-react/skill.en-US.md @@ -0,0 +1,71 @@ +# Skill + +This page introduces two NutUI-React Agent Skills, the problem each one solves, and how to install them. + +## What is a Skill? + +A [Skill](https://github.com/vercel-labs/skills) is an instruction file following the Agent Skills spec. The CLI and MCP provide the _capabilities_ (query props, docs, demos, Design Tokens); the Skill constrains _when and in what order_ the agent uses them — turning "has tools" into "knows how to use them". + +Once installed, the agent automatically loads the Skill and follows its workflow when it hits a matching task, with no need for you to prompt it every time. Compatible with Claude Code / Cursor / VS Code / Codex and any agent that supports the skills protocol. + +Two Skills are available: + +| Skill | Purpose | +| --- | --- | +| `nutui-react` | Look up the API before writing NutUI-React code, eliminating API hallucination | +| `nutui-react-to-taro` | Migrate an H5 project from `@nutui/nutui-react` to `@nutui/nutui-react-taro` (Taro / mini-program) | + +## `nutui-react` — look up before writing + +Guides the agent to query the real API with the CLI before writing any NutUI-React component code, instead of guessing props or enum values from memory. + +**It constrains the agent to:** + +- Run `nutui-react info ` for props, then `nutui-react demo ` to grab a runnable example as a starting point — before writing a component. +- Customize styles with `var(--nutui-*)` Design Tokens (`nutui-react token`) rather than hardcoding colors and spacing. +- Confirm a component name with `nutui-react list` (or take the CLI's "did you mean" suggestion) instead of importing a guessed name. +- Prefer `--format json` for every query and parse the structured output rather than regex-matching text. + +**Install:** + +```bash +npm i -D @nutui/nutui-react-cli +npx skills add ./node_modules/@nutui/nutui-react-cli/skills/nutui-react +``` + +## `nutui-react-to-taro` — migrate H5 to Taro + +Guides the agent to migrate a project using `@nutui/nutui-react` (H5) to `@nutui/nutui-react-taro` (Taro cross-platform / mini-program). The two packages share one component set and almost every component maps 1:1, so migration is highly regular — the Skill orchestrates the mechanical rewrites and the judgment-heavy semantic rewrites into a clear workflow. + +**The migration workflow it orchestrates:** + +- **Environment prep**: install `@nutui/nutui-react-taro`, `@tarojs/plugin-html`, etc.; configure `designWidth` in `config/index.js`; import the global styles at the entry. +- **Mechanical rewrites**: package/import swaps (`@nutui/nutui-react` → `@nutui/nutui-react-taro`), native-tag swaps (`
    ` → ``, `` → ``), style-unit fixes, touch-event type widening. +- **Cross-check**: for each component, call both `nutui-react info` and `nutui-react-taro info` to diff props across the two ends (a few components like Uploader / Image differ), avoiding blind copies that silently break on the mini-program. +- **Semantic rewrites & traps**: rewrite Web-only APIs (`document` / `window`) to `@tarojs/taro` APIs; flag judgment-heavy cases such as the missing `Audio` component on Taro and canvas components that need rewriting. + +> This Skill also uses `@nutui/nutui-react-taro-cli` for target-side cross-checking; invoke it install-free via `npx -y @nutui/nutui-react-taro-cli`. + +**Install:** + +```bash +npm i -D @nutui/nutui-react-cli +npx skills add ./node_modules/@nutui/nutui-react-cli/skills/nutui-react-to-taro +``` + +## How Skill relates to CLI / MCP + +All three reuse the same offline knowledge — only the calling protocol differs: + +- **CLI** — the agent runs commands to query. +- **MCP** — registers the same capabilities as IDE-native tools, called on demand in conversation. +- **Skill** — provides no new capability; it tells the agent _when and in what order_ to call the CLI / MCP, codifying the workflow. + +If your IDE supports MCP, enabling the MCP server alongside lets the Skill's query steps route through IDE-native tools automatically. + +## Learn more + +- [CLI](/#/en-US/ai/cli) +- [MCP Server](/#/en-US/ai/mcp) +- [For Agents](/#/en-US/ai/for-agents) +- [LLMs.txt](/#/en-US/ai/llms) diff --git a/src/sites/sites-react/doc/docs/ai-react/skill.md b/src/sites/sites-react/doc/docs/ai-react/skill.md new file mode 100644 index 0000000000..8fc7af8ec0 --- /dev/null +++ b/src/sites/sites-react/doc/docs/ai-react/skill.md @@ -0,0 +1,71 @@ +# Skill + +本篇介绍两个 NutUI-React Agent Skill,以及它们各自解决的问题与安装方式。 + +## 什么是 Skill? + +[Skill](https://github.com/vercel-labs/skills) 是一份遵循 Agent Skills 规范的说明文件。CLI 与 MCP 提供的是「能力」(查 Props、查文档、拿示例、查 Design Token),而 Skill 约束 Agent「**在什么时机、按什么顺序**」使用这些能力——把「有工具」变成「会用工具」。 + +安装后,Agent 在遇到对应任务时会自动加载 Skill 并遵循其中的流程,无需你每次手动提示。兼容 Claude Code / Cursor / VS Code / Codex 等所有支持 skills 协议的 Agent。 + +目前提供两个 Skill: + +| Skill | 用途 | +| --- | --- | +| `nutui-react` | 写 NutUI-React 代码时「先查后写」,消除 API 幻觉 | +| `nutui-react-to-taro` | 把 H5 项目从 `@nutui/nutui-react` 迁移到 `@nutui/nutui-react-taro`(Taro / 小程序) | + +## `nutui-react` — 先查后写 + +指导 Agent 在写任何 NutUI-React 组件代码前,先用 CLI 查询真实 API,而非凭记忆猜测 Prop 或枚举值。 + +**它约束 Agent 的行为:** + +- 写组件前先 `nutui-react info ` 查 Props,再 `nutui-react demo ` 拿一个可运行示例作为起点。 +- 定制样式时用 `var(--nutui-*)` Design Token(`nutui-react token`),而非硬编码颜色与间距。 +- 不确定组件名时先 `nutui-react list` 确认,或采纳 CLI 的「你是否想找」建议,而非导入猜测的名字。 +- 所有查询优先用 `--format json`,解析结构化输出而非正则抓文本。 + +**安装:** + +```bash +npm i -D @nutui/nutui-react-cli +npx skills add ./node_modules/@nutui/nutui-react-cli/skills/nutui-react +``` + +## `nutui-react-to-taro` — H5 迁移到 Taro + +指导 Agent 把使用 `@nutui/nutui-react`(H5)的项目,迁移到 `@nutui/nutui-react-taro`(Taro 跨端 / 小程序)。两个包共用同一套组件,绝大多数组件一一对应,因此迁移高度规则化——Skill 负责把规则化改写与需要判断的语义改写编排成清晰流程。 + +**它编排的迁移流程:** + +- **环境准备**:安装 `@nutui/nutui-react-taro`、`@tarojs/plugin-html` 等依赖,配置 `config/index.js` 的 `designWidth`,入口引入全局样式。 +- **规则化改写**:包名 / import 替换(`@nutui/nutui-react` → `@nutui/nutui-react-taro`)、原生标签替换(`
    ` → ``、`` → ``)、样式单位修正、触摸事件类型补全。 +- **交叉核对**:对每个组件同时调用 `nutui-react info` 与 `nutui-react-taro info` 对比两端 Props 差异(少数组件如 Uploader / Image 两端属性不同),避免盲目照搬导致小程序端失效。 +- **语义改写与陷阱处理**:把 Web-only API(`document` / `window`)改写成 `@tarojs/taro` API;识别 `Audio` 组件在 Taro 端缺失、canvas 类组件需重写等需要人工判断的场景并标记出来。 + +> 该 Skill 会同时用到 `@nutui/nutui-react-taro-cli` 做目标端核对,通过 `npx -y @nutui/nutui-react-taro-cli` 免安装调用即可。 + +**安装:** + +```bash +npm i -D @nutui/nutui-react-cli +npx skills add ./node_modules/@nutui/nutui-react-cli/skills/nutui-react-to-taro +``` + +## Skill 与 CLI / MCP 的关系 + +三者复用同一份离线知识,只是调用协议不同: + +- **CLI** — Agent 主动敲命令查询。 +- **MCP** — 把同一份能力注册成 IDE 原生工具,在对话中按需自动调用。 +- **Skill** — 不提供新能力,而是告诉 Agent「何时、按什么顺序」调用 CLI / MCP,把流程固化下来。 + +如果你的 IDE 支持 MCP,推荐同时启用 MCP 服务,让 Skill 里的查询步骤自动走 IDE 原生工具。 + +## 了解更多 + +- [CLI](/#/zh-CN/ai/cli) +- [MCP Server](/#/zh-CN/ai/mcp) +- [For Agents](/#/zh-CN/ai/for-agents) +- [LLMs.txt](/#/zh-CN/ai/llms)