name: game-assets-team
description: 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.

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

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

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

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

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

• Art Direction Deep Dive - Extended style guide, Simulin specs
• Optimization Techniques - Compression, formats, tools
• Animation Specs - Timing, easing, Lottie workflows