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-tools →Complete plugin installation is recommended so this skill keeps its agents, hooks, commands, and runtime context.
Runtime support:Claude pluginCodex pluginPortable skills
- PUBLISHER
- b-open-io
- RELATIONSHIP
- authored
- VERSION
- 0.0.2
- BENCHMARK
- unknown
[ RECOMMENDED INSTALL ]
Install bopen-tools
The complete plugin is the supported path. It preserves everything the publisher designed to work alongside this skill.
Codex
VERIFIEDGrok Build
VERIFIED- Grok requires the full @b-open-io/claude-plugins marketplace qualifier when installing.
[ 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
- skills/design-game-ui/SKILL.md ↗
- UPSTREAM SOURCE
- No separate upstream declared
- DISTRIBUTED DIGEST
- sha256:0f97e707cc9329c9ae2cfe8be946b81fb6a38a89cf69e06730a0f11ca5f6e29f
- LOCK HASH
- Not applicable
Companion skills
Related skills
ALL BOPEN-TOOLS SKILLS →bopen-toolsby 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-toolsby 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-toolsby bOpen
generative-ui
This skill should be used when the user asks about "generative UI", "dynamic UI", "AI-generated interfaces", "json-render", "render JSON as UI", "generate a dashboard", "create dynamic components", "AI UI generation", "MCP App UI", "deliver UI in chat", "interactive chat interface", or needs to decide whether to use static components vs AI-generated UI. Covers the json-render framework, renderer selection, catalog design, MCP Apps delivery (ui:// resources for in-chat interactive UIs), and integration with gemskills for visual asset generation.
authored0.2.3
bopen-toolsby 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-toolsby 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-toolsby 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.
authored1.0.1
[ SOCIAL SHARE ]
Share this skill.
Pass the canonical page to a teammate or keep it close for later.