game-assets-team

ccalebcarter's avatarfrom ccalebcarter

Complete game asset design, creation, implementation, and optimization team. Use when creating visual assets, art direction, sprites, UI elements, icons, textures, animations specs, audio design, or any game visuals. Covers AI image generation (Gemini), asset pipelines, optimization for web/mobile, style guides, and performance tuning. Triggers on requests for game art, icons, backgrounds, character designs, UI assets, promotional materials, or asset troubleshooting.

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 11, 2026
[Visual Content Workflows]

When & Why to Use This Skill

The Game Assets Team skill is a comprehensive solution for end-to-end game asset management, covering everything from AI-driven concept art and UI design to technical optimization and implementation. It streamlines the creation of high-quality, performance-ready visual assets like sprites, icons, and backgrounds, specifically optimized for web and mobile platforms using modern formats like WebP and AVIF. By integrating AI image generation with professional technical art standards, it ensures visual consistency and high-performance rendering for modern game development.

Use Cases

  • Rapidly generating themed game characters and environmental assets using AI-driven prompt engineering tailored for specific art styles like low-poly or crystalline aesthetics.
  • Designing and optimizing UI/UX components, including icons, HUD elements, and buttons, ensuring they meet strict performance and resolution standards for mobile and web platforms.
  • Establishing automated asset pipelines that handle format conversion, sprite sheet generation, and responsive scaling (1x, 2x, 3x) for different device displays.
  • Troubleshooting and fixing common visual issues such as asset blurring, color banding, and slow loading times through advanced optimization and CSS rendering techniques.
namegame-assets-team
descriptionComplete game asset design, creation, implementation, and optimization team. Use when creating visual assets, art direction, sprites, UI elements, icons, textures, animations specs, audio design, or any game visuals. Covers AI image generation (Gemini), asset pipelines, optimization for web/mobile, style guides, and performance tuning. Triggers on requests for game art, icons, backgrounds, character designs, UI assets, promotional materials, or asset troubleshooting.

Game Assets Team

A virtual SME team for game asset design, creation, implementation, and optimization. Specialized for scalable web/mobile games with low-poly crystalline aesthetics.

Team Roles & Expertise

Role Responsibilities
Art Director Visual style, consistency, brand identity
Concept Artist Initial designs, mood boards, style exploration
UI/UX Designer Interface elements, iconography, HUD components
Technical Artist Optimization, formats, performance, pipelines
Motion Designer Animation specs, transitions, micro-interactions
Audio Designer Sound direction, SFX specs, music briefs

Asset Creation Workflow

1. AI Image Generation (Primary Tool)

Use the gemini-image-generator skill for rapid asset creation:

# From the gemini-image-generator scripts directory:
python generate.py --prompt "[DETAILED PROMPT]" --output [filename].png

Prompt Engineering for Game Assets:

Structure: [Subject] + [Style] + [Composition] + [Technical] + [Mood]

Example for Farming in Purria Simulins:
"cute low-poly geometric bee game character, faceted crystalline wings,
big adorable eyes, bold yellow and gold with subtle gradients,
3/4 angle view, transparent background, phase 2 evolution,
developing features, partial crystalline wings"

2. Asset Categories & Specs

Category Formats Sizes Notes
UI Icons PNG-24, SVG 64x64, 128x128 Transparent BG, 2px padding
Sprites PNG-24, WebP Power of 2 Sprite sheets preferred
Backgrounds WebP, AVIF 1920x1080, 2560x1440 Layered for parallax
Simulins PNG-24 128/192/256px by phase 3 evolution phases
Cards PNG-24, SVG 180x252 (2.5:3.5) Print-ready at 300dpi
Particles PNG-24 32x32, 64x64 Additive blend ready

3. Style Guide: Farming in Purria

Visual Pillars:

  1. Low-Poly Geometric - Faceted shapes, clean edges, visible polygons
  2. Crystalline Accents - Translucent gem-like wings, prismatic reflections
  3. Kawaii Charm - Big expressive eyes, cute proportions, personality
  4. Bold Colors - Vibrant palettes with subtle gradients

Color Palette (Simulins):

Spider:      #8B5CF6 (Purple)     #A78BFA (Light Purple)
Bee:         #F59E0B (Amber)      #FBBF24 (Yellow)
Ladybug:    #EF4444 (Red)        #1F2937 (Black)
Butterfly:  #EC4899 (Pink)       #8B5CF6 (Purple)
Grasshopper: #22C55E (Green)      #84CC16 (Lime)
Mole:        #92400E (Brown)      #D97706 (Orange)

Typography:

  • Headers: Rounded, friendly sans-serif
  • Body: Clean readability
  • Numbers: Roboto Mono (Tabular for scores/currency)

Optimization Standards

Web/Mobile Performance

Asset Type Max Size Format Priority Lazy Load
Hero Images 200KB AVIF > WebP > PNG No
UI Sprites 100KB WebP > PNG No
Backgrounds 300KB AVIF > WebP Yes
Icons 10KB each SVG > WebP No
Animations 500KB Lottie > GIF Yes

Sprite Sheet Guidelines

Layout: Grid-based, power-of-2 dimensions
Padding: 2px between frames (prevents bleeding)
Naming: [simulin]_phase[1-3].[ext]
Atlas: Generate JSON metadata for programmatic access

Responsive Asset Strategy

/assets
  /1x  (base - mobile)
  /2x  (retina - tablet/desktop)
  /3x  (high-DPI - optional)

Use <picture> element or CSS image-set() for delivery.

Implementation Patterns

React Integration

// Optimized image component pattern
const GameAsset = ({ src, alt, priority = false }) => (
  <img
    src={src}
    alt={alt}
    loading={priority ? "eager" : "lazy"}
    decoding="async"
    className="crisp" // for low-poly art
  />
);

CSS for Game Assets

/* Crisp rendering for low-poly assets */
.crisp {
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

/* Smooth scaling for gradients */
.smooth {
  image-rendering: smooth;
  image-rendering: high-quality;
}

/* Sprite animation */
.sprite-animate {
  animation: sprite-play 0.8s steps(8) infinite;
}

Troubleshooting Guide

Issue Cause Solution
Blurry assets Wrong resolution Use 2x assets, check devicePixelRatio
Color banding 8-bit limitation Use PNG-24, add subtle dithering
Jagged edges No anti-aliasing Enable AA in source, or use SVG
Large file size Unoptimized Run through squoosh.app, use WebP
Animation stutter Too many frames Reduce to 12-24fps, use CSS transforms
Inconsistent style No style guide Reference art-direction.md, use AI consistently

Quality Checklist

Before shipping any asset:

  • Correct dimensions and format
  • Optimized file size (within limits above)
  • Transparent background where needed
  • Consistent with low-poly crystalline style
  • Tested on 1x and 2x displays
  • Named according to convention
  • Metadata/atlas generated if sprite

Reference Documents