# Card Design

> Card component patterns, card layouts, content cards, action cards, and card grid systems.

- **Type:** Skill
- **Install:** `agentstack add skill-dragoon0x-everything-design-taste-card-design`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Dragoon0x](https://agentstack.voostack.com/s/dragoon0x)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Dragoon0x](https://github.com/Dragoon0x)
- **Source:** https://github.com/Dragoon0x/everything-design-taste/tree/main/skills/card-design

## Install

```sh
agentstack add skill-dragoon0x-everything-design-taste-card-design
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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
1. **Consistent height in grids** or use masonry. Mixed heights in regular grids look broken.
2. **One primary action per card.** The whole card can be clickable, or have a single CTA.
3. **Don't overload.** If a card needs more than 4-5 pieces of information, it might need a different format.
4. **Image ratios matter.** Pick one ratio (16:9, 4:3, 1:1) and stick with it across the grid.
5. **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

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Dragoon0x](https://github.com/Dragoon0x)
- **Source:** [Dragoon0x/everything-design-taste](https://github.com/Dragoon0x/everything-design-taste)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-dragoon0x-everything-design-taste-card-design
- Seller: https://agentstack.voostack.com/s/dragoon0x
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.