Card design

Skill Dragoon0x/everything-design-taste/skills/card-design

Card component patterns, card layouts, content cards, action cards, and card grid systems.From its SKILL.md

Install

npx -y skills add Dragoon0x/everything-design-taste --skill card-design

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.0 KB, 440 tokens by cl100k_base, as published. Nobody here has run it

Card Design

Anatomy

┌─────────────────────┐
│  [Media/Image]      │  Optional: visual anchor
│                     │
│  Category Label     │  Optional: metadata
│  Heading           │  Required: primary info
│  Description text  │  Optional: supporting info
│                     │
│  [Metadata/Footer]  │  Optional: date, author, tags
│  [Actions]          │  Optional: buttons, links
└─────────────────────┘

Rules

Consistent height in grids or use masonry. Mixed heights in regular grids look broken.
One primary action per card. The whole card can be clickable, or have a single CTA.
Don't overload. If a card needs more than 4-5 pieces of information, it might need a different format.
Image ratios matter. Pick one ratio (16:9, 4:3, 1:1) and stick with it across the grid.
Hover states should indicate interactivity (subtle lift, border change, or background shift).

Card Variants

Variant	Use Case
Content card	Blog posts, articles, products
Action card	Dashboard widgets, quick actions
Profile card	Team members, user profiles
Stat card	KPIs, metrics, numbers
Media card	Video, image, audio thumbnails

Grid Layouts

2 columns: Side-by-side comparison, editorial
3 columns: Product listings, blog archives (most common)
4 columns: Dense grids, small cards, dashboards
Masonry: Pinterest-style, variable height content

Anti-Patterns

Cards with 3 different clickable areas (confusing targets)
Drop shadows so heavy they dominate the page
Border-radius: 24px (too much, 8-12px is usually right)
Cards that are just styled divs with no interactive purpose

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.