badge-tag-patterns
Installation
SKILL.md
Badge Tag Patterns
Badge Types
| Type | Purpose | Example |
|---|---|---|
| Count badge | Quantity indicator | Notification count (5) |
| Status badge | State indicator | Active, Inactive, Pending |
| Label/Tag | Categorization | "Design," "Engineering" |
| Chip | Filterable selection | Selected filters, recipients |
Design Rules
- Count badges: Red dot for presence, number for count. Cap at 99+.
- Status badges: Use consistent colors across the app. Green=active, yellow=warning, red=error, gray=inactive.
- Tags: Allow removal (X button). Truncate long text with ellipsis.
- Chips: Include avatar/icon for people. Show selected state.