Run any Skill in Manus with one click

styling-web-game-typography

Stars7

Forks2

UpdatedMay 7, 2026 at 05:48

Implements readable, licensed typography for distributed games (web export, downloadable, packaged). Use when defining theme-based text roles, adopting fonts, handling font licenses for redistribution, or checking HUD readability. Engine-agnostic core; Godot 4.2+ implementation patterns live in references/godot-patterns.md.

Installation

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.

Run Skill in Manus

Source

abagames

abagames/agentic-gamedev-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Software DevelopersComputer and Mathematical Occupations·SOC 15-1252

File Explorer

3 files

SKILL.md

readonly

name	styling-web-game-typography
description	Implements readable, licensed typography for distributed games (web export, downloadable, packaged). Use when defining theme-based text roles, adopting fonts, handling font licenses for redistribution, or checking HUD readability. Engine-agnostic core; Godot 4.2+ implementation patterns live in references/godot-patterns.md.

Use this skill when a game needs intentional text styling, font adoption, or license-compliant font bundling for distribution.

Default artifacts:

<PROJECT_DIR>/TYPOGRAPHY_DECISION.md — typography decisions, role mapping, fallback/adoption state, license status.
<PROJECT_DIR>/VISUAL_DESIGN.md — short visual-policy summary (roles, size hierarchy, colors, event text effects); do not duplicate font provenance or license detail here.
<PROJECT_DIR>/assets/fonts/ — bundle ONLY adopted font weights, not bulk candidate dumps.
<PROJECT_DIR>/licenses/fonts/ — full license texts for adopted fonts.
<PROJECT_DIR>/THIRD_PARTY_LICENSES.md — adopted external font source and license summary.

When updating an existing project, inspect its current theme/style directory, typography docs, font directory, and license directory before choosing file paths. If the named project path is absent, produce a standard path-based plan and state that project inventory was skipped.

During fallback-font implementation, explicitly record that no external font is adopted yet and do not create font license files or third-party font entries.

During font adoption, bundle only the selected weights. If fonts came from a scratch/download folder, verify the exact source release and license before copying; if provenance cannot be established, re-acquire only the selected weights from an authoritative source.

Core rules:

Centralize font, color, and size through the engine's theme/style system; minimize per-element overrides.
Use explicit roles: Heading, Info, Numeric, and Emphasis.
Keep HUD text informational; reserve emphasis treatments for events.
Use stable-width (monospaced or tabular) numeric presentation for score, timers, and counters.
Ensure text stays readable over motion or noisy backgrounds with outline, shadow, or contrast bands.
Bundle only adopted fonts and include their license texts.
For procedurally rendered effect text (engine canvas / _draw / immediate-mode draw API), handle baseline positioning, horizontal centering, and outline/shadow composite offsets explicitly; verify the rendered result in the actual export target.

Workflow:

Start with the engine's default/fallback font during early implementation.
Define role tokens in a theme/style resource.
During final adoption, compare candidate fonts against visual direction and readability.
Select the minimum weights needed for the roles, then bundle only those files.
Update license docs and export-target checks (e.g. ensure non-resource license text files are not dropped on web export).

References:

references/typography-implementation-guide.md — engine-agnostic guide: design principles, phased flow, theme tokens, implementation patterns, license operation, deliverables, review checklist, web visual check, anti-patterns.
references/godot-patterns.md — Godot 4.2+ specifics: Theme / ThemeDB.fallback_font / FontFile setup, Label vs _draw() choice, draw_string() baseline + composite offset (with GDScript pattern), res:// paths, Godot Web export font-drop check.

More from this repository

same repository

arcadifying-mini-games

abagames/agentic-gamedev-skills

Converts a working mini-game into a complete arcade game by adding round structure, ceremony screens (READY / round clear / death / game over), a score economy (extends, round bonuses, initials entry, high-score table), and jingle/SE separation. Use when a playable game with a verified core loop still "feels like a minigame" and needs arcade completeness — rounds or waves, 1UP extends, name entry, attract mode. Not for designing the core mechanic itself (use designing-mini-games first).

2026-07-117

designing-mini-games

abagames/agentic-gamedev-skills

Designs original, compact mini-games — rules, controls, scoring, hazards, and difficulty curves — for any input scheme, including one-button (tap / hold / release) games. Use when defining a new mini-game concept, converting creative constraints or seeds into mechanics, choosing an input scheme, checking state-variable necessity, or preventing idle, hold-only, or mashing play from becoming optimal.

2026-07-117

implementing-gameplay-invariants

abagames/agentic-gamedev-skills

Translates game design prose into engine-neutral implementation invariants and validation checks. Use when implementing or reviewing game mechanics where idle, hold-only, mashing, spam, safe waiting, or repeated scoring pulses must be prevented from dominating skilled play.

2026-07-117

developing-with-crisp-game-lib

abagames/agentic-gamedev-skills

Creates or repairs browser mini-games specifically using crisp-game-lib. Use only when the user explicitly asks for crisp-game-lib or the existing project already uses it; skip for Godot, Unity, Phaser, canvas-only, or unspecified engine requests.

2026-07-107

generating-retro-arcade-concepts

abagames/agentic-gamedev-skills

Batch-generates, evaluates, and specs multiple fixed-screen arcade game concepts in the style of 1978-1983 cabinets. Use when asked to brainstorm several new arcade games at once, produce a concept slate to choose from, or turn era/hardware constraints into ranked concepts plus implementation specs. For hardening a single already-chosen concept, use designing-mini-games instead.

2026-07-107

probing-web-game-mechanics

abagames/agentic-gamedev-skills

Verifies that implemented game mechanics match their spec by injecting game state into a live headless browser and asserting the resulting transitions (phase changes, scoring formulas, gates, resets). Use after implementing or changing a specific mechanic in a browser game — when a smoke test (runtime health) passes but spec conformance is unverified, or when a mechanic is too rare or slow to reach through organic play. Not for crash detection (use smoke-testing-web-games) or play-quality judgment (use evaluating-gameplay-balance).

2026-07-107

name	styling-web-game-typography
description	Implements readable, licensed typography for distributed games (web export, downloadable, packaged). Use when defining theme-based text roles, adopting fonts, handling font licenses for redistribution, or checking HUD readability. Engine-agnostic core; Godot 4.2+ implementation patterns live in references/godot-patterns.md.

Use this skill when a game needs intentional text styling, font adoption, or license-compliant font bundling for distribution.

Default artifacts:

<PROJECT_DIR>/TYPOGRAPHY_DECISION.md — typography decisions, role mapping, fallback/adoption state, license status.
<PROJECT_DIR>/VISUAL_DESIGN.md — short visual-policy summary (roles, size hierarchy, colors, event text effects); do not duplicate font provenance or license detail here.
<PROJECT_DIR>/assets/fonts/ — bundle ONLY adopted font weights, not bulk candidate dumps.
<PROJECT_DIR>/licenses/fonts/ — full license texts for adopted fonts.
<PROJECT_DIR>/THIRD_PARTY_LICENSES.md — adopted external font source and license summary.

During fallback-font implementation, explicitly record that no external font is adopted yet and do not create font license files or third-party font entries.

Core rules:

Centralize font, color, and size through the engine's theme/style system; minimize per-element overrides.
Use explicit roles: Heading, Info, Numeric, and Emphasis.
Keep HUD text informational; reserve emphasis treatments for events.
Use stable-width (monospaced or tabular) numeric presentation for score, timers, and counters.
Ensure text stays readable over motion or noisy backgrounds with outline, shadow, or contrast bands.
Bundle only adopted fonts and include their license texts.
For procedurally rendered effect text (engine canvas / _draw / immediate-mode draw API), handle baseline positioning, horizontal centering, and outline/shadow composite offsets explicitly; verify the rendered result in the actual export target.

Workflow:

Start with the engine's default/fallback font during early implementation.
Define role tokens in a theme/style resource.
During final adoption, compare candidate fonts against visual direction and readability.
Select the minimum weights needed for the roles, then bundle only those files.
Update license docs and export-target checks (e.g. ensure non-resource license text files are not dropped on web export).

References:

references/typography-implementation-guide.md — engine-agnostic guide: design principles, phased flow, theme tokens, implementation patterns, license operation, deliverables, review checklist, web visual check, anti-patterns.
references/godot-patterns.md — Godot 4.2+ specifics: Theme / ThemeDB.fallback_font / FontFile setup, Label vs _draw() choice, draw_string() baseline + composite offset (with GDScript pattern), res:// paths, Godot Web export font-drop check.