Prompt Card

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

export const meta: CompendiumMeta = {
  id: 47,
  slug: 'prompt-card',
  name: 'Prompt Card',
  category: 'ai-collaboration',
  subcategory: 'reasoning-and-trace',
  pillar: 'do',
  description: 'The system prompt as a sealed instrument — the operating spec under which the agent acts.',
  spec: `## Intent
Render a system prompt as a formal, sealed document (not a chat textarea). DoCoDeGo treats the prompt as a binding spec: it has a hash, a version, a signer, and constraints the agent cannot override. The visual must communicate "this is law for the model" — not "this is editable scratch text."

## Acceptance Criteria
- [ ] Shows the prompt body as quoted directives
- [ ] Shows a content hash and version
- [ ] Carries a "sealed" signature stamp
- [ ] Visually distinct from a chat bubble

## Constraints
- Mono for hashes/identifiers
- Reads on light + dark themes`,
  tags: ['card', 'stamp', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 86, a11y: 'aa', themed: true, animated: false },
};
---

<article data-this-component class="w-full bg-paper text-black border-4 border-black shadow-nb-sm relative overflow-hidden">
  <header class="px-3 py-2 border-b-2 border-black flex items-baseline justify-between gap-2">
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-70">system prompt</span>
    <span class="font-mono text-[10px] tabular-nums opacity-60">sha · 8f3a…b21e</span>
  </header>

  <div class="px-3 py-3 bg-do/15 border-b-2 border-black">
    <p class="text-[10px] font-mono uppercase tracking-widest opacity-60 mb-1">directives</p>
    <ol class="text-[11px] leading-snug space-y-1 list-decimal list-inside">
      <li>Operate strictly within SPEC-019 acceptance criteria.</li>
      <li>Cite the spec line for every code-bearing assertion.</li>
      <li>Refuse and escalate if scope expands beyond v1.3.0.</li>
    </ol>
  </div>

  <footer class="flex items-stretch text-[10px] font-mono uppercase tracking-widest">
    <div class="flex-1 px-3 py-2 border-e-2 border-black">
      <p class="opacity-60">signer</p>
      <p class="font-black normal-case tracking-tight">@platform</p>
    </div>
    <div class="flex-1 px-3 py-2 border-e-2 border-black">
      <p class="opacity-60">version</p>
      <p class="font-black normal-case tracking-tight">v1.3.0</p>
    </div>
    <div class="px-3 py-2 bg-ink text-paper flex items-center">sealed</div>
  </footer>

  <div class="pointer-events-none absolute top-1 end-1 rotate-[8deg] text-success font-black text-[10px] tracking-[0.2em] opacity-50 border-2 border-success px-1.5 py-0.5">
    BINDING
  </div>
</article>