UI System
This page tracks the internal UI authoring system for contributors and agents. It covers the governed component inventory, canonical template sources, and the generated VS Code snippets used to assemble new documentation pages.Components
- Governed JSX components live in
snippets/components/. - The generated component inventory lives in
docs-guide/catalog/components-catalog.mdx. - Component snippets are generated from
docs-guide/config/component-registry.json.
Templates
The section below is generated from the canonicalsnippets/templates/** source tree.
Generated section: This section is synchronized by
operations/scripts/generators/components/library/generate-ui-templates.js. Do not edit the generated block by hand. Overview
- Canonical page templates live in
snippets/templates/pages/**and generate one direct preview route each. - Canonical block templates live in
snippets/templates/blocks/**and render together on/templates/blocks/block-examples. - Generated authoring snippets live in
.vscode/templates.code-snippetsand.vscode/components.code-snippets.
Source Tree
snippets/templates
blocks
pages
Page Templates
| Template | Source | Preview | Snippet Prefix | Description |
|---|---|---|---|---|
| FAQ Page Template | snippets/templates/pages/faq-page.mdx | view | template-faq-page | Copy-ready FAQ page scaffold with canonical frontmatter and AccordionGroup structure. |
| How-To Page Template | snippets/templates/pages/how-to-page.mdx | view | lp-howto | Task-oriented page scaffold with prerequisites, steps, validation, and a next-step CTA. |
| Navigation Page Template | snippets/templates/pages/landing-and-navigation/navigation-page.mdx | view | template-navigation-page | Copy-ready navigation page scaffold with route cards for readers who need a section map. |
| Portal Page Template | snippets/templates/pages/landing-and-navigation/portal-page.mdx | view | template-portal-page | Copy-ready portal landing page scaffold with frame-mode hero content and mission cards. |
| Landing Frame Page Template | snippets/templates/pages/landing-frame-page.mdx | view | lp-landing-frame | Frame-mode landing page scaffold with hero content, start-here cards, and key-path cards. |
| Overview Page Template | snippets/templates/pages/overview-page.mdx | view | lp-overview | Reusable overview page scaffold with an overview section, key ideas, and related links. |
| OpenAPI Endpoint Template | snippets/templates/pages/reference-and-api/openapi-endpoint-page.mdx | view | template-openapi-endpoint-page | Copy-ready OpenAPI endpoint page scaffold with canonical reference frontmatter. |
| Reference Page Template | snippets/templates/pages/reference-page.mdx | view | lp-reference | Lookup-oriented reference scaffold with inputs, outputs, and a concrete example. |
| Multi-View Setup Template | snippets/templates/pages/setup-and-code-layouts/multi-view-page.mdx | view | template-multi-view-page | Copy-ready scaffold for setup guides that switch between platform or environment views and include nested mode tabs, code blocks, reference cards, and validation steps. |
| Troubleshooting Page Template | snippets/templates/pages/troubleshooting-page.mdx | view | template-troubleshooting-page | Copy-ready troubleshooting page scaffold with Symptom, Cause, Fix, and Verify sections. |
| Tutorial Page Template | snippets/templates/pages/tutorial-page.mdx | view | lp-tutorial | End-to-end tutorial scaffold with goals, prerequisites, steps, and follow-up links. |
Block Templates
| Template | Source | Preview | Snippet Prefix | Description |
|---|---|---|---|---|
| Comparison Matrix Template | snippets/templates/blocks/comparison-matrix.mdx | block examples | template-comparison-matrix | Reusable comparison and decision matrix for product or architecture choice pages. |
| Comparison Table Block | snippets/templates/blocks/comparison-table.mdx | block examples | template-comparison-table | Reusable comparison table block for choosing between options, workflows, or deployment paths. |
| Related Pages Cards Block | snippets/templates/blocks/related-pages-cards.mdx | block examples | template-related-pages | Reusable related-pages card group for end-of-page CTA sections. |
| Related Pages CTA Template | snippets/templates/blocks/related-pages-cta.mdx | block examples | template-related-pages-cta | Reusable related-pages block template for routing readers to the next two pages. |
| //: # (AUTO-GENERATED:UI-TEMPLATES:END) |
Snippets
- Generic MDX helpers remain in
.vscode/mdx.code-snippets. - Page/block template snippets are generated into
.vscode/templates.code-snippets. - Component tag snippets are generated into
.vscode/components.code-snippets.