list

Guide list layout design for linear, stacked content display.

872|122|Updated Feb 26, 2026
One-click install
npx skills add https://github.com/kostja94/marketing-skills --skill list-kostja94
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: list
Source: https://github.com/kostja94/marketing-skills/tree/main/skills/components/layout/list
Command: npx skills add https://github.com/kostja94/marketing-skills --skill list-kostja94

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps users design, optimize, and audit list layouts for displaying content in a clear, scannable, and user-friendly manner.

Core Features & Use Cases

  • Layout Guidance: Provides principles for structuring lists, distinguishing between text-heavy and visual content needs.
  • Variant Selection: Details different list variants like simple, rich, table-like, and those with thumbnails.
  • Best Practices: Offers advice on scannability, density, link areas, and metadata presentation.
  • Use Case: When designing a blog index page, this skill will guide you on how to best present the article titles, dates, and excerpts for maximum readability and user engagement.

Quick Start

Help me design a rich list layout for a blog index page.

Frequently Asked Questions about list

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is the best way to design a list layout for a blog index?

The best way to design a list layout for a blog index is to optimize for scannability by structuring article titles, dates, and excerpts to support F-pattern reading and user engagement. This approach ensures visitors can quickly parse linear, stacked content.

How do I improve scannability for dense content presentation in UI UX?

To improve scannability for dense content presentation in UI UX, apply best practices for list structure, density, link areas, and metadata presentation. Selecting the appropriate list variant helps users quickly navigate text-heavy or visual stacked content.

What list layout variants work best for documentation and search results?

For documentation and search results, effective list layout variants include simple, rich, table-like, and thumbnail-enhanced designs. Choosing the right variant depends on distinguishing between text-heavy and visual content needs for optimal readability.

How do I handle infinite scroll considerations and responsiveness in list layouts?

Handling infinite scroll considerations and responsiveness in list layouts requires applying structural best practices that maintain scannability across devices. The design must adapt stacked content display to ensure consistent user engagement during continuous scrolling.

When should I use a rich list layout versus a simple list for content design?

You should use a rich list layout instead of a simple list for content design when presenting complex blog indexes or search results that require metadata and excerpts. Simple lists suit minimal, text-heavy documentation without visual elements.