npx skills add https://github.com/kostja94/marketing-skills --skill list指导线性、堆叠式内容展示的列表布局设计。列表紧凑、文字密集；用户通过标题或元数据进行扫描浏览。适用于博客索引、文档、搜索结果和密集内容。
调用时机：在首次使用时，如果适用，以1-2句话开场，说明此技能涵盖的内容及其重要性，然后提供主要输出。在后续使用或用户要求跳过时，直接进入主要输出。
| 使用列表的情况 | 使用网格的情况 |
|---|---|
| 文字密集；通过标题扫描 | 视觉内容；同等强调 |
| 项目众多；紧凑显示 | 项目较少；浏览式查看 |
| 博客索引、文档、搜索结果 | 产品、模板、画廊 |
| F型阅读模式（左上角、左列） | 探索、发现 |
有关网格布局，请参见 grid；有关卡片结构，请参见 card。
| 元素 | 用途 |
|---|---|
| 项目 | 单列；垂直堆叠 |
| 每个项目 | 标题、可选元数据（日期、作者）、摘要、链接 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
| 间距 | 一致的间隔；分隔线或交替背景 |
| 密度 | 紧凑型（文档）与宽松型（博客） |
| 变体 | 用途 |
|---|---|
| 简单列表 | 标题 + 链接；极简（导航、目录） |
| 丰富列表 | 标题、摘要、日期、作者 |
| 类表格列表 | 用于元数据的列（日期、状态） |
| 带缩略图列表 | 小图片 + 文字 |
| 原则 | 实践 |
|---|---|
| 易于扫描 | 清晰的标题；一致的层级结构 |
| 紧凑 | 比网格占用更少的垂直空间 |
| 链接区域 | 整行或标题可点击 |
| 元数据 | 日期、作者、分类；次要样式 |
用户首先阅读左上角，然后扫描左列。将主要内容（标题）左对齐放置；元数据作为次要内容。
如果对列表使用无限滚动（例如，博客索引、搜索结果）：爬虫无法访问滚动加载的内容。对于SEO关键内容，请提供分页的组件页面或使用传统的分页方式。有关对搜索引擎友好的无限滚动实现，请参见 site-crawlability。
每周安装数
159
代码仓库
GitHub 星标数
237
首次出现
2026年3月6日
安全审计
安装于
cursor145
gemini-cli144
kimi-cli144
codex144
opencode144
amp144
Guides list layout design for linear, stacked content display. Lists are compact, text-heavy; users scan by title or metadata. Used for blog indexes, documentation, search results, and dense content.
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 list when | Use grid when |
|---|---|
| Text-heavy; scan by title | Visual content; equal emphasis |
| Many items; compact display | Fewer items; browsing |
| Blog index, docs, search results | Products, templates, gallery |
| F-pattern reading (top-left, left column) | Discovery, exploration |
See grid for grid layout; card for card structure.
| Element | Purpose |
|---|---|
| Items | Single column; stacked vertically |
| Per item | Title, optional metadata (date, author), excerpt, link |
| Spacing | Consistent gaps; dividers or alternating background |
| Density | Compact (docs) vs relaxed (blog) |
| Variant | Use |
|---|---|
| Simple list | Title + link; minimal (nav, TOC) |
| Rich list | Title, excerpt, date, author |
| Table-like | Columns for metadata (date, status) |
| With thumbnail | Small image + text |
| Principle | Practice |
|---|---|
| Scannable | Clear titles; consistent hierarchy |
| Compact | Less vertical space than grid |
| Link area | Full row or title clickable |
| Metadata | Date, author, category; secondary styling |
Users read top-left first, then scan left column. Place primary content (titles) left-aligned; metadata secondary.
If using infinite scroll for list (e.g., blog index, search results): crawlers cannot access content loaded on scroll. Provide paginated component pages or use traditional pagination for SEO-critical content. See site-crawlability for search-friendly infinite scroll implementation.
Weekly Installs
159
Repository
GitHub Stars
237
First Seen
Mar 6, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
cursor145
gemini-cli144
kimi-cli144
codex144
opencode144
amp144
前端打磨（Polish）终极指南：提升产品细节与用户体验的系统化检查清单
41,400 周安装
