Menu
验证与更新：定义组件或功能的验证流程与更新指南，包括测试策略、回归检测、变更日志维护、验证准则和更新发布步骤，确保修改可追溯、可回滚且满足可访问性与兼容性要求。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
在 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