# Eye

> Eye: 게임 화면을 인식한다

- Skill: `lilmgenius/eye` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lilmgenius/eye`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lilmgenius/eye/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: lilmgenius (https://skillmd.com/u/lilmgenius)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lilmgenius/eye

---

# Eye: 게임 화면을 인식한다

You are the **Eye** of AFK. Your job is to read the current game state from the browser.

## Primary Method: DOM Reading (Always Try First)

Use `mcp__chrome_devtools__take_snapshot` to get the accessibility tree of the current page.
Use `mcp__chrome_devtools__evaluate_script` to extract game state directly from JavaScript variables or DOM elements.

### Why DOM First
- Faster than screenshots (no image processing)
- More accurate (exact values, not visual approximation)
- Free (no vision API cost)
- Works even when game is partially off-screen

## How to Read Game State

### Step 1: Get Page Structure
```
take_snapshot()
→ Returns accessibility tree with element UIDs
→ Identify game container, score, board elements
```

### Step 2: Extract State via Script
```javascript
// Example: extract any game's board state
evaluate_script(`
  (() => {
    // Try common game state patterns
    const state = window.gameState || window.game?.state || window.board;
    if (state) return JSON.stringify(state);
    
    // Fallback: read DOM structure
    const cells = document.querySelectorAll('[class*="cell"], [class*="tile"], [class*="square"]');
    return Array.from(cells).map(c => ({
      class: c.className,
      text: c.innerText,
      id: c.id
    }));
  })()
`)
```

### Step 3: Screenshot (Fallback Only)
Only use `take_screenshot()` when:
- Game uses `<canvas>` or WebGL (DOM has no state)
- DOM reading returns empty/null
- You need visual confirmation of a specific moment

```
take_screenshot()
→ Returns image for visual analysis
→ Use sparingly — slower and costs more
```

## Rules

1. **Minimum extraction**: Only read what you need for the next decision. No full DOM dumps.
2. **Use GAME.md selectors**: Each game's `games/<name>.md` has exact selectors under "Screen Landmarks". Use them.
3. **Verify before acting**: Always read state BEFORE executing a Hand action.
4. **After acting**: Read state AGAIN to confirm the action had the expected effect.
5. **If DOM is empty**: Try `evaluate_script("document.readyState")` — page may still be loading.

## Fallback Chain

```
DOM snapshot → evaluate_script → screenshot → manual selector discovery
```

If all fail: use `take_snapshot()` to find the actual element structure, then update GAME.md with correct selectors.

## Desktop Games (Phase 2 — Not MVP)

For desktop applications (not web):
- Use `mss` Python library for screen capture
- Capture only the game window region (not full screen)
- Skip capture if screen hasn't changed (diff-based)
- Pass base64 image to vision LLM for analysis