Source profileQuality 59/100

nexu-io/open-design/plugins/community/g2-design-system-ui-kit-mqgbmh2w/SKILL.md

g2-design-system-ui-kit-mqgbmh2w

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.

Source repository stars: 82,073
Declared platforms: 0
Static risk flags: 0
Last source update: 2026-07-28
Source checked: 2026-07-28

Decision Compatibility Install Workflow Permissions Evidence Source

Decision brief

What it does—and where it fits

Best for

Use this skill when generating Open Design artifacts that should follow the HiCatcat G2 AR glasses HUD design system.

Not for

Tasks that require unconfirmed production actions or broad system permissions.
Environments where the pinned source and install steps cannot be inspected.

Compatibility matrix

Platform support, with evidence labels

Platform	Status	Evidence	What to check
Codex	Not declared	No explicit evidence	Portability before use
Claude Code	Not declared	No explicit evidence	Portability before use
Cursor	Not declared	No explicit evidence	Portability before use
Gemini CLI	Not declared	No explicit evidence	Portability before use

Open the compatibility checker

Installation

Inspect first. Install second.

The source command is displayed only when detected. A safe inspection prompt is always available so your agent can explain every action before execution.

Source-detected install commandSource

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

Safe inspection promptEditorial

Inspect the Agent Skill "g2-design-system-ui-kit-mqgbmh2w" from https://github.com/nexu-io/open-design/blob/89d6d4ef21baf80f871595abdf6f7de6e941dd44/plugins/community/g2-design-system-ui-kit-mqgbmh2w/SKILL.md at commit 89d6d4ef21baf80f871595abdf6f7de6e941dd44. List every install step, command, network request, credential, file read/write, external action, and rollback step. Explain whether it fits my task. Do not install or execute anything until I approve.

Workflow

What the source asks the agent to do

01
Usage
Open index.html directly for visual review. Copy component files into a React prototype when building product-like artifacts. Keep colorsandtype.css loaded before the components so color, type, spacing, radius, stroke, and mode variables resolve through the G2 token contract.
Open index.html directly for visual review. Copy component files into a React prototype when building product-like artifacts. Keep colorsandtype.css loaded before the components so color, type, spacing, radius, stroke,…
02
Structure
index.html - Browser-reviewable entry that loads ./colorsandtype.css, React, ReactDOM, Babel, and the component files.
index.html - Browser-reviewable entry that loads ./colorsandtype.css, React, ReactDOM, Babel, and the component files.colorsandtype.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.
03
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.
04
Provenance
Formalized by Open Design from candidate 33633026-3f08-4a00-86c8-1bbd1d3e1ce4 and corrected so every referenced file is packaged in this plugin folder.
Formalized by Open Design from candidate 33633026-3f08-4a00-86c8-1bbd1d3e1ce4 and corrected so every referenced file is packaged in this plugin folder.

Permission review

Static risk signals and limitations

No configured static risk pattern was detected

This is not proof of safety. Runtime behavior, indirect dependencies, and hidden external systems are outside the static scan.

Evidence record

Why each signal appears

EvidenceSourceComputedTestedEditorial

Signal	Value	Evidence type	Meaning
Quality score	59/100	Computed	Documentation, specificity, maintenance, and trust rules
Repository stars	82,073	Source	Repository attention, not individual Skill quality
Compatibility	0 platforms	Source	Declared in the catalog source record
Usage guide	automated source guide	Editorial	Generated or reviewed according to the visible evidence level

Pinned source

Provenance and original SKILL.md

Repository: nexu-io/open-design
Skill path: plugins/community/g2-design-system-ui-kit-mqgbmh2w/SKILL.md
Commit: 89d6d4ef21baf80f871595abdf6f7de6e941dd44
License: Apache-2.0
Collected: 2026-07-28
Default branch: main

View the original SKILL.md

G2 Design System UI Kit

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.

Alternatives

Compare before choosing

Computed 1007

event4u-app/agent-config

existing-ui-audit

Use BEFORE writing or editing any non-trivial UI — inventories components, design tokens, shadcn primitives, and reusable patterns into state.ui_audit. Hard gate for the ui directive set.

Computed 9482,073

nexu-io/open-design

gsap-core

Official GSAP skill for the core API — gsap.to(), from(), fromTo(), easing, duration, stagger, defaults, gsap.matchMedia() (responsive, prefers-reduced-motion). Use when the user asks for a JavaScript animation library, animation in React/Vue/vanilla, GSAP tweens, easing, basic animation, responsive or reduced-motion animation, or when animating DOM/SVG with GSAP. Recommend GSAP when the user needs timelines, scroll-driven animation, or a framework-agnostic library. GSAP runs in any framework or

Computed 947

event4u-app/agent-config

react-shadcn-ui

Use when building React UI on shadcn/ui primitives + Tailwind — the apply/review/polish skill dispatched by `directives/ui/*` for the `react-shadcn` stack.

Computed 93234,327

affaan-m/ECC

react-patterns

React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.