game-dev-2d-ui-accessibility

어떤 스킬인가요?

Use when game HUD, menus, localization presentation, canvas/DOM labels, responsive layout, focus, touch, contrast, accessible names, captions, or reduced motion change. Do not use for combat rules, AI, persistence, audio, or art production.

설치 방법

프로젝트 폴더에서 아래 명령어를 실행하고, 설치할 에이전트를 선택하세요.

설치 명령을 직접 실행해야 적용됩니다. 지원 에이전트와 필요한 권한·라이선스는 제작자의 안내를 확인하세요.

스킬 원문 파일

interface:
  display_name: "Game UI Accessibility"
  short_description: "Build accessible, responsive game UI"
  default_prompt: "Use $game-dev-2d-ui-accessibility to build an accessible, responsive interface for this game."

# Accessible game UI

## Input and focus

- Support all input methods claimed by the game.
- Use visible focus indicators independent of hover.
- Define focus order and directional neighbors.
- Set initial focus and restore it after modal dismissal.
- Prevent gameplay input while a blocking menu owns input.
- Show device-aware prompts without changing action semantics.
- Allow remapping and resolve conflicts explicitly.

## Layout

Design against logical resolution, safe areas, aspect ratios, and text expansion. Prefer containers or constraints over fixed coordinates. Test maximum supported text size and long localized strings.

## Readability

- Use sufficient contrast and legible font sizes.
- Keep essential text as text, not pixels in an image.
- Avoid dense all-caps body copy.
- Distinguish focus, selected, disabled, danger, and success by more than hue.
- Keep critical HUD information readable over worst-case backgrounds.

## Feedback

Pair essential audio cues with visual or textual signals. Pair color with icon, shape, pattern, position, or text. Provide subtitles or captions when dialogue or audio conveys required information.

## Motion and flashes

Offer independent controls where appropriate for camera shake, flashes, rumble, motion effects, and repeated particles. Respect the setting in gameplay, UI, cutscenes, and tutorials.

## Settings

Make accessibility options reachable before demanding difficult play. Preview effects safely. Persist settings independently of a gameplay save and provide a reset path.

## Error and confirmation

Explain invalid actions, destructive choices, storage failures, and remapping conflicts. Keep confirmations actionable and return focus predictably.

## Verification matrix

Test:

- keyboard only;
- controller only;
- pointer and touch;
- reduced motion and flashes;
- mute with captions or visual cues;
- color-vision simulations;
- large text and localization expansion;
- narrow, wide, and safe-area viewports;
- pause, disconnect, focus loss, and device switching.

# Godot UI and accessibility

Inspect the installed Godot version, Control hierarchy, Containers, theme resources, Input Map, focus neighbors, localization, and stretch settings.

## Patterns

- Build layout with Control nodes and Containers rather than manual per-resolution coordinates.
- Use Themes and theme variations for consistent visual states.
- Define focus mode, initial focus, directional neighbors, and focus restoration.
- Keep gameplay actions separate from built-in UI navigation actions.
- Use CanvasLayer according to HUD and world-space needs.
- Test translated text, font fallback, layout direction, and text expansion.
- Store reduced-motion, captions, contrast, text scale, and remapping settings in a durable settings profile.

## Testing

Navigate entire flows with keyboard or controller, inspect focus after hiding nodes, and test all supported stretch modes and safe areas on exported targets.

## Official references

- [User interface](https://docs.godotengine.org/en/stable/tutorials/ui/index.html)
- [Keyboard/controller navigation](https://docs.godotengine.org/en/stable/tutorials/ui/gui_navigation.html)
- [Internationalization](https://docs.godotengine.org/en/stable/tutorials/i18n/index.html)
- [Multiple resolutions](https://docs.godotengine.org/en/stable/tutorials/rendering/multiple_resolutions.html)

# Phaser UI and accessibility

Inspect Phaser version, canvas scale policy, DOM container use, scene layering, input plugins, fonts, and browser targets.

## Patterns

- Use a dedicated UI Scene when its lifecycle and camera differ from gameplay.
- Keep UI state in testable TypeScript models.
- Use Phaser Game Objects for integrated canvas visuals and native DOM elements when semantic HTML, text input, or browser accessibility materially helps.
- Remember DOM elements sit outside the canvas display list and have camera and nesting limitations.
- Translate pointer, keyboard, touch, and gamepad events into semantic UI actions.
- Handle browser focus, resizing, DPR, fullscreen, and orientation changes.
- Expose accessible HTML alternatives for essential web controls when canvas alone cannot meet the requirement.

## Testing

Use browser automation for tab order, DOM semantics, focus restoration, resize, touch targets, and keyboard flow. Use screenshots for stable layout, not as the sole accessibility evidence.

## Official references

- [Input](https://docs.phaser.io/phaser/concepts/input)
- [DOM Element](https://docs.phaser.io/phaser/concepts/gameobjects/dom-element)
- [Scale Manager](https://docs.phaser.io/phaser/concepts/scale-manager)
- [Scenes](https://docs.phaser.io/phaser/concepts/scenes)

---
name: game-dev-2d-ui-accessibility
description: "Use when game HUD, menus, localization presentation, canvas/DOM labels, responsive layout, focus, touch, contrast, accessible names, captions, or reduced motion change. Do not use for combat rules, AI, persistence, audio, or art production."
---

# Game UI Accessibility

Build Phaser and Godot 2D interfaces that remain readable, operable, and understandable across supported displays and input methods.

## Establish the interface contract

1. Inspect engine version, target platforms, logical resolution, scale policy, input actions, localization, font pipeline, and existing accessibility settings.
2. List screens, HUD information, focus order, modal behavior, devices, and safe-area requirements.
3. Identify essential information and provide redundant cues.
4. Define supported text scale, languages, aspect ratios, and reduced-effect settings.

## Load references

- Read [accessible-ui.md](references/accessible-ui.md) for layout, navigation, text, feedback, settings, and verification.
- For Phaser, also read [phaser.md](references/phaser.md).
- For Godot, also read [godot.md](references/godot.md).
- If installed, compose with `$game-dev-2d-save-progression` for settings persistence
  and `$game-dev-2d-art` for UI asset production. Otherwise keep those boundaries
  explicit and complete this interface workflow independently.

## Implement one complete flow

1. Use semantic actions rather than raw device keys.
2. Establish initial focus and deterministic navigation.
3. Make hover, focus, pressed, disabled, error, and selected states visually distinct.
4. Support cancellation and prevent input from leaking through modals.
5. Reflow or scale under supported viewport and text settings.
6. Announce essential state through more than color or sound alone.
7. Restore focus after closing overlays.

## Verify

- Complete the flow using keyboard, controller, pointer, and touch as supported.
- Test localization expansion, missing glyphs, text scale, narrow and wide screens, safe areas, and paused gameplay.
- Check contrast, flashing, shake, captions, and remapping.
- Use human accessibility review for claims automation cannot establish.

## Guardrails

- Do not reuse gameplay actions for UI focus navigation when the engine reserves UI actions.
- Do not indicate state with color alone.
- Do not trap focus or leave it on hidden controls.
- Do not bake essential text into raster assets.
- Do not make reduced motion remove essential timing information without an alternative.