Claude Code × 网站轮播组件设计 Skill

网站轮播组件设计 Skill不在 Claude Code 的前十推荐里——Claude Code更擅长项目上下文、文件、终端和 MCP，这个 Skill 的重心不完全在这里。它仍然可以正常安装使用，只是如果你要做的就是这件事，可以先看看下面几个更合适的 Agent。

Claude Code 适合在已有项目规范下维护共享轮播组件。它可以先读取 CLAUDE.md、组件 API、设计令牌、内容类型和测试命令，再按项目约定处理按钮、分页、自动播放、图片加载与响应式状态；稳定做法还能写回项目规则供后续页面沿用。

多人维护的网站容易同时出现几套轮播：评价区一套、截图区一套、Logo 区又一套。Claude Code 可以从项目说明和组件引用关系入手，区分共享行为与页面特例，然后沿现有命名、样式和测试习惯修改。外部页面预览和连接器能力取决于当前项目配置。

1. 01

   判断轮播是否适合当前内容

   读取项目规则、路由和组件引用，按评价、截图或 Logo 场景记录轮播理由与静态布局替代方案。

2. 02

   用真实素材安排顺序与可见数量

   检查数据类型与 fixture，区分共享字段、排序规则和页面特有内容，保留真实缺失状态。

3. 03

   设计控制方式与可访问状态

   依据项目约定调整获准组件的按钮、分页、暂停、焦点和减弱动画，页面特例留在对应调用处。

4. 04

   检查服务器返回的完整 HTML、加载和布局稳定性

   运行项目配置的构建与测试；需要真实浏览器时按已配置的 MCP、hook 或人工流程检查。

提供轮播组件、类型文件、真实 fixture、设计令牌、项目规则和现有检查命令。

覆盖长评价、缺图、单项、多项和减弱动画状态，确认共享组件可用，同时场景例外仍能正确表达。

具体的自动播放间隔、单次可见数量和图片比例，需要根据实际内容长度、设备宽度和阅读节奏确定。文件扫描、组件修改、页面预览、消息提醒和多页面维护能否执行，取决于所用 Agent 的工具配置、项目资料和操作权限。

请帮我把「网站轮播组件设计 Skill」安装到 Claude Code。
1. 下载完整 Skill ZIP：https://www.vibemarketing.work/packages/skill-carousel-layout/1.0.0/skill-carousel-layout.zip
   注意：网页 HTML 不能当作 Skill 文件安装，必须使用 ZIP 里的完整文件。
2. 解压后保留 SKILL.md 及全部配套文件，按 Claude Code 的方式安装：mkdir -p ~/.claude/skills && cp -R ./skill-carousel-layout ~/.claude/skills/
3. 安装完成后告诉我实际安装目录。
4. 用一个只读小任务验证：在项目里提一个只读任务并点名 Skill，确认它按 SKILL.md 的步骤复述计划。
5. 如果你没有联网、下载或写目录权限，请直接告诉我哪几步需要我手工完成。
参考：原始 SKILL.md https://www.vibemarketing.work/raw/skill-carousel-layout/SKILL.md；安装指南 https://www.vibemarketing.work/agent-install/skill-carousel-layout.md

mkdir -p ~/.claude/skills && cp -R ./skill-carousel-layout ~/.claude/skills/