Menu
Guidelines for maintaining visual consistency across the UI, based on the Summary Screen reference.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Guide for maintaining and adding new battle animations, focusing on specific sequence timing (Entry, Hits, Faints) and the data-driven Animation Framework.
Guide for adding new moves, items, or mechanics to the modular Pokemon Battle system.
Learn how to use the DialogManager system to display text, ask questions, and manage user interactions in the game.
Guide for creating new screens and managing transitions using the ScreenManager framework.
Guide for maintaining the modular structure, script order, and global module patterns.
| name | Design System Standards |
| description | Guidelines for maintaining visual consistency across the UI, based on the Summary Screen reference. |
This document establishes the design rules for sizes, spacing, and typography to ensure consistency with the retro aesthetic, derived from the summary.css reference.
10px bold, uppercase.
#sum-name8px.
.sum-data, .move-pwr6px.
.move-name, .move-type, .exp-box span8px or 10px depending on prominence.8px for main containers (e.g., #summary-panel).2px or 4px (e.g., between stat rows).8px (e.g., between sprite and data).2px solid #444 (or #0f380f for Pokedex).1px dotted #ccc (or #306230 for Pokedex).1px or 2px solid borders for boxes.96px x 96px (Summary) or 64px x 64px (Pokedex Compact).96px or 56px respectively.image-rendering: pixelated and object-fit: contain.32px x 32px.While the Summary screen uses grayscale/white, the Pokedex uses a specific Game Boy palette:
#e0f8cf#8bac0f#0f380f#306230cursor: pointer.4px to 8px minimum for clickability.6px.2px.2px 4px.2px.6px uppercase.10px bold?8px?8px container, 4px or 2px gaps)?