List
- 744 installs
- 787 repo stars
- Updated June 9, 2026
- kostja94/marketing-skills
list is a UI layout skill (v1.1.1) that guides design and audit of vertical stacked list layouts for developers building blogs, documentation indexes, search results, and dense content interfaces.
About
list is a kostja94/marketing-skills agent skill at version 1.1.1 for linear, stacked list layout design. The skill targets compact, text-heavy lists where users scan by title or metadata—common on blog indexes, documentation hubs, search results pages, and infinite-scroll feeds. Developers and content engineers reach for list when optimizing or auditing list UI rather than full blog index templates covered by sibling blog-page-generator. On first use the skill may open with a short framing paragraph before applying layout rules. It complements marketing-skills component guidance focused on scannable vertical rhythm, metadata placement, and density tradeoffs for content-heavy products.
- Decides between list and grid layouts with a clear comparison table
- Provides complete list structure including items, metadata, spacing, and dividers
- Optimizes for F-pattern scanning behavior in text-heavy content
- Guides design for blog indexes, documentation pages, and search results
- Includes invocation rules for first use versus follow-up prompts
List by the numbers
- 744 all-time installs (skills.sh)
- +9 installs in the week ending Jul 25, 2026 (Skillselion tracking)
- Ranked #496 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/kostja94/marketing-skills --skill listAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 744 |
|---|---|
| repo stars | ★ 787 |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 9, 2026 |
| Repository | kostja94/marketing-skills ↗ |
How do you design scannable vertical list layouts for content?
Get expert guidance on creating clean, scannable vertical list layouts for blogs, documentation, search results, and content-heavy interfaces.
Who is it for?
Frontend developers and content designers shipping blog indexes, doc lists, or search result pages.
Skip if: Full blog landing page builds—use blog-page-generator—or grid/card gallery layouts instead of vertical lists.
When should I use this skill?
The user mentions list layout, vertical list, article list, documentation list, search results layout, or infinite scroll list.
What you get
List layout recommendations for stacked content rows, metadata placement, and scannable title hierarchy.
- List layout recommendations
- Audit notes for stacked content lists
By the numbers
- Version 1.1.1 in skill metadata
Files
Components: List Layout
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.
When to Use List
| 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.
List 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) |
List Variants
| 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 |
Best Practices
| 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 |
F-Pattern
Users read top-left first, then scan left column. Place primary content (titles) left-aligned; metadata secondary.
Infinite Scroll
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.
Responsive
- Mobile: Single column; full-width items
- Touch targets: ≥44×44px for touchable rows
- Truncation: Long titles; ellipsis or wrap by design
Related Skills
- site-crawlability: Infinite scroll SEO; paginated component pages; search-friendly implementation
- grid: Grid vs list; when to use each
- carousel: Carousel for slides; when list is too long for space
- card: Card in list (e.g., blog with thumbnail)
- toc-generator: TOC as list; jump links
- blog-page-generator: Blog index list
- article-page-generator: Article list format
- docs-page-generator: Documentation list
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Use list for row-level vertical list design; choose blog-page-generator when scaffolding an entire blog index page.
FAQ
What interfaces does the list skill target?
The list skill (v1.1.1) guides vertical stacked layouts for blog indexes, documentation lists, search results, and other text-heavy feeds. Lists emphasize compact rows scannable by title and metadata.
When should developers use list versus blog-page-generator?
The list skill audits and designs list row layouts and scanning patterns. blog-page-generator fits full blog index page builds; list focuses on stacked list components and content-density choices.
Is List safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.