@playcraft/skills 0.0.2

package/skills/grid_board_layout.aicomponent/ref/BoardRenderer3D.ts

@@ -0,0 +1,298 @@
+import * as THREE from "three";
+import { BoardLayout3D, type BoardLayout3DResult } from "./BoardLayout3D";
+
+/**
+ * 3D 棋盘渲染器配置
+ */
+export interface BoardRendererConfig {
+  /** 格子材质（默认：深蓝半透明） */
+  cellMaterial?: THREE.Material;
+  /** 格子相对于 cellSize 的填充比例（默认 0.92，即 8% 间隙） */
+  cellPadding?: number;
+  /** 格子地面 Y 坐标（默认 0.005，略高于地面防止 z-fighting） */
+  cellY?: number;
+  /** 是否创建网格线（默认 false） */
+  showGridLines?: boolean;
+}
+
+const DEFAULT_CONFIG: Required<BoardRendererConfig> = {
+  cellMaterial: null!,  // 运行时创建默认材质
+  cellPadding: 0.92,
+  cellY: 0.005,
+  showGridLines: false,
+};
+
+/**
+ * Three.js 3D 棋盘渲染器
+ *
+ * 建立在 BoardLayout3D 纯数学层之上，负责实际的 3D 渲染：
+ * - 创建网格地面（PlaneGeometry cells）
+ * - 在 boardGroup 中管理所有棋盘物体（统一平移/抖动）
+ * - 放置/移除 3D 物体到指定格子
+ * - 基于 Set<number> 的批量可见性管理
+ * - Raycaster 命中检测（遍历 userData.pathIndex）
+ * - 棋盘抖动动画
+ *
+ * 坐标系：棋盘在 XZ 平面，以原点为中心（来自 BoardLayout3D）。
+ */
+export class BoardRenderer3D {
+  private scene: THREE.Scene;
+  private layout: BoardLayout3D;
+  private config: Required<BoardRendererConfig>;
+
+  /** 棋盘根 Group（所有棋盘元素的容器，用于统一 shake） */
+  private boardGroup: THREE.Group;
+
+  /** 格子底板 Mesh 列表 */
+  private cellMeshes: THREE.Mesh[] = [];
+
+  /** 按 cellIndex 存储放置的物体 */
+  private placedObjects: Map<number, THREE.Object3D> = new Map();
+
+  /** 按 pathIndex 分组的物体索引（用于批量可见性） */
+  private pathToIndices: Map<number, number[]> = new Map();
+
+  constructor(scene: THREE.Scene, layout: BoardLayout3D, config?: BoardRendererConfig) {
+    this.scene = scene;
+    this.layout = layout;
+    this.config = { ...DEFAULT_CONFIG, ...config };
+
+    // 创建默认格子材质
+    if (!this.config.cellMaterial) {
+      this.config.cellMaterial = new THREE.MeshStandardMaterial({
+        color: 0x2d2d4e,
+        roughness: 0.9,
+        metalness: 0,
+        transparent: true,
+        opacity: 0.6,
+      });
+    }
+
+    this.boardGroup = new THREE.Group();
+    this.scene.add(this.boardGroup);
+  }
+
+  /**
+   * 创建网格底板
+   */
+  createGrid(): void {
+    const layoutResult = this.layout.getLayout();
+    const { cellSize, rows, cols } = layoutResult;
+    const padding = this.config.cellPadding;
+    const cellGeoSize = cellSize * padding;
+
+    const cellGeo = new THREE.PlaneGeometry(cellGeoSize, cellGeoSize);
+
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        const cell = new THREE.Mesh(cellGeo.clone(), (this.config.cellMaterial as THREE.Material).clone());
+        cell.rotation.x = -Math.PI / 2;
+        const pos = this.layout.getCellWorldPos(c, r);
+        cell.position.set(pos.x, this.config.cellY, pos.z);
+        cell.receiveShadow = true;
+        this.boardGroup.add(cell);
+        this.cellMeshes.push(cell);
+      }
+    }
+  }
+
+  /**
+   * 在指定格子放置一个 3D 物体
+   * @param col 列
+   * @param row 行
+   * @param object 要放置的物体
+   * @param tag 附加到 userData 的标签（如 { pathIndex: 0, cellIndex: 5 }）
+   */
+  placeObject(col: number, row: number, object: THREE.Object3D, tag?: Record<string, any>): void {
+    const pos = this.layout.getCellWorldPos(col, row);
+    object.position.set(pos.x, 0, pos.z);
+
+    if (tag) {
+      Object.assign(object.userData, tag);
+    }
+
+    const index = this.layout.cellToIndex(col, row);
+    this.placedObjects.set(index, object);
+    this.boardGroup.add(object);
+
+    // 维护 pathIndex → indices 映射
+    const pathIndex = tag?.pathIndex;
+    if (typeof pathIndex === "number") {
+      const indices = this.pathToIndices.get(pathIndex) || [];
+      indices.push(index);
+      this.pathToIndices.set(pathIndex, indices);
+    }
+  }
+
+  /**
+   * 移除指定格子的物体
+   */
+  removeObject(col: number, row: number): void {
+    const index = this.layout.cellToIndex(col, row);
+    const obj = this.placedObjects.get(index);
+    if (obj) {
+      this.boardGroup.remove(obj);
+      this.placedObjects.delete(index);
+    }
+  }
+
+  /**
+   * 获取指定格子的物体
+   */
+  getObject(col: number, row: number): THREE.Object3D | undefined {
+    const index = this.layout.cellToIndex(col, row);
+    return this.placedObjects.get(index);
+  }
+
+  /**
+   * 获取某个 pathIndex 对应的所有物体
+   */
+  getObjectsByPath(pathIndex: number): THREE.Object3D[] {
+    const indices = this.pathToIndices.get(pathIndex) || [];
+    const objects: THREE.Object3D[] = [];
+    for (const idx of indices) {
+      const obj = this.placedObjects.get(idx);
+      if (obj) objects.push(obj);
+    }
+    return objects;
+  }
+
+  /**
+   * 批量更新可见性
+   * @param hiddenIndices 需要隐藏的 cellIndex 集合
+   */
+  updateVisibility(hiddenIndices: Set<number>): void {
+    for (const [index, obj] of this.placedObjects) {
+      obj.visible = !hiddenIndices.has(index);
+    }
+  }
+
+  /**
+   * 按 pathIndex 批量更新可见性
+   * @param hiddenPaths 需要隐藏的 pathIndex 集合
+   */
+  updateVisibilityByPath(hiddenPaths: Set<number>): void {
+    for (const [pathIndex, indices] of this.pathToIndices) {
+      const hidden = hiddenPaths.has(pathIndex);
+      for (const idx of indices) {
+        const obj = this.placedObjects.get(idx);
+        if (obj) obj.visible = !hidden;
+      }
+    }
+  }
+
+  /**
+   * Raycaster 命中检测
+   * @param raycaster 射线
+   * @param excludeIndices 排除的 cellIndex 集合
+   * @returns 命中的 { index, pathIndex, object } 或 null
+   */
+  hitTest(
+    raycaster: THREE.Raycaster,
+    excludeIndices?: Set<number>,
+  ): { index: number; pathIndex: number; object: THREE.Object3D } | null {
+    // 收集所有可被检测的 Mesh
+    const meshes: THREE.Mesh[] = [];
+    for (const [index, obj] of this.placedObjects) {
+      if (excludeIndices?.has(index)) continue;
+      if (!obj.visible) continue;
+      obj.traverse((child) => {
+        if (child instanceof THREE.Mesh) {
+          meshes.push(child);
+        }
+      });
+    }
+
+    const intersects = raycaster.intersectObjects(meshes, false);
+    if (intersects.length === 0) return null;
+
+    // 沿 parent chain 查找含 pathIndex 的 userData
+    let current: THREE.Object3D | null = intersects[0].object;
+    while (current && current !== this.boardGroup) {
+      if (current.userData && typeof current.userData.pathIndex === "number") {
+        // 找到对应的 cellIndex
+        for (const [idx, obj] of this.placedObjects) {
+          if (obj === current) {
+            return { index: idx, pathIndex: current.userData.pathIndex, object: current };
+          }
+        }
+        // 如果没有精确匹配到 placedObjects 的顶层，仍然返回
+        return { index: -1, pathIndex: current.userData.pathIndex, object: current };
+      }
+      current = current.parent;
+    }
+
+    return null;
+  }
+
+  /**
+   * 棋盘抖动动画
+   * @param dx X 方向强度倍数
+   * @param dz Z 方向强度倍数
+   * @param duration 持续时间 ms（默认 300）
+   * @param intensity 基础强度（默认 0.08）
+   */
+  shake(dx: number = 1, dz: number = 1, duration: number = 300, intensity: number = 0.08): void {
+    const originalX = this.boardGroup.position.x;
+    const originalZ = this.boardGroup.position.z;
+    const startTime = performance.now();
+
+    const animate = () => {
+      const elapsed = performance.now() - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+
+      if (progress < 1) {
+        const decay = 1 - progress;
+        const offsetX = Math.sin(progress * Math.PI * 6) * intensity * decay * dx;
+        const offsetZ = Math.sin(progress * Math.PI * 6) * intensity * decay * dz;
+        this.boardGroup.position.x = originalX + offsetX;
+        this.boardGroup.position.z = originalZ + offsetZ;
+        requestAnimationFrame(animate);
+      } else {
+        this.boardGroup.position.x = originalX;
+        this.boardGroup.position.z = originalZ;
+      }
+    };
+    requestAnimationFrame(animate);
+  }
+
+  /**
+   * 获取棋盘根 Group
+   */
+  getBoardGroup(): THREE.Group {
+    return this.boardGroup;
+  }
+
+  /**
+   * 获取底层 BoardLayout3D 实例
+   */
+  getLayout(): BoardLayout3D {
+    return this.layout;
+  }
+
+  /**
+   * 清空所有棋盘内容（格子 + 物体），保留 boardGroup
+   */
+  clear(): void {
+    for (const cell of this.cellMeshes) {
+      this.boardGroup.remove(cell);
+      cell.geometry.dispose();
+      (cell.material as THREE.Material).dispose();
+    }
+    this.cellMeshes = [];
+
+    for (const obj of this.placedObjects.values()) {
+      this.boardGroup.remove(obj);
+    }
+    this.placedObjects.clear();
+    this.pathToIndices.clear();
+  }
+
+  /**
+   * 完全销毁（包括 boardGroup 自身）
+   */
+  dispose(): void {
+    this.clear();
+    this.scene.remove(this.boardGroup);
+  }
+}

package/skills/heart_lives.aicomponent/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: heart_lives.aicomponent
+description: 心形生命值指示器。显示玩家当前剩余生命值（心形图标行），扣命时播放消失动画。
+triggers: 需要在游戏 HUD 中显示生命值时触发。
+---
+
+# 心形生命值指示器（Heart Lives Indicator）
+
+## Scaffold
+
+`src/game/scenes/GameUI/HeartDisplay.ts`
+
+## Recipe
+
+| 决策 | 原因 |
+|------|------|
+| **心形图标行而非数字** | 心形图标是游戏生命值的通用视觉语言，比数字"3"更直观；玩家一眼看出还剩几条命 |
+| **扣命时播放消失动画** | 静态更新（直接消失）感觉突兀；动画反馈让玩家意识到刚刚发生了扣命事件 |
+
+## Adapter
+
+- **Role**: `heartLivesDisplay` — 心形生命值 UI 指示器
+- **Provides**: `HeartDisplay` 类（初始化 N 个心形 + `loseHeart()` 扣命动画）
+- **Requires**: `phaser.aicomponent`（硬依赖）
+- **Consumed by**: `top_ui_bar.aicomponent` 或 `game_scene.aicomponent`（生命值变化时调用 `loseHeart()`）
+- **Integration point**: `src/game/scenes/GameUI/HeartDisplay.ts` → 顶部 UI 条或 GameScene 中实例化
+
+## Imports
+
+- `phaser.aicomponent`（硬依赖）
+
+## Skill Definition
+
+```yaml
+tools:
+  - read_file
+  - write_file
+inputs:
+  - source: src/game/scenes/GameUI/HeartDisplay.ts
+outputs:
+  - heartDisplay: HeartDisplay class
+```

package/skills/heart_lives.aicomponent/manifest.json

@@ -0,0 +1,25 @@
+{
+  "schemaVersion": 1,
+  "atomId": "heart_lives.aicomponent",
+  "bundleType": "aicomponent",
+  "category": "component",
+  "mode": "fixed",
+  "label": { "zh": "心形生命值显示", "en": "Heart lives indicator" },
+  "tags": ["ui", "lives", "hearts", "health", "indicator"],
+  "bindingRoles": ["livesIndicator"],
+  "scaffold": {
+    "files": {
+      "src/game/scenes/GameUI/HeartDisplay.ts": { "source": "ref/HeartDisplay.ts", "mode": "full", "weight": 10 }
+    }
+  },
+  "imports": [
+    { "slot": "engine", "pinAtomId": "phaser.aicomponent", "edgeKind": "requires", "bindAs": "engine" }
+  ],
+  "exports": [
+    { "name": "HeartDisplay", "kind": "class", "location": "src/game/scenes/GameUI/HeartDisplay.ts" }
+  ],
+  "neutralDescriptor": {
+    "geometry": "row of heart icons indicating player lives remaining, with animation on loss"
+  },
+  "files": { "skill": "SKILL.md", "heartDisplay": "ref/HeartDisplay.ts" }
+}

package/skills/heart_lives.aicomponent/ref/HeartDisplay.ts

@@ -0,0 +1,96 @@
+import * as Phaser from "phaser";
+
+/**
+ * 生命值（爱心）显示组件。
+ * 使用参数化心形曲线渲染一行爱心图标，表示剩余生命值。
+ */
+export class HeartDisplay {
+  private heartGraphics: Phaser.GameObjects.Graphics[] = [];
+  private heartStates: boolean[] = [];
+  private heartDrawSize: number;
+
+  constructor(
+    scene: Phaser.Scene,
+    parent: Phaser.GameObjects.Container,
+    options: {
+      startX: number;
+      y: number;
+      spacing: number;
+      drawSize: number;
+      maxLives: number;
+      initialLives: number;
+    },
+  ) {
+    this.heartDrawSize = options.drawSize;
+
+    for (let i = 0; i < options.maxLives; i++) {
+      const isAlive = i < options.initialLives;
+      const g = scene.add.graphics();
+      g.setPosition(options.startX + i * options.spacing, options.y);
+      this.heartGraphics.push(g);
+      this.heartStates.push(isAlive);
+      parent.add(g);
+      this.drawHeartIcon(g, this.heartDrawSize, isAlive);
+    }
+  }
+
+  /**
+   * 设置当前生命值，更新爱心图标的显示状态。
+   * @param lives 当前生命值
+   */
+  public setLives(lives: number): void {
+    const clamped = Math.max(0, Math.min(lives, this.heartGraphics.length));
+    this.heartGraphics.forEach((g, index) => {
+      const isAlive = index < clamped;
+      if (this.heartStates[index] !== isAlive) {
+        this.heartStates[index] = isAlive;
+        this.drawHeartIcon(g, this.heartDrawSize, isAlive);
+      }
+    });
+  }
+
+  /**
+   * 使用参数化心形曲线绘制爱心图标（纯前端绘制）。
+   * @param g 图形对象
+   * @param size 爱心大小
+   * @param alive 是否存活（存活为红色，否则为灰色）
+   */
+  private drawHeartIcon(
+    g: Phaser.GameObjects.Graphics,
+    size: number,
+    alive: boolean,
+  ): void {
+    g.clear();
+
+    const fillColor = alive ? 0xeb5757 : 0xcccccc;
+    const fillAlpha = alive ? 1 : 0.4;
+
+    // 使用参数化心形曲线构建爱心路径
+    const points: { x: number; y: number }[] = [];
+    const numPoints = 50;
+    for (let i = 0; i <= numPoints; i++) {
+      const t = (i / numPoints) * Math.PI * 2;
+      const px = (size * 16 * Math.pow(Math.sin(t), 3)) / 16;
+      const py =
+        (-size *
+          (13 * Math.cos(t) -
+            5 * Math.cos(2 * t) -
+            2 * Math.cos(3 * t) -
+            Math.cos(4 * t))) /
+        16;
+      points.push({ x: px, y: py });
+    }
+
+    if (points.length === 0) return;
+
+    // 填充爱心主体
+    g.fillStyle(fillColor, fillAlpha);
+    g.beginPath();
+    g.moveTo(points[0].x, points[0].y);
+    for (let i = 1; i < points.length; i++) {
+      g.lineTo(points[i].x, points[i].y);
+    }
+    g.closePath();
+    g.fillPath();
+  }
+}

package/skills/idle-breathe.aicomponent/SKILL.md

@@ -0,0 +1,27 @@
+# idle-breathe — Character Idle Breathe Animation
+
+A subtle looping scale + bob animation that gives static sprites a sense of life. Essential for any character or creature that stands still between player interactions.
+
+## Parameters
+
+| Parameter | Default | Description |
+|-----------|---------|-------------|
+| `scaleAmplitude` | 0.04 | Max scale change (±4% of base scale) |
+| `period` | 2.5s | Full breath cycle duration |
+| `bobAmplitude` | 3px | Vertical position oscillation |
+| `rotateAmplitude` | 1° | Subtle rotation sway |
+| `baseScale` | 1.0 | Starting scale reference |
+
+## Decision Notes
+
+| Decision | Reason |
+|----------|--------|
+| Sine-wave scale | Mimics natural breathing rhythm; not linear |
+| Small values | Too large looks unnatural; ±4% scale is barely perceptible but creates life |
+| Combined bob + scale | Scale alone feels mechanical; adding Y offset adds breathing depth |
+| 2.5s period | Natural resting heartbeat (~24 BPM), slower than walking animations |
+
+## Engine References
+
+- **PlayCanvas**: `ref/playcanvas.js`
+- **Phaser 3**: `ref/phaser.js`

package/skills/idle-breathe.aicomponent/manifest.json

@@ -0,0 +1,20 @@
+{
+  "schemaVersion": 1,
+  "atomId": "idle-breathe.aicomponent",
+  "bundleType": "aicomponent",
+  "category": "animation",
+  "mode": "fixed",
+  "label": { "zh": "角色待机呼吸动画", "en": "Character Idle Breathe Animation" },
+  "tags": ["animation", "idle", "breathe", "character", "loop", "playcanvas", "phaser"],
+  "generation": {
+    "animationType": "tween",
+    "engineSupport": ["playcanvas", "phaser", "html5"],
+    "parameters": {
+      "scaleAmplitude": "number — max scale change (default: 0.04, i.e. ±4%)",
+      "period": "number — full breath cycle in seconds (default: 2.5)",
+      "bobAmplitude": "number — vertical bob in pixels (default: 3)",
+      "rotateAmplitude": "number — subtle rotation degrees (default: 1)"
+    }
+  },
+  "files": { "skill": "SKILL.md", "playcanvas": "ref/playcanvas.js", "phaser": "ref/phaser.js" }
+}

package/skills/idle-breathe.aicomponent/ref/phaser.js

@@ -0,0 +1,25 @@
+// idle-breathe — Phaser 3 implementation
+
+function startIdleBreathe(scene, sprite, {
+  scaleAmplitude = 0.04,
+  period = 2500,
+  bobAmplitude = 3,
+} = {}) {
+  const baseY = sprite.y;
+  const baseScale = sprite.scaleX;
+
+  scene.tweens.add({
+    targets: sprite,
+    scaleX: baseScale + scaleAmplitude,
+    scaleY: baseScale + scaleAmplitude,
+    y: baseY - bobAmplitude,
+    duration: period / 2,
+    ease: 'Sine.InOut',
+    yoyo: true,
+    repeat: -1,
+    offset: Math.random() * period, // random phase
+  });
+}
+
+// Usage:
+// startIdleBreathe(this, characterSprite);

package/skills/idle-breathe.aicomponent/ref/playcanvas.js

@@ -0,0 +1,29 @@
+// idle-breathe — PlayCanvas implementation
+var IdleBreathe = pc.createScript('idleBreathe');
+IdleBreathe.attributes.add('scaleAmplitude', { type: 'number', default: 0.04 });
+IdleBreathe.attributes.add('period', { type: 'number', default: 2.5 });
+IdleBreathe.attributes.add('bobAmplitude', { type: 'number', default: 3 });
+IdleBreathe.attributes.add('rotateAmplitude', { type: 'number', default: 1 });
+
+IdleBreathe.prototype.initialize = function () {
+    this._time = Math.random() * Math.PI * 2; // random phase offset
+    this._baseY = this.entity.getLocalPosition().y;
+    this._baseScale = this.entity.getLocalScale().clone();
+};
+
+IdleBreathe.prototype.update = function (dt) {
+    this._time += dt;
+    const t = this._time;
+    const freq = (2 * Math.PI) / this.period;
+    const sin = Math.sin(t * freq);
+
+    const s = 1 + sin * this.scaleAmplitude;
+    this.entity.setLocalScale(this._baseScale.x * s, this._baseScale.y * s, this._baseScale.z);
+
+    const pos = this.entity.getLocalPosition();
+    pos.y = this._baseY + sin * this.bobAmplitude;
+    this.entity.setLocalPosition(pos);
+
+    const euler = this.entity.getLocalEulerAngles();
+    this.entity.setLocalEulerAngles(euler.x, euler.y, Math.sin(t * freq * 0.5) * this.rotateAmplitude);
+};

package/skills/jewel_tile.aiimage/SKILL.md

@@ -0,0 +1,63 @@
+---
+name: jewel_tile.aiimage
+description: 宝石牌面贴图组封包 - 光泽宝石精灵图集，适合三消/数字合成的高品质牌面素材
+triggers: 宝石,jewel,gem,钻石,diamond,红宝石,ruby,牌面,tile,三消,match3,闪光,shiny
+---
+
+# jewel_tile.aiimage
+
+宝石主题牌面贴图组封包。提供光泽感宝石精灵图，适合高品质三消、数字合成类游戏。
+
+## Recipe
+
+- **基础 prompt**：`shiny gemstone icons sprite sheet, ruby diamond emerald sapphire amethyst topaz pearl, flat design with gloss, vibrant colors, transparent background, game assets`
+- **宽高比**：1:1
+- **风格**：cartoon + gloss
+- **需包含宝石种类**：红宝石、钻石、祖母绿、蓝宝石、紫水晶、黄玉、珍珠（共 7 种）
+- **可 fork 变体**：
+  - 暗黑宝石：深色光晕，神秘感
+  - 8bit 像素风：像素宝石图标
+
+**生成步骤：**
+1. 生成 512×512 精灵图集，7 种宝石水平排列
+2. 写入 `tiles.png`，更新 manifest
+
+## Result
+
+- **产物文件**：`tiles.png`
+- **格式**：PNG（透明背景），最小 512×512
+
+## Binding
+
+- **Binding Role**：`tileTextureSet`
+- **挂载目标**：`scene://entities/Board/tileRenderer/tileAtlas`
+- **引用类型**：`sprite-atlas-reference`
+
+## 生成方式
+
+Platform Skill: `playcraft-image-generation`
+
+```bash
+# 1. 生成图片（参考 ref/ 中的参考图）
+playcraft tools generate-image \
+     --prompt "shiny gemstone icons sprite sheet, ruby diamond emerald sapphire amethyst topaz pearl, flat design with gloss, vibrant colors, transparent background, game assets" \
+     --aspect-ratio 1:1 \
+     --image-model google/imagen-3.0-generate-002 \
+     --output ta-workspace/raw.png
+
+# 2. 后处理（去白底 + 格式转换）
+playcraft image remove-background --input ta-workspace/raw.png --output ta-workspace/trimmed.png
+playcraft image convert --input ta-workspace/trimmed.png --output ta-workspace/tiles.webp --quality 85
+
+# 3. 将产物写入 sandbox 对应路径（见 binding.target）
+```
+## Skill Definition
+
+tools:
+  - bash
+  - write
+  - read
+prompt_extension: |
+  You are generating a jewel/gem tile sprite sheet for a match-3 or merge game.
+  Follow the Recipe to generate 7 distinct gem icons as a sprite atlas.
+  Apply the Binding to wire the atlas into the board renderer.

package/skills/jewel_tile.aiimage/manifest.json

@@ -0,0 +1,49 @@
+{
+  "schemaVersion": 1,
+  "atomId": "jewel_tile.aiimage",
+  "bundleType": "aiimage",
+  "category": "visual",
+  "mode": "generative",
+  "label": {
+    "zh": "宝石牌面贴图组",
+    "en": "Jewel tile set"
+  },
+  "tags": [
+    "tile",
+    "visual",
+    "jewel",
+    "gem",
+    "match3",
+    "premium",
+    "shiny"
+  ],
+  "bindingRoles": ["tileTextureSet"],
+  "generation": {
+    "kind": "sprite-sheet",
+    "prompt": "shiny gemstone icons sprite sheet, ruby diamond emerald sapphire amethyst topaz pearl, flat design with gloss, vibrant colors, transparent background, game assets",
+    "aspectRatio": "1:1",
+    "model": "google/imagen-3.0-generate-002",
+    "style": "cartoon",
+    "platformSkill": "playcraft-image-generation"
+  },
+  "result": {
+    "outputFile": "tiles.png",
+    "format": "png",
+    "constraints": {
+      "minWidth": 512,
+      "minHeight": 512
+    }
+  },
+  "binding": {
+    "role": "tileTextureSet",
+    "target": "scene://entities/Board/tileRenderer/tileAtlas",
+    "type": "sprite-atlas-reference",
+    "constraints": {
+      "format": "png",
+      "minWidth": 512
+    }
+  },
+  "files": {
+    "skill": "SKILL.md"
+  }
+}