g2-design-system-ui-kit-mqgbmh2w

Generate HiCatcat G2 AR glasses HUD prototypes using modular React components and tokenized CSS.

93.2k|10.8k|Updated Apr 28, 2026

Search Tags:#prototyping #design-system #AR #hud #G2 #reAct

One-click install

npx skills add https://github.com/nexu-io/open-design --skill g2-design-system-ui-kit-mqgbmh2w

Or copy as Structured Prompt for Agent▼

Please help me install this Agent Skill.
Skill: g2-design-system-ui-kit-mqgbmh2w
Source: https://github.com/nexu-io/open-design/tree/main/plugins/community/g2-design-system-ui-kit-mqgbmh2w
Command: npx skills add https://github.com/nexu-io/open-design --skill g2-design-system-ui-kit-mqgbmh2w

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses the difficulty of maintaining visual consistency when designing for specialized AR hardware, preventing the use of generic mobile or web patterns that do not align with the G2 HUD design system.

Core Features & Use Cases

Tokenized Styling: Provides a source-backed CSS contract for dark HUD colors, typography, and spacing.
Modular Components: Includes React-based role components for system rails, chat areas, and input surfaces.
Display Modes: Supports switching between regular 640 and compact 320 display scales for different AR viewing contexts.

Quick Start

Generate a new G2 HUD interface using the G2 Design System UI Kit components and the provided token CSS.

Frequently Asked Questions about g2-design-system-ui-kit-mqgbmh2w

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

FAQPage Schema

How do I generate a G2 HUD prototype?▼

Use the G2 Design System UI Kit to compose interfaces by importing the provided React components and applying the colors_and_type.css token contract.

What display modes are supported by the G2 UI kit?▼

The kit supports a regular 640 display scale and a compact 320 display scale, toggled via the data-g2-mode attribute on the root element.

Can I use custom colors in my G2 HUD design?▼

Avoid custom accent colors to maintain the G2 token contract; use the provided CSS variables for primary, secondary, and tertiary text, as well as control and focus states.

How do I preview the G2 UI kit components?▼

Open the index.html file in a browser to review the composed HUD surface, which loads the necessary React, Babel, and component files from the plugin directory.