From coderegon-trail
This skill should be used when generating self-contained HTML game files for interactive code learning experiences. Provides guidelines for pixel art aesthetics, retro game mechanics, and educational framework visualization.
How this skill is triggered — by the user, by Claude, or both
Slash command
/coderegon-trail:visualizationThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate self-contained HTML files that present code learning as interactive retro-styled games. The primary format is the Coderegon Trail — a pixel art Oregon Trail-inspired game where the user "travels" through a web framework's request pipeline.
Generate self-contained HTML files that present code learning as interactive retro-styled games. The primary format is the Coderegon Trail — a pixel art Oregon Trail-inspired game where the user "travels" through a web framework's request pipeline.
engine.js at the repo root handles all rendering, state, audio, and UI. No build step. The only CDN dependency is Shiki for syntax highlighting (loaded async with fallback).Each game is a thin HTML file (~200-250 lines) that defines game-specific data, then loads engine.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coderegon Trail — [Framework Name]</title>
</head>
<body>
<div id="game-container">
<div id="canvas-area">
<canvas id="game-canvas" width="320" height="200"></canvas>
<div id="music-indicator">M: Music</div>
</div>
<div id="text-panel"></div>
<div id="status-bar"></div>
</div>
<script>
window.TRAIL_DATA = { /* trail JSON */ };
window.TRAIL_FLAVORS = [ /* travel flavor strings */ ];
window.TRAIL_CONFIG = { mountainColors: { far: '#AA00AA', near: '#FF55FF' } }; // optional
window.drawCustomEventOverlay = function(time) { /* event animations */ }; // optional
</script>
<script src="../engine.js"></script>
</body>
</html>
The shared engine.js at the repo root contains all CSS, game state machine, canvas rendering, audio, syntax highlighting (Shiki CDN + fallback), UI rendering, input handling, and animation loop. It auto-initializes on load.
Code snippets shown at trail stops use Shiki (via https://esm.sh/[email protected]/bundle/web) loaded async in engine.js. The engine:
.shiki-rendered class for Shiki output CSS integrationrepoUrl is set in TRAIL_DATAmusicPlaying = false)ensureAudio() only initializes the AudioContext — does NOT auto-start musicTrail data is defined as window.TRAIL_DATA in the game HTML file. The @frontend-design agent receives this data and embeds it.
const TRAIL_DATA = {
framework: "nextjs",
trailName: "The App Router Trail",
repoUrl: "https://github.com/owner/repo", // optional — links file paths to GitHub
stops: [
{
name: "Independence, MO",
subtitle: "The Starting Point",
concept: "Project initialization and entry point",
code: {
file: "app/layout.tsx",
startLine: 1,
endLine: 20,
content: "// actual code here...",
language: "typescript"
},
narration: "Every Next.js app starts with a root layout...",
landmarkType: "town" // town | mountain | river | forest | desert | camp
}
],
events: [
{
type: "weather", // weather | river | encounter | misfortune | fortune
trigger: "after_stop", // after_stop | random | milestone
triggerStop: 2,
title: "Storm Warning!",
text: "A storm is coming — your middleware is throwing unhandled errors!",
choices: [
{ text: "Add try-catch to each handler", correct: false, explanation: "..." },
{ text: "Use a global error middleware", correct: true, explanation: "..." },
{ text: "Ignore it and hope for clear skies", correct: false, explanation: "..." }
],
concept: "Error handling patterns",
difficulty: "easy"
}
],
partyMembers: [
{ name: "Server Components", icon: "server", maxHealth: 3 },
{ name: "File Router", icon: "router", maxHealth: 3 },
{ name: "Layouts", icon: "layout", maxHealth: 3 },
{ name: "Data Fetching", icon: "data", maxHealth: 3 }
],
deathMessages: [
"Here lies your app. It died of unhandled promise rejections.",
"Lost in the middleware — never found the route handler."
]
};
The game progresses through these states:
| State | Description | Transitions To |
|---|---|---|
| TITLE | Title screen with pixel art logo | SETUP |
| SETUP | Pick framework (if not pre-selected), name party | TRAVEL |
| TRAVEL | Wagon moving between stops, scrolling landscape | STOP, EVENT |
| STOP | At a trail stop — show code, narration | TRAVEL, EVENT |
| EVENT | Quiz/decision event — weather, river, encounter | TRAVEL, DEATH |
| RIVER | Special river crossing event (major boundary) | TRAVEL, DEATH |
| DEATH | Game over — tombstone with death message | TITLE |
| WIN | Arrived at Response Frontier — score card | TITLE |
| Action | Points |
|---|---|
| Correct answer | +10 health, +1 morale streak |
| Partial answer | +5 health |
| Wrong answer | -15 health, reset morale streak, party member takes damage |
| Hint used | -1 supply |
| Streak bonus (3+) | +5 bonus per correct in streak |
| Party member death | Permanent — cannot answer questions about that concept |
references/coderegon-trail.md — Complete game mechanics and event catalogreferences/pixel-art-style.md — Visual style guide, color palette, layout specsreferences/framework-trails.md — Per-framework trail definitions with stops, events, and quiz datanpx claudepluginhub dtran320/coderegon-trail --plugin coderegon-trailGenerates self-contained HTML playgrounds with controls, live previews, and copyable prompts for interactive exploration of design, data, code review, and architecture topics.
Creates self-contained interactive HTML playgrounds with controls, live previews, and copyable prompts for visual exploration of design, data, code, and documents.
Turns tweets, stories, or prompts into scaffolded, designed, deployed, monetized browser games using Phaser/Three.js in one session. For quick viral prototypes.