A utility class for bordered containers:

.border-box {
  border: 1px solid var(--c-border);
  padding: var(--s-gap);
}

Monospace badges for status indicators:

<StatusBadge status="Live" />

Card component for index pages representing a single article item. Includes an optional description snippet.

<SpecCard 
  title="Context Engineering" 
  description="A set of practices designed to optimize what an AI agent 'sees'..."
  url="/concepts/context-engineering"
  meta="Oct 12, 2026"
  status="Live"
  tags={["context", "agentic-sdlc"]}
/>

Dense row component for directory listings. Designed for use in status-grouped lists where items need to be scanned quickly by title.

Each row renders as a single semantic <a> tag with a title and optional description. Status, tags, and dates are intentionally omitted — status is communicated by the parent grouping; everything else lives on the detail page.

• Root element: Semantic <a> tag — the entire row is clickable.
• Context: Must be placed inside a <li> within a <ul class="spec-list"> for correct list semantics.
• Description: Optional secondary text for disambiguation when titles are similar.

<ul class="spec-list">
  <li>
    <SpecListItem
      title="Living Specs"
      url="/practices/living-specs"
      description="A practice for maintaining specifications..."
    />
  </li>
</ul>

Standardized header for specification pages (Concepts, Patterns, Practices). Supports data-driven metadata rendering.

<SpecHeader
  data={articleSchema.parse({
    title: "Example Specification",
    description: "A standardized header component...",
    status: "Live",
    lastUpdated: new Date(),
    tags: ["example"]
  })}
/>

Used for critical system-wide alerts (e.g., Alpha Release warning).

<div class="banner-warning">
  SYSTEM ALERT: EXAMPLE WARNING BANNER
</div>

Structured reference component for citing external sources in APA-inspired format. Supports 7 reference types: website, paper, book, podcast, video, repository, and standard.

<ArticleReferences references={[
  {
    type: "website",
    title: "OpenAI Best Practices for Prompt Engineering",
    url: "https://platform.openai.com/docs/guides/prompt-engineering",
    author: "OpenAI",
    published: new Date("2024-01-15"),
    accessed: new Date("2026-01-08"),
    annotation: "Foundational guidance on structuring prompts..."
  },
  // ... more references
]} />

Features:

• APA-inspired citation format: Author (Year). Title. Metadata.
• Semantic HTML with <cite>, <ol>, and proper accessibility
• Automatic handling of missing optional fields
• External links with rel="external noopener"
• Required accessed date for website references (validated in schema)