Agent Skills
› sanity-io/sanity
sanity-io/sanity
GitHub该 Skill 用于在 GitHub PR 中添加前后对比截图或录屏预览。它依赖 agent-browser 进行页面捕获，处理受保护部署的认证、视频录制及等高度对齐，最终将媒体文件作为预览块附加到 PR 描述中。
Install All Skills
npx skills add sanity-io/sanity --all -g -y
Skills in Collection (33)
该 Skill 用于在 GitHub PR 中添加前后对比截图或录屏预览。它依赖 agent-browser 进行页面捕获，处理受保护部署的认证、视频录制及等高度对齐，最终将媒体文件作为预览块附加到 PR 描述中。
需要为 Pull Request 添加视觉对比素材
需要将截图或录屏嵌入 PR 描述
npx skills add sanity-io/sanity --skill before-and-after -g -y
提供多维代码审查能力，涵盖正确性、可读性、架构、安全和性能五个维度。在合并前或重构后评估代码质量，确保符合规范并提升整体代码健康度。
合并 PR 或变更前
完成功能实现后
评估其他智能体生成的代码
重构现有代码
修复 Bug 后
npx skills add sanity-io/sanity --skill code-review-and-quality -g -y
旨在简化代码复杂性以提升可读性和可维护性，同时严格保持原有行为不变。适用于重构晦涩、冗长或嵌套过深的代码，消除重复逻辑，优化命名和结构，确保新成员能更快理解。
代码功能正常但难以阅读或维护
存在深层嵌套逻辑或过长函数
代码审查中发现复杂度问题
合并后出现重复或不一致代码
npx skills add sanity-io/sanity --skill code-simplification -g -y
用于审查代码变更，移除AI生成的冗余注释、防御性检查及类型转换等不规范代码，简化嵌套逻辑，保持行为不变并统一代码风格。
需要清理AI生成代码中的风格问题
审查分支差异以移除不必要的代码模式
npx skills add sanity-io/sanity --skill deslop -g -y
通过深度追问和决策树分支分析，帮助用户压力测试计划或设计，消除模糊点并达成共识。支持结合代码库探索以提供精准建议，适用于设计评审前的预演场景。
用户希望压力测试其计划或设计
用户提到 'grill me'
用户要求进行深度设计审查
npx skills add sanity-io/sanity --skill grill-me -g -y
通过探索代码库识别架构痛点，针对浅层模块提出深化重构方案以提升可测试性和AI导航能力。流程包括探索、候选推荐及并行设计多种接口，旨在解耦和简化模块边界。
用户希望改进代码架构
寻找重构机会
整合紧密耦合的模块
提升代码库的可测试性
npx skills add sanity-io/sanity --skill improve-codebase-architecture -g -y
提供将 Sanity monorepo 中的 styled-components 迁移至 vanilla-extract 的步骤，包括样式转换、特异性处理和主题适配。
将 styled-components 组件转换为 vanilla-extract
创建 .css.ts 文件
处理与 @sanity/ui 的 CSS 特异性冲突
npx skills add sanity-io/sanity --skill migrate-styled-components-to-vanilla-extract -g -y
提供性能优化指南，强调先测量后优化。涵盖前端Core Web Vitals与后端APM工具使用，以及度量、定位、修复、验证和防护的五步工作流，用于解决加载慢、响应超时等性能瓶颈问题。
应用性能要求或SLA不达标
怀疑代码变更导致性能回归
需要优化Core Web Vitals指标
处理高流量或大数据集场景
npx skills add sanity-io/sanity --skill performance-optimization -g -y
Playwright CLI 工具，用于自动化浏览器交互。支持网页导航、表单填写、截图、数据提取及状态管理，适用于 Web 应用测试、数据采集和页面操作场景。
需要自动化执行浏览器操作
进行 Web 界面测试或回归测试
从网页提取结构化数据
生成网页截图或 PDF
npx skills add sanity-io/sanity --skill playwright-cli -g -y
用于生成PR描述和发布说明的Skill，遵循Sanity仓库模板。自动触发于PR创建场景，指导分析变更、撰写符合规范的标题及包含动机、审查重点、测试和发布笔记的正文。
创建Pull Request
撰写PR描述
起草发布说明
npx skills add sanity-io/sanity --skill pr-description -g -y
React DevTools CLI，用于连接运行中的 React/React Native 应用，检查组件树、Props、状态及 Hooks，诊断渲染性能问题，分析重渲染原因并定位慢组件。
为什么这个组件会重新渲染
检查组件属性
分析应用性能
查找慢组件
调试 UI 问题
npx skills add sanity-io/sanity --skill react-devtools -g -y
用于审查和重构 React-rx Hook（如 useObservable）调用，识别因 observable 身份变化导致的多余重渲染或加载闪烁问题，并提供修复方案。
审查使用 react-rx Hook 的组件或钩子
怀疑存在重渲染、加载闪烁或重新订阅风暴时
npx skills add sanity-io/sanity --skill react-rx-hook-audit -g -y
提供 RxJS 最佳实践，指导编写声明式、可组合的代码。通过引用文件解决加载状态、大规模 Observable 重构等常见问题，核心原则是避免过早订阅，保持逻辑在操作符链中。
编写或审查使用 RxJS 的代码
遇到 .pipe()、.subscribe()、Observable 等模式
处理异步数据流和响应式编程
npx skills add sanity-io/sanity --skill rxjs-like-a-pro -g -y
规范 Sanity 配置属性的合并与注册流程，确保根配置与插件配置的确定性合并行为。指导 Reducer 模式实现、类型定义及 Beta 特性开关的处理，保障配置解析的一致性与可维护性。
添加新的配置属性或功能标志
修改 Sanity 配置合并逻辑
处理插件配置与根配置的冲突
npx skills add sanity-io/sanity --skill sanity-config-reducers -g -y
指导在 Sanity monorepo 中创建和配置核心插件，包括使用 definePlugin、注册 i18n 资源及通过 resolveDefaultPlugins 进行默认插件集成。
添加新的 Sanity 核心插件
修改现有核心插件配置
审查 core 目录下的插件代码
npx skills add sanity-io/sanity --skill sanity-default-plugins -g -y
指导在Sanity项目中正确使用<Translate>组件进行国际化，强调避免内联定义组件以防止状态丢失，并说明如何配置components和componentProps以处理含标记的本地化字符串。
渲染包含HTML标记或嵌入组件的国际化字符串
添加或审查<Translate>组件的使用
触发@repo/i18n/no-inline-translate-components lint规则
npx skills add sanity-io/sanity --skill sanity-i18n-translate -g -y
指导创建和解释 Sanity Studio 插件，涵盖 definePlugin 用法、配置选项、工具集成及 UI 组件定制。
创建 Sanity Studio 插件
添加 Studio 工具
理解插件配置能力
npx skills add sanity-io/sanity --skill sanity-plugin-authoring -g -y
Sanity Studio 仓库健康仪表盘，用于监控性能趋势、版本发布及回归分析。支持通过 GROQ 查询数据，提供趋势图、发布记录、二分查找等工具，辅助定位代码变更对构建性能的影响。
询问 Studio 性能趋势或漂移情况
分析基准测试数据或发布标记
使用 Bisect 或 Comparisons 工具排查回归
编辑 dev/radar 目录下的仪表盘代码
npx skills add sanity-io/sanity --skill sanity-radar -g -y
用于测量 @sanity/ui v5 迁移进度的工具，统计新旧版本导入及实例数量。适用于报告迁移状态、跟踪进度或CI快照。
询问迁移进度或覆盖率
对比迁移批次后的基线
执行CI或定期快照
npx skills add sanity-io/sanity --skill sanity-ui-migration-progress -g -y
检查 UI 文件是否被 Chromatic 视觉回归测试覆盖，支持 PR 变更或全仓库扫描。通过脚本分析 Story 和浏览器测试依赖关系，判断覆盖状态，辅助 PR 审查及迁移工作规划。
审查涉及 UI 组件的 PR
询问文件是否被 Chromatic 覆盖
规划 UI 迁移工作
准备添加 Story 的 PR
npx skills add sanity-io/sanity --skill sanity-visual-coverage -g -y
规范 Sanity 仓库的视觉回归测试流程，定义 Storybook、Vitest 和 Playwright 三种快照源的职责边界与使用场景，确保 UI 变更得到全面覆盖。
添加视觉测试覆盖
编写 Storybook 故事
审查 Chromatic 差异
UI 组件迁移
npx skills add sanity-io/sanity --skill sanity-visual-regression -g -y
Storybook AI 技能，用于创建、编辑组件及故事，预览 UI，管理样式与主题。触发场景包括 UI 变更、启动 Storybook 预览、组件浏览及文档查询。
创建或编辑 Storybook 故事和组件
修改 UI 样式、主题或设计令牌
启动或预览 Storybook 以验证界面
查询组件、故事列表或使用文档
npx skills add sanity-io/sanity --skill stories -g -y
用于在未配置 Storybook 的项目中初始化 Storybook，包括安装核心包、添加 MCP 插件并调用后续技能完成项目特定配置。
项目中需要从零开始集成 Storybook
用户请求初始化前端组件文档工具
npx skills add sanity-io/sanity --skill storybook-init -g -y
在 Storybook 已安装且版本达标时，生成 preview 文件和真实组件的 stories。
用户请求配置 Storybook 预览文件
需要为现有组件生成故事
npx skills add sanity-io/sanity --skill storybook-setup -g -y
用于将 Storybook 升级至 10.5 或更高版本，指导读取官方文档并按需执行稳定版或预发布版升级命令。
Storybook 需要升级
Storybook 版本低于 10.5
npx skills add sanity-io/sanity --skill storybook-upgrade -g -y
指导基于红绿重构循环的测试驱动开发实践。强调通过公共接口验证行为，采用垂直切片而非水平切片，先写一个失败测试再实现最小代码，确保测试具备集成风格且易于维护。
用户要求使用 TDD 或测试优先开发
提及红绿重构循环
请求编写集成测试
npx skills add sanity-io/sanity --skill tdd -g -y
提供Vercel官方React和Next.js性能优化指南，涵盖消除瀑布流、包体积优化及服务端渲染等57条规则。用于指导新代码编写、审查或重构，确保应用达到最佳性能标准。
编写新的React组件或Next.js页面
实施客户端或服务端数据获取
审查代码以发现性能问题
重构现有React/Next.js代码
优化打包大小或加载时间
npx skills add sanity-io/sanity --skill vercel-react-best-practices -g -y
指导如何创建符合规范的Agent技能，包括需求收集、结构定义、模板编写及描述优化，确保技能可被准确触发。
用户希望创建新的agent skill
询问skill编写规范或模板
npx skills add sanity-io/sanity --skill write-a-skill -g -y
协助用户发现、搜索并安装 Agent Skills。当用户询问如何实现特定功能或寻找扩展能力时，通过 CLI 工具检索相关技能包并提供安装指导。
询问如何实现某项任务
寻找特定领域的技能
希望扩展智能体能力
npx skills add sanity-io/sanity --skill find-skills -g -y
Dependencies:
<package>
<owner/repo@skill>
vercel-labs/agent-skills@vercel-react-best-practices
提供 Playwright 测试开发的全方位指南，涵盖 E2E、组件、API 及可视化测试的编写、调试、维护最佳实践。
编写或修复 Playwright 测试用例
调试自动化测试失败或处理不稳定测试
npx skills add sanity-io/sanity --skill playwright-best-practices -g -y
管理 Studio 性能基准测试，支持本地运行、CI 触发、A/B 对比及结果解读。用于 PR/Commit 性能评估、回归检测、发布测量及场景扩展。
需要评估 PR 或 Commit 的性能表现
比较两个版本间的性能差异
执行每日主干系列测试或回填历史数据
解释基准测试结果或排查失败原因
npx skills add sanity-io/sanity --skill sanity-bench -g -y
用于调查 Sanity Studio 性能回归。通过校验主机校准、缩小提交范围并执行 A/B 基准测试，定位导致指标下降的 culprit commit、PR 或确认为噪声。
收到 Radar 性能回归调查提示
基准测试 PR 评论中出现红色判定
询问特定提交或发布是否导致性能下降
npx skills add sanity-io/sanity --skill sanity-radar-investigate -g -y
配置 Sanity 库的构建工具 tsdown，涵盖发布默认值、React 转换、CSS 提取及 TSDoc 检查等高级选项。用于创建或编辑 tsdown.config.ts 文件，确保符合 Sanity 的库开发规范。
创建或编辑 Sanity 包的 tsdown.config.ts
配置 Sanity 库的构建和发布流程
需要启用 React 转换或 CSS 提取的构建场景
npx skills add sanity-io/sanity --skill sanity-tsdown-config -g -y
Dependencies:
rolldown/tsdown
