nexu-io/open-design

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.

59Collecting

See how to use it View GitHub source

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

Automated source guideDesignStandard source

Source checked Jul 28, 2026·Refresh due Oct 26, 2026

Reorganized from the pinned upstream SKILL.md

Source-grounded design guide: g2-design-system-ui-kit-mqgbmh2w

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

Check the pinned source

The pinned source supports a structured brief, but not an expanded tutorial. Only detected inputs, outputs, and sections are shown.

278 source words · 4 usable sections

Best fit

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

Design process

Read g2-design-system-ui-kit-mqgbmh2w through these 4 source sections

Sections are extracted automatically from the pinned SKILL.md and link back to the source.

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.

SKILL.md · Usage

Structure

index.html - Browser-reviewable entry that loads ./colorsandtype.css, React, ReactDOM, Babel, and the component files.

SKILL.md · Structure

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.

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:

SKILL.md · Design Notes

Black optical canvas.White, secondary gray, and tertiary gray text.333333 controls, borders, and disabled surfaces.

Provenance

Formalized by Open Design from candidate 33633026-3f08-4a00-86c8-1bbd1d3e1ce4 and corrected so every referenced file is packaged in this plugin folder.

SKILL.md · Provenance

Formalized by Open Design from candidate 33633026-3f08-4a00-86c8-1bbd1d3e1ce4 and corrected so every referenced file is packaged in this plugin folder.

Design checklist

Verify each item before delivery

The source section “Usage” has been checked.

The source section “Structure” has been checked.

The source section “Design Notes” has been checked.

The source section “Provenance” has been checked.

Choose a different workflow

When another Skill is the better fit

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.

A separate implementation from event4u-app/agent-config; compare its source, maintenance signals, and permission requirements.

Open source detail

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

A separate implementation from nexu-io/open-design; compare its source, maintenance signals, and permission requirements.

Open source detail

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.

A separate implementation from event4u-app/agent-config; compare its source, maintenance signals, and permission requirements.

Open source detail

FAQ

What does the g2-design-system-ui-kit-mqgbmh2w source document cover?

How do I install g2-design-system-ui-kit-mqgbmh2w?

The source record exposes this install command: npx skills add https://github.com/nexu-io/open-design --skill "plugins/community/g2-design-system-ui-kit-mqgbmh2w". Inspect the command and pinned source before running it.

Repository stars

82,073

Repository forks

9,485

Quality

59/100

Source repository last pushed

2026-07-28

Quality breakdown

Based on traceable docs and repository signals; stars are not treated as quality.

59/100

Documentation20/30

Specificity12/25

Maintenance15/20

Trust signals12/25

Compare before choosing

Related Agent Skills and source variants

These links are selected from shared tasks, functions, stacks, platforms, and same-name variants. Compare the source owner, documentation, permissions, and maintenance signals.

existing-ui-audit by event4u-app

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.

gsap-core by nexu-io

react-shadcn-ui by event4u-app

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

react-patterns by affaan-m

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.

react-patterns by affaan-m

View original Skill.mdThis page is parsed directly from the repository SKILL.md without editorial rewriting. Collected: Jul 28, 2026 · about 2 min