npx skills add https://github.com/kostja94/marketing-skills --skill carousel指导轮播(滑块)布局设计,用于顺序内容展示。轮播一次显示一个或少数几个项目;用户通过滑动或点击来前进。在空间有限且需要轮换展示多个项目时最为适用——例如推荐语、引述、徽标、图库精选。
调用时:在首次使用时,如果有助于理解,可以用1-2句话开场,说明此技能涵盖的内容及其重要性,然后提供主要输出。在后续使用或用户要求跳过时,直接提供主要输出。
| 使用轮播当 | 使用网格/列表当 |
|---|---|
| 空间有限 | 完整目录可见 |
| 一次聚焦一个项目;需要轮换展示 | 浏览、比较多个项目 |
| 推荐语、引述、徽标、精选图库 | 产品、模板、博客索引 |
| 首屏位置;英雄区域或版块高亮 | 完整列表;探索发现 |
查看 grid 了解平级展示;list 了解文本密集的浏览;masonry 了解高度可变的图库。
| 布局 | 结构 | 最佳适用场景 |
|---|---|---|
| Grid |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 等行等列;全部可见 |
| 产品、模板、功能特性 |
| List | 单列;堆叠 | 博客索引、文档、搜索结果 |
| Masonry | 多列;高度可变 | Pinterest 风格图库 |
| Carousel | 幻灯片;一次可见一个/少数几个;滑动/点击 | 推荐语、徽标、精选项目 |
prefers-reduced-motion,避免自动前进| 使用场景 | 格式 | 页面技能 |
|---|---|---|
| 推荐语 | 引述轮播;多条推荐语 | testimonials-generator |
| 展示 / 图库 | 精选项目;轮换展示 | showcase-page-generator |
| 媒体报道徽标 | “媒体报道”徽标条或引述轮播 | press-coverage-page-generator |
| 社区 | 英雄区域下方的横幅轮播 | community-forum |
每周安装数
180
代码仓库
GitHub 星标数
239
首次出现
2026年3月6日
安全审计
安装于
cursor162
gemini-cli161
kimi-cli161
codex161
opencode161
github-copilot161
Guides carousel (slider) layout design for sequential content display. Carousels show one or few items at a time; users swipe or click to advance. Best when space is limited and multiple items need rotation—testimonials, quotes, logos, gallery highlights.
When invoking : On first use , if helpful, open with 1–2 sentences on what this skill covers and why it matters, then provide the main output. On subsequent use or when the user asks to skip, go directly to the main output.
| Use carousel when | Use grid/list when |
|---|---|
| Limited space | Full catalog visible |
| One focus at a time; rotation desired | Browse, compare many items |
| Testimonials, quotes, logos, featured gallery | Products, templates, blog index |
| Above fold; hero or section highlight | Full listing; discovery |
See grid for equal-hierarchy display; list for text-heavy scan; masonry for varying-height gallery.
| Layout | Structure | Best for |
|---|---|---|
| Grid | Equal rows and columns; all visible | Products, templates, features |
| List | Single column; stacked | Blog index, docs, search results |
| Masonry | Columns; varying heights | Pinterest-style gallery |
| Carousel | Slides; one/few visible; swipe/click | Testimonials, logos, featured items |
prefers-reduced-motion is set| Use case | Format | Page Skill |
|---|---|---|
| Testimonials | Quote carousel; multiple testimonials | testimonials-generator |
| Showcase / Gallery | Featured items; rotation | showcase-page-generator |
| Press logos | "As Seen In" logo strip or quote carousel | press-coverage-page-generator |
| Community | Banner carousel below hero | community-forum |
Weekly Installs
180
Repository
GitHub Stars
239
First Seen
Mar 6, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
cursor162
gemini-cli161
kimi-cli161
codex161
opencode161
github-copilot161
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
116,600 周安装