Atelier Components — Agent Allowlist

These are the only components agents may emit when authoring MDX in docs-ai/content/. Adding a new component requires a registry edit plus regeneration of this file (pnpm gen:agents). The CI gate verify-agents-md.yml fails on drift.

Available components

BuildProgress — Phased delivery timeline (L0-L9 phases, owner, dates) for cronograma/handoff docs. Manual snapshot of Vikunja state.
ComparisonMatrix — Side-by-side trade-off table with per-cell traffic-light enum (green/yellow/red) and per-row provenance source.
DesignSystemPanel — Renders a brand direction (colors, typography, spacing, radius) with optional direction label for A/B comparison.
KPIBoard — Grid of KPI tiles with value, trend, target, baseline, and provenance source. Use for delivery/marketing dashboards.
MoodBoard — Image grid for brand/visual concept exploration. Each item supports optional source_url (provenance) and concept_tag (A/B/C/D grouping).
PersonaCard — Target persona card with demographics, painPoints, goals, JTBD, objections, journeyStage, and provenance source.
QuoteCard — Itemized quote/cotización with milestones (hito), per-hito amounts, total, payment terms, and optional notes.
Sitemap — Hierarchical site map (collapsible tree) with optional intent and nav_group labels per node.
TestimonialCard — Single client testimonial with quote, author, role, optional avatar, and provenance source (sourceUrl).

BuildProgress

Description: Phased delivery timeline (L0-L9 phases, owner, dates) for cronograma/handoff docs. Manual snapshot of Vikunja state.

Props (from Zod):

Name	Type	Required	Default	Description
`steps`	`object[]`	yes	—

Example MDX:

<BuildProgress
  steps={[
    {
      "label": "L1 — Discovery + Brief",
      "status": "done",
      "phase": "L1",
      "owner": "Andre",
      "started_at": "2026-04-12",
      "completed_at": "2026-04-18"
    },
    {
      "label": "L4 — UX Research",
      "status": "current",
      "phase": "L4",
      "owner": "Percy",
      "started_at": "2026-05-02",
      "vikunja_project_id": 22
    },
    {
      "label": "L7 — Build + QA",
      "status": "pending",
      "phase": "L7",
      "owner": "Juan"
    }
  ]}
/>

ComparisonMatrix

Description: Side-by-side trade-off table with per-cell traffic-light enum (green/yellow/red) and per-row provenance source.

Props (from Zod):

Name	Type	Required	Default	Description
`columns`	`string[]`	yes	—
`rows`	`object[]`	yes	—

Example MDX:

<ComparisonMatrix
  columns={[
    "Dirección A",
    "Dirección B",
    "Dirección C"
  ]}
  rows={[
    {
      "feature": "Academic feel",
      "options": [
        {
          "name": "Dirección A",
          "value": "Strong",
          "traffic_light": "green"
        },
        {
          "name": "Dirección B",
          "value": "Mixed",
          "traffic_light": "yellow"
        },
        {
          "name": "Dirección C",
          "value": "Weak",
          "traffic_light": "red"
        }
      ],
      "source": "visual-design/DECISIONS.md"
    },
    {
      "feature": "Mobile perf budget",
      "options": [
        {
          "name": "Dirección A",
          "value": "95",
          "highlight": true,
          "traffic_light": "green"
        },
        {
          "name": "Dirección B",
          "value": "88",
          "traffic_light": "yellow"
        },
        {
          "name": "Dirección C",
          "value": "92",
          "traffic_light": "green"
        }
      ]
    }
  ]}
/>

DesignSystemPanel

Description: Renders a brand direction (colors, typography, spacing, radius) with optional direction label for A/B comparison.

Props (from Zod):

Name	Type	Required	Default
`colors`	`object[]`	no	—
`direction`	`string`	no	—
`radius`	`object[]`	no	—
`spacing`	`object[]`	no	—
`typography`	`object[]`	no	—

Example MDX:

<DesignSystemPanel
  direction="Emerald Academic"
  colors={[
    {
      "name": "Primary",
      "value": "#0F5132",
      "usage_note": "Headlines + CTAs"
    },
    {
      "name": "Accent",
      "value": "#E2B007",
      "usage_note": "Decorative only"
    }
  ]}
  typography={[
    {
      "name": "Display",
      "family": "Fraunces",
      "sample": "Aa"
    }
  ]}
  spacing={[
    {
      "name": "md",
      "value": "16px"
    }
  ]}
/>

KPIBoard

Description: Grid of KPI tiles with value, trend, target, baseline, and provenance source. Use for delivery/marketing dashboards.

Props (from Zod):

Name	Type	Required	Default	Description
`columns`	`integer`	no	—
`kpis`	`object[]`	yes	—

Example MDX:

<KPIBoard
  kpis={[
    {
      "label": "Time-to-MQL",
      "value": "36h",
      "trend": {
        "direction": "down",
        "value": "-12h"
      },
      "target": "<48h",
      "baseline": "60h (Q1)",
      "status": "good",
      "source": "docs/16-cro-plan.md"
    },
    {
      "label": "Cierres / mes",
      "value": 3,
      "target": "5",
      "status": "warn",
      "baseline": "2 (Q1)"
    }
  ]}
  columns={3}
/>

MoodBoard

Description: Image grid for brand/visual concept exploration. Each item supports optional source_url (provenance) and concept_tag (A/B/C/D grouping).

Props (from Zod):

Name	Type	Required	Default	Description
`columns`	`integer`	no	—
`items`	`object[]`	yes	—

Example MDX:

<MoodBoard
  items={[
    {
      "src": "/xgodel/concept-A.png",
      "alt": "Concept A — editorial",
      "concept_tag": "A",
      "source_url": "https://example.com/a"
    },
    {
      "src": "/xgodel/concept-B.png",
      "alt": "Concept B — historic",
      "concept_tag": "B"
    },
    {
      "src": "/xgodel/concept-C.png",
      "alt": "Concept C — premium",
      "concept_tag": "C"
    }
  ]}
  columns={3}
/>

PersonaCard

Description: Target persona card with demographics, painPoints, goals, JTBD, objections, journeyStage, and provenance source.

Props (from Zod):

Name	Type	Required	Default
`age`	`string`	no	—
`avatar`	`string`	no	—
`demographics`	`string[]`	no	—
`goals`	`string[]`	no	—
`incomeRange`	`string`	no	—
`journeyStage`	`"awareness" \| "research" \| "decision" \| "retention"`	no	—
`jtbd`	`string`	no	—
`name`	`string`	yes	—
`objections`	`string[]`	no	—
`painPoints`	`string[]`	no	—
`quote`	`string`	no	—
`role`	`string`	yes	—
`source`	`string`	no	—

Example MDX:

<PersonaCard
  name="John Medina"
  role="Cofounder, XGodel"
  demographics={[
    "Lima, Peru",
    "32 años"
  ]}
  painPoints={[
    "Leads no calificados",
    "Branding inconsistente"
  ]}
  goals={[
    "Cerrar 3 enterprise en Q3"
  ]}
  quote="Necesito que mi sitio refleje seriedad académica."
  jtbd="Cuando un VC visita la landing, quiero que perciba rigor inmediato."
  objections={[
    "No tenemos presupuesto este mes"
  ]}
  journeyStage="decision"
  age="30-35"
  incomeRange="S/.12k-20k/mes"
  source="ux-research/02-user-personas.md"
/>

QuoteCard

Description: Itemized quote/cotización with milestones (hito), per-hito amounts, total, payment terms, and optional notes.

Props (from Zod):

Name	Type	Required	Default
`client_name`	`string`	yes	—
`milestones`	`object[]`	yes	—
`notes`	`string`	no	—
`payment_terms`	`string`	yes	—
`prepared_for`	`string`	no	—
`tone`	`"default" \| "accent"`	no	—
`total`	`string`	yes	—
`valid_until`	`string`	no	—

Example MDX:

<QuoteCard
  client_name="XGodel"
  prepared_for="John Medina"
  valid_until="2026-06-30"
  milestones={[
    {
      "label": "Hito 1 — Discovery + Brief",
      "deliverable": "Brief + Sitemap + Personas",
      "amount": "S/. 1,500",
      "due": "Semana 1"
    },
    {
      "label": "Hito 2 — Build",
      "deliverable": "Landing v1 + QA",
      "amount": "S/. 3,500",
      "due": "Semana 4"
    }
  ]}
  total="S/. 5,000"
  payment_terms="50% adelanto, 50% al aprobar Hito 2."
  notes="Incluye revisiones ilimitadas hasta aprobación de cada hito."
/>

Sitemap

Description: Hierarchical site map (collapsible tree) with optional intent and nav_group labels per node.

Props (from Zod):

Name	Type	Required	Default
`defaultExpanded`	`boolean`	no	—
`density`	`"compact" \| "comfortable"`	no	—
`nodes`	`unknown[]`	yes	—

Example MDX:

<Sitemap
  nodes={[
    {
      "path": "/",
      "label": "Home",
      "intent": "transactional",
      "nav_group": "primary",
      "children": [
        {
          "path": "/about",
          "label": "About",
          "nav_group": "primary"
        },
        {
          "path": "/products",
          "label": "Products",
          "intent": "informational",
          "nav_group": "primary"
        }
      ]
    },
    {
      "path": "/contact",
      "label": "Contact",
      "nav_group": "footer"
    }
  ]}
  defaultExpanded={true}
  density="comfortable"
/>

TestimonialCard

Description: Single client testimonial with quote, author, role, optional avatar, and provenance source (sourceUrl).

Props (from Zod):

Name	Type	Required	Default
`author`	`string`	yes	—
`avatar`	`string`	no	—
`quote`	`string`	yes	—
`role`	`string`	no	—
`source`	`string`	no	—
`sourceUrl`	`string`	no	—

Example MDX:

<TestimonialCard
  quote="Cofoundy lanzó nuestra landing en 2 semanas y triplicó nuestras MQL."
  author="Cliente Demo"
  role="CEO, Demo SAC"
  source="Email — 2026-04-15"
/>

FilesExpand file tree

AGENTS.md

Latest commit

History

AGENTS.md

File metadata and controls

Atelier Components — Agent Allowlist

Available components

BuildProgress

ComparisonMatrix

DesignSystemPanel

KPIBoard

MoodBoard

PersonaCard

QuoteCard

Sitemap

TestimonialCard