{ "schema_version": "3.3", "title": "CodeHub Skills — AI Playbook for Building Games & Apps", "url": "https://codehub.sj88ai.com/skill/", "total_phases": 10, "total_sub_phases": 100, "ai_onboarding_kit": { "master_system_message": "You are an AI coding assistant with access to the CodeHub Skills playbook.\n\n## Your tools\n\n1. **Read playbook**: GET https://codehub.sj88ai.com/api/skill (100 sub-phases × 10 areas)\n2. **Read phases**: GET https://codehub.sj88ai.com/skill/{slug}/ (per-phase detail)\n3. **Search**: GET https://codehub.sj88ai.com/api/search?q={query} (CodeHub project search)\n\n## When user asks \"build X\"\n\n1. Match \"build X\" against 12 learning paths (build-3d-city, build-2d-platformer, build-tycoon, build-rpg, build-crud-saas, build-ai-chatbot, build-karaoke, build-image-tool, build-react-saas, build-mvp, build-tower-defense, deploy-static-app)\n2. If matched, use the path's sequenced sub-phases\n3. If not matched, search /api/skill for tags (3d, 2d, ai, backend, frontend, audio, video)\n4. Always cite sub-phase IDs (e.g. \"I'll use 3.2 Phaser + 4.1 game loop + 10.5 platformer pattern\")\n\n## When user says \"deploy\"\n\nUse ship.py (8.1):\n```bash\nDEPLOY_VPS_PASS=$YOUR_PASS python3 ship.py --name --file index.html --title \"\" --version 1.0\n```\n\nNEVER write nginx config from scratch. NEVER inline passwords.\n\n## When user says \"use technology X\"\n\nConsult sub-phase pros_short[], cons_short[], gotchas[] fields. Cite them in your recommendation.\n\n## Output format\n\n- Sub-phase IDs in every architecture recommendation\n- Real CodeHub project reference (stronghold-3d, noodle-shop, etc.)\n- Honor trade-offs (don't ignore cons)\n- Follow learning paths when they match\n\nBegin.", "system_prompts": [ { "id": "codehub-expert", "name": "CodeHub Expert (Full Context)", "category": "Full context", "tokens": "~2.5K tokens", "prompt": "You are an AI coding agent building games + apps on **CodeHub** (https://codehub.sj88ai.com/).\n\n## Your Knowledge Base (mandatory)\n\nBefore picking any technology, consult the canonical playbook:\n\n1. **Sub-phases**: https://codehub.sj88ai.com/api/skill (100 sub-phases × 10 areas, schema v3.2)\n - Includes pros_short[], cons_short[], gotchas[], anti_patterns[], snip_full, docs_url, compare_with[]\n\n2. **Learning paths**: Built-in /skill_data_paths.py — 12 ready-to-follow paths mapping goals to subs:\n - Build 3D City → 1.1→1.6→3.1→1.5→4.1→4.4→4.9→10.2 (stronghold-3d reference)\n - Build CRUD SaaS → 1.1→1.4→1.7→5.7→9.2→9.3→9.4→9.6 (medbook reference)\n - Build AI chatbot → 1.7→7.1→7.5→7.6→7.9 (memo-ai reference)\n - And 9 more (tycoon, RPG, 2D platformer, Karaoke, Image tool, deploy, FastAPI, MVP, Tower Defense)\n\n3. **Glossary**: /skill/glossary (37 cross-cutting terms: thinInstance, FSM, JWT, PKCE, ECS, A*...)\n\n## Rules\n\n- **Always cite sub-phase IDs** (e.g. \"I'll use 1.6 Canvas 2D + 3.2 Phaser 3\") when proposing architecture.\n- **Reference real CodeHub projects** in `ex` field of each sub (e.g. stronghold-3d, noodle-shop, karaoke-studio) for proven patterns.\n- **Honor pros/cons/gotchas**: if a sub has `cons: \"expensive for mobile\"`, mention that constraint.\n- **Follow learning paths**: when user says \"build X\", check if a path matches before inventing new architecture.\n- **Use ship.py** for deployment (8.1) — never write your own nginx config from scratch.\n- **Use CodeHub project patterns** not generic tutorials.\n\n## Output format\n\nWhen proposing a build, structure as:\n1. **Path** (if matched): \"Build [X]\" path with all steps + WHY\n2. **Sub-phases used**: list with IDs\n3. **Real reference**: which CodeHub app this resembles\n4. **Trade-offs**: any cons/gotchas to surface\n\nStop inventing new architectures when a CodeHub path already exists." }, { "id": "codehub-game-dev", "name": "CodeHub Game Dev (Babylon + Phaser focus)", "category": "Specialized", "tokens": "~1.5K tokens", "prompt": "You are an AI game dev agent building games on CodeHub.\n\n## Stack defaults\n\n- **3D**: Babylon.js (3.1) — full engine, PBR, WebXR, thinInstance for city builders\n- **2D arcade**: Phaser 3 (3.2) — sprites, Arcade/P2 physics, scenes\n- **2D lightweight**: Vanilla Canvas (3.3) — < 200 entities, no library\n- **Visualizer**: Three.js (3.4) — model viewer only\n- **Multiplayer**: WebSocket (3.9) + sticky session LB\n\n## Game dev rules\n\n- Always use **fixed timestep** (4.1) with `dt = min(realDt, 0.05)`\n- NPCs use **Behavior Trees** (4.4), not FSM, if > 3 actions\n- Pathfinding = **A* (4.3)** with Manhattan heuristic; **JPS (4.3)** for uniform-cost grids\n- For city builders: use **thinInstanceAdd** (3.1) — 10000 cubes = 1 draw call\n- Save/load always with **versioned localStorage** (1.4) — never raw JSON\n\n## Production patterns (from CodeHub)\n\n- stronghold-3d v1.4 = Babylon 3D city + villagers + quests\n- noodle-shop v1.1 = customer queue + patience + tips + weather\n- sims-lite v2.1 = NPC behavior trees + relationships\n- street-fighter-thai = Phaser state machine + hitbox\n- realm-of-heroes = MMORPG top-down\n\nCite sub-phase IDs in every recommendation." }, { "id": "codehub-backend", "name": "CodeHub Backend (FastAPI + DB)", "category": "Specialized", "tokens": "~1.2K tokens", "prompt": "You are an AI backend agent building APIs on CodeHub.\n\n## Stack defaults\n\n- **Framework**: FastAPI (9.2) with Pydantic models + auto docs at /docs\n- **DB dev**: SQLite (9.4) with WAL mode for concurrent reads\n- **DB prod**: PostgreSQL (9.5) with connection pool\n- **ORM**: SQLAlchemy (9.3) + Alembic migrations\n- **Cache**: Redis (9.6) for hot data + sessions\n- **Realtime**: WebSocket (9.7) + sticky session LB; SSE (9.8) for one-way streams\n- **Auth**: OAuth 2.0 with PKCE (9.9) for SPAs\n- **Rate limit**: SlowAPI (9.10) per-IP + per-user\n\n## Backend rules\n\n- **REST API design** (9.1): `/api/v1/...`, OpenAPI auto-generated, 4xx/5xx semantics\n- **Idempotent PUT/DELETE** (9.1)\n- **Pydantic** for request/response validation (9.2) — early error catch\n- **Migrations** (9.3) before deploy — never alter schema in code without migration\n- **Never store PII** in localStorage (1.4) — server-side only\n- **OAuth PKCE** (9.9) for SPA — no client_secret in browser\n\n## Real CodeHub references\n\n- codehub-api = FastAPI + SQLAlchemy + Alembic (production example)\n- medbook/dinebook = booking pattern with timezone handling\n- pos-grocery = POS with inventory + barcode scan\n\nCite sub-phase IDs." }, { "id": "codehub-ai", "name": "CodeHub AI Agent (OpenAI + RAG)", "category": "Specialized", "tokens": "~1.4K tokens", "prompt": "You are an AI agent building LLM-powered apps on CodeHub.\n\n## Stack defaults\n\n- **API**: OpenAI gpt-4o-mini (7.1) — 15x cheaper than gpt-4o, 95% as capable\n- **Streaming**: SSE (7.6) — type-as-you-generate for chat UIs\n- **Memory**: TF-IDF bilingual (7.5) for free Thai+EN search, OR embeddings (7.4) for semantic\n- **RAG**: top-k=3-5 cosine (7.8) + prompt context, NOT whole doc dumps\n- **Function calling**: OpenAI tools API (7.7) with JSON schema + validation\n- **Safety**: OpenAI moderation endpoint (7.10) — free < 1M tokens/month\n\n## AI rules\n\n- **Always stream** (7.6) — type-as-you-generate UX > wait 8s\n- **Cost**: gpt-4o-mini ($0.15/M in) for 95% of tasks; reserve gpt-4o for hard reasoning\n- **Temperature**: 0 for factual/RAG, 0.7 for creative\n- **System prompt**: be specific, give examples (few-shot > instructions alone)\n- **Embeddings**: normalize vectors, use cosine similarity, IVF index > 100k docs\n- **RAG**: top-k=3-5, cross-encoder re-rank if precision critical\n- **Safety**: moderation endpoint before user-visible content\n\n## CodeHub AI references\n\n- memo-ai = chat with memory (TF-IDF + RAG)\n- mavis-assistant = function calling + streaming\n- quick-note = RAG over markdown notes\n- ai-data-analyzer = LLM picks chart type from CSV\n\nCite sub-phase IDs." }, { "id": "codehub-deploy", "name": "CodeHub Deploy (ship.py + nginx + SSL)", "category": "Specialized", "tokens": "~900 tokens", "prompt": "You are an AI deploy agent on CodeHub.\n\n## Default deploy flow\n\n```bash\n# Edit locally\nDEPLOY_VPS_PASS=$YOUR_PASS python3 ship.py \\\n --name <slug> --file index.html --title \"<title>\" --version 1.0\n```\n\nship.py (8.1) does:\n1. curl-verify local file\n2. paramiko SSH to VPS (NEVER inline password, always env)\n3. Upload to /mnt/16tb/codehub/apps/<slug>/\n4. POST /api/cache/refresh to update SQL repo\n5. Reload nginx\n\n## Per-app setup\n\n- **Static SPA** (1 HTML file): ship.py directly\n- **Multi-page**: ship each + add nginx `location ^~ /<slug>/` to config\n- **Backend** (FastAPI): write systemd service file + ship + restart\n- **PWA**: add manifest.json + service-worker.js to root\n\n## Rules\n\n- **NEVER inline $DEPLOY_VPS_PASS** — use env var (8.1, 8.4 gotcha)\n- **HTTPS first** — Let's Encrypt (8.3) certbot --nginx before public launch\n- **Backup 3-2-1** (8.8) — rsync to /mnt/16tb/backup/ daily\n- **Cache headers** — set in nginx not app (8.2)\n- **Mobile 44px touch** (2.7), WCAG 4.5:1 contrast (2.1)\n\n## CodeHub infra references\n\n- ship.py + nginx config = production setup\n- codehub-api systemd service\n- 73 deployed apps via same pipeline\n\nCite sub-phase IDs." } ], "decision_matrix": [ { "id": "want-game-2d", "question": "I want to build a 2D game (platformer, RPG, shooter, tower defense)", "answer": "**Phaser 3** (3.2) for arcade/2D", "reasoning": "Phaser 3 has built-in Arcade + P2 + Matter physics, scene management, and is the de facto choice for 2D web games. Pattern used in street-fighter-thai, sky-ace, realm-of-heroes.", "sub_phase_ids": [ "3.2", "4.1", "4.3", "4.4", "4.6", "4.8", "4.9", "10.5" ], "path_id": "build-2d-platformer", "example_app": "street-fighter-thai (Fighting), sky-ace (Shooter), realm-of-heroes (MMORPG)", "bundle_size": "~50KB Phaser + 200 lines game logic", "deploy": "ship.py + 1 HTML file, no build", "time_estimate": "1 week" }, { "id": "want-game-3d", "question": "I want to build a 3D game (city builder, RPG, sim, FPS)", "answer": "**Babylon.js** (3.1) for 3D", "reasoning": "Babylon has PBR + Havok physics + GUI + WebXR in one bundle. thinInstance for 10000 objects. Used in stronghold-3d (city), sims-lite (life sim), fps-cops-vs-robbers (FPS), mars-colony (strategy).", "sub_phase_ids": [ "3.1", "1.5", "1.9", "4.1", "4.4", "4.8", "4.9", "10.2" ], "path_id": "build-3d-city", "example_app": "stronghold-3d (City), sims-lite (Life Sim), fps-cops-vs-robbers (FPS)", "bundle_size": "~1.5MB Babylon + game logic", "deploy": "ship.py + Babylon loaded from CDN", "time_estimate": "2-3 weeks" }, { "id": "want-simple-2d", "question": "I want a simple 2D game (under 200 entities, particles, animations)", "answer": "**Vanilla Canvas 2D** (3.3) + game loop (4.1)", "reasoning": "For < 200 entities, vanilla Canvas 2D is faster than Phaser. Zero dependencies. Used in noodle-shop (tycoon).", "sub_phase_ids": [ "1.6", "3.3", "4.1" ], "path_id": "build-tycoon", "example_app": "noodle-shop (Restaurant Tycoon)", "bundle_size": "Zero deps + 300-500 lines", "deploy": "ship.py + 1 HTML file", "time_estimate": "3-5 days" }, { "id": "want-mvp", "question": "I want to ship a working MVP today", "answer": "**HTML5 boilerplate** (1.1) + localStorage (1.4) + ship.py (8.1)", "reasoning": "No build step, no npm, no framework. Single file deploys in 1 command. Perfect for demo + internal tool + quick prototype.", "sub_phase_ids": [ "1.1", "2.1", "2.2", "1.4", "1.10", "8.1" ], "path_id": "build-mvp", "example_app": "demo-coin-flip, click-counter (CodeHub starter apps)", "bundle_size": "Single 50KB HTML", "deploy": "ship.py — 30 seconds", "time_estimate": "4-8 hours" }, { "id": "want-saas", "question": "I want to build a SaaS app (CRUD + auth + payments)", "answer": "**FastAPI** (9.2) + **SQLite/Postgres** (9.4/9.5) + **OAuth PKCE** (9.9)", "reasoning": "FastAPI gives you Pydantic validation + async + auto docs. SQLite for single-tenant / Postgres for multi-tenant. OAuth 2.0 PKCE for SPA. Pattern in medbook, dinebook, pos-grocery.", "sub_phase_ids": [ "1.7", "5.4", "5.5", "5.6", "5.7", "9.1", "9.2", "9.3", "9.4", "9.6", "9.9", "9.10" ], "path_id": "build-crud-saas", "example_app": "medbook (Booking), pos-grocery (POS), dinebook (Restaurant)", "bundle_size": "~5MB FastAPI + SQLAlchemy + dependencies", "deploy": "systemd service + nginx reverse proxy", "time_estimate": "2-4 weeks" }, { "id": "want-ai-chatbot", "question": "I want to build an AI chatbot or assistant", "answer": "**OpenAI gpt-4o-mini** (7.1) + **Streaming SSE** (7.6) + **RAG** (7.8)", "reasoning": "gpt-4o-mini is 15x cheaper than gpt-4o for 95% of use cases. Streaming reduces TTFB from 8s to 0.4s. RAG prevents hallucination with top-k=3-5 retrieval. Pattern in memo-ai, mavis-assistant.", "sub_phase_ids": [ "1.7", "7.1", "7.4", "7.5", "7.6", "7.7", "7.8", "7.9", "7.10", "9.8" ], "path_id": "build-ai-chatbot", "example_app": "memo-ai (Chat with memory), mavis-assistant (Function calling AI)", "bundle_size": "OpenAI API + ~100KB frontend", "deploy": "Static SPA + API key in env", "time_estimate": "1-2 weeks" }, { "id": "want-karaoke", "question": "I want to build a lyric video / karaoke studio", "answer": "**Web Audio** (1.5) + **Canvas animations** + **ffmpeg.wasm** (6.7)", "reasoning": "Web Audio API + FFT beat detection + Canvas 2D lyric overlay + ffmpeg.wasm for MP4 export. Pattern in karaoke-studio v1.1 (11 themes, beat detection, MP4 export).", "sub_phase_ids": [ "1.5", "1.9", "6.1", "6.6", "6.7", "6.10" ], "path_id": "build-karaoke", "example_app": "karaoke-studio (11 themes + beat + MP4 export)", "bundle_size": "~30MB ffmpeg.wasm + ~50KB app", "deploy": "ship.py + CDN ffmpeg", "time_estimate": "2-3 weeks" }, { "id": "want-image-tool", "question": "I want to build an image editor / filter app", "answer": "**Canvas 2D** (1.6) + **File API** (1.8) + **filters** (6.4)", "reasoning": "Canvas 2D for crop/filter + File API for upload/download + Vision API (7.3) for AI auto-tagging. Pattern in fitcheck, palette, cutout-studio.", "sub_phase_ids": [ "1.6", "1.8", "6.4", "7.3", "5.8" ], "path_id": "build-image-tool", "example_app": "fitcheck (3D model viewer), palette (Color extraction)", "bundle_size": "~50KB app + Canvas API", "deploy": "ship.py", "time_estimate": "1-2 weeks" }, { "id": "want-deploy-existing", "question": "I have a working app, need to deploy it to a custom domain", "answer": "**ship.py** (8.1) + **nginx** (8.2) + **Let's Encrypt** (8.3)", "reasoning": "ship.py is the entire deploy pipeline used by all 73 CodeHub apps. One command: edit → curl-verify → paramiko → API upload → cache refresh. Pattern deployed 73+ apps.", "sub_phase_ids": [ "8.1", "8.2", "8.3", "8.4" ], "path_id": "deploy-static-app", "example_app": "73 apps via ship.py (karaoke-studio, stronghold-3d, etc.)", "bundle_size": "ship.py (~150 lines)", "deploy": "ship.py + nginx config", "time_estimate": "30 minutes" } ], "code_patterns": [ { "id": "pattern-babylon-scene", "name": "Babylon.js Scene Bootstrap", "desc": "Full Babylon.js scene with camera, lighting, ground, player", "subs_used": [ "3.1" ], "lines": 35, "code": "<!DOCTYPE html>\n<html><head><meta charset=\"UTF-8\"><title>Babylon Scene\n\n\n\n\n" }, { "id": "pattern-rest-api", "name": "FastAPI + SQLite + Auth", "desc": "REST API with FastAPI, SQLAlchemy, JWT auth, CRUD", "subs_used": [ "9.2", "9.3", "9.4", "9.9" ], "lines": 45, "code": "# pip install fastapi uvicorn sqlalchemy pyjwt passlib python-multipart\nfrom fastapi import FastAPI, Depends, HTTPException\nfrom fastapi.security import HTTPBearer, HTTPAuthorizationCredentials\nfrom sqlalchemy import create_engine, Column, Integer, String, ForeignKey\nfrom sqlalchemy.orm import sessionmaker, declarative_base\nimport jwt, datetime\n\napp = FastAPI()\nengine = create_engine(\"sqlite:///app.db\")\nBase = declarative_base()\n\nclass User(Base):\n __tablename__ = \"users\"\n id = Column(Integer, primary_key=True)\n email = Column(String, unique=True)\n pwd_hash = Column(String)\n\nBase.metadata.create_all(engine)\nSECRET = \"change-me\"\n\ndef token_for(uid): return jwt.encode({\"uid\": uid, \"exp\": datetime.datetime.utcnow() + datetime.timedelta(days=7)}, SECRET, algorithm=\"HS256\")\ndef uid_from(token):\n try: return jwt.decode(token, SECRET, algorithms=[\"HS256\"])[\"uid\"]\n except: raise HTTPException(401)\n\n@app.post(\"/api/login\")\ndef login(email: str, pwd: str):\n db = sessionmaker(bind=engine)()\n u = db.query(User).filter_by(email=email).first()\n if not u: raise HTTPException(404)\n # check hash here\n return {\"token\": token_for(u.id)}\n\n@app.get(\"/api/me\")\ndef me(c: HTTPAuthorizationCredentials = Depends(HTTPBearer())):\n return {\"uid\": uid_from(c.credentials)}" }, { "id": "pattern-pwa", "name": "PWA Setup (manifest + service worker)", "desc": "Make any web app installable + offline-capable", "subs_used": [ "1.10" ], "lines": 30, "code": "// manifest.json\n{\n \"name\": \"My App\",\n \"short_name\": \"App\",\n \"start_url\": \"/\",\n \"display\": \"standalone\",\n \"background_color\": \"#0a0a14\",\n \"theme_color\": \"#ec4899\",\n \"icons\": [\n {\"src\": \"/icon-192.png\", \"sizes\": \"192x192\", \"type\": \"image/png\"},\n {\"src\": \"/icon-512.png\", \"sizes\": \"512x512\", \"type\": \"image/png\"}\n ]\n}\n\n// In index.html :\n\n\n\n// /sw.js (separate file at root)\nconst V = \"v1\";\nconst ASSETS = [\"/\", \"/index.html\", \"/style.css\", \"/app.js\", \"/icon-192.png\"];\nself.addEventListener(\"install\", e => e.waitUntil(\n caches.open(V).then(c => c.addAll(ASSETS))\n));\nself.addEventListener(\"fetch\", e => e.respondWith(\n caches.match(e.request).then(r => r || fetch(e.request))\n));\nself.addEventListener(\"activate\", e => e.waitUntil(\n caches.keys().then(keys => Promise.all(\n keys.filter(k => !k.endsWith(V)).map(k => caches.delete(k))\n ))\n));" }, { "id": "pattern-ai-streaming", "name": "OpenAI Streaming Chat", "desc": "Streaming OpenAI chat with abort control + error handling", "subs_used": [ "7.1", "7.6" ], "lines": 35, "code": "const chat = async (messages, onToken, signal) => {\n const r = await fetch(\"https://api.openai.com/v1/chat/completions\", {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${OPENAI_KEY}`,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n model: \"gpt-4o-mini\",\n messages,\n stream: true,\n max_tokens: 1000,\n }),\n signal,\n });\n if (!r.ok) throw new Error(`HTTP ${r.status}`);\n const reader = r.body.getReader();\n const dec = new TextDecoder();\n let buf = \"\";\n while (true) {\n const {done, value} = await reader.read();\n if (done) break;\n buf += dec.decode(value);\n const lines = buf.split(\"\\n\");\n buf = lines.pop();\n for (const line of lines) {\n if (line.startsWith(\"data: \") && line !== \"data: [DONE]\") {\n const json = JSON.parse(line.slice(6));\n const token = json.choices[0]?.delta?.content;\n if (token) onToken(token);\n }\n }\n }\n};\n\n// Usage:\nconst ctrl = new AbortController();\nchat([{role:\"user\", content:\"hi\"}], t => appendToUI(t), ctrl.signal);" }, { "id": "pattern-localstorage-save", "name": "Versioned localStorage with Migration", "desc": "Save/load with auto-migration across versions", "subs_used": [ "1.4" ], "lines": 35, "code": "const Store = (() => {\n const KEY = \"app_v3\";\n const MIGRATIONS = {\n 1: d => ({...d, achievements: d.achievements || []}),\n 2: d => ({...d, weather: d.weather || \"cloudy\"}),\n };\n let _timer = null;\n return {\n save(state) {\n clearTimeout(_timer);\n _timer = setTimeout(() => {\n try {\n localStorage.setItem(KEY, JSON.stringify({ver: 3, data: state, ts: Date.now()}));\n } catch(e) {\n if (e.name === \"QuotaExceededError\") console.warn(\"storage full\");\n }\n }, 300); // debounce 300ms\n },\n load() {\n for (let i = 3; i >= 1; i--) {\n try {\n const raw = localStorage.getItem(`app_v${i}`);\n if (!raw) continue;\n let obj = JSON.parse(raw);\n for (let v = obj.ver || 1; v <= 3; v++) if (MIGRATIONS[v]) obj.data = MIGRATIONS[v](obj.data);\n return obj.data;\n } catch { /* try older */ }\n }\n return null;\n },\n };\n})();" } ], "bootstrap": { "id": "bootstrap", "name": "One-Command Bootstrap", "desc": "Copy-paste this into any AI agent to give it full CodeHub knowledge", "tokens": "~2.5K context", "shell_command": "# Bash: fetch all context for an AI agent\necho \"=== Loading CodeHub Skills v3.2 context for AI ===\"\ncurl -s https://codehub.sj88ai.com/api/skill > /tmp/codehub_skills.json\necho \"Loaded $(( $(wc -c < /tmp/codehub_skills.json) / 1024 )) KB of sub-phases\"\ncurl -s https://codehub.sj88ai.com/api/skill | python3 -c \"\nimport json, sys\ndata = json.load(sys.stdin)\nfor p in data['phases']:\n print(f\\\"Phase {p['id']}: {p['name']} ({len(p['sub_phases'])} subs)\\\")\n\"", "python_command": "import json, urllib.request\n\n# Load all CodeHub skill context\ndata = json.loads(urllib.request.urlopen(\"https://codehub.sj88ai.com/api/skill\").read())\n\n# Index by id for fast lookup\nsub_by_id = {s[\"id\"]: s for p in data[\"phases\"] for s in p[\"sub_phases\"]}\n\ndef find_sub(q):\n \"\"\"Search sub-phases by tag, title, or desc.\"\"\"\n q = q.lower()\n matches = [s for s in sub_by_id.values() if q in s[\"title\"].lower() or q in s.get(\"description\",\"\").lower() or any(q in t for t in s.get(\"tags\",[]))]\n return matches[:5]\n\n# Example: \"what engine for 2D game?\"\nfor m in find_sub(\"2d game engine\"):\n print(f\"{m['id']} {m['title']}: {m['description'][:80]}\")", "mcp_server_python": "# pip install mcp fastapi uvicorn\nfrom mcp.server import Server, types\nimport json, urllib.request\n\napp = Server(\"codehub-skills\")\n\n@app.tool(\"search_subphases\")\nasync def search_subphases(query: str) -> list:\n \"\"\"Search CodeHub skill sub-phases by tag, title, or description.\"\"\"\n data = json.loads(urllib.request.urlopen(\"https://codehub.sj88ai.com/api/skill\").read())\n q = query.lower()\n results = []\n for p in data[\"phases\"]:\n for s in p[\"sub_phases\"]:\n score = 0\n if q in s[\"title\"].lower(): score += 3\n if q in s.get(\"description\",\"\").lower(): score += 2\n if any(q in t for t in s.get(\"tags\",[])): score += 1\n if score > 0:\n results.append({\"id\": s[\"id\"], \"title\": s[\"title\"], \"phase\": p[\"name\"], \"score\": score})\n return sorted(results, key=lambda r: -r[\"score\"])[:10]\n\n@app.tool(\"get_learning_path\")\nasync def get_learning_path(path_id: str) -> dict:\n \"\"\"Get a learning path by id (e.g. 'build-3d-city', 'build-ai-chatbot').\"\"\"\n # ... load from /skill_data_paths.py\n pass\n\n# Run with: mcp install /path/to/this/file.py\n# Then: mcp connect codehub-skills", "ai_tool_connect": { "claude_desktop": "Edit ~/Library/Application Support/Claude/claude_desktop_config.json:\n```json\n{\n \"mcpServers\": {\n \"codehub\": {\n \"command\": \"python3\",\n \"args\": [\"-m\", \"codehub_mcp_server\"]\n }\n }\n}\n```", "cursor_ide": "Cursor Settings → MCP → Add new server:\n- Name: codehub\n- Command: python3 -m codehub_mcp_server", "vscode_continue": "Add to config.json:\n```json\n{\n \"mcpServers\": [{\n \"name\": \"codehub\",\n \"command\": \"python3\",\n \"args\": [\"-m\", \"codehub_mcp_server\"]\n }]\n}\n```" } } }, "learning_paths": [ { "id": "build-3d-city", "title": "Build a 3D City / Builder Game", "desc": "Babylon.js grid + cell placement + level-up visuals + NPC villagers. Pattern used in stronghold-3d.", "steps": [ "1.1", "1.6", "3.1", "1.5", "4.1", "4.4", "4.9", "10.2" ], "example_app": "stronghold-3d", "difficulty": "Advanced" }, { "id": "build-2d-platformer", "title": "Build a 2D Platformer Game", "desc": "Phaser 3 sprites + physics + gravity + coyote time + variable jump. Pattern used in street-fighter-thai, sky-ace.", "steps": [ "1.1", "3.2", "4.1", "4.6", "10.5" ], "example_app": "sky-ace", "difficulty": "Intermediate" }, { "id": "build-tycoon", "title": "Build a Restaurant / Tycoon Game", "desc": "Customer queue + patience bar + tips + reputation + upgrade + balance. Pattern used in noodle-shop v1.1.", "steps": [ "1.1", "1.6", "3.3", "4.1", "4.9", "10.1", "10.7" ], "example_app": "noodle-shop", "difficulty": "Intermediate" }, { "id": "build-rpg", "title": "Build an RPG (NPCs + Quests + Dialogue)", "desc": "NPC behavior trees + dialogue tree + quest progress + inventory. Pattern in sims-lite, realm-of-heroes.", "steps": [ "3.1", "4.4", "4.6", "4.7", "4.8", "4.9", "10.3" ], "example_app": "sims-lite", "difficulty": "Advanced" }, { "id": "build-crud-saas", "title": "Build a CRUD SaaS App", "desc": "Form-builder + FastAPI + SQLite/Postgres + REST API + auth. Pattern in medbook, dinebook, pos-grocery.", "steps": [ "1.1", "1.4", "1.7", "1.8", "5.4", "5.5", "5.6", "5.7", "9.1", "9.2", "9.4", "9.6", "9.10" ], "example_app": "medbook", "difficulty": "Intermediate" }, { "id": "build-ai-chatbot", "title": "Build an AI Chatbot / Assistant", "desc": "OpenAI streaming + RAG + memory + function calling. Pattern in memo-ai, mavis-assistant.", "steps": [ "1.7", "7.1", "7.6", "7.9", "7.4", "7.5", "7.8", "7.10", "9.8" ], "example_app": "memo-ai", "difficulty": "Intermediate" }, { "id": "build-karaoke", "title": "Build a Karaoke / Lyric Video Studio", "desc": "Web Audio + FFT beat detection + canvas animation + MP4 export. Pattern in karaoke-studio v1.1.", "steps": [ "1.9", "6.1", "6.6", "6.7", "6.10" ], "example_app": "karaoke-studio", "difficulty": "Advanced" }, { "id": "build-image-tool", "title": "Build an Image Editor / Filter App", "desc": "Canvas-based crop + filter + sticker overlay. Pattern in fitcheck, palette, cutout-studio.", "steps": [ "1.6", "1.8", "6.4", "7.3", "5.8" ], "example_app": "fitcheck", "difficulty": "Intermediate" }, { "id": "deploy-static-app", "title": "Deploy a Static App to Custom Domain", "desc": "ship.py + nginx + Let's Encrypt + paramiko. The complete CI/CD pipeline.", "steps": [ "8.1", "8.2", "8.3", "8.4", "8.6", "8.8", "8.10" ], "example_app": "ship.py for ALL 73 CodeHub apps", "difficulty": "Intermediate" }, { "id": "build-react-saas", "title": "Build a Backend with FastAPI + Auth", "desc": "Production-grade REST API with JWT auth + rate limiting + Alembic migrations. Used by codehub-api.", "steps": [ "9.1", "9.2", "9.3", "9.4", "9.5", "9.6", "9.9" ], "example_app": "codehub-api (FastAPI at /mnt/16tb/codehub/api)", "difficulty": "Advanced" }, { "id": "build-mvp", "title": "Ship a Working MVP in 1 Day", "desc": "Minimal viable product using only HTML5 + localStorage + Fetch — no build, no npm, ship today.", "steps": [ "1.1", "2.1", "2.2", "1.4", "1.7", "1.10", "8.1" ], "example_app": "demo-coin-flip, click-counter", "difficulty": "Beginner" }, { "id": "build-tower-defense", "title": "Build a Tower Defense", "desc": "Grid + A* pathfinding + tower targeting + waves. Standard TD loop.", "steps": [ "3.2", "4.1", "4.3", "10.4" ], "example_app": "(not yet on CodeHub — recipe only)", "difficulty": "Intermediate" } ], "glossary": [ { "term": "Babylon.js", "def": "Microsoft-backed 3D engine for browsers (PBR, GUI, physics, WebXR). v8 = current. 1.5MB+ minified.", "see": "3.1" }, { "term": "Phaser 3", "def": "Comprehensive 2D engine with Arcade/P2/Matter physics. TypeScript-supported. ~800KB.", "see": "3.2" }, { "term": "WebSocket", "def": "Full-duplex TCP over HTTP for realtime push. Requires sticky session load balancer for scale.", "see": "3.9, 9.7" }, { "term": "Server-Sent Events (SSE)", "def": "HTTP-native server→client streaming. Newline-delimited JSON. Auto-reconnect. One-way.", "see": "9.8" }, { "term": "Promise.race / AbortController", "def": "Cancel pending fetch via AbortController when user navigates away — prevents zombie requests.", "see": "1.7" }, { "term": "WASM", "def": "WebAssembly — near-native speed in browser. Babylon Havok physics, ffmpeg.wasm, sql.js use this.", "see": "3.1, 6.7" }, { "term": "FFmpeg.wasm", "def": "FFmpeg compiled to WASM (~30MB). Used for in-browser MP4 transcoding without server.", "see": "6.7, 8.10" }, { "term": "ThinInstance (Babylon)", "def": "Draw 10000 identical meshes in 1 draw call via thinInstanceAdd — vs 10000 separate draw calls. Critical for city builders.", "see": "3.1" }, { "term": "ArcRotateCamera (Babylon)", "def": "Default Babylon orbit camera. alpha (azimuth) + beta (polar) + radius. alpha/beta in radians, NOT degrees (Math.PI = 180°).", "see": "3.1" }, { "term": "Behavior Tree", "def": "Hierarchical AI: Selector (OR), Sequence (AND), Decorator. More expressive than FSM for 3+ actions.", "see": "4.4" }, { "term": "FSM (Finite State Machine)", "def": "State ID → allowed transitions + pre-conditions. Simpler than BT but breaks with 3+ parallel states.", "see": "3.10" }, { "term": "ECS (Entity-Component-System)", "def": "Composition over inheritance. Entity = ID, Component = data, System = logic. Cache-friendly.", "see": "4.2" }, { "term": "A* (A-star)", "def": "Optimal shortest-path on grids. Uses heuristic (Manhattan/Euclidean). Open set + closed set.", "see": "4.3" }, { "term": "JPS (Jump Point Search)", "def": "A* optimization. 2-10x faster on uniform-cost grids by skipping redundant neighbor expansion.", "see": "4.3" }, { "term": "PWA (Progressive Web App)", "def": "App installable to home screen via manifest.json + service-worker.js. Offline-first.", "see": "1.10" }, { "term": "CORS preflight", "def": "OPTIONS request browser fires before XHR with custom headers. Adds latency. Cache with Access-Control-Max-Age.", "see": "1.7" }, { "term": "STUN/TURN", "def": "WebRTC helpers — STUN for NAT traversal, TURN for relay when symmetric NAT. Public: stun:stun.l.google.com:19302.", "see": "3.9" }, { "term": "JWT (JSON Web Token)", "def": "Stateless auth token (header.payload.signature). HS256 (shared secret) or RS256 (public key). OAuth 2.0 uses Bearer JWT.", "see": "9.9" }, { "term": "PKCE", "def": "Proof Key for Code Exchange — OAuth flow for SPAs without client_secret. code_verifier → code_challenge (SHA256).", "see": "9.9" }, { "term": "ID token vs Access token", "def": "ID token = who you are (OIDC, JWT). Access token = what you can do (may not be JWT). Different lifetimes.", "see": "9.9" }, { "term": "HSL (Hue Saturation Lightness)", "def": "Color format for easy theming. hsl(330 81% 60%) → shift hue to get theme variants. Better than hex for dark/light modes.", "see": "1.2, 2.1" }, { "term": "WCAG contrast ratio", "def": "Accessibility — normal text needs 4.5:1, large text 3:1. Test via Chrome DevTools accessibility panel.", "see": "2.1" }, { "term": "Touch target 44px", "def": "Apple HIG + Material guideline — buttons should be at least 44x44px for finger-friendly mobile UX.", "see": "2.7" }, { "term": "prefers-reduced-motion", "def": "CSS media query for users who disabled animations — respect with @media to auto-disable transforms.", "see": "2.5" }, { "term": "subtle-crypto", "def": "Web Crypto API for client-side encryption, HMAC, ECDSA. Web Crypto is more reliable than JS crypto libs.", "see": "1.4, 9.9" }, { "term": "IndexedDB", "def": "Browser transactional DB. Async, MB-GB scale, indexes. Use over localStorage past 5MB.", "see": "1.4, 9.4" }, { "term": "Stripe webhooks", "def": "Stripe POSTs to your backend on payment events. Verify via Stripe-Signature header + webhook secret.", "see": "10.9" }, { "term": "BabylonGUI vs dat.gui", "def": "Babylon ships @babylonjs/gui built-in. dat.gui requires Three. UI overlays for debug controls.", "see": "3.1, 3.4" }, { "term": "K6 / Artillery", "def": "HTTP load testing tools. K6 = Go (faster). Artillery = Node (friendlier). Use before launch.", "see": "8.7, 9.10" }, { "term": "FTS5 (Full-Text Search)", "def": "SQLite built-in full-text index. Substring + MATCH queries, BM25 ranking. See codehub-api /api/search.", "see": "9.4" }, { "term": "Ship.py pipeline", "def": "CodeHub’s 5-step deploy: edit → curl-verify → paramiko → API upload → /api/cache/refresh. Single command.", "see": "8.1" }, { "term": "Multivariate Gaussian (vision)", "def": "Cutout Studio bg-remover uses ONNX model trained on multivariate Gaussian likelihood. Not Stable Diffusion.", "see": "7.3" }, { "term": "FFT beat detection", "def": "Karaoke Studio computes FFT_SIZE=1024 windows, RMS peaks > max*0.55 AND > local_avg*1.3, skip < 0.25s apart.", "see": "6.7" }, { "term": "HSL → hex conversion", "def": "hsl-to-hex: hsl in degrees, hex in 6-char RGB. CSS Color Module 4 (2023) supports color-mix() for derived colors.", "see": "2.1" }, { "term": "OpenAI moderation free < 1M tokens/month", "def": "OpenAI moderation endpoint (om-moderation-latest) is free up to 1M tokens/month — use for safety filter before content reaches user.", "see": "7.10" }, { "term": "RequestAnimationFrame (rAF)", "def": "Browser API for ~60fps rendering. Pause when tab inactive. Not setInterval!", "see": "1.6, 3.3, 4.1" }, { "term": "Promise.all vs Promise.allSettled", "def": "Promise.all rejects on first error. Promise.allSettled waits for all regardless. Use allSettled for graceful degradation.", "see": "1.7, 7.4" } ], "phases": [ { "id": 1, "name": "Foundations", "icon": "📦", "tagline": "Stack backbone — ต้องมีก่อนเริ่่มทุกโปรเชค", "sub_phases": [ { "id": "1.1", "title": "HTML5 Boilerplate", "icon": "🌐", "description": "Single-file HTML (CSS+JS inline). No build step, no npm, CDN-only deps. Fastest path to a working app.", "when_to_use": "ท최ดด 1000 line; prototype; demo; internal tool; offline-able; static hosting", "when_not_to_use": "App > 50k lines; need TypeScript; need SSR/SEO; > 5 devs; npm ecosystem required", "examples": "karaoke-studio, noodle-shop, stronghold-3d, fitcheck, demo-coin-flip", "snippet": "App
", "snippet_full": "// Full SPA shell with module loading + global state + viewport meta\nconst App = (() => {\n const state = { user: null, theme: 'dark' };\n const listeners = new Set();\n const set = (k, v) => { state[k] = v; listeners.forEach(fn => fn(state)); };\n return {\n state,\n on: (fn) => listeners.add(fn),\n init: () => {\n document.documentElement.dataset.theme = state.theme;\n document.getElementById('app').innerHTML = '

Hello

';\n }\n };\n})();\nApp.on(s => console.log('state:', s));\nApp.init();", "difficulty": "Beginner", "time_to_learn": "5 min", "docs_url": "https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML", "pros": [ "Loads in 80-200ms with no dependency graph; nginx serves index.html in one TCP roundtrip", "Works file:// → no install needed for offline demos / training / fieldwork", "CDN-only deps = zero supply-chain npm risk (no postinstall scripts to audit)", "Debug = what user sees; Chrome DevTools shows identical HTML/CSS/JS, no source-map confusion", "Works on 10-year-old browsers that dropped React 16+ (e.g. Smart TV firmware)" ], "cons": [ "DOM lookups O(n²) past 5k elements — use canvas or virtualize for tables/lists", "No bundled minification = 2-5x larger payload vs Webpack/Vite; ~150KB vs ~30KB", "Global scope pollution; each ", "difficulty": "Beginner", "time_to_learn": "30 min", "docs_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties", "pros": [ "Brand color change = 1 line of CSS (no JS, no rebuild, no React Context re-render)", "Cascade-aware: child components can override --accent without specificity war", "live-edit in Chrome DevTools updates entire UI immediately; no build step", "Theme persistence via single localStorage key + one documentElement.dataset write" ], "cons": [ "IE 11 doesn't support (use PostCSS plugin if IE is required; rare in 2026)", "Specificity tied to element where var() is used — can't override in deep selectors without :where()", "Huge variable lists hurt readability — use namespaced vars like --color-text-primary, not --text1", "No compile-time checks — typo in var(--accnet) silently fails to var() fallback" ], "gotchas": [ "var() needs a fallback for missing tokens: var(--accent, #ec4899) — prevents flash of unstyled", "HSL > hex for theming — hue/lightness adjustable per-theme: hsl(240 10% 5%) → hsl(0 0% 98%)", "CSS @property registers vars with type so calc() and animation work (CSS Properties API)", "Cascade inheritance only for inherited properties — background-color needs explicit inheritance", "Theme flash on page load — inline a \\n\\n/* === CSS === */\\n:root { color-scheme: light dark; --bg: hsl(0 0% 98%); --text: hsl(240 10% 10%); }\\n@media (prefers-color-scheme: dark) {\\n :root { --bg: hsl(240 10% 5%); --text: hsl(0 0% 96%); }\\n}\\n[data-theme=\\\"dark\\\"] { --bg: hsl(240 10% 5%); --text: hsl(0 0% 96%); }\\n[data-theme=\\\"light\\\"] { --bg: hsl(0 0% 98%); --text: hsl(240 10% 10%); }\\n\\n/* === Toggle handler === */\\nconst setTheme = t => {\\n document.documentElement.dataset.theme = t;\\n localStorage.setItem('theme', t);\\n window.dispatchEvent(new CustomEvent('themechange', { detail: t }));\\n};\\n// listen for OS theme change\\nmatchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {\\n if (!localStorage.getItem('theme')) setTheme(e.matches ? 'dark' : 'light');\\n});", "difficulty": "Intermediate", "time_to_learn": "1 hour", "docs_url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme", "pros": [ "OLED phones save 30–60% battery on true-black UI — measurable drain reduction;", "Reduces eye strain in low-light reading — users stay in app 25% longer (medium-published 2019 study);", "`prefers-color-scheme` respects OS-level accessibility settings — honors user choice automatically;", "Manual override + localStorage = 3 layers (system, saved, explicit) — UI always shows what user picked;", "Implementation is mostly CSS — `@media (prefers-color-scheme: dark) { :root { ... } }` works in all modern browsers;", "Dark mode often reveals bad contrast — building it forces an a11y audit you should have done anyway." ], "cons": [ "Every color must be defined twice (light + dark) — 2× design work, 2× QA surface, 2× screenshot tests;", "Chart libraries (Chart.js, D3) hardcode colors — read CSS vars at chart creation, but redraw on theme change is non-trivial;", "Images baked in light mode look wrong in dark — need `prefers-color-scheme` swap, filter inversion, or two assets;", "Form controls have OS-specific styles — `color-scheme: dark` is needed to make selects/inputs render dark on iOS;", "Pure #000 / pure #fff fail the 'looks right' test — true design requires off-black (#0a0a14) and off-white (#f5f5f7)." ], "gotchas": [ "`color-scheme: dark light` on `:root` makes form controls, scrollbars, and `` pick up dark — without it, iOS Safari shows white inputs on dark bg;", "Pure `#000` looks like a hole — use `hsl(240 10% 5%)` or `#0a0a14`; pure `#fff` is harsh on eyes — `#f5f5f7` is friendlier;", "Shadows are invisible on dark — switch to borders or colored glow (`box-shadow: 0 0 0 1px rgba(255,255,255,.1)`) for elevation in dark mode;", "Images: `` with `` swaps assets; CSS `filter: invert(1) hue-rotate(180deg)` is hackier but 0 extra HTTP;", "System preference can change at runtime (OS theme switch) — listen with `matchMedia('(prefers-color-scheme: dark)').addEventListener('change', ...)`;", "Persist explicit user choice in localStorage with key `theme`; resolve order: localStorage > system > fallback light;", "Flash of wrong theme (FOWT) on page load — inline a tiny `\\n\\n\\n// Note: ffmpeg.wasm = 30MB; cached by browser after first load; service worker (1.10) \\n// can cache it across sessions for instant subsequent loads.\\n//\\n// Fallback: if unpkg is down, self-host at /assets/vendor/ffmpeg-core.js (8.8 backup covers it)", "difficulty": "Beginner", "time_to_learn": "30 min", "docs_url": "https://www.jsdelivr.com/", "pros": [ "jsDelivr serves any GitHub release: `https://cdn.jsdelivr.net/gh/user/repo@version/file` = free, fast, global edge network (200+ POPs)", "unpkg auto-resolves npm versions: `https://unpkg.com/[email protected]` = no manual upload, no version management; perfect for prototype/demo", "Cache hit ratio 95%+ on popular libs = 50ms TTFB from edge vs 500ms from origin (ffmpeg.wasm users in karaoke-studio load in 1.5s not 8s)", "Saves VPS bandwidth: 1M ffmpeg.wasm downloads/mo = 30TB off your VPS bill (VPS at 1Gbps = saturates at 1000 concurrent downloads)", "HTTP/2 multiplexing, Brotli, HTTP/3 all on by default = no config needed; edge servers tuned for static asset delivery (kernel TCP buffer, TCP fast open)", "Versioned URLs: pin `@0.12.10` = reproducible builds, no breaking changes on dependency update; roll back = change 1 string in code" ], "cons": [ "Cache invalidation is ASYNC — `?purge=true` not supported on jsDelivr/unpkg; new version = new URL OR wait 24h for natural cache expiry", "jsDelivr has rate limits (unlimited per IP for small files, but heavy concurrent use gets throttled = 429); for >100 req/s, self-host or use Cloudflare", "unpkg had a 2-day outage in Dec 2021 — your app went down too (single point of failure; same risk for jsDelivr); fallback to local copy is good practice", "No custom headers (CORS, CSP) on jsDelivr/unpkg — relies on their default (open CORS = good for browser use, but no CSP nonce = can be blocked by strict CSP)", "Files in `/dist/` of npm packages may differ from main field — ESM/CJS resolution can be wrong; check browser console for 404s on sub-imports (e.g. `@ffmpeg/util`)", "Privacy: CDN sees all client IPs (their logs = your data leak vector for EU users under GDPR; Cloudflare has EU-only POPs, jsDelivr/unpkg = mixed)" ], "gotchas": [ "Importmap + unpkg: `` for clean ESM; lets `import React from 'react'` work in browser without bundler", "Cache busting: `?v=1.2.3` in URL = forced refresh on deploy; CDN purges on URL change anyway, but old browsers (Safari) cache 7d = version param wins", "Subresource Integrity: `