Skill(技能系统)
weapp-tailwindcss 官方 Skill 面向业务项目使用者。它把当前 v5 的接入、迁移、排障和高级能力拆成独立工作流,避免一个大 Skill 同时维护所有框架与 API。
本项目使用 vercel-labs/skills 安装 Skill。sonofmagic/weapp-tailwindcss 是内容事实源,sonofmagic/skills 是面向用户的聚合安装仓库。
安装完整套件
npx skills add sonofmagic/skills \
--skill weapp-tailwindcss \
--skill weapp-tailwindcss-setup \
--skill weapp-tailwindcss-migrate \
--skill weapp-tailwindcss-troubleshoot \
--skill weapp-tailwindcss-runtime \
--skill weapp-tailwindcss-custom-build \
--skill weapp-tailwindcss-react-native \
-y
只安装兼容协调入口也可以:
npx skills add sonofmagic/skills --skill weapp-tailwindcss
协调入口负责识别任务并推荐专用 Skill;完整实现和参考资料位于各专用 Skill 中。
查看聚合仓库全部可安装内容:
npx skills add sonofmagic/skills --list
Skill 分工
| Skill | 使用场景 |
|---|---|
weapp-tailwindcss | 泛化请求、任务识别、安全基线与兼容入口 |
weapp-tailwindcss-setup | 新接入、框架选型、Tailwind CSS 4 与多端配置 |
weapp-tailwindcss-migrate | v4 到 v5、旧 patch/生成插件与环境迁移 |
weapp-tailwindcss-troubleshoot | 样式生成、class 转译、rpx、HMR 和运行端排障 |
weapp-tailwindcss-runtime | 动态 class、merge、cva、variants 与 escape/unescape |
weapp-tailwindcss-custom-build | Core API、自研 bundler、样式注入和分包隔离 |
weapp-tailwindcss-react-native | Expo Metro、Native manifest 和 Android/iOS 运行时 |
当前共同基线
- 当前主线只维护 Tailwind CSS 4。
- 当前
weapp-tailwindcssmanifest 要求 Node.js^22.18.0 || >=24.11.0;HBuilderX 项目至少使用 5.11。 - 同一次受管构建只由
WeappTailwindcss生成 Tailwind CSS,不叠加官方 Tailwind PostCSS/Vite 生成插件。 - Tailwind 入口使用纯 CSS,必须被项目实际导入;
cssEntries使用绝对路径且不能替代构建图导入。 - H5/Web 通常保留插件,由 generator 自动选择 Web target。
- JavaScript class 只转换 Tailwind 验证过的
classNameSet精确候选。
本地开发安装
在本仓库根目录执行:
npx skills add . \
--skill weapp-tailwindcss \
--skill weapp-tailwindcss-setup \
--skill weapp-tailwindcss-migrate \
--skill weapp-tailwindcss-troubleshoot \
--skill weapp-tailwindcss-runtime \
--skill weapp-tailwindcss-custom-build \
--skill weapp-tailwindcss-react-native \
-y
提示词示例
使用 $weapp-tailwindcss-setup,为新的 uni-app Vue3 Vite 项目配置微信小程序和 H5,给出完整文件与验证步骤。
使用 $weapp-tailwindcss-migrate,把仍在运行 weapp-tw patch 和 @tailwindcss/vite 的旧项目迁移到 v5。
使用 $weapp-tailwindcss-troubleshoot,定位为什么新加的任意值 class 在第二次 HMR 后不再生成。
使用 $weapp-tailwindcss-custom-build,设计基于 weapp-tailwindcss/core 的内存转换和分包样式注入时序。
使用 $weapp-tailwindcss-react-native,为 Expo SDK 54 配置 Metro 并验证 manifest warnings。
维护与验证
源码位于 skills/<skill-name>/。每个目录包含 SKILL.md、agents/openai.yaml 和按需加载的 references/。
pnpm skills:validate
npx skills add . --list
发布链路见:Skill 发布与同步。