Back to list
ccalebcarter

game-assets-team

by ccalebcarter

Claude Code skills for game development - Farming in Purria

0🍴 0📅 Jan 22, 2026

SKILL.md


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

RoleResponsibilities
Art DirectorVisual style, consistency, brand identity
Concept ArtistInitial designs, mood boards, style exploration
UI/UX DesignerInterface elements, iconography, HUD components
Technical ArtistOptimization, formats, performance, pipelines
Motion DesignerAnimation specs, transitions, micro-interactions
Audio DesignerSound 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

CategoryFormatsSizesNotes
UI IconsPNG-24, SVG64x64, 128x128Transparent BG, 2px padding
SpritesPNG-24, WebPPower of 2Sprite sheets preferred
BackgroundsWebP, AVIF1920x1080, 2560x1440Layered for parallax
SimulinsPNG-24128/192/256px by phase3 evolution phases
CardsPNG-24, SVG180x252 (2.5:3.5)Print-ready at 300dpi
ParticlesPNG-2432x32, 64x64Additive 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 TypeMax SizeFormat PriorityLazy Load
Hero Images200KBAVIF > WebP > PNGNo
UI Sprites100KBWebP > PNGNo
Backgrounds300KBAVIF > WebPYes
Icons10KB eachSVG > WebPNo
Animations500KBLottie > GIFYes

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

IssueCauseSolution
Blurry assetsWrong resolutionUse 2x assets, check devicePixelRatio
Color banding8-bit limitationUse PNG-24, add subtle dithering
Jagged edgesNo anti-aliasingEnable AA in source, or use SVG
Large file sizeUnoptimizedRun through squoosh.app, use WebP
Animation stutterToo many framesReduce to 12-24fps, use CSS transforms
Inconsistent styleNo style guideReference 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

Score

Total Score

50/100

Based on repository quality metrics

SKILL.md

SKILL.mdファイルが含まれている

+20
LICENSE

ライセンスが設定されている

0/10
説明文

100文字以上の説明がある

0/10
人気

GitHub Stars 100以上

0/15
最近の活動

3ヶ月以内に更新がある

0/10
フォーク

10回以上フォークされている

0/5
Issue管理

オープンIssueが50未満

+5
言語

プログラミング言語が設定されている

+5
タグ

1つ以上のタグが設定されている

0/5

Reviews

💬

Reviews coming soon