by bOpen

[ INTERACTION ARCHITECTURE ]

design-game-ui

Turn product workflows into interfaces that work from the couch.

Design controller- and remote-first shells with semantic actions, deterministic focus, predictable Back behavior, safe-area HUDs, and bounded specialist handoffs.

PART OF

bOpen Creative →

Install the complete plugin to include its agents, hooks, commands, and runtime context.

Claude pluginCodex pluginGrok BuildOpenCode + portable skills

PUBLISHER: b-open-io
RELATIONSHIP: authored
VERSION: 0.0.2
BENCHMARK: unknown

[ RECOMMENDED INSTALL ]

Install bOpen Creative

The complete plugin is the supported path. It preserves everything the publisher designed to work alongside this skill.

Claude Code

VERIFIED

Codex

VERIFIED

Grok Build

VERIFIED

This is the grok CLI, not Grok Bot.
grok plugin details creative

Grok Bot

GUIDED SETUP

Paste this request into your Bot’s conversation. It will report what it can add.

OpenCode

VERIFIED

Paste into OpenCode. Restart after installation.
Includes native agents, commands, skills and supported hooks/MCP. HammerTime uses bounded follow-up turns in persistent sessions.

[ ADVANCED · INDIVIDUAL SKILL ]

Install only this skill

Use this narrower path only when you intentionally want the portable SKILL.md without the plugin’s surrounding capabilities.

Skills CLI

VERIFIED

Installs only the portable skill; it omits plugin hooks, agents, commands, apps/MCP configuration, and unlisted companion skills.

Grok Bot

GUIDED SETUP

Paste into your Bot’s conversation. Once saved, use / to select the skill.

[ PROVENANCE ]

Trace it to the source.

DISTRIBUTED SOURCE: modules/creative/skills/design-game-ui/SKILL.md ↗
UPSTREAM SOURCE: No separate upstream declared
DISTRIBUTED DIGEST: sha256:ae3b2353602d4ea48aba6b8d7e23d045789062a606fa646e6a3631b6533c7eb2
LOCK HASH: Not applicable

Companion skills

ui-audio-theme

Agents using this skill

Ridd

UI and interface design agent. Use this agent when the user asks to "design a component", "create UI", "style a page", "set up shadcn", "implement dark mode", "review UI accessibility", "create a mockup", "design a game HUD", "build a TV app interface", or "add controller navigation". Covers design systems, ten-foot UI, and Pencil mockups. Not for performance work (use optimizer) or 3D scenes (use creative-developer).

Leaf

Map and geospatial specialist covering MapLibre, Mapbox, Leaflet, CesiumJS, deck.gl, OpenLayers, Turf.js, and Protomaps/PMTiles. Use this agent when the user asks to "build a map", "add marker clustering", "add a heatmap", "debug why tiles aren't loading", "swap Leaflet for MapLibre", "build a 3D globe", "visualize millions of points on a map", or needs help choosing a mapping platform, theming maps, self-hosting tiles, or geospatial analysis. Not for general React architecture (use nextjs) or backend APIs (use integration-expert).

Related skills

ALL BOPEN CREATIVE SKILLS →

bOpen Webby bOpen

chrome-cdp

This skill should be used when the user asks to "inspect this page in Chrome", "debug what's happening in my browser", "read the browser console logs", "interact with the page open in Chrome", or "attach to my live Chrome session". Interacts with the user's local Chrome browser session via Chrome DevTools Protocol — no extension, no Puppeteer — but only after explicit user approval to inspect, debug, or interact with an open tab.

authored1.0.0

bOpen Webby bOpen

frontend-performance

This skill should be used when the user asks to "optimize my Next.js app", "why is this page slow", "reduce my bundle size", "improve Core Web Vitals", or "run a Lighthouse audit". Diagnoses and fixes Next.js frontend performance issues using Lighthouse, bundle analysis, and animation best practices — covering LCP, TBT, and CLS.

authored1.0.0

bOpen Webby bOpen

generative-ui

Decide between static components and AI-generated interfaces, and build the latter. Use for "generative UI", "dynamic UI", "json-render", "render JSON as UI", "AI UI generation", "MCP App UI", "deliver UI in chat", or "interactive chat interface". Covers the json-render framework, renderer and catalog selection, and MCP Apps delivery through ui:// resources.

authored0.2.4

bOpen Webby bOpen

perf-audit

Run local performance audits on a project without network calls. This skill should be used when the user says 'audit performance', 'check bundle size', 'find large images', 'check for heavy dependencies', 'run a perf audit', 'how big is my bundle', 'optimize images', 'find oversized assets', or before any performance optimization work. Also use when an agent needs baseline metrics before making changes. All scripts output structured JSON to stdout.

authored1.0.0

bOpen Creativeby bOpen

shaders

This skill should be used when the user asks to "write a custom Three.js shader", "create a GLSL shader effect", "build a TSL shader", "debug a WebGL or WebGPU shader issue", or "build a post-processing pipeline". Covers shader workflow, the TSL node system, GLSL patterns, debugging, performance optimization, and post-processing with pmndrs/postprocessing.

authored1.0.0

bOpen Creativeby bOpen

threejs-r3f

This skill should be used when the user asks to "build a Three.js scene", "set up React Three Fiber", "animate a mesh with useFrame", "load a GLTF or GLB model", or "add physics with react-three/rapier". Covers scene setup, Drei helpers, the asset pipeline, responsive canvas, and performance budgets for Three.js and React Three Fiber projects.