원클릭으로
docusaurus-conventions
Formatting rules, page structure templates, and Docusaurus-specific conventions for the Lichtblick documentation site.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
메뉴
Formatting rules, page structure templates, and Docusaurus-specific conventions for the Lichtblick documentation site.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Step-by-step Playwright MCP instructions for loading layouts and installing extensions in the Lichtblick web app before taking screenshots.
Captures live screenshots from the Lichtblick web app using Playwright MCP tools. Covers app lifecycle, viewport sizing, navigation, data loading, and image saving.
| name | docusaurus-conventions |
| description | Formatting rules, page structure templates, and Docusaurus-specific conventions for the Lichtblick documentation site. |
Applies to all documentation pages in docs/ and guides/.
Every page must include all required frontmatter fields listed below.
| Field | Description |
|---|---|
title | Page title shown in the sidebar and browser tab |
description | One sentence summarizing the page — used for SEO and Algolia search |
sidebar_position | Integer controlling the page order within its sidebar section |
keywords | List of search keywords for Algolia (e.g., [gauge, panel, visualization]) |
| Field | When to Use |
|---|---|
id | When the filename differs from the desired URL slug (e.g., id: 3d for 3d-panel.md) |
slug | For section root pages that need a custom URL path |
---
id: gauge
title: Gauge Panel
description: Display a single numeric value as a gauge with configurable ranges and colors.
sidebar_position: 5
keywords: [gauge, panel, numeric, visualization, threshold]
---
Use this template for documenting Lichtblick panels:
---
title: Panel Name
description: One-sentence summary.
sidebar_position: 1
keywords: [panel, keyword1, keyword2]
---
## Overview
One to three paragraphs explaining what the panel does and when to use it.

## Settings
### Setting Category
| Field | Description |
| --- | --- |
| **Field Name** | What it does. Active voice, present tense. |
## Supported Messages
List the message schemas this panel subscribes to, with links to
the message-schemas section.
## User Interactions
Describe mouse, keyboard, and context-menu interactions.
## Troubleshooting
Common issues and solutions (include only if applicable).
Use this template for step-by-step guides:
---
title: Guide Title
description: One-sentence summary.
sidebar_position: 1
keywords: [guide, keyword1, keyword2]
---
## Introduction
What the reader will accomplish and prerequisites.
## Steps
### 1. First Step
Instructions with screenshots.
### 2. Second Step
More instructions.
## Summary
What was accomplished and links to related documentation.
#, ##, ###)## to ####)receiveTime, /camera/image_raw, frame_iddocs/visualization/panels/Use tables for settings, parameters, and option lists. Always bold the field name column:
| Field | Description |
| --- | --- |
| **Field Name** | Description in active voice. |
gauge-panel-settings.png)images/ subdirectory[Plot panel](./plot-panel.md), [Raw Image](../message-schemas/raw-image.md))[GitHub](https://github.com/lichtblick-suite/lichtblick))Use _category_.json in each folder:
{
"label": "Panels",
"position": 3,
"link": {
"type": "generated-index",
"description": "Lichtblick visualization panels."
}
}
Use sidebar_position in frontmatter to control page order within a folder.
If not set, Docusaurus orders alphabetically by filename.
[Raw Image](../message-schemas/raw-image.md)[Create Custom Panel](/guides/create-custom-panel)[3D Panel](/docs/visualization/panels/3d-panel)This project uses markdownlint-cli2. Key disabled rules (see .markdownlint-cli2.jsonc):
Run yarn lint:md to validate before committing.