Capability Matrix Cell

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

export const meta: CompendiumMeta = {
  id: 662,
  slug: 'capability-matrix-cell',
  name: 'Capability Matrix Cell',
  category: 'ai-collaboration',
  subcategory: 'profile',
  pillar: 'co',
  description: 'One cell of the agent capability matrix — a single skill at a single proficiency tier.',
  spec: `## Intent
Capabilities are not boolean. A cell captures one skill at one proficiency tier so a matrix of agents x skills can be rendered without glue components.

## Acceptance Criteria
- [ ] Names the capability and the tier (none / partial / full)
- [ ] Tier maps to token colour (ink / attention / success)
- [ ] Negative: does NOT carry the agent name (matrix axis owns that)

## Constraints
- Tokens only
- Self-contained`,
  tags: ['card', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 90, a11y: 'aa', themed: true, animated: false },
};

const cell = { capability: 'open-pr', tier: 'full' as 'none' | 'partial' | 'full' };
const tierMap = { none: { bg: 'bg-paper', dot: 'bg-ink', label: 'NONE' }, partial: { bg: 'bg-paper', dot: 'bg-attention', label: 'PARTIAL' }, full: { bg: 'bg-paper', dot: 'bg-success', label: 'FULL' } } as const;
const t = tierMap[cell.tier];
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <p class="font-mono text-[9px] uppercase tracking-widest opacity-60">capability</p>
  <p class="font-black text-[15px] uppercase tracking-tight leading-tight mt-1">{cell.capability}</p>
  <div class="mt-3 flex items-center gap-2">
    <span class={`inline-block w-3 h-3 border-2 border-black ${t.dot}`}></span>
    <span class="font-mono text-[10px] uppercase tracking-widest font-black">{t.label}</span>
  </div>
  <div class="mt-3 grid grid-cols-3 gap-0.5">
    <span class={`h-1.5 border-2 border-black ${cell.tier === 'none' ? 'bg-ink' : 'bg-success'}`}></span>
    <span class={`h-1.5 border-2 border-black ${cell.tier === 'partial' || cell.tier === 'full' ? 'bg-success' : 'bg-paper'}`}></span>
    <span class={`h-1.5 border-2 border-black ${cell.tier === 'full' ? 'bg-success' : 'bg-paper'}`}></span>
  </div>
</div>