I Asked Claude Code to Build Chess 3 Times — Each Time With a Different Skill

I've been doing a lot of building with Claude Code lately. It's genuinely impressive at spinning up code from scratch. But I kept hearing about skills — these installable add-ons that give Claude Code specialized knowledge and superpowers for specific tasks.

So I ran an experiment. I gave Claude Code the exact same prompt three times:

"Build me a playable chess game."

The twist? Each time, I changed what skills were installed. Same prompt, same model, completely different results.

Here's what happened.

Round 1: No Skills — Just Vibes

Time: 1 minute 48 seconds

First up: vanilla Claude Code. No skills, no tricks, just the raw model doing its thing. I typed "build me a chess game" and let it cook.

And honestly? It cooked. In under two minutes I had a fully functional chess game with:

• Legal move validation (including en passant and castling)
• Move history sidebar with algebraic notation
• Check, checkmate, and stalemate detection
• Piece disambiguation in notation
• Undo and new game buttons

The code is procedural — global variables, standalone functions, everything wired together directly. It works. The styling is a dark navy theme with a sidebar for move history. Functional. Clean enough. Looks like a chess game.

But it also looks like... an AI built it. You know that aesthetic. The "I followed the spec but didn't think about how it feels" vibe.

Try it yourself:

Round 2: Web Design Guidelines Skill

Time: 2 minutes 4 seconds

For round two, I installed the web-design-guidelines skill from Vercel Labs:

npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

This skill gives Claude Code a set of UI design principles to follow — think accessibility best practices, layout patterns, visual hierarchy rules. It's not a design tool per se, it's more like giving Claude a design reviewer sitting on its shoulder.

The result? The code is simpler (1,379 lines vs 2,074) and the layout shifted to a vertical, centered design. Some notable differences:

• Captured pieces are displayed above and below the board, sorted by value
• The board labels are positioned absolutely instead of using a flexbox grid
• The status bar changes border color on check/checkmate (nice touch!)
• 50-move rule detection was added
• The overall structure is tighter and more focused

What's interesting is what didn't change. The move history sidebar is gone — replaced by a simpler captured-pieces display. The code still uses the same procedural approach. The visual design is marginally cleaner but not dramatically different.

The guidelines skill nudged Claude toward better UI patterns, but it's subtle. It's like going from a B+ to an A- on a design rubric.

Play it here:

Round 3: Frontend Design Skill

Time: 6 minutes 1 second

Now the big guns. I installed the frontend-design skill from Anthropic's official skills repo:

npx skills add https://github.com/anthropics/skills --skill frontend-design

This skill is fundamentally different from the guidelines one. Where guidelines gives Claude a checklist, frontend-design gives it a design brain. It's specifically built for creating production-grade, visually distinctive interfaces.

And you can tell from the first line of output.

The generation took three times longer — 6 minutes versus 2. Claude wasn't just writing code; it was designing. What came out:

• Custom Google Fonts — Cinzel for headers, Nunito Sans for body text
• CSS custom properties — a full design token system (--gold, --cream, --sq-light, --bg-panel, etc.)
• Wood-grain textures on the board using layered CSS gradients
• Object-oriented architecture — a proper ChessGame class with clean separation between engine and UI
• Piece animations with a landing bounce keyframe
• Three-panel layout — captured pieces on the left, move history on the right, board in the center
• A gorgeous promotion modal with backdrop blur
• Responsive breakpoints for mobile
• Material advantage indicators showing +3, +5 next to captured pieces
• Custom scrollbar styling for the move history panel
• Drop shadows on pieces that differ between white and black

This doesn't look like an AI built it. It looks like a designer built it. The Cinzel serif font gives it a classical chess feel. The gold accent color on dark wood creates genuine atmosphere. The piece shadows add depth. The status bar uses elegant letter-spacing instead of just dumping text.

Go ahead, play it:

The Comparison

Here's a quick breakdown of what changed across versions:

Aspect	No Skill (v0)	Guidelines (v1)	Design Skill (v2)
Time	1:48	2:04	6:01
Lines of code	806	683	1,421
Architecture	Procedural	Procedural	OOP (class-based)
Fonts	System (Segoe UI)	System (Segoe UI)	Google Fonts (Cinzel + Nunito)
Color system	Hardcoded hex	Hardcoded hex	CSS custom properties
Layout	Board + sidebar	Board only (vertical)	3-panel with board center
Board texture	Flat colors	Flat colors	Wood-grain CSS gradients
Piece rendering	Unicode, no styling	Unicode, no styling	Unicode with drop shadows + color
Animations	None	None	Landing bounce keyframe
Responsiveness	None	None	Two breakpoints
Promotion UI	Basic overlay	Basic overlay	Modal with backdrop blur
Move history	Sidebar with scrolling	None	Right panel with styled rows
Material tracking	None	Captured pieces sorted by value	Captured + material advantage number

What This Actually Tells Us

Skills aren't just "better prompts"

The biggest takeaway from this experiment is that skills don't just make the output slightly nicer — they fundamentally change how Claude approaches the problem.

Without skills, Claude writes code to satisfy the requirement. "You want chess? Here's chess." It's functional, correct, and fast.

With the design skill, Claude starts making decisions. It chooses fonts. It creates design tokens. It picks a three-panel layout over a simpler stack. It adds animations and responsive breakpoints that nobody asked for — because a good designer would add those things.

The time difference is the proof. 1:48 vs 6:01 isn't Claude being slower — it's Claude doing more work. It's thinking about typography, visual hierarchy, texture, spacing, hover states, and mobile viewports. That thinking takes time.

The code quality gap is real

Look at v0's approach vs v2's:

v0 — Global state, standalone functions, everything in one flat scope:

let board = []
let turn = 'w'
function applyMove(m) { ... }
function render() { ... }

v2 — Encapsulated game engine with clean separation:

class ChessGame {
  constructor() { this.reset() }
  legalMoves(r, c) { ... }
  makeMove(fr, fc, tr, tc, special, promotedTo) { ... }
  undo() { ... }
  materialBalance() { ... }
}

The design skill didn't just improve visuals — it pushed Claude toward better software architecture. The OOP approach makes the code more maintainable, testable, and extensible. If you wanted to add an AI opponent or multiplayer, v2's codebase is ready for it. v0's would need a major refactor.

The middle ground is interesting

The web-design-guidelines skill produced the shortest code (683 lines) while still being fully functional. It's like Claude got a design conscience — it trimmed the fat, removed the sidebar, and focused on the core experience.

That's actually useful for a different reason. Not every project needs a premium design. Sometimes you want clean, simple, and fast. The guidelines skill gives you that.

How Skills Work (The Technical Bit)

For the curious: Claude Code skills are essentially injected system prompts with specialized knowledge. When you install a skill, it adds instructions that Claude reads before generating code.

The web-design-guidelines skill loads a set of UI principles — things like "maintain visual hierarchy", "use consistent spacing", "provide clear feedback for user actions". It's like having a design system document injected into context.

The frontend-design skill goes much further. It includes specific techniques for creating distinctive interfaces — typography pairing strategies, color theory applications, texture and depth techniques, animation principles, responsive patterns. It's the difference between reading "Design Principles 101" and having a senior designer pair-program with you.

Installing skills is one command:

# Design review and best practices
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines

# Full design capability
npx skills add https://github.com/anthropics/skills --skill frontend-design

They persist across sessions, so you install once and benefit forever.

What I'd Recommend

• Building a quick prototype or internal tool? Skip the skills. Vanilla Claude Code will get you there in under 2 minutes.
• Shipping something to users? Install the frontend-design skill. The 4 extra minutes of generation time saves you hours of manual design polish.
• Want cleaner, simpler code? The web-design-guidelines skill is actually great for this. It acts as a quality filter.

Or do what I do: keep the frontend-design skill installed and enjoy watching Claude Code casually pick Google Fonts and create CSS token systems for you.

---

All three versions are fully playable above. Try them, compare them, form your own opinions. And if you want to discuss AI-assisted development, find me on LinkedIn.