Skip to content
Development
Skill

/art-direction-and-readability

Use when making design-level (not asset-production) decisions about how a game looks and reads — readability vs. fidelity, silhouette design, value/contrast as eye-direction, reserved signal colors, visual-language consistency, and how an AI engine keeps a coherent house style

From plugin
gamestack
3426 skills

Claude Code

$ npx -y skills add rondorkerin/gamestack --skill art-direction-and-readability --agent claude-code

SKILL.md

art-direction-and-readability.SKILL.md
name: art-direction-and-readability
description: Use when making design-level (not asset-production) decisions about how a game looks and reads — readability vs. fidelity, silhouette design, value/contrast as eye-direction, reserved signal colors, visual-language consistency, and how an AI engine keeps a coherent house style across generated content. Triggers on "art direction", "readability", "silhouette", "signal color", "yellow paint", "visual hierarchy", "style guide", "make it readable", "stylization vs realism", "how should the game look".

Art Direction & Readability

How to make a game **read** — so the player can instantly answer the gameplay questions the scene poses (friend or foe? safe to touch? where do I go?) — and how an AI content engine holds one coherent visual language across thousands of generated pieces. This is the *design discipline* of visual communication, not asset production.

When to use this

  • Setting a project's visual direction (stylization vs. fidelity, reference set, palette)
  • Auditing a scene, character, or generated asset for readability
  • Designing or policing a signal-color language
  • Giving an AI generator a checkable "house style" and per-asset read contract

Scope

This skill owns **visual communication at the design level**. Adjacent concerns live in siblings:

  • Where landmarks/signal-color sit *in space* → `open-world-design`
  • *What* gets generated and its sameness problem → `procedural-generation`, `procgen-review`
  • Coherence of generated *text/lore* (the non-visual analogue) → `ai-authored-content-coherence`
  • General feedback/clarity theory → `game-design-fundamentals`

How the pieces fit

  • **`GUIDE.md`** — the *why*, with exemplars and citations. **Sections 1–6 are verification-confirmed** (Team Fortress 2 primary sources, adversarially checked 3-0). **Sections 7+ are sourced but unverified** — see the verification banner in the guide.
  • **`CHECKLIST.md`** — the *what to do*: Do/Don't plus "Test for" criteria you can run against a scene, a character, or a generated asset.

The one idea to anchor on

> **Readability is an engineerable requirement, not a taste call.** Every visual element should be able to name the gameplay question it answers; one that answers none is decoration competing with the ones that do. Order of priority: **readability first, personality second, fidelity never.**

⚠️ **Verification note:** This skill was built from a deep-research pass whose adversarial-verification phase was cut short by a session limit. The TF2-grounded core (GUIDE §1–6) is confirmed; the signal-color case studies (BotW, Mirror's Edge, Naughty Dog/yellow-paint) are **sourced but not verification-confirmed**. Treat the latter as strong defaults to re-verify, not settled fact.

Start with `GUIDE.md`, then apply `CHECKLIST.md`.

Read more
@rondorkerin
Ships withgamestack

An agentic framework for building games on any platform — for Claude. Like gstack is for software, but for games. Questions, feedback, or just want to follow along: Discord · @metatransformr on X

Stars on GitHub

Momentum

stars in total
34
Star history of rondorkerin/gamestack on GitHub, a chart by star-history.com

Other skills on gamestack.

animation-systems

animation-systems

Use when designing, speccing, or reviewing a character/object motion system in ANY engine — the rig and skeleton, skinning…

combat-design

combat-design

Use when designing, tuning, or reviewing combat and game feel — juice/feedback budgets, hit-stop and impact, telegraphing and…

engine-router

engine-router

The platform router for the gamestack framework. Use when a game's design is ready to implement, when the target engine is chosen…

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills2w309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc2w293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react5d252k
@facebook@facebookInstall Skill

Questions about art-direction-and-readability.

Which coding agents can use art-direction-and-readability?
art-direction-and-readability installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.