Agent Skills
› sanity-io/sanity
sanity-io/sanity
GitHub该技能用于在GitHub PR中通过agent-browser捕获并附加前后对比截图或录屏，支持处理受保护Vercel部署、视频帧率及图片高度对齐，实现PR视觉预览自动化。
Install All Skills
npx skills add sanity-io/sanity --all -g -y
Skills in Collection (33)
该技能用于在GitHub PR中通过agent-browser捕获并附加前后对比截图或录屏，支持处理受保护Vercel部署、视频帧率及图片高度对齐，实现PR视觉预览自动化。
需要为Pull Request添加视觉对比证据
需要在PR描述中嵌入前后版本截图或录屏
npx skills add sanity-io/sanity --skill before-and-after -g -y
执行多维度代码审查，涵盖正确性、可读性、架构、安全和性能五个维度。在合并前评估代码质量，确保改进整体代码健康度并遵循项目规范，适用于个人、代理或人类编写的代码评审场景。
合并 PR 前
完成功能实现后
审查其他代理生成的代码
重构现有代码
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生成的冗余代码和风格问题，包括多余注释、防御性检查、any类型转换及深层嵌套，保持行为不变并简化代码。
审查包含AI生成代码的Git diff
清理不符合项目风格的代码
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 的步骤，确保视觉输出一致。涵盖静态样式、主题读取、变体及动画的转换方法，指导生成 .css.ts 文件并处理特异性问题。
将 styled-components 组件迁移到 vanilla-extract
创建或转换 .css.ts 样式文件
处理 @sanity/ui 的 CSS 特异性冲突
使用 vanilla-extract 重写子元素样式
npx skills add sanity-io/sanity --skill migrate-styled-components-to-vanilla-extract -g -y
用于应用性能优化，指导在存在性能瓶颈、回归或需提升加载速度时进行测量、定位、修复和验证。涵盖前端Core Web Vitals及后端APM分析，强调数据驱动避免过早优化。
用户报告页面缓慢或响应延迟
Core Web Vitals指标低于阈值
怀疑代码变更引入性能回归
需要满足特定性能SLA要求
npx skills add sanity-io/sanity --skill performance-optimization -g -y
基于 Playwright 的命令行工具，用于自动化浏览器交互。支持网页导航、表单填写、截图、数据提取及测试，提供点击、输入、键盘鼠标模拟及状态管理等命令。
需要自动化浏览网页或进行 Web 测试
需要从网页提取数据或填写表单
需要截取网页屏幕截图
npx skills add sanity-io/sanity --skill playwright-cli -g -y
用于为 Sanity monorepo 编写 PR 描述和发布说明。遵循模板，强调变更动机与备选方案，指导生成标题、描述、审查重点及测试信息，支持自动触发。
创建 Pull Request
撰写 PR 描述
起草发布说明
npx skills add sanity-io/sanity --skill pr-description -g -y
React DevTools CLI工具，用于连接运行中的React/Native应用，提供组件树、Props/State/Hooks检查及性能剖析功能，辅助调试UI问题与优化渲染性能。
debug a React or React Native app at runtime
inspect component props/state/hooks
diagnose render performance
profile re-renders
find slow components
npx skills add sanity-io/sanity --skill react-devtools -g -y
用于审计和重构 React-rx 钩子（如 useObservable），识别因 observable 身份变化导致的冗余渲染或加载闪烁问题，并优化为 useValuePreview 模式。
审查使用 react-rx 钩子的组件代码
排查页面重渲染、加载闪烁或订阅风暴问题
npx skills add sanity-io/sanity --skill react-rx-hook-audit -g -y
提供 RxJS 最佳实践，指导编写 idiomatic、可组合且避免常见陷阱的代码。核心原则是将逻辑保留在 observable 链中，避免过早 subscribe。涵盖加载状态模式、重构巨型 Observable、内部链构建及自定义算子等场景。
用户编写、重构、审查或调试使用 RxJS 的代码
代码中包含 rxjs 导入或 .pipe(), .subscribe() 等响应式模式
提及 observables, subscriptions, RxJS operators 或 reactive streams
npx skills add sanity-io/sanity --skill rxjs-like-a-pro -g -y
指导如何在 Sanity 框架中实现配置属性的合并逻辑，包括定义 Reducer 模式、类型声明及 Beta 标志处理。用于确保根配置与插件配置的确定性合并行为及默认插件门控。
添加新的配置属性或 Beta 标志
需要确定配置合并策略时
处理插件选项或源配置解析
npx skills add sanity-io/sanity --skill sanity-config-reducers -g -y
指导在 Sanity 核心插件中创建、配置和集成默认插件，涵盖插件定义、本地化资源管理及默认插件接线流程。
添加或修改 Sanity 核心插件
处理 resolveDefaultPlugins 或 studio.components 中间件相关逻辑
npx skills add sanity-io/sanity --skill sanity-default-plugins -g -y
指导正确使用Sanity i18n的Translate组件，重点说明如何处理带标记的本地化字符串。强调components必须为模块级稳定引用，禁止内联定义，并演示如何通过componentProps传递数据及常见陷阱处理。
渲染包含HTML标签或嵌套组件的国际化字符串
新增或审查<Translate>组件的使用方式
触发no-inline-translate-components代码检查规则
npx skills add sanity-io/sanity --skill sanity-i18n-translate -g -y
指导创建和解释 Sanity Studio 插件，涵盖定义、配置及文档/表单等模块开发。
创建 Sanity 插件
配置 Sanity 工具
npx skills add sanity-io/sanity --skill sanity-plugin-authoring -g -y
提供 Sanity Studio 仓库健康度仪表板的使用指南，涵盖性能趋势、发布标记、二分查找回归及数据查询方法。适用于监控 Studio 性能漂移、分析基准测试数据及排查版本问题。
询问 Studio 性能趋势或漂移情况
查看基准测试结果或发布标记
使用 Bisect 工具定位回归提交
编辑 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、需补充故事），辅助PR审查和迁移规划。
审查涉及UI文件的PR时
询问UI变更是否已被视觉回归测试覆盖时
计划UI5或vanilla-extract迁移工作时
npx skills add sanity-io/sanity --skill sanity-visual-coverage -g -y
用于 Sanity 项目的视觉回归测试管理，涵盖 Storybook、Vitest 和 Playwright 三种快照源的使用、审查及维护，确保 UI 变更的视觉一致性。
添加视觉测试覆盖
编写或审查 Storybook 故事
处理 Chromatic 差异审查
UI 组件迁移
需要视觉回归保护的 PR
npx skills add sanity-io/sanity --skill sanity-visual-regression -g -y
用于 Storybook UI 组件及故事管理。涵盖组件创建、编辑、删除时的强制调用，Storybook 启动预览，以及文档和 Props 查询。确保 UI 变更与故事同步，支持通过 MCP 插件进行自动化工作流集成。
创建或修改 UI 组件时
启动或预览 Storybook 服务
查看组件文档或属性列表
npx skills add sanity-io/sanity --skill stories -g -y
用于在项目中初始化配置 Storybook。通过执行创建命令安装最新 Storybook，添加 MCP 插件，并调用后续技能完成项目特定的配置文件设置。
需要在新项目中添加 Storybook
Storybook 初始化配置
npx skills add sanity-io/sanity --skill storybook-init -g -y
在Storybook已安装且版本达标时，通过运行npx storybook ai setup命令生成preview文件和真实组件的stories。
用户希望为已有Storybook项目生成预览和故事文件
Storybook版本满足10.5及以上要求
npx skills add sanity-io/sanity --skill storybook-setup -g -y
用于将 Storybook 升级至 10.5 或更高版本。通过阅读官方文档获取指引，若稳定版不足则使用 next 预发布版进行升级操作。
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页面
实施数据获取逻辑
重构现有代码以优化性能
减少包体积或加载时间
npx skills add sanity-io/sanity --skill vercel-react-best-practices -g -y
指导创建结构化的 Agent Skill，涵盖需求收集、SKILL.md 模板编写、资源拆分及脚本集成。重点优化描述以触发 Agent 加载，确保技能可维护且高效。
用户要求创建新的 Agent Skill
需要编写或构建 Skill 文件
npx skills add sanity-io/sanity --skill write-a-skill -g -y
帮助用户在开放技能生态中搜索、发现并安装扩展Agent能力的模块化技能包。支持通过CLI命令查询特定任务或领域的技能，并提供安装指引。
询问如何实现某功能
寻找特定任务的技能
希望扩展Agent能力
搜索工具或工作流
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及可视化测试的编写、调试、维护最佳实践，包括Page Object Model、CI/CD配置、性能优化及安全测试等场景。
编写Playwright测试用例
修复不稳定测试
配置测试CI/CD流程
npx skills add sanity-io/sanity --skill playwright-best-practices -g -y
用于运行和解读 Studio 性能基准测试，支持本地执行、PR 对比、历史数据回填及发布版本测量。
需要评估 PR 或提交的性能影响
对比两个提交的性能差异
回填或重跑每日主系列基准测试
测量特定版本的性能表现
npx skills add sanity-io/sanity --skill sanity-bench -g -y
用于调查 Sanity Studio 性能回归，通过校验主机环境、缩小提交范围并执行 A/B 测试来定位根本原因或判定为噪声。
收到性能回归调查提示
基准测试出现红色结论
询问特定提交是否导致指标下降
npx skills add sanity-io/sanity --skill sanity-radar-investigate -g -y
配置 Sanity 库的构建流程，提供 tsdown 封装的默认值与集成点。适用于创建或编辑 Sanity 包的 tsdown.config.ts 文件，处理发布默认设置、React 转换、CSS 提取及 TSDoc 检查等构建任务。
创建 Sanity 包的 tsdown.config.ts
编辑 Sanity 包的构建配置
决定使用 PackageOptions 还是原始 tsdown 选项
npx skills add sanity-io/sanity --skill sanity-tsdown-config -g -y
Dependencies:
rolldown/tsdown
