Container: border OR shadow (not both), border-radius, consistent padding 16-24px Title: 16-18px semibold; Description: 14px regular, secondary color, 2-3 lines
The Cards and Lists skill provides a consistent, flexible design system for displaying collections of content using cards, lists, and grids. It defines container styles with either borders or shadows (never both), border-radius, and padding between 16 and 24 pixels. Titles use 16–18px semibold fonts, while descriptions are smaller, secondary-colored text limited to 2–3 lines for clarity and visual hierarchy.
This skill includes multiple card variants such as flat, raised, image-top, horizontal with image left, and interactive cards with hover effects. It also covers list views, from simple bordered lists to selectable and compact styles, enabling scalable layout options across web and mobile interfaces. Card grids support responsive auto-fill, fixed columns with breakpoints, and masonry layouts to optimize content density and user scanning.
This skill is ideal for performance marketers designing landing pages or product listings that require clear, scannable content blocks with consistent spacing and typography. Growth leads managing content-heavy dashboards or reporting interfaces benefit from the stat card variants to highlight key metrics. SEO and PPC operators building directories or search results pages can use the load-more and infinite scroll patterns embedded in these layouts to balance user engagement with crawlability.
Agency strategists crafting multi-channel campaigns will find the interactive card styles helpful for driving click-throughs while maintaining brand consistency. Anyone needing modular content containers that fit a variety of responsive scenarios will gain efficiency and polished results from this skill.
First, choose the appropriate container style: flat border for simplicity or raised shadow for emphasis, ensuring not to mix both on the same card. Then, apply consistent padding and border-radius to maintain visual rhythm across cards or list items. Next, structure the content hierarchy by setting titles in 16–18px semibold fonts and descriptions in smaller, muted text truncated after two or three lines to avoid overflow.
For grids, establish the layout with auto-fill or fixed columns, adjusting breakpoints to maintain usability on various screen widths. When building lists, decide whether a simple border-bottom or selectable item style fits the use case, adding interactive states as needed. Finally, integrate load-more or infinite scroll patterns to accommodate large data sets without sacrificing performance or SEO.
Can I use border and shadow together on the same card? No, this skill specifies either a border or a shadow to preserve clean visual hierarchy.
How many lines should descriptions span? Descriptions are limited to 2–3 lines using truncation to keep cards compact and readable.
When should I use masonry grid versus fixed columns? Masonry is best for varied content heights and dense layouts, while fixed columns provide consistent row alignment across breakpoints.
Attach the Cards and Lists skill to any Metaflow agent task that involves rendering content collections or UI components requiring clear visual structure. Expect well-defined containers with consistent typography and responsive layout patterns to improve content scanning and user interaction. This skill works seamlessly with other UI and interaction skills to build polished, scalable interfaces. For detailed implementation and customization options...
For broader context, see our roundup of claude marketing skills, and read common Claude Code content mistakes for related setup guidance.