skills.rest
OpenAEC-Foundation
OpenAEC-FoundationOFFICIAL
Explore all skills by this author →
GitHub

thatopen-syntax-ui

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

ThatOpen UI syntax provides a clear guide for building BIM interfaces with the ThatOpen UI library, ensuring consistent initialization, usage patterns, and engine integration.

Core Features & Use Cases

  • UI composition patterns: panels, toolbars, grids, and BIM components wired to engine state via ui-obc.
  • Initialization discipline: enforces BUI.Manager.init() before any bim-* usage.
  • Theming and interoperability: CSS custom properties and interop with @thatopen/ui-obc for dynamic styling and data binding.

Use Case: A frontend developer builds a BIM viewer UI with a toolbar, panel, and viewport, then connects to engine components using the ui-obc factories.

Quick Start

Run a minimal setup by initializing the UI manager, then instantiate a bim-grid with a bim-toolbar and a bim-panel, wiring them to engine components.

Frequently Asked Questions about thatopen-syntax-ui

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

FAQPage Schema
How do I build a BIM web interface using ThatOpen UI components?▼

To build a BIM web interface, compose panels, toolbars, and grids using ThatOpen UI web components, then wire them to engine state via @thatopen/ui-obc factory functions.

What is the correct initialization sequence for ThatOpen UI web components?▼

The required initialization sequence mandates calling BUI.Manager.init() before instantiating or using any bim-* components in your BIM frontend application.

How do I apply dynamic theming to BIM UI components in a web application?▼

Apply dynamic theming to BIM UI components by overriding CSS custom properties, ensuring interoperability with @thatopen/ui-obc for dynamic styling and data binding.

Can I connect ThatOpen UI panels directly to BIM engine components?▼

Yes, you connect ThatOpen UI panels and toolbars to BIM engine components using the factory functions provided by the @thatopen/ui-obc integration layer.

What is the best way to structure a BIM viewer UI with ThatOpen?▼

Structure a BIM viewer UI by instantiating a bim-grid alongside a bim-toolbar and a bim-panel, then bind them to engine components using ui-obc factories.

Why are my ThatOpen UI bim-* components not rendering in the browser?▼

ThatOpen UI bim-* components fail to render if the UI manager is not initialized first, requiring a strict BUI.Manager.init() call before any component usage.

Related Skills

Explore More Software Engineering Skills→
Impertio-StudioImpertio-Studio
11

threejs-impl-ifc-viewer

Load and visualize IFC/BIM models within a Three.js scene.

Official
Advanced
Impertio-StudioImpertio-Studio
17

thatopen-syntax-ui

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

Official
Intermediate
sebastianlujansebastianlujan
1

tailwind-4

Guide Tailwind CSS styling with conditional classes and the cn() utility.

Community
Intermediate
OpenAEC-FoundationOpenAEC-Foundation
7

crosstech-impl-bim-web-viewer

Automate BIM web viewer construction from IFC data to browser rendering.

Official
Advanced