Agent Specialty Badge

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 663,
  slug: 'specialty-badge',
  name: 'Agent Specialty Badge',
  category: 'ai-collaboration',
  subcategory: 'profile',
  pillar: 'co',
  description: 'A named specialty stamp — what this agent is best at, in one chip.',
  spec: `## Intent
Generalist agents lose to specialised ones in practice. The specialty badge advertises the single thing an agent is reliably best at — for routing and trust.

## Acceptance Criteria
- [ ] Single specialty label, uppercase
- [ ] Carries a star/icon hinting at "specialist"
- [ ] Negative: does NOT list multiple specialties

## Constraints
- Tokens only
- Inline-block, fits in a row of chips`,
  tags: ['badge', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 89, a11y: 'aa', themed: true, animated: false },
};

const specialty = 'code review';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 flex items-center justify-center overflow-hidden">
  <div class="inline-flex items-center gap-2 px-3 py-2 border-4 border-black bg-co shadow-[4px_4px_0_0_var(--color-ink)]">
    <svg viewBox="0 0 16 16" class="w-3.5 h-3.5" aria-hidden="true">
      <polygon points="8,1 10,6 15,6 11,9 13,15 8,11 3,15 5,9 1,6 6,6" fill="var(--color-ink)" />
    </svg>
    <span class="font-black text-[11px] uppercase tracking-widest">{specialty}</span>
    <span class="font-mono text-[9px] uppercase tracking-widest opacity-70 ms-1">specialist</span>
  </div>
</div>