card

SKILL.md

Components: Card Layout

Guides card layout design for scannable, responsive content display. Cards are self-contained containers that group related content; used in grids for blog posts, products, templates, tools, features, galleries, and integrations.

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.

Card Anatomy

Element
Purpose

Container
Border, background, shadow; consistent padding

Image / Thumbnail
Visual anchor; consistent aspect ratio (1:1, 4:3 common)

Title
Clear; keyword-rich where relevant

Description / Metadata
Supporting text; date, author, category

CTA
Action button or link; "View," "Use," "Connect," etc.

Principle: One card = one topic. Keep each card focused for scannability.

Card Types by Use Case