ui

Define and enforce Bevy UI design systems with tokens and reusable components.

Updated Apr 21, 2026

Search Tags:#ui-design #bevy #style-guide #design-tokens #component-patterns #game-ui

Ready to run

npx skills add https://github.com/gregoryraymond/claude-agents-and-skills --skill ui-gregoryraymond

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ui
Source: https://github.com/gregoryraymond/claude-agents-and-skills/tree/main/skills/ui
Command: npx skills add https://github.com/gregoryraymond/claude-agents-and-skills --skill ui-gregoryraymond

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bevy UI development often suffers from visual inconsistency across menus, HUDs, and overlays. This guide consolidates the design language, tokens, and component patterns to ensure a cohesive, maintainable UI across the project.

Core Features & Use Cases

Design Tokens: centralized colors, typography, and spacing in ui_style.rs to enforce a uniform look.
Component Patterns: reusable HUD elements, panels, and buttons with a zero border radius and warm cream typography.
Bevy Spawn Guidelines: standardized helpers in ui_spawn.rs to speed UI creation and iteration.

Quick Start

Study STYLE_GUIDE.md and begin applying the tokens and patterns to your Bevy UI work.

Frequently Asked Questions about ui

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

FAQPage Schema

How do I create a consistent UI style guide for Bevy game menus and HUDs?▼

Design tokens centralize colors, typography, and spacing in ui_style.rs to enforce a uniform look across Bevy UI projects. This approach solves visual inconsistency by providing reusable component patterns, standardized helpers, and strict spacing rules for menus and HUDs.

How do I use design tokens to standardize Bevy UI components?▼

Design tokens standardize Bevy UI components by defining centralized colors, typography, and spacing rules within ui_style.rs. These tokens are applied to reusable HUD elements, panels, and buttons to maintain consistent visual constraints across the project.

What is the best way to structure Bevy UI spawn code for rapid iteration?▼

The best way to structure Bevy UI spawn code is by using standardized helpers in ui_spawn.rs. These helpers speed up UI creation and iteration by enforcing predefined design constraints, token rules, and component patterns during the spawning process.

Does this Bevy UI design system support responsive layouts and overlays?▼

Yes, this Bevy UI design system supports responsive layouts, overlays, and menus. It specifies code structure and design constraints that satisfy token, spacing, color, and interaction rules across all interface types within your Bevy projects.

Why do my Bevy game UI panels and buttons look visually inconsistent?▼

Bevy game UI panels and buttons look visually inconsistent when they lack centralized design tokens and reusable component patterns. Applying a cohesive design system with standardized spacing, warm cream typography, and zero border radius resolves this visual fragmentation.