G2 Design System UI Kit
Use this skill when generating OpenDesign artifacts that should follow the HiCatcat G2 AR glasses HUD design system. This plugin packages a browser-reviewable UI kit, local token CSS, and modular React role components.
Structure
index.html- Browser-reviewable entry that loads./colors_and_type.css, React, ReactDOM, Babel, and the component files.colors_and_type.css- Source-backed G2 token CSS for dark HUD color, type, spacing, radius, icon, stroke, and compact/regular display modes.components/App.jsx- App shell that composes the G2 HUD surface.components/Sidebar.jsx- Compact system rail for mode, call, messages, AI, and device controls.components/AssistantsList.jsx- AI card and quick status pattern.components/ChatArea.jsx- Primary message, call, and teleprompter workspace.components/InputBar.jsx- Bottom command-entry surface.components/MessageBubble.jsx- Message, note, and assistant response unit.README.md- Human-readable package guide and validation notes.
Usage
Open index.html directly for visual review. Copy component files into a React prototype when building product-like artifacts. Ke…
