JSDoc
  □ All 14 governance fields present
  □ @param for every prop
  □ @example with primary usage

Props
  □ camelCase names
  □ Boolean props: is/has prefix
  □ Handler props: on prefix
  □ Defaults in destructuring
  □ children for slot content, named props for data
  □ Spread last (...rest)
  □ Required props: no default. Optional: always have default.

Composition
  □ No cross-file imports from other `.jsx` component files
  □ Shared runtime logic for MDX-facing components stays inline or comes from a colocated `.js` helper import
  □ Renders correctly standalone and inside Mintlify globals

Styling
  □ Colours use var(--lp-*) tokens
  □ No ThemeData, no hardcoded hex, no !important
  □ Dark/light mode works (tokens + Tailwind dark:)

Error Handling
  □ Null-safe prop access throughout
  □ Required props guarded — returns null if missing
  □ Array operations guarded: (items ?? []).map()
  □ Try-catch wraps complex logic
  □ console.warn on degradation
  □ Never throws

Accessibility
  □ Semantic HTML elements
  □ Images have alt text
  □ [If interactive] ARIA attributes present
  □ [If interactive] Keyboard operable

Testing
  □ Visual verification: light and dark mode
  □ Browser test coverage: page renders
  □ Unit tests: valid props, no props, null data, missing required

Q1: Bound to an external data source or automation pipeline?
    YES → DATA

Q2: Only makes sense on frame-mode or portal pages?
    YES → PAGE STRUCTURE

Q3: Accepts children and arranges them spatially?
    YES → LAYOUT

Q4: Formats or renders content for the reader?
    YES → CONTENT

Q5: Default → PRIMITIVES

snippets/components/
├── primitives/
│   ├── divider.jsx
│   ├── icons.jsx
│   ├── ...
│   └── examples/
│       ├── divider-examples.mdx
│       └── ...
├── layout/
│   ├── containers.jsx
│   ├── ...
│   └── examples/
├── content/
│   ├── code.jsx
│   ├── video.jsx
│   ├── ...
│   └── examples/
├── data/
│   ├── data.jsx
│   ├── ...
│   └── examples/
├── display/
│   ├── frame-mode.jsx
│   ├── ...
│   └── examples/
└── page-structure/
    ├── heroGif.jsx
    ├── portals.jsx
    └── ...

JSDoc (SOT for metadata + props)
    ↓
docs-guide/component-registry.json (generated by pre-commit)
    ↓
Published MDX pages (generated, LLM editorial + template fallback)

Layer 1: Mintlify Theme (docs.json) — platform colours, layout, dark mode toggle
Layer 2: style.css (repo root) — --lp-* CSS custom properties, Mintlify overrides
Layer 3: Component styles — consume tokens, scoped vars if documented

Trigger:  pre-commit (staged files in snippets/components/)
Script:   tools/scripts/generate-component-registry.js
Input:    all JSDoc blocks in snippets/components/**/*.jsx
Output:   docs-guide/component-registry.json (auto-staged)
Errors:   missing/invalid fields → commit blocked

Trigger:  manual or chained after registry update
Script:   tools/scripts/generate-component-docs.js
Input:    registry + @param + @example + examples/ MDX files
Process:  OpenRouter LLM for editorial prose, template fallback on failure
Output:   6 published MDX pages (overview + per-category)
Caching:  LLM output cached per component hash