Added screenshot/svg (#2556)

Author: vchelaru

.claude/skills/gum-cli/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: gum-cli
-description: Reference guide for GumCli — the headless command-line tool for Gum projects. Load this when working on gumcli commands (new, check, codegen, codegen-init), Gum.ProjectServices, HeadlessErrorChecker, ProjectLoader, HeadlessCodeGenerationService, CodeGenerationAutoSetupService, or the FormsTemplateCreator.
+description: Reference guide for GumCli — the headless command-line tool for Gum projects. Load this when working on gumcli commands (new, check, codegen, codegen-init, fonts, screenshot, svg), Gum.ProjectServices, HeadlessErrorChecker, ProjectLoader, HeadlessCodeGenerationService, CodeGenerationAutoSetupService, or the FormsTemplateCreator.
 ---
 
 # GumCli Reference
@@ -21,6 +21,8 @@ description: Reference guide for GumCli — the headless command-line tool for G
 | `gumcli codegen <project.gumx> [--element <name>...]` | Generate C# code. Requires `ProjectCodeSettings.codsj`. Per-element error check gates generation. |
 | `gumcli codegen-init <project.gumx> [--force] [--csproj <path>]` | Auto-detect `.csproj`, derive namespace and output library, write `ProjectCodeSettings.codsj`. Use `--csproj` when the Gum project is not inside the MonoGame project directory. |
 | `gumcli fonts <project.gumx>` | Generate missing bitmap font files (.fnt + .png). Windows-only (bmfont.exe). |
+| `gumcli screenshot <project.gumx> <element> [--output] [--width] [--height]` | Render a Screen or Component to a PNG via MonoGame DesktopGL. Pixel-accurate; cross-platform. |
+| `gumcli svg <project.gumx> <element> [--output] [--width] [--height]` | Render a Screen or Component to a vector SVG via SkiaGum's `SKSvgCanvas`. Bitmaps embed as base64. |
 
 **Exit codes:** 0 = success, 1 = errors found / generation blocked, 2 = load failure, bad args, or non-Windows (fonts).
 
@@ -32,7 +34,9 @@ Program.cs
   ├── CheckCommand    → ProjectLoader → HeadlessErrorChecker
   ├── CodegenCommand  → ProjectLoader → HeadlessErrorChecker (gates) → HeadlessCodeGenerationService
   ├── CodegenInitCommand → CodeGenerationAutoSetupService
-  └── FontsCommand    → ProjectLoader → HeadlessFontGenerationService (Windows-gated)
+  ├── FontsCommand    → ProjectLoader → HeadlessFontGenerationService (Windows-gated)
+  ├── ScreenshotCommand → MonoGameScreenshotService (Gum.ProjectServices.MonoGame)
+  └── SvgCommand      → SkiaGumSvgExportService (Gum.ProjectServices.SkiaGum)
 ```
 
 Each command class has a static `Create()` returning a `System.CommandLine` `Command` with handler, then a static `Execute()` doing the work.

Tools/Gum.Cli/Commands/SvgCommand.cs

@@ -2,7 +2,6 @@
 using System.CommandLine;
 using System.CommandLine.Invocation;
 using System.IO;
-using System.Reflection;
 using Gum.ProjectServices.SkiaGum;
 using Gum.ProjectServices.SvgExport;
 
@@ -69,13 +68,6 @@ public static Command Create()
 
     private static int Execute(string projectPath, string elementName, string outputPath, int? width, int? height)
     {
-        string version = Assembly.GetExecutingAssembly()
-            .GetCustomAttribute<AssemblyInformationalVersionAttribute>()?.InformationalVersion
-            ?? Assembly.GetExecutingAssembly().GetName().Version?.ToString()
-            ?? "unknown";
-
-        Console.WriteLine($"gumcli v{version}");
-
         string fullProjectPath = Path.GetFullPath(projectPath);
 
         if (!File.Exists(fullProjectPath))

Tools/Gum.Cli/HeadlessNameVerifier.cs

@@ -99,6 +99,13 @@ public bool IsBehaviorNameValid(string behaviorName, BehaviorSave behaviorSave,
     /// <inheritdoc/>
     public bool IsComponentNameAlreadyUsed(string name) => false;
 
+    /// <inheritdoc/>
+    public bool IsNameValidTopLevel(string name, ElementSave element, object? objectToIgnore, out string? whyNotValid)
+    {
+        whyNotValid = null;
+        return true;
+    }
+
     /// <inheritdoc/>
     public bool IsNameValidAndroidFile(string name, out string whyNotValid)
     {

Tools/Gum.Cli/Program.cs

@@ -16,6 +16,8 @@ public static int Main(string[] args)
             ?? Assembly.GetExecutingAssembly().GetName().Version?.ToString()
             ?? "unknown";
 
+        System.Console.WriteLine($"gumcli v{version}");
+
         var rootCommand = new RootCommand($"gumcli v{version} - create projects, check for errors, and generate code.");
 
         rootCommand.AddCommand(NewCommand.Create());

docs/SUMMARY.md

@@ -387,3 +387,5 @@
   * [codegen-init](cli/codegen-init.md)
   * [codegen](cli/codegen.md)
   * [fonts](cli/fonts.md)
+  * [screenshot](cli/screenshot.md)
+  * [svg](cli/svg.md)

docs/cli/README.md

@@ -34,6 +34,8 @@ Once installed, invoke it as `gumcli` from any terminal.
 | `codegen-init` | Initialize code generation settings |
 | `codegen` | Generate C# code for project elements |
 | `fonts` | Generate missing bitmap font files |
+| `screenshot` | Render a Screen or Component to a PNG file |
+| `svg` | Render a Screen or Component to an SVG file |
 
 ## Exit Codes
 

docs/cli/screenshot.md

@@ -0,0 +1,46 @@
+# screenshot
+
+```
+gumcli screenshot <project.gumx> <element> [--output <path>] [--width <px>] [--height <px>]
+```
+
+Renders a Gum Screen or Component to a PNG file. The element is laid out and drawn using the same MonoGame (DesktopGL) backend a shipped game would use, so the output is pixel-accurate and suitable for visual regression testing, documentation screenshots, or asset pipelines.
+
+## Arguments
+
+- `<project.gumx>` — Path to the `.gumx` project file.
+- `<element>` — Name of the Screen or Component to render (for example, `MainMenu` or `Controls/Button`).
+
+## Options
+
+- `--output` — Path for the output PNG file. Defaults to `<element>.png` in the current directory.
+- `--width` — Width of the output image in pixels. Defaults to the project canvas width.
+- `--height` — Height of the output image in pixels. Defaults to the project canvas height.
+
+## Examples
+
+```
+gumcli screenshot MyProject/MyProject.gumx MainMenu
+gumcli screenshot MyProject/MyProject.gumx Controls/Button --output button.png
+gumcli screenshot MyProject/MyProject.gumx MainMenu --width 1920 --height 1080
+```
+
+Output on success:
+
+```
+Screenshot written to: /full/path/to/MainMenu.png
+```
+
+## Notes
+
+- Works cross-platform — uses DesktopGL, not a Windows-specific rendering path.
+- Any fonts referenced by the element must already exist in the project's `FontCache/` folder. Run [`gumcli fonts`](fonts.md) first if fonts are missing.
+- Bitmap content (sprites, nine-slices, text) is rasterized into the PNG at the requested resolution.
+
+## Exit Codes
+
+| Code | Meaning |
+|------|---------|
+| 0 | Screenshot written successfully |
+| 1 | Rendering failed (for example, the named element does not exist) |
+| 2 | Project file not found |

docs/cli/svg.md

@@ -0,0 +1,46 @@
+# svg
+
+```
+gumcli svg <project.gumx> <element> [--output <path>] [--width <px>] [--height <px>]
+```
+
+Renders a Gum Screen or Component to a vector SVG file. Useful when you need scalable output for documentation, print, or design tooling rather than a fixed-resolution bitmap.
+
+## Arguments
+
+- `<project.gumx>` — Path to the `.gumx` project file.
+- `<element>` — Name of the Screen or Component to render.
+
+## Options
+
+- `--output` — Path for the output SVG file. Defaults to `<element>.svg` in the current directory.
+- `--width` — Width of the output SVG in pixels. Defaults to the project canvas width.
+- `--height` — Height of the output SVG in pixels. Defaults to the project canvas height.
+
+## Examples
+
+```
+gumcli svg MyProject/MyProject.gumx MainMenu
+gumcli svg MyProject/MyProject.gumx Controls/Button --output button.svg
+gumcli svg MyProject/MyProject.gumx MainMenu --width 1920 --height 1080
+```
+
+Output on success:
+
+```
+SVG written to: /full/path/to/MainMenu.svg
+```
+
+## Notes
+
+- Uses SkiaGum's `SKSvgCanvas` to produce the SVG, so shapes and text are emitted as vector elements.
+- Bitmap content (sprites, textures) is embedded as base64-encoded images inside the SVG. The file is self-contained but can be significantly larger than the equivalent PNG when the element contains many bitmaps.
+- If you need a rasterized PNG instead, use [`gumcli screenshot`](screenshot.md).
+
+## Exit Codes
+
+| Code | Meaning |
+|------|---------|
+| 0 | SVG written successfully |
+| 1 | Export failed (for example, the named element does not exist) |
+| 2 | Project file not found |