board-game-ui
Board Game UI Skill
Overview
This skill provides expertise for building user interfaces for digital board games. It covers rendering approaches (DOM, Canvas, SVG), interaction patterns (drag-and-drop, click-to-select), responsive design for different screen sizes, and UX principles specific to turn-based games.
Rendering Approaches
When to Use Each
| Approach | Best For | Avoid When |
|---|---|---|
| DOM/CSS | Card games, simple boards, UI overlays | Many moving pieces, complex animations |
| SVG | Maps, vector graphics, zoomable boards | Thousands of elements, pixel effects |
| Canvas | Complex animations, particles, real-time | Accessibility needed, text-heavy |
| Hybrid | Most board games | Over-engineering simple games |
Recommended: Hybrid Approach
More from fil512/upship
ui-design-expert
Expert UI design guidance for polishing game interfaces. Use when reviewing screenshots, recommending CSS improvements, designing color schemes, improving typography, adding visual polish, or making the game look professional. Specializes in board game aesthetics with a steampunk/brass era theme.
12boardgame-design
Board game design workflow for creating fun, balanced games. Use when designing mechanics, balancing factions, analyzing resource economies, validating rules clarity, planning playtests, or iterating on game systems. Applies Eurogame principles and proven design methodology.
11realtime-multiplayer
Real-time multiplayer game networking with Socket.io. Use when implementing WebSocket connections, game state synchronization, room management, reconnection handling, or optimistic updates. Covers latency compensation and conflict resolution.
8svelte
Modern Svelte development for reactive web apps. Use when building Svelte components, managing state with stores, implementing real-time updates via WebSocket, or migrating from vanilla JS. Covers SvelteKit, TypeScript, and integration with Node.js backends.
4game-state
Game state management for turn-based board games. Use when designing state structure, implementing game logic, validating actions, managing phases/turns, or handling complex game rules. Covers reducers, state machines, and undo/redo.
4rulebook-writing
Expert guidance for writing UP SHIP! rulebook content following Euro-style board game best practices. Use when drafting rules sections, reviewing rules clarity, restructuring content, or ensuring consistency. Covers section ordering, terminology, formatting, cross-referencing, and audience design.
4