Phase 2: Skill Forge writes real engine skills + character-page detail screen

skillSchema.js validates/clamps model output into an engine-resolvable CB skill
(safe op/condition whitelist, 9000+ ids, effect summaries, equip resolution). The
forge panel now emits that IR, validates with one retry + fallback, paints a Klein
icon, and persists the skill onto the hero (customSkills/learnedSkills). The Game
character sheet lists forged skills as cards; tapping opens a detail bottom-sheet
with a lazily-painted Klein action illustration of the hero performing the skill,
flavor, effects, and equip/unequip (max 3). Equipped skills flow into live combat.
Rebuilt engine/combo/sandbox bundles for the object-or-id skill bar.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/classesSandbox.js

@@ -978,7 +978,7 @@ function makeActor(unit, team, id, slot) {
   const tpl = templateFor(unit);
   const p = FORMATION[slot % FORMATION.length];
   const pt = team === "player" ? { x: p.x, y: p.y } : { x: 1 - p.x, y: 1 - p.y };
-  const bar = (unit.skills || []).map(skillById).filter(Boolean);
+  const bar = (unit.skills || []).map((s) => s && typeof s === "object" ? s : skillById(s)).filter(Boolean);
   return {
     id,
     team,

web/comboBattler.js

@@ -5058,7 +5058,7 @@ function makeActor(unit, team, id, slot) {
   const tpl = templateFor(unit);
   const p = FORMATION[slot % FORMATION.length];
   const pt = team === "player" ? { x: p.x, y: p.y } : { x: 1 - p.x, y: 1 - p.y };
-  const bar = (unit.skills || []).map(skillById).filter(Boolean);
+  const bar = (unit.skills || []).map((s) => s && typeof s === "object" ? s : skillById(s)).filter(Boolean);
   return {
     id,
     team,

web/enemiesSandbox.js

@@ -811,7 +811,7 @@ function makeActor(unit, team, id, slot) {
   const tpl = templateFor(unit);
   const p = FORMATION[slot % FORMATION.length];
   const pt = team === "player" ? { x: p.x, y: p.y } : { x: 1 - p.x, y: 1 - p.y };
-  const bar = (unit.skills || []).map(skillById).filter(Boolean);
+  const bar = (unit.skills || []).map((s) => s && typeof s === "object" ? s : skillById(s)).filter(Boolean);
   return {
     id,
     team,

web/engine.js

@@ -785,7 +785,7 @@ function makeActor(unit, team, id, slot) {
   const tpl = templateFor(unit);
   const p = FORMATION[slot % FORMATION.length];
   const pt = team === "player" ? { x: p.x, y: p.y } : { x: 1 - p.x, y: 1 - p.y };
-  const bar = (unit.skills || []).map(skillById).filter(Boolean);
+  const bar = (unit.skills || []).map((s) => s && typeof s === "object" ? s : skillById(s)).filter(Boolean);
   return {
     id,
     team,

web/skillForgePanel.js

@@ -1,16 +1,20 @@
-// Skill Forge — the Sandbox surface that uses the Coding Model to author a combat
-// skill for a chosen hero. Pick a recruited persona, describe the skill you want, and
-// the coding model (Nemotron via NIM, or Mellum2 via ZeroGPU — see Settings → Coding
-// Model) writes a self-contained skill definition tailored to that hero. For now it
-// just generates and shows the skill; wiring it into the battle engine comes later.
+// Skill Forge — the Sandbox surface that uses the Coding Model to author a REAL, engine-
+// resolvable combat skill for a chosen hero. Pick a recruited persona, describe the skill,
+// and the coding model writes a CB skill object (validated + clamped by skillSchema.js) that
+// the battle engine can actually run. The forge then paints a Klein icon, saves the skill onto
+// the hero (customSkills + learnedSkills), and shows a card you can view on the character page.
 import { streamCoding, currentCodingModel, onCodingModelChange } from '/web/codingModel.js'
-import { listPersonas, getPersona, onRosterChange } from '/web/personaStore.js'
+import { listPersonas, getPersona, onRosterChange, patchPersona, putSkillIcon, getSkillIcon } from '/web/personaStore.js'
 import { stripThink, stripThinkFinal } from '/web/personaPrompts.js'
+import { validateSkill, effectSummary, SAFE_OPS, SAFE_CONDITIONS } from '/web/skillSchema.js'
+import { generatePortrait } from '/web/imagen.js'
+import { appendEvent } from '/web/progression.js'
 
 function el(tag, props = {}, kids = []) {
   const n = document.createElement(tag)
   for (const [k, v] of Object.entries(props)) {
     if (k === 'class') n.className = v
+    else if (k === 'style') n.style.cssText = v
     else if (k.startsWith('on') && typeof v === 'function') n.addEventListener(k.slice(2), v)
     else if (v != null) n.setAttribute(k, v)
   }
@@ -18,13 +22,21 @@ function el(tag, props = {}, kids = []) {
   return n
 }
 
+// The forge contract: emit ONE fenced json skill object the engine can resolve. We constrain
+// the op + condition vocabulary to skillSchema's whitelist so the result is always runnable.
 const SYSTEM = [
-  'You are the Skill Forge for a fantasy auto-battler. You author ONE combat skill for a',
-  'specific hero, tailored to their class, story and personality. Respond with exactly:',
-  'a one-line skill name, a one-sentence flavour description, then a fenced ```json block',
-  'with fields {name, type:"active"|"passive", target:"self"|"ally"|"enemy"|"area",',
-  'cooldown:<int seconds>, effect:"<short mechanical description>"}.',
-  'Keep it concise and balanced. Output only the skill — no preamble, no commentary.',
+  'You are the Skill Forge for a fantasy auto-battler. Author ONE combat skill for a specific',
+  'hero, tailored to their class, story and personality. Respond with a SINGLE fenced ```json',
+  'block (no prose outside it) of the form:',
+  '{"name": string, "flavor": string (one vivid in-world sentence),',
+  '"category": "melee_attack"|"ranged_attack"|"spell"|"shout"|"stance",',
+  '"target": "foe"|"self"|"ally"|"area", "cost": int, "recharge": int seconds,',
+  '"effects": [ {"op": <op>, ...args} ] }.',
+  `Allowed effect ops: ${SAFE_OPS.join(', ')}.`,
+  'damage/bonus_damage/heal/life_steal take {"amount": int}. apply_condition takes',
+  `{"condition": one of [${SAFE_CONDITIONS.join(', ')}], "duration": int seconds}.`,
+  'knockdown takes {"duration": int}. interrupt and lose_all_adrenaline take no args.',
+  'Use 1-3 effects. Keep it concise, flavourful and balanced. Output ONLY the json block.',
 ].join(' ')
 
 function personaBlock(p) {
@@ -37,26 +49,31 @@ function personaBlock(p) {
   ].filter(Boolean).join('\n')
 }
 
+// Pull the first JSON object out of model text (fenced or bare).
+function parseSkillJson(text) {
+  const fence = text.match(/```(?:json)?\s*([\s\S]*?)```/i)
+  const body = fence ? fence[1] : text
+  const a = body.indexOf('{'), b = body.lastIndexOf('}')
+  if (a < 0 || b <= a) return null
+  try { return JSON.parse(body.slice(a, b + 1)) } catch { return null }
+}
+
 export function mountSkillForgePanel(host) {
   const sel = el('select', { class: 'persona-input skillforge-hero' })
   const req = el('textarea', { class: 'persona-prompt-edit skillforge-req', rows: 4,
     placeholder: 'what skill should this hero learn? (e.g. “a defensive shout that shields nearby allies”)' })
   const btn = el('button', { class: 'persona-go', type: 'button' }, '⚒ Forge skill')
   const status = el('div', { class: 'persona-status' })
-  const out = el('pre', { class: 'persona-think skillforge-out' })
+  const card = el('div', { class: 'skillforge-card', style: 'display:none;margin-top:10px;border:1px solid #2a3340;border-radius:12px;padding:12px;background:rgba(20,24,33,.6)' })
   const empty = el('div', { class: 'persona-roster-empty' },
     'No heroes yet — recruit one in the Personas tab, then come back to forge its skills.')
 
-  // "Show thinking" reveals the reasoning models' <think> trace (Nemotron, BLS) in the debug
-  // panel below; off by default so forging stays fast/clean. (Mellum2 has no reasoning.)
   const thinkChk = el('input', { type: 'checkbox', class: 'skillforge-think' })
-  const thinkLabel = el('label', { class: 'persona-label skillforge-think-label' },
-    [thinkChk, ' show model thinking'])
+  const thinkLabel = el('label', { class: 'persona-label skillforge-think-label' }, [thinkChk, ' show model thinking'])
   const dbgEl = el('pre', { class: 'persona-think' })
   const copyBtn = el('button', { class: 'persona-copy', type: 'button',
     onclick: () => navigator.clipboard?.writeText(dbgEl.textContent || '') }, 'copy')
-  const dbgWrap = el('details', { class: 'persona-think-wrap' },
-    [el('summary', {}, 'model thinking / raw'), copyBtn, dbgEl])
+  const dbgWrap = el('details', { class: 'persona-think-wrap' }, [el('summary', {}, 'model thinking / raw'), copyBtn, dbgEl])
   dbgWrap.style.display = thinkChk.checked ? '' : 'none'
 
   const controls = el('aside', { class: 'persona-controls skillforge' }, [
@@ -67,7 +84,7 @@ export function mountSkillForgePanel(host) {
     thinkLabel,
     el('div', { class: 'persona-prompt-actions' }, [btn]),
     status,
-    el('label', { class: 'persona-label' }, 'Forged skill'), out,
+    card,
     dbgWrap,
   ])
   host.append(controls)
@@ -84,9 +101,37 @@ export function mountSkillForgePanel(host) {
     sel.style.display = none ? 'none' : ''
     btn.disabled = none
   }
+  function refreshStatus() { if (!status.dataset.busy) status.textContent = `Coding model: ${currentCodingModel().label}` }
+
+  // Stream the coding model once; return the validated skill (or null + reason). `extra` lets a
+  // retry feed the validation errors back to the model.
+  async function generateSkill(p, ask, showThink, extra = '') {
+    const user = `${personaBlock(p)}\n\nSkill to create: ${ask}${extra}`
+    let raw = ''
+    const { } = await streamCoding(SYSTEM, user, {
+      maxTokens: 512, temperature: 0.6, think: showThink,
+      onToken: (t) => { raw += t; if (showThink) { dbgEl.textContent = raw; dbgWrap.open = true; dbgEl.scrollTop = dbgEl.scrollHeight } },
+    })
+    const clean = stripThinkFinal(raw)
+    const parsed = parseSkillJson(clean)
+    const v = validateSkill(parsed, { persona: p })
+    return { v, clean }
+  }
 
-  function refreshStatus() {
-    if (!status.dataset.busy) status.textContent = `Coding model: ${currentCodingModel().label}`
+  function renderCard(skill, iconBlob) {
+    card.style.display = ''
+    card.replaceChildren()
+    const head = el('div', { style: 'display:flex;gap:12px;align-items:center' })
+    const icon = el('div', { style: 'width:64px;height:64px;border-radius:10px;border:1px solid #2a3340;background:#0d1015;flex:none;background-size:cover;background-position:center' })
+    if (iconBlob) icon.style.backgroundImage = `url(${URL.createObjectURL(iconBlob)})`
+    const meta = el('div', {}, [
+      el('div', { style: 'font:700 16px var(--tac-font,system-ui);color:#e8e8e8' }, skill.name),
+      el('div', { style: 'font-size:11px;color:#9aa4b2;text-transform:uppercase;letter-spacing:.06em;margin:2px 0' }, `${skill.category.replace('_', ' ')} · ${effectSummary(skill)}`),
+    ])
+    head.append(icon, meta)
+    const flav = el('div', { style: 'color:#c2c8d2;font-style:italic;margin:10px 0 0;line-height:1.45' }, skill.flavor || '')
+    const saved = el('div', { style: 'color:#34d058;font-size:12px;margin-top:8px' }, '✓ Learned — view it on the hero’s character sheet.')
+    card.append(head, flav, saved)
   }
 
   let running = false
@@ -97,27 +142,36 @@ export function mountSkillForgePanel(host) {
     const ask = req.value.trim()
     if (!ask) { status.textContent = 'Describe the skill you want.'; return }
     running = true; status.dataset.busy = '1'; btn.disabled = true
-    out.textContent = ''; dbgEl.textContent = ''
-    status.textContent = `Forging with ${currentCodingModel().label}…`
-    const user = `${personaBlock(p)}\n\nSkill to create: ${ask}`
+    card.style.display = 'none'; dbgEl.textContent = ''
     const showThink = thinkChk.checked
-    let raw = ''
     try {
-      const { stats } = await streamCoding(SYSTEM, user, {
-        maxTokens: 512,
-        temperature: 0.6,
-        think: showThink,
-        // Reasoning streams inside <think>…</think>; show the raw trace in the debug panel and
-        // the stripped answer in the output (same split the persona panel uses).
-        onToken: (t) => {
-          raw += t
-          out.textContent = stripThink(raw)
-          if (showThink) { dbgEl.textContent = raw; dbgWrap.open = true; dbgEl.scrollTop = dbgEl.scrollHeight }
-        },
+      status.textContent = `Forging with ${currentCodingModel().label}…`
+      let { v } = await generateSkill(p, ask, showThink)
+      if (!v.ok) {
+        status.textContent = 'Refining (invalid skill, retrying)…'
+        const fix = `\n\nYour previous attempt was invalid: ${v.errors.join('; ')}. Return ONLY a corrected json block.`
+        ;({ v } = await generateSkill(p, ask, showThink, fix))
+      }
+      if (!v.ok) { status.textContent = 'Forge failed to produce a valid skill: ' + v.errors.join('; '); return }
+      const skill = v.skill
+      // Paint the icon (best-effort; a skill without art is still learned).
+      status.textContent = 'Painting skill icon…'
+      let iconBlob = null
+      try {
+        iconBlob = await generatePortrait(
+          `fantasy game skill icon, "${skill.name}": ${skill.flavor}. ${p.unitClass || ''} ability, dramatic, centered emblem, painterly, square`,
+          { seed: skill.id })
+        if (iconBlob) await putSkillIcon(skill.id, iconBlob)
+      } catch { /* art is optional */ }
+      // Persist onto the hero.
+      const fresh = getPersona(p.id) || p
+      patchPersona(p.id, {
+        customSkills: { ...(fresh.customSkills || {}), [skill.id]: skill },
+        learnedSkills: [...(fresh.learnedSkills || []), skill.id],
+        events: appendEvent(fresh.events, 'skill_learned', { skill: skill.name, id: skill.id, ts: Date.now() }),
       })
-      out.textContent = stripThinkFinal(raw)
-      const tps = stats && stats.tokPerSec ? ` · ${stats.tokPerSec} tok/s` : ''
-      status.textContent = `Done${tps}.`
+      renderCard(skill, iconBlob)
+      status.textContent = 'Done.'
     } catch (e) {
       status.textContent = 'Forge failed: ' + (e && e.message ? e.message : e)
     } finally {

web/skillSchema.js

@@ -0,0 +1,103 @@
+// Skill Forge validator — turns a model-authored skill into a SAFE, engine-resolvable
+// CB skill object. The combat resolver (auto-battler src/engine/teamBattle.js) switches on
+// effect `op`s and reads {category, target, cost, recharge, effects[]}; anything outside the
+// whitelist here is dropped or clamped so a forged skill can never crash the resolver or be
+// wildly unbalanced. Mirrors the op/condition vocabulary in teamBattle.js — keep in sync.
+
+// Effect ops the resolver understands AND we consider safe to expose to generation.
+// Each entry clamps/normalizes its payload to engine-ready numbers.
+const NUM = (v, lo, hi, dflt) => {
+  let n = typeof v === 'number' ? v : (v && Array.isArray(v.scale) ? (v.scale[1] ?? v.scale[0]) : Number(v))
+  if (!Number.isFinite(n)) n = dflt
+  return Math.max(lo, Math.min(hi, Math.round(n)))
+}
+const CONDITIONS = ['bleeding', 'poison', 'burning', 'deepWound', 'weakness', 'crippled', 'blind', 'dazed']
+const SCOPES = ['self', 'party', 'nearby', 'area', 'target_and_adjacent', 'adjacent_to_target']
+
+const OPS = {
+  damage: (e) => ({ op: 'damage', amount: NUM(e.amount, 1, 60, 15) }),
+  bonus_damage: (e) => ({ op: 'bonus_damage', amount: NUM(e.amount, 1, 40, 12) }),
+  heal: (e) => ({ op: 'heal', amount: NUM(e.amount, 1, 60, 20) }),
+  life_steal: (e) => ({ op: 'life_steal', amount: NUM(e.amount, 1, 40, 12) }),
+  apply_condition: (e) => CONDITIONS.includes(e.condition)
+    ? { op: 'apply_condition', condition: e.condition, duration: NUM(e.duration, 1, 25, 8), ...(SCOPES.includes(e.scope) ? { scope: e.scope } : {}) }
+    : null,
+  knockdown: (e) => ({ op: 'knockdown', duration: NUM(e.duration, 1, 5, 2) }),
+  interrupt: () => ({ op: 'interrupt' }),
+  lose_all_adrenaline: () => ({ op: 'lose_all_adrenaline' }),
+}
+const CATEGORIES = ['melee_attack', 'ranged_attack', 'spell', 'shout', 'stance']
+const TARGETS = ['foe', 'self', 'ally', 'area']
+
+export const SAFE_OPS = Object.keys(OPS)
+export const SAFE_CONDITIONS = CONDITIONS.slice()
+
+// A fresh id that won't collide with the canon skills (ids ~0–700) or the hero's own forged
+// skills. Forged ids live in the 9000+ band.
+export function nextSkillId(persona) {
+  const used = Object.keys((persona && persona.customSkills) || {}).map((k) => +k).filter((n) => n >= 9000)
+  return used.length ? Math.max(...used) + 1 : 9000
+}
+
+// Validate + normalize a raw model object into an engine-ready skill. Returns
+// { ok, skill, errors }. `skill` is always engine-safe when ok is true.
+export function validateSkill(raw, { persona, profession } = {}) {
+  const errors = []
+  if (!raw || typeof raw !== 'object') return { ok: false, skill: null, errors: ['not an object'] }
+  const name = String(raw.name || '').trim().slice(0, 40)
+  if (!name) errors.push('missing name')
+  const category = CATEGORIES.includes(raw.category) ? raw.category : 'melee_attack'
+  const target = TARGETS.includes(raw.target) ? raw.target : 'foe'
+  const rawEffects = Array.isArray(raw.effects) ? raw.effects : []
+  const effects = rawEffects.map((e) => (e && OPS[e.op] ? OPS[e.op](e) : null)).filter(Boolean).slice(0, 3)
+  if (!effects.length) errors.push('no valid effects')
+  // Cost: keep it cheap enough to actually fire. Casters pay energy, fighters adrenaline.
+  const isCaster = category === 'spell'
+  const cost = isCaster ? { energy: NUM(raw.cost?.energy ?? raw.cost, 1, 15, 5) }
+    : { adrenaline: NUM(raw.cost?.adrenaline ?? raw.cost, 0, 10, 4) }
+  const recharge = NUM(raw.recharge ?? raw.cooldown, 0, 30, isCaster ? 4 : 0)
+  const flavor = String(raw.flavor || raw.description || '').trim().slice(0, 200)
+  if (errors.length) return { ok: false, skill: null, errors }
+  const skill = {
+    id: nextSkillId(persona),
+    name,
+    profession: profession || (persona && persona.unitClass) || 'Warrior',
+    attribute: 'Forged',
+    category, target,
+    cost, cast: isCaster ? NUM(raw.cast, 0, 3, 1) : 0, recharge,
+    requires: category === 'melee_attack' || category === 'ranged_attack' ? ['on_hit'] : [],
+    effects,
+    // ── metadata (ignored by the resolver, used by the UI) ──
+    custom: true, flavor,
+  }
+  return { ok: true, skill, errors: [] }
+}
+
+// Human one-line effect summary for skill cards (mirrors the engine's label style).
+export function effectSummary(skill) {
+  if (!skill || !Array.isArray(skill.effects)) return ''
+  const parts = skill.effects.map((e) => {
+    switch (e.op) {
+      case 'damage': case 'bonus_damage': return `+${e.amount} dmg`
+      case 'heal': return `+${e.amount} heal`
+      case 'life_steal': return `${e.amount} life steal`
+      case 'apply_condition': return e.condition
+      case 'knockdown': return 'knockdown'
+      case 'interrupt': return 'interrupt'
+      case 'lose_all_adrenaline': return 'spend adrenaline'
+      default: return e.op
+    }
+  })
+  return parts.join(' · ')
+}
+
+// Resolve a persona's equipped skill ids into engine-ready objects (custom objects pass
+// through; numeric ids are left for the engine to resolve against CB_SKILLS).
+export function resolveEquipped(persona) {
+  if (!persona) return []
+  const custom = persona.customSkills || {}
+  return (persona.equippedSkills || [])
+    .map((id) => custom[id] || (typeof id === 'number' ? id : null))
+    .filter((x) => x != null)
+    .slice(0, 3)
+}

web/tiny.js

@@ -17,6 +17,9 @@ import { mountPersonaPanel, CLASS_SLUG } from '/web/personaPanel.js'
 import { mountHeroCreator, animateIdleIcon } from '/web/heroCreator.js'
 import { listPersonas, onRosterChange, getPortrait, getPersona, patchPersona, setActiveHeroId } from '/web/personaStore.js'
 import { applyXp, enemyXpValue, levelProgress, xpToNext, appendEvent } from '/web/progression.js'
+import { getSkillIcon, getSkillArt, putSkillArt } from '/web/personaStore.js'
+import { effectSummary, resolveEquipped } from '/web/skillSchema.js'
+import { generatePortrait } from '/web/imagen.js'
 import { mountDiaryPanel } from '/web/diaryPanel.js'
 import { mountSettingsPanel } from '/web/settingsPanel.js'
 import { mountSkillForgePanel } from '/web/skillForgePanel.js'
@@ -219,7 +222,12 @@ const ENEMY_AGGRO = 220 // FIELD units (~8 tiles): enemy idles until the player
 // A persona → controllable hero (class → sheets + engine profession).
 const buildPlayer = (chars, p) => {
   const pc = chars[CLASS_SLUG[p?.unitClass]] || chars['true-heroes-iii-fighter']
-  return { name: p?.name || pc?.name || 'Hero', sheets: sheetsOf(pc), unit: { profession: PERSONA_PROF[p?.unitClass] || 'Warrior', name: p?.name || 'Hero' } }
+  // Equipped Skill-Forge skills (objects) flow straight into the engine bar; if none are
+  // equipped, leaving skills unset lets comboBattler pick the class's default three.
+  const equipped = resolveEquipped(p)
+  const unit = { profession: PERSONA_PROF[p?.unitClass] || 'Warrior', name: p?.name || 'Hero' }
+  if (equipped.length) unit.skills = equipped
+  return { name: p?.name || pc?.name || 'Hero', sheets: sheetsOf(pc), unit }
 }
 const PICK_CARD_CSS = 'display:flex;flex-direction:column;align-items:center;gap:4px;width:76px;padding:8px 6px;border-radius:10px;border:1px solid #2a3340;background:rgba(20,24,33,.92);color:#e8e8e8;cursor:pointer;font:600 11px var(--tac-font,system-ui)'
 // Fill a square box with the hero's saved PORTRAIT (if any), else an animated idle GIF-style sprite
@@ -404,6 +412,45 @@ whenEl('battle-stage', async (el) => {
   sheetBtn.style.cssText = 'position:absolute;top:14px;right:14px;z-index:7;width:44px;height:44px;border-radius:10px;border:1px solid #2a3340;background:rgba(20,24,33,.85);color:#e8e8e8;font:600 18px var(--tac-font,system-ui);cursor:pointer'
   const sheet = document.createElement('aside')
   sheet.style.cssText = 'position:absolute;top:0;right:0;bottom:0;width:min(300px,82vw);z-index:8;background:rgba(16,20,27,.97);border-left:1px solid #2a3340;box-shadow:-8px 0 24px rgba(0,0,0,.45);transform:translateX(100%);transition:transform .22s ease;overflow-y:auto;color:#e8e8e8;font:13px var(--tac-font,system-ui);box-sizing:border-box;padding:18px 16px'
+  // A forged-skill detail bottom-sheet: big action illustration (lazy Klein render, cached),
+  // flavor, effects, and an equip/unequip toggle (max 3 equipped).
+  let skillSheet = null
+  const openSkillDetail = (sk) => {
+    skillSheet?.remove()
+    const back = document.createElement('div'); back.style.cssText = 'position:absolute;inset:0;z-index:10;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center'
+    const sh = document.createElement('div'); sh.style.cssText = 'width:min(440px,96vw);max-height:90%;overflow-y:auto;background:#11151c;border:1px solid #2a3340;border-radius:16px 16px 0 0;padding:16px;color:#e8e8e8;box-sizing:border-box'
+    const x = document.createElement('button'); x.type = 'button'; x.textContent = '✕'; x.style.cssText = 'float:right;background:none;border:none;color:#9aa4b2;font-size:20px;cursor:pointer'
+    const closeDetail = () => { back.remove(); skillSheet = null }
+    x.addEventListener('click', closeDetail); sh.append(x)
+    const art = document.createElement('div'); art.style.cssText = 'width:100%;aspect-ratio:1/1;border-radius:12px;border:1px solid #2a3340;background:#0d1015;background-size:cover;background-position:center;margin:6px 0 12px;display:flex;align-items:center;justify-content:center;color:#5a6573;font-size:12px'
+    art.textContent = 'summoning the vision…'; sh.append(art)
+    const nm = document.createElement('div'); nm.textContent = sk.name; nm.style.cssText = 'font:700 19px var(--tac-font,system-ui)'; sh.append(nm)
+    const cat = document.createElement('div'); cat.textContent = `${(sk.category || '').replace('_', ' ')} · ${effectSummary(sk)}`; cat.style.cssText = 'font-size:11px;color:#9aa4b2;text-transform:uppercase;letter-spacing:.06em;margin:3px 0 10px'; sh.append(cat)
+    if (sk.flavor) { const fl = document.createElement('div'); fl.textContent = sk.flavor; fl.style.cssText = 'font-style:italic;color:#c2c8d2;line-height:1.5;margin-bottom:14px'; sh.append(fl) }
+    const eqBtn = document.createElement('button'); eqBtn.type = 'button'
+    const isEq = () => (getPersona(currentHero.id)?.equippedSkills || []).includes(sk.id)
+    const paintEq = () => { const on = isEq(); eqBtn.textContent = on ? '★ Equipped — tap to remove' : '☆ Equip (uses a skill slot)'; eqBtn.style.cssText = `width:100%;padding:12px;border-radius:10px;border:1px solid ${on ? '#c9a227' : '#2a3340'};background:${on ? '#2a2410' : '#1a2230'};color:${on ? '#ffe082' : '#e8e8e8'};font:600 13px var(--tac-font,system-ui);cursor:pointer` }
+    eqBtn.addEventListener('click', () => {
+      const cur = getPersona(currentHero.id); if (!cur) return
+      let eq = (cur.equippedSkills || []).slice()
+      if (eq.includes(sk.id)) eq = eq.filter((i) => i !== sk.id)
+      else { if (eq.length >= 3) { eqBtn.textContent = 'Slots full (3) — remove one first'; return } eq.push(sk.id) }
+      patchPersona(cur.id, { equippedSkills: eq }); currentHero = getPersona(cur.id); paintEq(); renderSheet()
+    })
+    paintEq(); sh.append(eqBtn)
+    back.addEventListener('pointerdown', (e) => { if (e.target === back) closeDetail() })
+    back.append(sh); el.append(back); skillSheet = back
+    // Action illustration: serve cached, else paint once with Klein and cache.
+    getSkillArt(sk.id).then(async (b) => {
+      if (b) { art.textContent = ''; art.style.backgroundImage = `url(${URL.createObjectURL(b)})`; return }
+      try {
+        const prompt = `${currentHero.name || 'A fighter'}, a ${currentHero.unitClass || ''}, performing "${sk.name}": ${sk.flavor || ''}. dynamic action scene, motion and impact, fantasy game art, dramatic lighting`
+        const blob = await generatePortrait(prompt, { seed: sk.id + 1 })
+        if (blob) { await putSkillArt(sk.id, blob); art.textContent = ''; art.style.backgroundImage = `url(${URL.createObjectURL(blob)})` }
+        else art.textContent = 'no art'
+      } catch { art.textContent = 'art unavailable' }
+    })
+  }
   const renderSheet = () => {
     sheet.innerHTML = ''
     const close = document.createElement('button'); close.type = 'button'; close.textContent = '✕'
@@ -444,6 +491,27 @@ whenEl('battle-stage', async (el) => {
       const h = document.createElement('div'); h.textContent = 'Skills'; h.style.cssText = 'font:600 10px var(--tac-font,system-ui);letter-spacing:.18em;text-transform:uppercase;color:#9aa4b2;margin:12px 0 6px'; sheet.append(h)
       skills.forEach((s, i) => { const row = document.createElement('div'); row.style.cssText = 'display:flex;gap:8px;align-items:center;padding:7px 9px;border:1px solid #232b36;border-radius:8px;margin-bottom:6px'; const n = document.createElement('span'); n.textContent = String(i + 1); n.style.cssText = 'width:18px;height:18px;border-radius:50%;background:#222a35;display:flex;align-items:center;justify-content:center;font-size:11px;color:#9aa4b2;flex:none'; const t = document.createElement('span'); t.textContent = s; row.append(n, t); sheet.append(row) })
     }
+    // ── Forged skills — tap a card for the detail sheet (action art + equip) ──
+    {
+      const cs = currentHero.customSkills || {}
+      const learned = (currentHero.learnedSkills || []).map((id) => cs[id]).filter(Boolean)
+      if (learned.length) {
+        const equipped = new Set(currentHero.equippedSkills || [])
+        const h = document.createElement('div'); h.textContent = `Forged skills (${equipped.size}/3 equipped)`; h.style.cssText = 'font:600 10px var(--tac-font,system-ui);letter-spacing:.18em;text-transform:uppercase;color:#9aa4b2;margin:16px 0 6px'; sheet.append(h)
+        learned.forEach((sk) => {
+          const row = document.createElement('button'); row.type = 'button'
+          row.style.cssText = `display:flex;gap:10px;align-items:center;width:100%;text-align:left;padding:8px;border:1px solid ${equipped.has(sk.id) ? '#c9a227' : '#232b36'};border-radius:10px;margin-bottom:7px;background:rgba(20,24,33,.6);color:#e8e8e8;cursor:pointer`
+          const ic = document.createElement('div'); ic.style.cssText = 'width:40px;height:40px;border-radius:8px;border:1px solid #2a3340;background:#0d1015;background-size:cover;background-position:center;flex:none'
+          getSkillIcon(sk.id).then((b) => { if (b) ic.style.backgroundImage = `url(${URL.createObjectURL(b)})` })
+          const txt = document.createElement('div')
+          const nm = document.createElement('div'); nm.textContent = sk.name + (equipped.has(sk.id) ? '  ★' : ''); nm.style.cssText = 'font:600 13px var(--tac-font,system-ui)'
+          const ef = document.createElement('div'); ef.textContent = effectSummary(sk); ef.style.cssText = 'font-size:11px;color:#9aa4b2'
+          txt.append(nm, ef); row.append(ic, txt)
+          row.addEventListener('click', () => openSkillDetail(sk))
+          sheet.append(row)
+        })
+      }
+    }
     if (currentHero.about) { const a = document.createElement('div'); a.textContent = currentHero.about; a.style.cssText = 'color:#c2c8d2;margin:12px 0;line-height:1.45'; sheet.append(a) }
     const sw = document.createElement('button'); sw.type = 'button'; sw.textContent = '⇄ Switch / New hero'
     sw.style.cssText = 'width:100%;margin-top:14px;padding:11px;border-radius:10px;border:1px solid #2a3340;background:#1a2230;color:#e8e8e8;font:600 13px var(--tac-font,system-ui);cursor:pointer'