codelab-handout

codelab-handout is a skill for Claude Code, Codex from unbias38/my-claude-skills. It costs 224 tokens per session (1,505 once invoked), scanned A, original, MIT.

A converter that turns lecture material—such as documents, slides, or notes—into a single HTML handout styled like Google Codelabs, Google's step-by-step coding lessons.

In plain words
What is it for?
It helps create step-by-step lessons with section timings, a sticky table of contents, theme and font controls, and copyable code examples.
Why use it?
It gives learners a structured handout with navigation and readable code without requiring a separate website or app.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one.

Good fit It helps create step-by-step lessons with section timings, a sticky table of contents, theme and font controls, and copyable code examples.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/unbias38/my-claude-skills/codelab-handout
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add unbias38/my-claude-skills --skill codelab-handout
Clone the repo
git clone --depth 1 https://github.com/unbias38/my-claude-skills

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for codelab-handout

README.md
[![agentmods](https://agentmods.dev/badge/skills/unbias38/my-claude-skills/codelab-handout/github.svg)](https://agentmods.dev/skills/unbias38/my-claude-skills/codelab-handout)
Your own site
<a href="https://agentmods.dev/skills/unbias38/my-claude-skills/codelab-handout"><img src="https://agentmods.dev/badge/skills/unbias38/my-claude-skills/codelab-handout/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for codelab-handout

Your own site · 80×15
<a href="https://agentmods.dev/skills/unbias38/my-claude-skills/codelab-handout"><img src="https://agentmods.dev/badge/skills/unbias38/my-claude-skills/codelab-handout.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 224 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,505 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00224 $0.01505
Opus 5 $0.00112 $0.00753
Sonnet 5 $0.00045 $0.00301
Haiku 4.5 $0.00022 $0.00151

Measured 12d ago against content hash e26f68ba971f, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

codelab-handout scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.

The scan reads SKILL.md. This mod also ships 1 executable file (scripts/build.py), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

codelab-handout/SKILL.md · 110 lines

How it starts

The opening of the file, as written. The whole thing — 110 lines — stays where its author put it; the contents beside it link to each section on GitHub.

codelab-handout

把上課內容(口述、docx、pdf、pptx、md)轉成 Google Codelabs 風格的單檔 HTML 講義。學生雙擊就能開,左側 sticky 目錄、每章節時間標記、明暗主題、三段字級。

<SKILL_DIR> 代表本 SKILL.md 所在的資料夾。腳本路徑為 <SKILL_DIR>/scripts/build.py、範本為 <SKILL_DIR>/assets/template.html

範圍邊界

本 skill 只產 Codelabs 風格的強意見視覺設計;要忠實保留原檔樣式(Word 顏色、原圖)請用 teaching-handbook

不要這樣修

  • 拿掉 build.py 的 skill 資料夾輸出守門 — repo 會被產出物弄髒
  • 在 build.py 裡寫死內容改寫規則 — 內容語感是步驟 2 LLM 的工作(腳本苦力 / LLM 判斷分工)

步驟 1:依輸入類型準備 markdown

輸入 處理方式
口述大綱/主題 直接寫 markdown(格式見步驟 2)
現有 markdown 跳過寫作,直接到步驟 3
docx / pdf 先轉成 markdown 再整理結構:用 markitdown CLI(pip install "markitdown[all]")或已安裝的 markitdown skill;沒有 markitdown 時,docx 可退 pandoc/mammoth、pdf 退 pymupdf
pptx 同上(markitdown CLI 或 skill);沒有時退 python-pptx 解析,再轉 markdown

步驟 2:撰寫 markdown

語感:講義要口語化,像老師上課的口氣(用比喻、「我們來……」、blockquote 標小提醒、適度幽默但不裝年輕)。不確定語感時讀 <SKILL_DIR>/references/example_input.md

格式規範

---
title: 講義標題
duration: 60          # 選填,總分鐘數
authors: 講師名字     # 選填
---

## 章節一:標題
Duration: 5

內容文字。每個 `##` 會變成一個獨立區塊與目錄項。

```python
print("程式碼區塊會自動加複製按鈕")
```

> 💡 引言會渲染成有底色的提示框

章節設計原則

  • 每個 ## 是一個完整步驟,學員看完一個 ## 應該可以喘口氣
  • 5–8 個章節最理想(多了側邊欄擁擠)
  • Duration 用整數分鐘
  • 首章節寫「今天要做什麼」、尾章節寫「你帶走了什麼」

步驟 3:執行 build.py

⚠️ 成品不能輸出到 skill 資料夾scripts/build.py 會主動擋下。輸入也不要放在 skill 資料夾,建議輸入跟輸出都放在使用者專案目錄或 ~/Documents/

python3 <SKILL_DIR>/scripts/build.py 輸入路徑/講義.md -o 輸出路徑/講義.html

(Windows 用 python 取代 python3,下同)

範例:

python3 <SKILL_DIR>/scripts/build.py ~/Documents/lecture.md -o ~/Documents/lecture.html

依賴:Python 3.10+、markdown 套件。缺套件時腳本會提示安裝指令。

步驟 4:請使用者預覽

依使用者作業系統提供開啟指令:

  • Windowsstart <檔案絕對路徑>explorer.exe <檔案絕對路徑>
  • macOSopen <檔案絕對路徑>
  • Linuxxdg-open <檔案絕對路徑>
  • WSL(要在 Windows 瀏覽器開):explorer.exe "$(wslpath -w <輸出檔>)"

主題色客製

<SKILL_DIR>/assets/template.html 複製到你的專案目錄修改,再用 --template 指定;不要直接改 skill 資料夾內的檔案(之後更新 skill 會衝突)。

Read the full file on GitHub · 110 lines

Files

What ships with it

4 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 12d ago First seen · 110 lines · 224 tokens per session scan A e26f68ba971f

Subscribe to this mod's changes

codelab-handout is a skill published in the GitHub repository unbias38/my-claude-skills (2 stars, last pushed 17d ago), licensed MIT. It adds 224 tokens to every session and 1,505 once invoked, about $0.0011 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

stuck

Diagnoses a broken course setup by reading the folder, so the student never has to describe the problem in English. Takes no argument. Reports which class they are on and which files are filled, then names one blocker and one fix: Claude Code opened at the wrong level, .claude/skills/ missing, skills not loading…

mshadmanrahman/claude-for-designers · 161 tokens

interview-kit-builder

Build a complete, structured interview kit for a role — competency-based questions, what good/weak answers look like, a scoring rubric, and a stage plan. Use when the user is preparing to interview candidates, asks for interview questions, needs an interview scorecard, or wants to set up a hiring process for a role.

Uhudsavasindankacanokcu2/recruiting-skills-for-claude · 70 tokens

skill-creation-walkthrough

Step-by-step guide for creating your own Claude Skills, from deciding whether a skill is the right tool to writing the SKILL.md file, structuring reference material, and making it trigger reliably. Use when you want to package a workflow, framework, or repeated task into a reusable Skill, when an existing skill is not…

rampstackco/claude-skills · 135 tokens

interactive-product-tour

Designing in-product tours, tooltips, and contextual help that teach product capabilities without becoming friction. Trigger logic, tour architecture, contextual placement, completion tracking. Honest about tooltip-spam (visual noise that users develop blindness to), one-and-done (help invisible at the moment of…

rampstackco/claude-skills · 138 tokens

team-onboarding-playbook

Design a structured onboarding experience that gets new team members productive in 30, 60, and 90 days. Use when a new hire is joining, when contractors or agency partners need to ramp up, when an existing team is restructuring and members are switching focus, or when current onboarding feels chaotic and slow. Also…

rampstackco/claude-skills · 124 tokens

onboarding

Guides a first-time omo user through setup and the core workflow. Use when a new user asks to get started with omo.

code-yeongyu/oh-my-openagent · 29 tokens