菜单
验证与更新：定义组件或功能的验证流程与更新指南，包括测试策略、回归检测、变更日志维护、验证准则和更新发布步骤，确保修改可追溯、可回滚且满足可访问性与兼容性要求。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
在 monorepo 中为新组件编写样式的步骤、约定与示例，说明如何使用 @vanilla-extract 和统一 token 管理、实现变体类与低优先级选择器的最佳实践。
创建可复用的 React 组件实践指南，涵盖 props 与类型约定、无状态原则、类名合并（clsx）、原生属性透传及导出规范，附示例实现。
本技能用于在网站文档中为组件创建示例页，说明示例页应包含的要素与组织规范：组件定位、可复制运行的基础示例、常见变体、交互与边界条件、可访问性要点以及测试与视觉回归快照路径。示例采用 MDX/TSX 格式并保证代码可直接复制运行。
| name | create-component-playwright-snapshot |
| description | 验证与更新：定义组件或功能的验证流程与更新指南，包括测试策略、回归检测、变更日志维护、验证准则和更新发布步骤，确保修改可追溯、可回滚且满足可访问性与兼容性要求。 |
新组件实践指南（中文）——验证与更新
可复用步骤（验证与更新部分） 5. 构建与验证 - 如需本地查看，先构建样式包并启动站点：
```bash
yarn workspace @idealjs/camphora-styled build
cd apps/website
yarn dev
```
- 我们也在仓库中提供 `yarn` 脚本别名，推荐使用以下快捷方式来运行单组件测试：
```bash
# 在 apps/website 目录下运行：
# 运行匹配组件名的测试（例如 <component>）
yarn test <component>
# 更新视觉快照（如需接受变更）
yarn test <component> -u
```
该 `yarn test <component>` 命令会使用仓库中的测试脚本别名，按测试文件名或测试描述匹配并运行相关测试，便于快速验证单个组件的视觉回归。
7. 发布流程 - 按 monorepo 的发布流程打包并发布（先 build typings 与包，再发布）。
可复用的提示词模板（新增组件时使用）
<ComponentName> 的新组件。packages/camphora-styled/src/<component>.css.ts 中，基于现有 token（或新增 token）实现基础样式与变体类。packages/camphora-react/src/components/<ComponentName>/index.tsx 中实现一个简洁的 React 包装组件，仅接受 className 与原生 HTML 属性。packages/camphora-react/src/components/index.ts。apps/website/app/(docs)/components/<component>/page.tsx 添加示例页，分别展示正交变体（如"仅颜色"、"仅尺寸"）。记录时间：2026-01-10