list

# 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 | Blog index | | **Table-like** | Columns for metadata (date, status) | Docs, admin | | **With thumbnail** | Small image + text | Blog with thumbnails | ## Best Pr...