메뉴
本技能用于在网站文档中为组件创建示例页，说明示例页应包含的要素与组织规范：组件定位、可复制运行的基础示例、常见变体、交互与边界条件、可访问性要点以及测试与视觉回归快照路径。示例采用 MDX/TSX 格式并保证代码可直接复制运行。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
在 monorepo 中为新组件编写样式的步骤、约定与示例，说明如何使用 @vanilla-extract 和统一 token 管理、实现变体类与低优先级选择器的最佳实践。
创建可复用的 React 组件实践指南，涵盖 props 与类型约定、无状态原则、类名合并（clsx）、原生属性透传及导出规范，附示例实现。
验证与更新：定义组件或功能的验证流程与更新指南，包括测试策略、回归检测、变更日志维护、验证准则和更新发布步骤，确保修改可追溯、可回滚且满足可访问性与兼容性要求。
| name | create-component-nextjs-page |
| description | 本技能用于在网站文档中为组件创建示例页，说明示例页应包含的要素与组织规范：组件定位、可复制运行的基础示例、常见变体、交互与边界条件、可访问性要点以及测试与视觉回归快照路径。示例采用 MDX/TSX 格式并保证代码可直接复制运行。 |
新组件实践指南（中文）——创建示例页
本次示例涉及的文件
apps/website/app/(docs)/components/<component>/page.tsx —— Next.js 示例页面，展示各类变体。可复用步骤（示例页部分）
4. 在站点中添加示例页（Next.js）
- 在 apps/website/app/(docs)/components/<component>/page.tsx 下创建示例页面。
- 示例组织应将可互斥或正交的变体分开展示：
- 颜色组：展示 <componentPrimary>, <componentSecondary> 等，同一组不改变尺寸类。
- 尺寸组：展示 <componentSm>, <componentLg> 等，同一组不改变颜色类。
- 可复用项目内的 Preview 组件来包裹演示区域，保持风格一致。
测试（Playwright 快照）
目的：为组件示例页添加视觉回归测试，使用 Playwright 的快照匹配器 toMatchSnapshot() 自动管理快照文件，无需手动写入输出目录。
示例测试（放在示例页同目录）：
// apps/website/app/(docs)/components/<component>/page.spec.ts
import { test, expect } from '@playwright/test';
test('<component> page - snapshot', async ({ page }) => {
await page.goto('http://localhost:3000/components/<component>', { waitUntil: 'networkidle' });
await page.waitForTimeout(300);
expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
});