常用SKILL整理
常用SKILL整理
空空常用Skill整理
一、前端
设计
| Skill | 安装量 | 说明 |
|---|---|---|
frontend-design (anthropics) |
588K | 在写代码前先定审美方向（极简/极繁/复古未来/有机自然/奢华/粗野主义等），围绕字体、颜色主题、动效、空间构成、材质细节五个核心维度落地。拒绝 AI 味——禁止 Arial/Inter 等烂大街字体、禁止 beige+gold 配色、禁止三段式等分布局。React/Vue/原生都支持 |
design-taste-frontend (leonxlnx) |
183K | 三个全局旋钮驱动设计：DESIGN_VARIANCE（对称↔混乱）、MOTION_INTENSITY（静止↔动画大片）、VISUAL_DENSITY（留白↔信息密集）。内置反 AI 模式：强制禁止 em-dash、等大三列卡片、beige+brass 配色。支持 Material/Carbon/Fluent/Polaris/Primer/GOV.UK 真实设计系统，也支持 Tailwind+Motion+GSAP 自定义。产出前有 50+ 项上线检查清单 |
设计审查
| Skill | 安装量 | 说明 |
|---|---|---|
web-design-guidelines (vercel-labs) |
415K | 审计工具，不是设计工具。 从 Vercel Web Interface Guidelines 实时拉取最新规范，检查你写的代码是否符合间距、排版、交互、无障碍标准。输出 文件:行号 格式的问题清单。适合做完页面后跑一遍排查 |
设计数据库
| Skill | 安装量 | 说明 |
|---|---|---|
ui-ux-pro-max (nextlevelbuilder) |
234K | 可检索的设计资源库：50+ 风格、161 套配色、57 组字体搭配、99 条 UX 规范（按优先级排）、25 种图表。覆盖 10 个技术栈（React/Next.js/Vue/Svelte/SwiftUI/React Native/Flutter/Tailwind/shadcn/HTML）。根据产品类型（SaaS/电商/博客/仪表盘/落地页）推荐对应模式、颜色、字体、间距。内置组件模板（按钮/弹窗/表单/表格/卡片/图表） |
组件库
| Skill | 安装量 | 说明 |
|---|---|---|
shadcn |
205K | shadcn/ui 组件全生命周期管理：搜索 registry、添加组件、查看文档、--dry-run 预览、--diff 对比差异、智能合并上游更新。强制执行 Form（FieldGroup/Field/InputGroup）、组合模式（Groups/overlays/Card）、样式（语义色/gap/简写）、图标（data-icon 属性）规范。支持多 registry（@shadcn/@magicui/@tailark 等）。必须用项目自己的包管理器（npx/pnpm/bunx）运行 CLI |
React / 框架
| Skill | 安装量 | 说明 |
|---|---|---|
vercel-react-best-practices (vercel-labs) |
501K | Vercel 出品，70 条规则按 8 个优先级排列，每条带错误/正确代码对：①消除请求瀑布（并行 fetch、Suspense 边界）②包体积优化（Tree-shake、dynamic import、延迟第三方脚本）③服务端性能（React.cache 去重、LRU 缓存、减少序列化）④客户端数据获取（SWR dedup、被动事件监听）⑤重渲染优化（memo/dependencies/derived-state/useTransition/useDeferredValue）⑥渲染性能（SVG 优化、content-visibility、hydration 防闪烁）⑦JS 性能（DOM 批量操作、Set/Map O(1)、early exit）⑧高级模式（effect-event-deps、use latest ref） |
vercel-composition-patterns (vercel-labs) |
224K | 解决 boolean prop 爆炸。覆盖 Compound Components、Context Provider、状态提升、显式 variant 等 10+ 种组合模式。React 19：去掉 forwardRef，用 use() 替代 useContext()。适合重构臃肿组件或写组件库 |
vercel-react-native-skills (vercel-labs) |
150K | React Native 专用：性能、导航、原生模块、Expo 集成 |
动画（GSAP 系列）
基础三件套
| Skill | 说明 |
|---|---|
gsap-core |
GSAP 核心 API：gsap.to() / from() / fromTo()、easing、duration、stagger、matchMedia()。所有动画的起点，做任何动画先开这个。忌：动画 width/height（用 scaleX/scaleY 替代）、同时设 svgOrigin + transformOrigin、堆叠 from() 时忘 immediateRender |
gsap-timeline |
时间线编排：gsap.timeline()、position 参数（"+=0.5" / "<" 等）、label、嵌套、playback 控制。多个动画有先后顺序时用它编排。忌：把 delay 写在链式 tween 上（用 position 参数替代）、把 ScrollTrigger 放在子 tween 上（放在 timeline 层级） |
gsap-scrolltrigger |
滚动驱动动画：pin、scrub（1=直接跟随 / true=平滑）、trigger、parallax、horizontal scroll。做长页面滚动视差、滚动触发动效专用。忌：containerAnimation 时 ease 不用 "none"、scrub 和 toggleActions 同时用、生产环境留 markers、dom 变化后不 refresh |
进阶 + 框架集成
| Skill | 说明 |
|---|---|
gsap-react |
React 集成：优先使用 useGSAP() hook（自动 cleanup + scope）、refs 绑定目标、contextSafe() 包裹事件回调。React/Next.js 项目中用 GSAP 时必开。忌：不设 scope 直接用 selector、忘记 cleanup 导致内存泄漏、SSR 阶段执行 GSAP |
gsap-frameworks |
Vue/Svelte 集成：生命周期（onMounted/onDestroy）、作用域选择器（:scope）、卸载清理。非 React 框架下用 GSAP 时开这个 |
gsap-plugins |
GSAP 插件大全：ScrollToPlugin、ScrollSmoother、Flip、Draggable、Inertia、SplitText、ScrambleText、SVG 绘图、物理引擎。需要特殊动画效果（拖拽、文字拆分、SVG 描边）时开 |
gsap-performance |
性能优化：transform 优先（x/y 替代 top/left）、避免 layout thrashing、will-change 策略、批量操作。动画多了卡顿就用它排查优化 |
gsap-utils |
工具函数：clamp、mapRange、random、snap、wrap、pipe。做交互动效需要值映射/随机/吸附时很实用 |
测试
| Skill | 安装量 | 说明 |
|---|---|---|
webapp-testing (anthropics) |
107K | Playwright 端到端测试。Python 脚本自动化：侦察（截图/DOM检查）→ 找选择器 → 执行操作。自带 with_server.py 管理服务器生命周期（启动/停止单或多服务器）。覆盖元素发现、静态HTML自动化、console日志捕获。关键：动态应用需先 wait_for_load_state('networkidle') 再操作，避免时序bug |
场景搭配
下面两个表格列出了VRP和GSAP Skill的适用场景，可以按需添加，相关的场景搭配也不是固定的还要看技术栈和需求
vercel-react-best-practices 的核心价值在数据密集型 + 状态复杂的场景（仅适用于 React 框架）：
| 适用 VRP | 不适用 VRP |
|---|---|
| 后台管理系统（大量数据表格、筛选、分页） | 落地页 / 作品集（静态内容） |
| 电商（商品列表、购物车、价格计算） | 博客（静态文章） |
| 社交动态流（无限滚动、实时更新） | 纯动画页面 |
| 复杂表单（多步骤、联动校验） | 营销站（纯展示） |
| SaaS 产品主界面（Dashboard、数据看板） |
简单判断：页面有超过 3 个会频繁更新的状态 + 多轮数据请求 = 加 VRP。纯展示型的页面开了也是摆设。
| GSAP Skill | 何时加 |
|---|---|
gsap-core |
必开，所有动画的起点 |
gsap-timeline |
多段动画需要编排时序 |
gsap-scrolltrigger |
需要滚动触发动画 |
gsap-react |
React 项目 |
gsap-frameworks |
Vue / Svelte 项目（与 gsap-react 互斥） |
gsap-plugins |
需要 SplitText 拆字、Flip 切换、Draggable 拖拽等特殊效果 |
gsap-performance |
动画卡顿排查优化 |
gsap-utils |
需要 clamp / mapRange / random 等工具函数 |
落地页 / 作品集 / 营销站
组合: frontend-design + design-taste-frontend + gsap-core + gsap-scrolltrigger + gsap-timeline
为什么这么搭：frontend-design 用两轮流程（脑暴设计计划 → 自我批判 → 编码）定审美方向，产出不撞脸的配色和排版；design-taste-frontend 三个旋钮（视觉变异/动效强度/信息密度）精确控制调性，50+ 项上线检查清单防 AI 味；gsap-core + gsap-scrolltrigger + gsap-timeline 三件套：core 负责 tween，scrolltrigger 负责碰撞滚动触发点（parallax/pin/scrub），timeline 负责把多段动画按先后顺序编排成一个整体节奏。视觉冲击类项目这一套拉满。
帮我做一个 SaaS 产品落地页，要有 hero、特性展示、CTA，配上滚动动画
后台管理系统
组合: ui-ux-pro-max + shadcn + vercel-react-best-practices
为什么这么搭：ui-ux-pro-max 明确支持 Dashboard/Admin 场景，按产品类型推荐配色、布局、UX 规范和数据图表选型；shadcn 生成 Table/Form/Dialog 等组件并强制组合模式和语义色规则；vercel-react-best-practices 保证大量数据渲染时不卡顿。
搭一个人员管理系统，包含表格、筛选栏、分页、弹窗表单
React 组件开发
组合: shadcn + vercel-react-best-practices
为什么这么搭：日常写组件，shadcn 提供 component API 和样式规范（gap 替代 space-*、cn() 合并类名、data-icon 属性），vercel-react-best-practices 在重渲染（memo/dependencies/derived-state）、hydration、bundle 层面保障质量。不需要审美决策，轻装上阵。
写一个搜索框组件，带防抖、下拉建议列表、键盘导航
代码审查 / 审计
组合: vercel-react-best-practices + design-taste-frontend
为什么这么搭：vercel-react-best-practices 的 70 条规则覆盖请求瀑布、包体积、重渲染等代码级问题（每条带错误/正确代码对可直接 diff）；design-taste-frontend 的 50+ 项上线检查清单审计 UI 层面（按钮对比度、CTA 标签一致性、Hero 结构、移动端适配）。一个查逻辑，一个查 UI。
审查这个页面，列出性能问题和 UI 规范违规，按优先级排序
滚动动效页面
组合: gsap-core + gsap-scrolltrigger + gsap-timeline（React 项目再加 gsap-react）
为什么这么搭：gsap-core 提供 tween/easing/stagger，gsap-scrolltrigger 做 pin/scrub/parallax/horizontal scroll，gsap-timeline 编排多段动画的先后顺序和叠加关系。React 项目必加 gsap-react——useGSAP() 自动管理 scope 和 cleanup，避免 SSR 执行 GSAP 导致报错或用 contextSafe() 包裹事件回调防内存泄漏。
首页加 Apple 官网那种滚动视差，每个区块依次淡入，数字递增动画在滚动到视口时触发
动画性能优化
组合: vercel-react-best-practices + gsap-performance
为什么这么搭：动画多了卡顿，先查动画层面——gsap-performance 管 transform 优先（x/y 替代 top/left，scaleX/Y 替代 width/height）、避免 layout thrashing、will-change 策略、批量读写分离；再查渲染层面——vercel-react-best-practices 管 content-visibility、SVG 精度、被动事件监听、requestIdleCallback。排查路径清晰：动画层 → 渲染层。
这个页面滚动时掉帧严重，帮我分析瓶颈在哪然后优化
E2E 测试
组合: webapp-testing
为什么这么搭：Playwright Python 脚本自动化，流程是侦察（截图/DOM 检查）→ 找选择器 → 执行操作 → 验证。自带 with_server.py 管理服务器启停。动态应用先 wait_for_load_state('networkidle') 再操作避免时序 bug。
把用户注册流程完整跑一遍测试，截图每一步 UI 状态，检查控制台有没有报错
二、文档处理
二、文档处理
| Skill | 安装量 | 说明 |
|---|---|---|
pdf |
142K | 全功能 PDF 处理：提取文本/表格、合并/拆分、旋转、加水印、加密/解密、提取图片。基于 pypdf + pdfplumber + reportlab。支持扫描件 OCR（pytesseract + pdf2image）。有单独 FORMS.md 指导填表 |
pptx |
157K | 三种模式：读取文本（python -m markitdown）、编辑模板（解包改 XML 再打包）、从零创建（PptxGenJS）。内置 10 套配色 + 字体搭配，避免 AI 味。生成后自动 QA：子 agent 截图检查占位文本/重叠/溢出/对比度 |
docx |
135K | 读（pandoc/XML）、写（docx-js，支持标题/表格/图片/超链接/脚注/页眉/TOC）、改（解包→改 XML→打包，支持修订和批注）。.doc 旧格式可转 .docx |
xlsx |
119K | pandas 做数据分析，openpyxl 做公式和格式。强制零公式错误，用 LibreOffice 重算并扫描 #REF!/#DIV/0!/#VALUE! 等。金融模型自动套蓝/黑/绿/红配色标准。改已有模板时严格匹配原格式 |
三、开发流程
不想挑用superpowers或trellis一套就行了
均不挑语言/框架，任何项目通用。
规划
| Skill | 安装量 | 说明 |
|---|---|---|
writing-plans (obra/superpowers) |
158K | 编写结构化实施计划：从需求出发，分解为”目标→约束→方案→风险→验收标准”五步。每个步骤要求具体可验证的输出，拒绝模糊的”优化一下”。支持草稿→评审→定稿三轮迭代，产出可直接执行的 plan.md |
executing-plans (obra/superpowers) |
130K | 严格按计划逐步执行：每完成一步先 self-check（对照验收标准），通过后才进入下一步。遇到偏差时暂停并更新计划，不闷头硬干。writing-plans 产出的计划直接拿来驱动 |
brainstorming (obra/superpowers) |
242K | 结构化头脑风暴：发散阶段（数量优先不评判）→ 收敛阶段（可行性/影响力矩阵筛选）→ 评估阶段（Pugh 矩阵量化对比）。内置 5 种引导模板（产品策略/技术架构/UI 方案/性能优化/重构路径），避免会议变成闲聊 |
to-prd (mattpocock) |
283K | 自然语言需求 → 结构化 PRD：拆解为用户故事、功能边界、异常路径、数据模型、验收标准。对模糊需求（”做个登录”）自动追问：第三方还是自建？手机号还是邮箱？刷新 token 策略？session 还是 JWT？产出可直发给 PM 过目的 PRD |
to-issues (mattpocock) |
271K | PRD → 可执行的 GitHub Issues：按依赖关系和粒度（不超过半天工作量）拆分，自动标注 priority/labels/estimated effort，生成 milestone 看板。支持从已有 PRD 或直接描述两端输入 |
调试
| Skill | 安装量 | 说明 |
|---|---|---|
systematic-debugging (obra/superpowers) |
159K | 系统化调试方法论：假设先行（列 3 个最可能原因），二分法验证（log/断点/二分法缩小范围），最小可复现（剥离无关代码到最小 case）。拒绝”试一下改这里”的随机调试，要求每个修改必须先回答”为什么这个改法能解决问题” |
diagnose (mattpocock) |
230K | 自动逐层排查 Bug：先读报错信息→定位文件行→分析调用链→找出 root cause→给出修复方案。每步附带为什么这么判断的逻辑链。能自动翻代码库上下文，不用你手动喂代码 |
Code Review
| Skill | 安装量 | 说明 |
|---|---|---|
grill-me (mattpocock) |
390K | 逐层逼问你的技术方案：拆解决策树，沿每个分支深挖（”选 A 的话，并发场景怎么办？””极限 QPS 是多少？””表结构支撑未来多租户吗？”），每个问题附带推荐答案或文档引用。能自己翻代码库回答的技术细节不会来烦你。适合关键架构评审、大方案预研——不是日常 CR 工具 |
grill-with-docs (mattpocock) |
319K | 结合官方文档逐层审查：对每个技术选型，拉取对应框架/库的官方文档验证方案合法性，输出”文档支持/文档未覆盖/文档相反”三级置信度。避免拍脑袋选型 |
requesting-code-review (obra/superpowers) |
142K | CR 提交前强制自检：自我 review 变更清单、标注高风险改动、补全上下文说明（”为什么这样改”不是”改了什么”）、double-check 测试覆盖。让 reviewer 花最少时间看懂你的意图 |
receiving-code-review (obra/superpowers) |
116K | 处理 CR 反馈的标准流程：分类（逻辑错误/设计问题/风格偏好）→ 优先级 → 逐条回应（赞同+修改/不赞同+理由/需要讨论）→ 修改后回查是否引入新问题。避免陷入”改了但没解释”或”解释但没改”两种极端 |
TDD / 质量
| Skill | 安装量 | 说明 |
|---|---|---|
test-driven-development (obra/superpowers) |
141K | 严格 TDD 三拍子：先写失败测试→亲眼看到它变红→最小实现让它变绿→重构。铁律：没亲眼看到测试失败就不算 TDD，禁止先写实现再补测试。新功能/修 bug/重构一律适用。覆盖单测 + 集成测试 + E2E 分层策略 |
verification-before-completion (obra/superpowers) |
121K | 强制完成前自检：跑全量测试、检查验收标准逐条通过、验证边界/异常路径、检查是否有遗漏文件或 TODO。没通过自检不能标记 done。类似工厂出厂质检——不是信任问题，是流程保障 |
