This skill should be used when the user asks about "colors", "hex codes", "path colors", "tile background", "rendering order", "sorting order", "token design", "SVG styling", "stroke width", "line cap", "grid lines", "glow effect", "visual style", or discusses Zero-Day Attack visual design and styling.
Provides Zero-Day Attack's visual style specifications including color palettes, SVG path attributes, token designs, and rendering order. Used when users ask about colors, hex codes, path styling, token design, or visual specifications.
/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 Zero-Day Attack visual design, color palette, rendering specifications, and SVG styling conventions.
| Element | Hex | RGB | Description |
|---|---|---|---|
| Tile Background | #151820 | (21, 24, 32) | Very dark blue-gray |
| Grid Lines | #222630 | (34, 38, 48) | Slightly lighter (50% opacity) |
| Board Background | #0D0F14 | (13, 15, 20) | Darkest blue-gray |
| Color | Hex | RGB | Purpose |
|---|---|---|---|
| Red | #FF2244 | (255, 34, 68) | Red player paths |
| Blue | #44BBFF | (68, 187, 255) | Blue player paths |
| Purple | #BB88FF | (187, 136, 255) | Shared paths |
Colors tested for color vision deficiencies:
<path d="M [start] C [control1], [control2], [end]"
fill="none"
stroke="#FF2244"
stroke-width="8"
stroke-linecap="butt"/>
| Attribute | Value | Purpose |
|---|---|---|
| fill | none | Paths are stroked, not filled |
| stroke | (color hex) | Path color |
| stroke-width | 8 | Path thickness in SVG units |
| stroke-linecap | butt | Square end caps |
Two-layer rendering:
// Glow layer (sorting order 1)
Color glowColor = new Color(0.73f, 0.53f, 1f, 0.3f); // #BB88FF @ 30%
float glowWidth = 0.2f;
// Core layer (sorting order 2)
Color coreColor = new Color(0.73f, 0.53f, 1f, 0.9f); // #BB88FF @ 90%
float coreWidth = 0.08f;
Design: Filled target
- Three concentric circles (solid fill)
- Cross pattern overlay
- Player color fill
Design: Hollow rings
- Two concentric circles (outline only)
- Faint crosshair overlay
- Player color stroke
Design: Gradient opacity
- Four concentric circles
- Graduated opacity: 30%, 50%, 70%, 100%
- Player color with transparency
| Attribute | Value |
|---|---|
| SVG viewBox | 80×80 units |
| World Size | 0.4 units (20% of tile) |
| Texture Size | 40 pixels (at 100 PPU) |
| Attribute | Value |
|---|---|
| SVG viewBox | 200×200 units |
| World Size | 2.0×2.0 units |
| Texture Size | 200 (at 100 PPU) |
Always use PPU = 100. Adjust Texture Size for world size.
World Size = Texture Size ÷ 100
| Asset | Texture Size | PPU | World Size |
|---|---|---|---|
| Tiles | 200 | 100 | 2.0 |
| Tokens | 40 | 100 | 0.4 |
Higher sorting order = renders in front.
| Layer | Order | Content | Component |
|---|---|---|---|
| Background | -10 | Board color | BackgroundRenderer |
| Tiles | 0 | Tile sprites | TileView |
| Grid Glow | 1 | Wide purple lines | GridOverlayRenderer |
| Grid Core | 2 | Thin purple lines | GridOverlayRenderer |
| Reserve Lines | 1 | Zone boundaries | GridOverlayRenderer |
| Edge Nodes | 3 | Connection indicators | (future) |
| UI | Canvas | Text, scores | Unity UI |
Grid sorting order MUST be higher than tiles:
If grid order is lower, tiles cover the grid lines.
Target: 1920×1080 pixels = 19.2×10.8 world units (100 PPU)
┌────────┬──────────┬────────────────────────────┬──────────┬────────┐
│Blue UI │ Blue Res │ 5×5 PLAYABLE GRID │ Red Res │ Red UI │
│ 2.1 │ 2.0 │ 10.0 │ 2.0 │ 2.1 │
│#44BBFF │ #44BBFF │ #BB88FF (firewall) │ #FF2244 │#FF2244 │
└────────┴──────────┴────────────────────────────┴──────────┴────────┘
← Blue player sits here Red player sits here →
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<!-- Background -->
<rect width="200" height="200" fill="#151820"/>
<!-- Grid (40-unit spacing, 50% opacity) -->
<path d="M 0 40 L 200 40 M 0 80 L 200 80 M 0 120 L 200 120 M 0 160 L 200 160"
stroke="#222630" stroke-width="1" opacity="0.5"/>
<path d="M 40 0 L 40 200 M 80 0 L 80 200 M 120 0 L 120 200 M 160 0 L 160 200"
stroke="#222630" stroke-width="1" opacity="0.5"/>
<!-- Paths -->
<path d="M 100 0 C 100 50, 150 100, 200 100"
fill="none" stroke="#FF2244" stroke-width="8" stroke-linecap="butt"/>
</svg>
| Node | Position |
|---|---|
| Top | (100, 0) |
| Right | (200, 100) |
| Bottom | (100, 200) |
| Left | (0, 100) |
Quarter-curve (adjacent nodes):
<!-- Left to Top -->
<path d="M 0 100 C 50 100, 100 50, 100 0" .../>
Straight line (opposite nodes):
<!-- Left to Right -->
<path d="M 0 100 L 200 100" .../>
// Background
Color boardBackground = new Color(0.05f, 0.06f, 0.08f); // #0D0F14
Color tileBackground = new Color(0.08f, 0.09f, 0.13f); // #151820
// Paths
Color redPath = new Color(1f, 0.13f, 0.27f); // #FF2244
Color bluePath = new Color(0.27f, 0.73f, 1f); // #44BBFF
Color purplePath = new Color(0.73f, 0.53f, 1f); // #BB88FF
// Grid
Color gridLine = new Color(0.13f, 0.15f, 0.19f, 0.5f); // #222630 @ 50%
Enter hex values directly: #FF2244, #44BBFF, etc.
For complete visual specifications:
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 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 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.