| name | app-setup |
| description | Step-by-step Playwright MCP instructions for loading layouts and installing extensions in the Lichtblick web app before taking screenshots. |
App Setup
Prepares the Lichtblick web app for documentation screenshots by loading a
layout or installing an extension via Playwright MCP.
Run these steps after verifying the app is running at http://localhost:8080
(see the screenshot-workflow skill) and before taking any screenshots.
Load a Layout
-
Open the layout menu
Use browser_snapshot to inspect the page, then click the layout name shown
in the top navigation bar (it displays the current layout name, e.g. Default).
browser_click → layout name button in the top bar
-
Open the import dialog
In the layout panel that appears, click Import from file….
browser_click → "Import from file…" menu item
-
Upload the layout file
A file picker will open. Use browser_file_upload with the absolute path to
the chosen layout file:
paths: ["<absolute-path-to-docs>/sample-data/layouts/<chosen-layout>.json"]
-
Confirm the layout loaded
Use browser_snapshot to verify the layout name in the top bar has changed
to match the imported layout. If the app shows an error, check that the JSON
file is a valid Lichtblick layout export.
Install an Extension
-
Open the Extensions panel
Click the Extensions icon in the left sidebar (puzzle-piece icon), or
open it via the top-right app menu → Extensions.
browser_click → Extensions sidebar icon
-
Open the install dialog
Click the Install local extension button (or the + / upload icon
within the Extensions panel).
browser_click → "Install local extension" button
-
Upload the extension file
A file picker will open. Use browser_file_upload with the absolute path to
the chosen extension:
paths: ["<absolute-path-to-docs>/sample-data/extensions/<chosen-extension>.foxe"]
-
Confirm the extension is active
Use browser_snapshot to verify the extension appears in the Extensions
panel list with a status of Installed (or equivalent active state).
Reload the page with browser_navigate to http://localhost:8080 if the
extension requires a restart to activate.
Order of Operations
When both a layout and an extension are needed, always follow this order:
- Install the extension
- Reload the app (
browser_navigate to http://localhost:8080)
- Load the layout
- Load the data file (see screenshot-workflow skill)
- Take screenshots
