Svelte Game Visual Design

Scope

• •Focus on visual polish for SvelteKit games: layout, typography, color, spacing, component styling, HUD, menus, and effects.
• •Use Playwright MCP to inspect live UI, compare states, and verify changes.
• •Prefer small, targeted changes that improve clarity and vibe without breaking game logic.

Workflow

1. •

   Clarify the visual goal and constraints.

   • •Ask for the desired mood (arcade, neon, retro, minimal), device targets, and any brand or palette constraints.
   • •Identify critical game states to evaluate (title, gameplay, pause, game over).
2. •

   Audit the current UI with Playwright MCP.

   • •Open the game route and capture snapshots for key states.
   • •Note readability, contrast, alignment, spacing, and motion issues.
   • •Record concrete UI elements to improve (HUD, score, buttons, canvas frame, background).
3. •

   Plan visual system updates.

   • •Define CSS variables for colors, spacing, radii, shadows, and typography.
   • •Pick one primary and one accent color; ensure contrast for gameplay legibility.
   • •Choose a display font for headers and a readable UI font for numbers and labels.
4. •

   Implement UI improvements in Svelte.

   • •Update layout containers and UI components first, then supporting styles.
   • •Use Svelte transitions for panels and menus; use CSS keyframes for subtle motion.
   • •Keep the canvas unobstructed; use overlays or side panels when needed.
5. •

   Add dynamic visual effects carefully.

   • •Prefer lightweight effects: glow pulses, parallax layers, scanlines, gradient drift.
   • •Drive effects from game state or time using requestAnimationFrame or tweened stores.
   • •Avoid heavy DOM counts; keep effects GPU-friendly (transform/opacity).
6. •

   Validate with Playwright MCP.

   • •Re-snapshot the same states to verify improvements and regressions.
   • •Check mobile and desktop breakpoints.

Playwright MCP checklist

• •Navigate to the game route and wait for it to render.
• •Capture accessibility snapshots for the main states.
• •Use before/after snapshots to confirm fixes.

Implementation tips

• •Use CSS variables at :root or a top-level layout for consistent theming.
• •Use prefers-reduced-motion to disable heavier animations.
• •Keep game canvas size fixed; adapt UI around it.
• •If performance drops, reduce shadow blur and animation duration.

References

• •Use references/ui-patterns.md for layout, HUD, and typography patterns.
• •Use references/effects-patterns.md for safe, lightweight motion and effects.
• •Use references/playwright-audit.md for a repeatable UI review routine.
• •Use references/free-assets.md to source relevant free assets and verify licensing.

Assets

• •Use assets/ui-shell/VisualShell.svelte as a drop-in layout shell with HUD, panel, and visual tokens.