Skills
.Work. You
Rest

create-component-nextjs-page

Official

Auto-create Next.js component demo pages.

Software Engineering#Next.js#Playwright#MDX#visual-regression#TSX#component-documentation
Authoridealjs
Version1.0.0
Installs0

System Documentation

What problem does it solve?

本技能用于在网站文档中为组件创建示例页，说明示例页应包含的要素与组织规范：组件定位、可复制运行的基础示例、常见变体、交互与边界条件、可访问性要点以及测试与视觉回归快照路径。示例采用 MDX/TSX 格式并保证代码可直接复制运行。

Core Features & Use Cases

  • 标准化示例页：为组件创建可直接使用的 MDX/TSX 示例页，包含定位、变体、交互与边界条件、可访问性要点。
  • 完整展示场景：支持颜色组、尺寸组、交互状态等变体的分组展示。
  • 测试与快照：集成视觉回归测试示例，便于对比变化。

Quick Start

  • Create a new Next.js MDX/TSX-based component demo page at apps/website/app/(docs)/components/<component>/page.tsx
  • Organize variants into logical groups (color, size) and wrap demos with the shared Preview component for consistent styling
  • Add a Playwright-based visual regression test in the same directory to capture a snapshot of the demo page.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: create-component-nextjs-page
Download link: https://github.com/idealjs/camphora/archive/main.zip#create-component-nextjs-page

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.