sonofmagic/website/docs/ai/basics

Skill（技能系统）

概述

Skill 是一组可复用的执行规则与工作流，用来让 AI 在特定任务中更稳定地输出结果。

weapp-tailwindcss 提供的 Skill 目标是帮助用户在自己的业务项目中，快速接入并稳定使用 weapp-tailwindcss，用于小程序与多端开发。

这个 Skill 主要服务“项目使用者”，不是仓库二次开发维护指南。

在本项目中，我们采用 vercel-labs/skills 安装 Skill，技能文件为 SKILL.md。

weapp-tailwindcss Skill 安装

1. 从 GitHub 安装（推荐）

npx skills add sonofmagic/skills --skill weapp-tailwindcss

2. 查看仓库可安装 Skill 列表

npx skills add sonofmagic/skills --list

3. 本地开发时安装当前目录 Skill

在本仓库根目录执行：

npx skills add . --skill weapp-tailwindcss

装完后能做什么

安装后，你可以让 AI 按你的项目类型直接产出可运行配置，例如：

• uni-app cli vue3 vite 项目接入方案
• taro webpack5 / taro vite 项目接入方案
• uni-app x 同时构建 Web / 小程序 / Android / iOS / 鸿蒙
• 已有项目迁移、样式失效排障、rpx 任意值问题定位
• Tailwind 写法规范沉淀（含 space-y-* / space-x-* 在小程序端的标签限制与修复顺序）

Skill 会要求 AI 优先完成这些关键动作：

• 识别你当前框架和目标端
• 补齐 tailwindcss 与 weapp-tailwindcss 最小可用配置
• 明确 postinstall 中的 weapp-tw patch
• 给出“可复制命令 + 可复制配置 + 验证步骤”
• 对 space-y-* / space-x-* 问题按固定优先级排查：先改结构，再评估 virtualHost，最后扩展 cssChildCombinatorReplaceValue

Skill 执行流程（更新）

当前 weapp-tailwindcss Skill 会把请求先分流，再输出结果：

1. 任务分流：新项目接入、存量迁移、问题排查、写法规范沉淀
2. 信息收集最小集：
   • 框架（uni-app / taro / uni-app x / 原生）
   • 构建器（vite / webpack5 / webpack4）
   • 目标端（仅小程序 / 小程序 + H5/App）
   • Tailwind 版本（v3/v4）与包管理器（重点 pnpm@10+）
   • Node 版本（建议 ^20.19.0 || >=22.12.0）
3. 按任务读取对应参考文件：
   • 集成/迁移：references/integration-playbook.md
   • 排障：references/troubleshooting-playbook.md
   • 写法规范：references/tailwind-writing-best-practices.md

Skill 输出标准（更新）

Skill 输出会强制包含以下项目，避免只给概念不落地：

1. 结论（适用框架、Tailwind 版本、目标端）
2. 修改文件清单
3. 可直接复制的配置片段
4. 安装/运行命令（默认 pnpm）
5. 验证步骤与预期结果
6. 回滚方案（至少一条）

写法规范补充：space-y / space-x

在小程序里，space-y-*、space-x-* 这类依赖子组合器的工具类，默认不是“全标签通用”，通常会按 view + view（含 text）处理。

如果你遇到 space-y-2 不生效，建议按下面顺序处理：

1. 先改结构：让相邻子节点落在 view/text，或外层包一层 view
2. 再评估组件层：自定义组件场景启用 virtualHost
3. 最后改配置：仅在必要时扩展 cssChildCombinatorReplaceValue，并保持最小化标签范围

推荐提示词

1. 新项目快速接入

我现在是 uni-app cli vue3 vite 项目，目标端是微信小程序 + H5。
请按 weapp-tailwindcss skill 给我最小可用配置，
输出需要包含：安装命令、完整配置文件、验证步骤。

2. 旧项目迁移

这是一个 taro webpack5 老项目，已经有 tailwindcss 但样式经常丢失。
请按 weapp-tailwindcss skill 给迁移方案，并列出最小改动清单。

3. 问题排查

我在 JS 字符串里写了 tailwind 任意值 class，但小程序端不生效。
请按 weapp-tailwindcss skill 给排查顺序，并指出应该检查的配置项。

4. space-y / space-x 不生效排查

我的容器写了 space-y-2，但子节点是 button 和自定义组件，间距没有生效。
请按 weapp-tailwindcss skill 给固定优先级排查方案，并给出最小改动配置。

5. 要求带回滚方案

这是一个 uni-app vite 项目，请按 weapp-tailwindcss skill 给我迁移方案。
输出必须包含：改动文件、可复制配置、验证步骤、回滚方案。

Skill 文件位置

skills/weapp-tailwindcss/SKILL.md

Skill 参考文件位置

skills/weapp-tailwindcss/references/integration-playbook.md
skills/weapp-tailwindcss/references/troubleshooting-playbook.md
skills/weapp-tailwindcss/references/tailwind-writing-best-practices.md

常见问题

安装后看不到 Skill

排查顺序：

1. 先执行 npx skills add <repo> --list 确认技能名。
2. 确认安装命令中的 --skill weapp-tailwindcss 名称完全一致。
3. 确认默认分支已包含 skills/weapp-tailwindcss/SKILL.md。

我是 Skill 维护者，如何发布版本

请查看：Skill 发布与版本化