Chess-Mate

Most chess helpers whisper text hints. Chess-Mate draws on the board. The moment a move lands, the position lights up: legal targets colour-coded by piece, best-move tracers, and detected tactics labelled and explained. You stop reading about a position and start seeing it — which, for a game that is fundamentally geometric, is the entire point.

The idea

Chess is geometry. It’s lines, squares, threats, and the relationships between pieces — things you can visualise far faster than you can describe them in prose. So the coaching should be visual, real-time, and toggleable. No hint button you have to press and then parse; the board is simply always alive, surfacing the analysis the way an engine sees it, but in the language of the board itself.

That also meant resisting the urge to outsource the teaching to a language model. Pattern recognition is a deterministic problem — a fork is a fork whether an AI happens to flag it or not. So the tactics layer is a real engine, not a prompt.

How it works

After every move, three things run in parallel. Stockfish re-analyses the position at full strength inside a Web Worker. A pure tactics engine inspects the board and returns the patterns it finds — forks, pins, skewers, discovered attacks, double checks, mate threats, and hanging pieces. A stateless SVG overlay reads that combined state and draws it: legal-move dots and capture rings, a pulsing best-move arrow with its evaluation, the engine’s principal variation as a fan of translucent arrows, and floating labels for every detected tactic.

Each pattern is interactive. Click a label and an explanation panel breaks down what the tactic is, why this instance matters, which pieces are involved, and the principle behind it — then offers a one-tap “Try this move” to play it. A Teach Me mode walks you through every opportunity one by one, narrating as it goes; a Pattern Library loads classic positions to explore; and Puzzle mode with Blunder Review turns your own games into lessons, flagging any move where the evaluation dropped by more than a pawn.

Underneath sits a fully usable chess client: difficulty as a UCI skill level from Beginner (0) to Master (20), adjustable think time, undo, resign, board flip, save and load to local storage, and one-click PGN, FEN, and annotated-analysis export. A position editor and FEN import let you study any setup you like. An evaluation bar runs down the side of the board like the ones on chess.com and lichess, and the move history is fully explorable — click any ply to step back through the game, with each move carrying its own evaluation and significant blunders flagged, then jump straight back to the live position. Every overlay is individually toggleable, and all of those preferences persist across sessions in local storage.

Under the hood

• chess.js is the only authority on board state, legal moves, and game rules — nothing else derives them.
• Stockfish in a Web Worker at full strength, never touching the main thread; difficulty is a Skill Level (0–20).
• TacticsEngine as a pure function — Chess → DetectedPattern[], one detector file per pattern, each unit-tested against FEN positions.
• A stateless SVG overlay layer that reads from a single Zustand store and renders — no logic lives in the components.
• A coach feed that turns analysis into plain language — move classification, commentary, narration, and per-game summaries.
• Keyboard-first throughout — an arrow-key cursor, Enter/Space to select and move, Home/End to scrub history — all respecting board orientation.
• Accessibility built in — high-contrast mode, a colourblind-safe Wong palette for piece colours, a screen-reader live region, and sound synthesised via the Web Audio API with no external files.

Chess-Mate is where I get to care about real-time craft — the kind of polish that only shows when something responds the instant you touch it.