diff --git a/plugins/community/g2-design-system-ui-kit-mqgbmh2w/README.md b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/README.md new file mode 100644 index 000000000..d456d7355 --- /dev/null +++ b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/README.md @@ -0,0 +1,33 @@ +# G2 Design System UI Kit + +This community plugin packages a reviewable UI kit for the HiCatcat G2 AR glasses HUD design system. + +## What It Enables + +- Generate dark G2 HUD-style prototypes inside Open Design. +- Reuse source-backed role components for call, message, AI card, teleprompter, device, and bottom command surfaces. +- Switch between regular 640 display scale and compact 320 display scale. +- Avoid generic mobile, SaaS dashboard, marketing page, and warm brand-kit styling. + +## Files + +- `SKILL.md` - Agent instructions. +- `open-design.json` - Plugin manifest. +- `index.html` - Browser-reviewable UI kit entry. +- `colors_and_type.css` - G2 token CSS. +- `components/` - React/Babel component files used by `index.html`. +- `references/` - Provenance and source notes. + +## Review + +Open `index.html` in a browser. The page loads local CSS and component files from this plugin directory. It uses React, ReactDOM, and Babel from CDN only for the preview shell. + +The root element uses `data-g2-mode="regular"`. Change it to `data-g2-mode="compact"` to review the 320-mode scale. + +## Validation + +The plugin is valid when: + +- Every path named in `SKILL.md` and `open-design.json` exists. +- `index.html` references `./colors_and_type.css` and files under `./components/`. +- The visual direction stays aligned with G2 AR glasses HUD tokens. diff --git a/plugins/community/g2-design-system-ui-kit-mqgbmh2w/SKILL.md b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/SKILL.md new file mode 100644 index 000000000..b4626e2b7 --- /dev/null +++ b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/SKILL.md @@ -0,0 +1,37 @@ +# G2 Design System UI Kit + +Use this skill when generating Open Design 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. Keep `colors_and_type.css` loaded before the components so color, type, spacing, radius, stroke, and mode variables resolve through the G2 token contract. + +## Design Notes + +Use G2 as a dark AR glasses control interface, not a generic mobile app, SaaS dashboard, or marketing page. Preserve these source-backed cues: + +- Black optical canvas. +- White, secondary gray, and tertiary gray text. +- `#333333` controls, borders, and disabled surfaces. +- `#0D76FF` selected state. +- `#0D76FFA6` focus and touch feedback. +- Noto Sans Medium/Bold typography. +- `data-g2-mode="regular"` for 640 mode and `data-g2-mode="compact"` for 320 mode. + +Do not invent off-token accent colors, glassmorphism, or landing-page hero compositions. + +## Provenance + +Formalized by Open Design from candidate 33633026-3f08-4a00-86c8-1bbd1d3e1ce4 and corrected so every referenced file is packaged in this plugin folder. diff --git a/plugins/community/g2-design-system-ui-kit-mqgbmh2w/colors_and_type.css b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/colors_and_type.css new file mode 100644 index 000000000..cfb40b9fb --- /dev/null +++ b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/colors_and_type.css @@ -0,0 +1,238 @@ +:root { + color-scheme: dark; + --g2-bg: #000000; + --g2-text-primary: #ffffff; + --g2-text-secondary: #dddddd; + --g2-text-tertiary: #bbbbbb; + --g2-control: #333333; + --g2-control-gradient: linear-gradient(177deg, #ffffff40 0%, #ffffff0d 49.52%, #ffffff26 100%); + --g2-selected: #0d76ff; + --g2-focus: #0d76ffa6; + --g2-ai-01: linear-gradient(225deg, #78ffff 0%, #9442fe 100%); + --g2-ai-07: linear-gradient(135deg, #38f9c5 0%, #0d35ff 35.5%, #ff3fa9 76.64%, #ffce3a 100%); + --g2-font-family: "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; + --g2-font-weight-body: 500; + --g2-font-weight-bold: 700; + --g2-font-size-s: 24px; + --g2-font-size-m: 32px; + --g2-font-size-l: 48px; + --g2-line-height-s: 32px; + --g2-line-height-m: 48px; + --g2-line-height-l: 60px; + --g2-space-1: 4px; + --g2-space-2: 8px; + --g2-space-3: 12px; + --g2-space-4: 16px; + --g2-space-5: 24px; + --g2-space-xl: 32px; + --g2-radius-sm: 12px; + --g2-radius-md: 16px; + --g2-radius-lg: 24px; + --g2-stroke: 2px; + --g2-icon-lg: 48px; + --g2-max-dialog: 520px; + --g2-max-message: 520px; + --g2-max-toast: 440px; + --g2-max-bottom-bar: 640px; + --g2-ai-status-size: 100px; +} + +[data-g2-mode="compact"] { + --g2-font-size-s: 14px; + --g2-font-size-m: 20px; + --g2-font-size-l: 24px; + --g2-line-height-s: 16px; + --g2-line-height-m: 24px; + --g2-line-height-l: 32px; + --g2-space-1: 2px; + --g2-space-2: 4px; + --g2-space-3: 6px; + --g2-space-4: 8px; + --g2-space-5: 12px; + --g2-space-xl: 16px; + --g2-radius-sm: 6px; + --g2-radius-md: 8px; + --g2-radius-lg: 12px; + --g2-stroke: 1px; + --g2-icon-lg: 24px; + --g2-max-dialog: 260px; + --g2-max-message: 260px; + --g2-max-toast: 220px; + --g2-max-bottom-bar: 320px; + --g2-ai-status-size: 72px; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0; + min-height: 100vh; + background: var(--g2-bg); + color: var(--g2-text-primary); + font-family: var(--g2-font-family); + font-size: var(--g2-font-size-s); + font-weight: var(--g2-font-weight-body); + line-height: var(--g2-line-height-s); +} + +button, +input { + font: inherit; +} + +.g2-app { + min-height: 100vh; + display: grid; + grid-template-columns: minmax(96px, 160px) minmax(0, 1fr); + gap: var(--g2-space-5); + padding: var(--g2-space-5); + background: + radial-gradient(circle at 70% 18%, #0d76ff22, transparent 32%), + var(--g2-bg); +} + +.g2-panel { + border: var(--g2-stroke) solid var(--g2-control); + border-radius: var(--g2-radius-md); + background: var(--g2-control); + color: var(--g2-text-primary); +} + +.g2-sidebar, +.g2-workspace, +.g2-card, +.g2-input-bar { + border: var(--g2-stroke) solid var(--g2-control); + border-radius: var(--g2-radius-md); + background: var(--g2-control); +} + +.g2-sidebar { + display: flex; + flex-direction: column; + gap: var(--g2-space-3); + padding: var(--g2-space-4); +} + +.g2-nav-button, +.g2-send-button { + border: var(--g2-stroke) solid transparent; + border-radius: var(--g2-radius-sm); + background: transparent; + color: var(--g2-text-secondary); + min-height: var(--g2-icon-lg); + padding: var(--g2-space-2) var(--g2-space-3); +} + +.g2-nav-button[aria-current="true"], +.g2-send-button { + background: var(--g2-selected); + color: var(--g2-text-primary); +} + +.g2-nav-button:focus-visible, +.g2-send-button:focus-visible, +.g2-command-input:focus-visible { + outline: none; + box-shadow: 0 0 0 var(--g2-stroke) var(--g2-focus); +} + +.g2-workspace { + display: grid; + grid-template-rows: auto 1fr auto; + gap: var(--g2-space-5); + padding: var(--g2-space-5); + max-width: var(--g2-max-bottom-bar); + width: 100%; + margin: 0 auto; +} + +.g2-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--g2-space-4); +} + +.g2-title { + margin: 0; + font-size: var(--g2-font-size-m); + line-height: var(--g2-line-height-m); + font-weight: var(--g2-font-weight-bold); +} + +.g2-meta, +.g2-secondary { + color: var(--g2-text-secondary); +} + +.g2-tertiary { + color: var(--g2-text-tertiary); +} + +.g2-layout { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(220px, 0.45fr); + gap: var(--g2-space-5); +} + +.g2-thread, +.g2-assistants { + display: flex; + flex-direction: column; + gap: var(--g2-space-3); +} + +.g2-message { + max-width: var(--g2-max-message); + border-radius: var(--g2-radius-md); + padding: var(--g2-space-4); + background: #000000; + border: var(--g2-stroke) solid var(--g2-control); +} + +.g2-message[data-tone="ai"] { + border-color: var(--g2-focus); +} + +.g2-card { + padding: var(--g2-space-4); +} + +.g2-ai-orb { + width: var(--g2-ai-status-size); + height: var(--g2-ai-status-size); + border-radius: 50%; + background: var(--g2-ai-07); + margin-bottom: var(--g2-space-3); +} + +.g2-input-bar { + display: grid; + grid-template-columns: 1fr auto; + gap: var(--g2-space-3); + padding: var(--g2-space-3); +} + +.g2-command-input { + min-width: 0; + border: var(--g2-stroke) solid var(--g2-control); + border-radius: var(--g2-radius-sm); + background: #000000; + color: var(--g2-text-primary); + padding: var(--g2-space-2) var(--g2-space-3); +} + +@media (max-width: 720px) { + .g2-app, + .g2-layout { + grid-template-columns: 1fr; + } + + .g2-sidebar { + flex-direction: row; + overflow-x: auto; + } +} diff --git a/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/App.jsx b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/App.jsx new file mode 100644 index 000000000..30a65b1fd --- /dev/null +++ b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/App.jsx @@ -0,0 +1,28 @@ +function App() { + const Sidebar = window.Sidebar; + const ChatArea = window.ChatArea; + const AssistantsList = window.AssistantsList; + const InputBar = window.InputBar; + + return ( +
+ +
+
+
+

G2 glasses HUD · regular 640 mode

+

Live control surface

+
+ Focus #0D76FFA6 +
+
+ + +
+ +
+
+ ); +} + +window.App = App; diff --git a/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/AssistantsList.jsx b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/AssistantsList.jsx new file mode 100644 index 000000000..79286751d --- /dev/null +++ b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/AssistantsList.jsx @@ -0,0 +1,17 @@ +function AssistantsList() { + return ( + + ); +} + +window.AssistantsList = AssistantsList; diff --git a/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/ChatArea.jsx b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/ChatArea.jsx new file mode 100644 index 000000000..5ef9a7148 --- /dev/null +++ b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/ChatArea.jsx @@ -0,0 +1,19 @@ +function ChatArea() { + const MessageBubble = window.MessageBubble; + + return ( +
+ + Front display is active. Keep the action bar visible and controls close to the current task. + + + Suggested next prompt is ready. Use the compact command surface when switching to 320 mode. + + + Keep type large, direct, and source-backed. Avoid dashboard density and marketing layout. + +
+ ); +} + +window.ChatArea = ChatArea; diff --git a/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/InputBar.jsx b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/InputBar.jsx new file mode 100644 index 000000000..61a1ebb4d --- /dev/null +++ b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/InputBar.jsx @@ -0,0 +1,10 @@ +function InputBar() { + return ( +
event.preventDefault()}> + + +
+ ); +} + +window.InputBar = InputBar; diff --git a/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/MessageBubble.jsx b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/MessageBubble.jsx new file mode 100644 index 000000000..602b22689 --- /dev/null +++ b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/MessageBubble.jsx @@ -0,0 +1,10 @@ +function MessageBubble({ sender, meta, children, tone = "default" }) { + return ( +
+
{sender} · {meta}
+
{children}
+
+ ); +} + +window.MessageBubble = MessageBubble; diff --git a/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/Sidebar.jsx b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/Sidebar.jsx new file mode 100644 index 000000000..7951573ee --- /dev/null +++ b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/components/Sidebar.jsx @@ -0,0 +1,15 @@ +function Sidebar() { + const items = ["Call", "Messages", "AI", "Device"]; + + return ( + + ); +} + +window.Sidebar = Sidebar; diff --git a/plugins/community/g2-design-system-ui-kit-mqgbmh2w/index.html b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/index.html new file mode 100644 index 000000000..e90649c9c --- /dev/null +++ b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/index.html @@ -0,0 +1,24 @@ + + + + + + G2 Design System UI Kit + + + +
+ + + + + + + + + + + + diff --git a/plugins/community/g2-design-system-ui-kit-mqgbmh2w/open-design.json b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/open-design.json new file mode 100644 index 000000000..7c36dce9a --- /dev/null +++ b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/open-design.json @@ -0,0 +1,22 @@ +{ + "$schema": "https://open-design.ai/schemas/plugin.v1.json", + "specVersion": "1.0.0", + "name": "g2-design-system-ui-kit-mqgbmh2w", + "title": "G2 Design System UI Kit", + "version": "0.1.0", + "description": "A packaged Open Design UI kit for HiCatcat G2 AR glasses HUD prototypes. Includes index.html, local token CSS, and modular React components for regular 640 and compact 320 display modes.", + "od": { + "kind": "skill", + "taskKind": "new-generation", + "context": { + "skills": [ + { + "path": "./SKILL.md" + } + ] + }, + "capabilities": [ + "prompt:inject" + ] + } +} diff --git a/plugins/community/g2-design-system-ui-kit-mqgbmh2w/references/provenance.json b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/references/provenance.json new file mode 100644 index 000000000..ddced977e --- /dev/null +++ b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/references/provenance.json @@ -0,0 +1,33 @@ +{ + "candidateId": "33633026-3f08-4a00-86c8-1bbd1d3e1ce4", + "projectId": "ds-design-system", + "runId": "bc1b4d1f-a76f-4fa1-b83a-60bf8905dc6f", + "conversationId": "40d20cfe-9a0b-41e1-9810-4ec34c7b3bd3", + "provenance": { + "summary": "Formalized from the G2 design system import, then corrected so all paths named by the skill and manifest are packaged inside this plugin folder.", + "detectedAt": 1781594313727 + }, + "sourceRefs": [ + { + "kind": "file", + "value": "index.html", + "label": "index.html", + "size": 0, + "copied": true + }, + { + "kind": "file", + "value": "SKILL.md", + "label": "SKILL.md", + "size": 1762, + "copied": true + }, + { + "kind": "file", + "value": "colors_and_type.css", + "label": "colors_and_type.css", + "size": 0, + "copied": true + } + ] +} diff --git a/plugins/community/g2-design-system-ui-kit-mqgbmh2w/references/source-1-README.md b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/references/source-1-README.md new file mode 100644 index 000000000..3d8259a68 --- /dev/null +++ b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/references/source-1-README.md @@ -0,0 +1,19 @@ +# G2 Design System UI Kit Reference + +This plugin packages a browser-reviewable G2 AR glasses HUD UI kit. + +## Packaged Files + +- `index.html` - Preview entry for the composed HUD surface. +- `colors_and_type.css` - Local G2 token CSS. +- `components/App.jsx` - App shell. +- `components/Sidebar.jsx` - HUD navigation rail. +- `components/AssistantsList.jsx` - AI and device status cards. +- `components/ChatArea.jsx` - Message, call, and teleprompter workspace. +- `components/InputBar.jsx` - Bottom command surface. +- `components/MessageBubble.jsx` - Message unit. +- `README.md` - Package guide and validation notes. + +## Use + +Open `index.html` to review the kit, or copy the component files into a React prototype. Keep `colors_and_type.css` loaded first so the G2 token variables resolve. diff --git a/plugins/community/g2-design-system-ui-kit-mqgbmh2w/references/source-2-SKILL.md b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/references/source-2-SKILL.md new file mode 100644 index 000000000..af5d91943 --- /dev/null +++ b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/references/source-2-SKILL.md @@ -0,0 +1,11 @@ +--- +name: g2-design-system-ui-kit +description: Use this skill when generating Open Design artifacts that should follow the HiCatcat G2 AR glasses HUD design system. +user-invocable: true +--- + +Read `SKILL.md`, `README.md`, `colors_and_type.css`, `index.html`, and the files under `components/` before generating a new G2 HUD interface. + +Use the source-backed G2 cues: black canvas, white and gray text hierarchy, `#333333` controls, `#0D76FF` selected state, `#0D76FFA6` focus/touch feedback, Noto Sans Medium/Bold, and compact/regular display modes. + +Do not use warm brand accents, generic SaaS dashboard patterns, marketing-page hero sections, or references to files not packaged in this plugin. diff --git a/plugins/community/g2-design-system-ui-kit-mqgbmh2w/references/source-3-README.md b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/references/source-3-README.md new file mode 100644 index 000000000..c93d36134 --- /dev/null +++ b/plugins/community/g2-design-system-ui-kit-mqgbmh2w/references/source-3-README.md @@ -0,0 +1,19 @@ +# G2 AR Glasses HUD Source Notes + +HiCatcat G2 is an AR glasses control interface design system. The plugin focuses on dark HUD surfaces: calls, messages, AI cards, dialogs, toasts, teleprompter, device information, and bottom command bars. + +## Token Direction + +- Background: `#000000`. +- Primary text: `#FFFFFF`. +- Secondary text: `#DDDDDD`. +- Tertiary text: `#BBBBBB`. +- Control, border, disabled: `#333333`. +- Selected: `#0D76FF`. +- Focus and touch feedback: `#0D76FFA6`. +- Typography: Noto Sans Medium/Bold. +- Modes: regular 640 and compact 320. + +## Review Notes + +This plugin intentionally packages the files referenced by `SKILL.md`: `index.html`, `colors_and_type.css`, and `components/`.