skills.rest
Impertio-Studio
Impertio-StudioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

thatopen-syntax-ui

Enforce correct initialization, syntax, slot composition, and theming for ThatOpen bim-* UI components.

17|1|Updated Mar 20, 2026
Search Tags:#web components#css theming#thatopen ui#bim-panel#bim-toolbar#ui-obc#lit patterns
One-click install
npx skills add https://github.com/Impertio-Studio/ThatOpen-Claude-Skill-Package --skill thatopen-syntax-ui-impertio-studio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: thatopen-syntax-ui
Source: https://github.com/Impertio-Studio/ThatOpen-Claude-Skill-Package/tree/main/skills/source/thatopen-syntax/thatopen-syntax-ui
Command: npx skills add https://github.com/Impertio-Studio/ThatOpen-Claude-Skill-Package --skill thatopen-syntax-ui-impertio-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents broken or unstyled ThatOpen bim-* user interfaces caused by missing mandatory initialization, incorrect component wiring, or misuse of package boundaries between presentational UI and functional BIM UI components.

Core Features & Use Cases

  • Mandatory UI bootstrapping: Ensures BUI.Manager.init() is called before creating any bim-* elements to correctly register custom elements and inject global styles.
  • Correct component syntax & composition: Documents the bim- component catalog (panels, toolbars, tables, inputs) and slot-based nesting rules so property propagation and event handling work as intended.
  • Theming & event patterns: Guides CSS custom-property theming (--bim-ui_*) across Shadow DOM and standard DOM event usage for interactive UI behavior.

Use cases include creating a properties panel with form controls, assembling a grid-based layout with toolbar + viewport, wiring hierarchical data into bim-table, and integrating functional UI elements from @thatopen/ui-obc with engine state.

Quick Start

Call BUI.Manager.init() at application startup before creating any bim-* elements, then build your layout using bim-grid with bim-toolbar, bim-panel, and bim-viewport.

Frequently Asked Questions about thatopen-syntax-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why are my ThatOpen bim-ui components rendering unstyled or broken?▼

ThatOpen bim-ui components render unstyled or broken when BUI.Manager.init() is not called before element creation, failing to register custom elements and inject global styles. You must initialize the manager at application startup.

How do I theme ThatOpen BIM web components using CSS?▼

To theme ThatOpen BIM web components, apply CSS custom properties using the --bim-ui_* naming convention across Shadow DOM. This ensures consistent visual styling for panels, toolbars, and inputs.

How do I compose layouts with bim-grid, bim-panel, and bim-toolbar?▼

You compose layouts by nesting bim-toolbar, bim-panel, and bim-viewport elements within a bim-grid using defined parents and slot-based composition rules, ensuring property propagation and event handling work correctly.

Can I use @thatopen/ui-obc to integrate functional UI with engine state?▼

Yes, you can use @thatopen/ui-obc to integrate functional UI elements with engine state in editor and viewer scenarios. This package handles functional BIM UI, separating it from presentational components.

What is the correct way to wire hierarchical data into a bim-table?▼

To wire hierarchical data into a bim-table, you must use the correct component syntax and slot-based nesting rules defined for the bim- component catalog. This ensures data propagation and event handling function properly.

Related Skills

Explore More Software Engineering Skills→
OpenAEC-FoundationOpenAEC-Foundation
17

thatopen-syntax-ui

Teaches ThatOpen UI syntax for building BIM interfaces with panels, toolbars, and theming.

Official
Intermediate
OpenAEC-FoundationOpenAEC-Foundation
17

thatopen-agents-viewer-builder

Scaffold a ThatOpen BIM viewer with Vite and TypeScript.

Official
Advanced
NovaShangNovaShang

IFC Direct Text Editing Agent Skill

Edit IFC files directly in text format to modify BIM data.

Community
Intermediate
deepfuturenowdeepfuturenow

dui

Guide frontend development with DUI components and design tokens.

Official
Advanced