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

creative →

Complete plugin installation is recommended so this skill keeps its agents, hooks, commands, and runtime context.

Claude pluginCodex pluginPortable skills

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

[ RECOMMENDED INSTALL ]

Install 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

Optional — add the marketplace to browse and install other bOpen plugins.

[ 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.

[ 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

No bundled agent declares this skill directly.

Related skills

ALL CREATIVE SKILLS →

web-devby 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

web-devby 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

web-devby 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.3

web-devby 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

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

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.

design-game-ui