Badge tag patterns
Skill Dragoon0x/everything-design-taste/skills/badge-tag-patterns
A taste system for AI agents. 288 skills, 80 agents, 12 rules, and 8 hooks that turn generic AI output into work with genuine design quality. Anti-slop detection, typography craft, color systems, brand voice, product strategy, and 50+ specialized reviewers across UI, industry, platform, and content domains.
npx -y skills add Dragoon0x/everything-design-taste --skill badge-tag-patternsAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 6 stars6 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.
What its author says it does
Copied from the file, not written here
Badge, tag, chip, and label component design for status indication and categorization.
SKILL.md
1.0 KB, as published. Nobody here has run it
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.
Sizing
- Badges: 16-20px height, tight padding.
- Tags: 24-28px height, comfortable padding.
- Chips: 32px height, includes interactive elements.