词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航

Claude Code component：按作品集约定编写 Next.js 组件

English

Claude Code 安装步骤

  1. 打开 GitHub 固定提交的 `.claude/skills/component/SKILL.md`，核对内容与使用条件。
  2. 在自己的项目中创建 `.claude/skills/component/`，把核对后的文件保存为 `.claude/skills/component/SKILL.md`。
  3. 在该项目根目录启动 Claude Code，在斜杠菜单中选择 `/component`。

中文摘要

为 Next.js 作品集区分基础、布局和业务组件，使用显式 TypeScript 属性和现有主题样式。

SKILL.md 中文导读

可复现示例

作品集 sample-18 要新增文章预览，输入 {title: 'Writing for teams', interactive: false}。卡片展示内容，不保存本地状态。

工作步骤

  1. 从页面角色和运行状态确定组件布局与边界。
  2. 写出组件属性和使用示例，复核深浅主题及交互要求。

验收方法

将文章卡放在业务组件目录，保留显式属性类型。结果核对 {title: 'Writing for teams', clientBoundary: false} 与深浅两套边框状态。

GitHub 原文 · 更新日期

适用环境

在 Claude Code 中打开 adamszczotka.dev 或采用其约定的 Next.js 与 Tailwind 项目。

常见问题

什么时候给组件加客户端声明？

需要事件、浏览器接口、局部状态或效果时再加。仅渲染作品集数据的组件可放在服务端边界。

相关指南