AgentSkillsCN

ui-theme-styler

Godot UI 视觉风格设计系统流程。当通过 MCP 创建或修改 Control 节点时，可使用此流程，以确保与“残酷体育”UI 设计模式保持一致。

SKILL.md
--- frontmatter
name: ui-theme-styler
description: Design system workflow for visual styling of Godot UI. Use when creating or modifying Control nodes via MCP to ensure parity with the "Brutal Sports" UI pattern.

UI Theme Styler

Apply standardized project themes and layout patterns to UI scenes.

Workflow

  1. •Theme Inversion: Verify the root node links to res://assets/themes/game_theme.tres via ExtResource.
  2. •Background Setup: Apply NinePatchRect with standard margins from ui-specs.md.
  3. •Control Sizing: Use anchors_preset = 15 (Full Rect) for overlays or specific containers.
  4. •Verification: Check contrast and alignment between Title and Body elements.

Guidelines

  • •No Inlines: Do not set local style overrides; modify the .tres file or use theme classes instead.
  • •Consistency: Maintain the "City Building Menu Pattern" described in COPILOT-INSTRUCTIONS.md.

Artefacts to Update (UI changes)

  • •When updating theme tokens or styles, update res://assets/themes/game_theme.tres and add a short note to ./docs/todo/master_todo.md referencing the affected scenes (e.g., src/scenes/main_menu.tscn).
  • •If prompts or skills reference visual tokens or theme names, update the corresponding files in ./.github/prompts/ and ./.github/skills/ respectively.
  • •Commit theme edits in a separate PR and include screenshot examples in the PR description where possible.