This skill should be used when the user asks about "layout", "sizing", "coordinates", "1920x1080", "world units", "PPU", "pixels per unit", "SVG import", "texture size", "grid positioning", "screen dimensions", "camera", "orthographic size", "reserve zones", "LayoutConfig", or discusses Board display layout and sprite sizing.
Provides Board layout coordinates, sizing formulas, and SVG import settings for 1920×1080 hardware.
/plugin marketplace add jwmyers/vui-vux-plugins/plugin install zero-day-dev@vui-vuxThis skill inherits all available tools. When active, it can use any tool Claude has access to.
Expert knowledge of Board display layout, coordinate systems, SVG import settings, and sprite sizing for the 1920×1080 Board hardware.
| Metric | Pixels | World Units (100 PPU) |
|---|---|---|
| Width | 1920 | 19.2 |
| Height | 1080 | 10.8 |
| Setting | Value |
|---|---|
| Orthographic Size | 5.4 |
| Position | (0, 0, -10) |
| Aspect Ratio | 16:9 |
Calculation: Visible Height = orthoSize × 2 = 10.8 world units
| Blue UI | Blue Res | Buffer | 5×5 Grid | Buffer | Red Res | Red UI |
| 2.1 | 2.0 | 0.5 | 10.0 | 0.5 | 2.0 | 2.1 |
| Zone | Left | Right | Center | Width |
|---|---|---|---|---|
| Blue UI | -9.6 | -7.5 | -8.55 | 2.1 |
| Blue Reserve | -7.5 | -5.5 | -6.5 | 2.0 |
| Left Buffer | -5.5 | -5.0 | — | 0.5 |
| Playable Grid | -5.0 | +5.0 | 0.0 | 10.0 |
| Right Buffer | +5.0 | +5.5 | — | 0.5 |
| Red Reserve | +5.5 | +7.5 | +6.5 | 2.0 |
| Red UI | +7.5 | +9.6 | +8.55 | 2.1 |
| Zone | Bottom | Top | Height |
|---|---|---|---|
| Bottom Margin | -5.4 | -5.0 | 0.4 |
| Playable Grid | -5.0 | +5.0 | 10.0 |
| Top Margin | +5.0 | +5.4 | 0.4 |
All layout constants centralized in Assets/Scripts/Config/LayoutConfig.cs:
public static class LayoutConfig
{
// Screen dimensions
public const float ScreenWidth = 19.2f;
public const float ScreenHeight = 10.8f;
// Tile and grid
public const float TileSize = 2.0f;
public const int GridSize = 5;
// Grid boundaries
public const float GridLeft = -5.0f;
public const float GridRight = 5.0f;
public const float GridBottom = -5.0f;
public const float GridTop = 5.0f;
// Camera
public const float CameraOrthoSize = 5.4f;
// Reserve zones
public const float BlueReserveCenter = -6.5f;
public const float RedReserveCenter = 6.5f;
}
// Grid (0,0) to (4,4) maps to world coordinates
float x = LayoutConfig.GridLeft + (gridX * LayoutConfig.TileSize) + (LayoutConfig.TileSize / 2f);
float y = LayoutConfig.GridBottom + (gridY * LayoutConfig.TileSize) + (LayoutConfig.TileSize / 2f);
| Grid | World Center | Description |
|---|---|---|
| (0, 0) | (-4, -4) | Bottom-left |
| (2, 2) | (0, 0) | Center (starting tile) |
| (4, 4) | (4, 4) | Top-right |
| (0, 4) | (-4, 4) | Top-left |
| (4, 0) | (4, -4) | Bottom-right |
╔═══════════════════════════════════════════════════════════════╗
║ ║
║ WORLD SIZE = TEXTURE SIZE ÷ PIXELS PER UNIT ║
║ ║
║ ALWAYS use PPU = 100. Adjust Texture Size for world size. ║
║ ║
╚═══════════════════════════════════════════════════════════════╝
Formula: Texture Size = Desired World Size × 100
| Asset | Desired World Size | Texture Size | PPU |
|---|---|---|---|
| Tiles | 2.0 | 200 | 100 |
| Tokens | 0.4 (20% of tile) | 40 | 100 |
| Mistake | Consequence | Solution |
|---|---|---|
| Changing PPU | Inconsistent sizing | Always PPU = 100 |
| Default Texture Size (256) | Wrong world size | Calculate: WorldSize × 100 |
| Matching viewBox | Irrelevant to sizing | Set based on desired world size |
Higher sorting order = renders in front.
| Layer | Sorting Order | Content |
|---|---|---|
| Background | -10 | Solid color (#0D0F14) |
| Tiles | 0 | TileView sprites |
| Grid Glow | 1 | Wide semi-transparent lines |
| Grid Core | 2 | Thin bright lines |
| Reserve Lines | 1 | Zone boundaries |
| Tokens | 10 | TokenView sprites |
Grid MUST have higher sorting order than tiles (1-2 vs 0) to appear above them.
Players sit facing each other:
UI text rotation:
Each tile has 4 edge nodes at side midpoints:
| Node | Offset from Tile Center |
|---|---|
| Top | (0, +1.0) |
| Right | (+1.0, 0) |
| Bottom | (0, -1.0) |
| Left | (-1.0, 0) |
World Y
↑
| +5.4 (screen top)
| +5.0 (grid top)
|
-9.6 ←─────────────────┼─────────────────→ +9.6 World X
|
| -5.0 (grid bottom)
| -5.4 (screen bottom)
↓
Cause: Wrong orthographic size
Solution: Set Camera → Orthographic Size = 5.4
Cause: Wrong SVG Texture Size
Solution: Texture Size = World Size × 100
Cause: Sorting order wrong Solution: Grid sorting order (1-2) must be higher than tiles (0)
Cause: Not using LayoutConfig
Solution: Always use LayoutConfig constants for positioning
For complete sizing documentation:
PPU = 100 (ALWAYS)
Texture Size = World Size × 100
Tiles: 2.0 world units → Texture Size = 200
Tokens: 0.4 world units → Texture Size = 40
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.