skills.rest
Noisemaker111
Noisemaker111COMMUNITY
Explore all skills by this author →
𝕏@noisemakerjonGitHub

jgengine-ui

Design and implement game UI components with visual and interaction guidance.

5|Updated Jul 5, 2026
Search Tags:#game development#accessibility#visual design#interaction design#UI components#game UI
One-click install
npx skills add https://github.com/Noisemaker111/jgengine --skill jgengine-ui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: jgengine-ui
Source: https://github.com/Noisemaker111/jgengine/tree/main/.claude/skills/jgengine-ui
Command: npx skills add https://github.com/Noisemaker111/jgengine --skill jgengine-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill assists in the design and development of user interface components for games, focusing on visual and interaction design aspects.

Core Features & Use Cases

  • Visual Design: Offers guidance on UI art direction, layout, and visual grammar for game interfaces.
  • Interaction Design: Provides instructions for implementing interactive elements such as HUDs, menus, touch controls, and accessibility features.
  • Layout Modes: Supports explicit game layout modes like desktop-wide, desktop-compact, mobile-landscape, and mobile-portrait.
  • Orientation: Handles mandatory orientation requirements for mobile devices.
  • Post-processing and Lighting: Includes guidance on applying cinematic post-processing effects and lighting settings.
  • Settings Menu: Offers configuration for settings menus with themed layouts and custom actions.
  • Motion and Game Feel: Suggests motion design principles for enhancing user experience.
  • Mobile Controls: Provides guidance on designing mobile controls that match the game's genre and identity.
  • Progressive Instruction: Encourages effective onboarding and control discovery.
  • Screenshot Verification: Requires mandatory screenshot verification for UI quality assurance.
  • Accessibility and Performance: Highlights the importance of accessibility and performance considerations in UI design.

Quick Start

Use the jgengine-ui skill to generate a basic UI layout for a game scene with a 'title screen', 'HUD', and 'inventory' components.

Frequently Asked Questions about jgengine-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I design game UIs that work across desktop and mobile layout modes?▼

To design game UIs for multiple layouts, you can define explicit modes for desktop-wide, desktop-compact, mobile-landscape, and mobile-portrait. This ensures your interface scales correctly across different screen sizes and aspect ratios.

What is the best way to implement accessible HUD and touch controls in game development?▼

The best way to implement accessible HUD and touch controls is by following interaction design guidelines that match your game's genre. You should incorporate accessibility features directly into the mobile control schemes to ensure usability for all players.

How do I build a settings menu with custom actions and themed layouts for a game?▼

Building a settings menu with custom actions requires configuring themed layouts within your game engine UI system. This allows you to maintain visual consistency while offering players personalized control over graphical and gameplay settings.

Do I need game engine experience to use this UI design skill?▼

Yes, you need familiarity with game engine UI systems to effectively use this skill. It provides advanced guidelines for visual grammar and interaction design, but requires existing knowledge of game engine architecture to implement properly.

How do I apply cinematic post-processing and lighting to game UI components?▼

Applying cinematic post-processing and lighting to game UI involves integrating specific visual effects guidelines into your interface design. This enhances the visual fidelity of menus and HUDs by aligning them with the game's overall lighting environment.

How do I verify the visual quality of my game UI implementation?▼

You verify visual game UI quality through mandatory screenshot verification. This process checks the final presentation of your interface components against design standards to ensure proper layout, readability, and interaction design.

Related Skills

Explore More Design & Creative Skills→
qx1ls-drqx1ls-dr

dice-game-development

Manages scene JSON, Lua scripts, and game.json for DICE engine 2D games.

Community
Advanced
lucidlabs-hqlucidlabs-hq
2

visual-verify

Capture interactive states and visual snapshots of a running frontend with agent-browser.

Official
Advanced
XyrcesXyrces
2

3D Lighting and Environment

Configure SDFGI, VoxelGI, LightmapGI, shadows, fog, and post-processing for Godot 4 scenes.

Community
Advanced
davpatel605-beepdavpatel605-beep

sketch

Generate disposable HTML UI mockups with interactive states for design comparison.

Community
Intermediate