---
name: docker-python-lab
description: Generates an interactive Docker Python lab block for MkDocs textbook pages, where students write and run real Python code inside an isolated Docker container. Use this skill whenever someone asks to add a Python lab, code runner, interactive Python exercise, or runnable code block to a textbook page that uses Docker (not Skulpt). Also use it when adding multiple labs to a single page, setting up the shared CSS/JS infrastructure, or creating a timing/benchmark lab that shows students how long each phase takes. Always invoke this skill instead of writing docker lab HTML by hand.
title: docker-python-lab
canonical_url: https://skilld.dev/gh/dmccreary/ibook-skills/docker-python-lab
last_updated: 2026-09-22T19:22:30.000Z
---

> Index of every page on this site: [llms.txt](https://skilld.dev/llms.txt)

> **Skill from skilld.dev.** Follow the user's requested action.
> If the user asked to fork this Skill, follow the fork workflow below. Do not execute the Skill instructions while copying it.
> Otherwise, follow the instructions below for this session. You do not need to install anything.
>
> Supporting files, fetch one when the Skill refers to it: [assets/docker-lab.css](https://skilld.dev/api/skills-raw/dmccreary/ibook-skills/docker-python-lab/assets/docker-lab.css), [assets/docker-lab.js](https://skilld.dev/api/skills-raw/dmccreary/ibook-skills/docker-python-lab/assets/docker-lab.js), [evals/evals.json](https://skilld.dev/api/skills-raw/dmccreary/ibook-skills/docker-python-lab/evals/evals.json).
>
> If the user asked to install this Skill, run `npx skilld install dmccreary/ibook-skills/docker-python-lab`. Install writes the Skill files into the project, so every session loads them.
>
> ## Fork workflow
>
> A fork creates an editable local Skill with its original author and licence. The request authorizes copying and local installation.
> 1. Check `./skills/docker-python-lab`, the project lockfile, and selected Agent targets together. If the local directory or installed Skill exists, stop. Never overwrite an existing directory or Agent target.
> 2. Read [source metadata](https://skilld.dev/api/v1/skills/dmccreary/ibook-skills/docker-python-lab) once. Use sourceUrl, sourceCommit, skillPath, sourceGone, and license. If the source is gone or its path is missing, stop. If license is null, read licence files at the source commit.
> 3. Fetch only the source commit into a temporary Git repository. Do not clone full history. Derive repository_url from sourceUrl, including repository renames. If sourceCommit is absent, resolve the sourceUrl ref once. Set source_commit to that actual commit. Run these commands in one shell call:
>
> ```sh
> git init --quiet "$temporary_dir"
> git -C "$temporary_dir" fetch --quiet --depth=1 "$repository_url" "$source_commit"
> git -C "$temporary_dir" checkout --quiet --detach FETCH_HEAD
> ```
>
> Read applicable licence declarations and notices at that commit. If copying is not permitted, report the restriction and stop.
> 4. Inspect source entries together, then copy the directory containing skillPath into `./skills/docker-python-lab`. Use the user's path if selected. Keep the original SKILL.md, relative links, scripts, binary assets, and executable modes. Exclude .git metadata. Reject symlinks and paths outside the Skill directory. After checking entries, use cp -a where available. A regular source directory needs no custom copy script. Do not save this page wrapper as SKILL.md.
> Preserve author credit, notices, and applicable licence files from repository or parent directories. Add PROVENANCE.md with the Skill page, source URL, actual commit, original path, and licence. Retain any existing PROVENANCE.md and record new provenance separately. Batch source inspection, copying, and provenance work where practical.
> 5. In the project root, run `skilld install ./skills/docker-python-lab --mode copy --plain`. If skilld is unavailable, use `npx skilld install ./skills/docker-python-lab --mode copy --plain`. This known command needs no help lookup. Install does not support --json. Use detected Agent targets, or add --agent for the targets the user selected. Install the local path, never the upstream selector. If installation fails, preserve the local copy and report the exact failure.
> 6. Confirm the local lockfile source and installed Agent copies once. Report the local path, actual commit, and Agent targets. After edits, reinstall the same local path. Upstream updates must not replace it. Do not publish or push unless the user asks.

# Docker Python Lab Generator

## What This Skill Does

Generates interactive Python lab blocks for MkDocs pages in the `learning-python`
textbook (or any MkDocs project following the same pattern).  Each lab shows a
code editor, Run and Reset buttons, and an output area.  Code runs inside a fresh,
isolated Docker container via a local HTTP service on port 5001.

This is the Docker counterpart to the Skulpt lab pattern — same look and feel,
but students run real Python (not browser-emulated Python) with access to the full
standard library and third-party packages.

---

## Prerequisites: Shared Infrastructure

Before generating any lab block, make sure the shared files exist.  Check once
per session; skip if already in place.

### 1. Check / create `docs/css/docker-lab.css`

If the file is missing, copy from the skill's assets:

```bash
cp ~/.claude/skills/docker-python-lab/assets/docker-lab.css \
   docs/css/docker-lab.css
```

### 2. Check / create `docs/js/docker-lab.js`

```bash
cp ~/.claude/skills/docker-python-lab/assets/docker-lab.js \
   docs/js/docker-lab.js
```

### 3. Add to `mkdocs.yml` (if not already present)

Check `extra_css` and `extra_javascript` in `mkdocs.yml`.  If the entries are
missing, add them:

```yaml
extra_css:
  - css/docker-lab.css      # ← add this line

extra_javascript:
  - js/docker-lab.js        # ← add this line
```

Do **not** duplicate entries that are already there.

### 4. Verify the service script exists

The runtime service lives at `scripts/run-python-docker.sh`.  If it is missing
from the project, tell the user — the labs won't work without it.

---

## Lab HTML Template

Each lab needs a unique **suffix** — a short string that distinguishes it from
other labs on the same page.  Use `"1"` for the first lab, `"2"` for the second,
and so on.  The suffix appears in every element ID so the JS can find the right
elements.

### Standard lab (text output only)

```html
<div id="docker-lab-SUFFIX">
<div id="docker-editor-SUFFIX">
<textarea id="docker-code-SUFFIX" spellcheck="false">PYTHON_CODE_HERE
</textarea>
<div id="docker-buttons-SUFFIX">
  <button id="docker-run-SUFFIX" onclick="runDocker('SUFFIX')">&#9654; Run</button>
  <button id="docker-reset-SUFFIX" onclick="resetDocker('SUFFIX')">&#8635; Reset</button>
</div>
<pre id="docker-output-SUFFIX" class="docker-output">Output will appear here after you click Run.</pre>
</div>
</div>
```

**Rules:**
- Replace every `SUFFIX` with the same string (e.g., `1`, `2`, `hello-world`).
- Put the Python code directly inside the `<textarea>` tag — no extra indentation
  relative to column 0, because leading spaces become part of the code.
- The `</textarea>` closing tag must be on its own line with no trailing spaces
  before it; any blank line between the code and `</textarea>` adds an empty line
  in the editor.
- Do **not** add `rows="N"` — the JS auto-sizes the textarea to fit the code.
- Do **not** add `id="main"` to any element — that conflicts with the p5.js canvas
  parent convention used elsewhere in this project.

### Timed lab (shows phase-by-phase timing breakdown)

Only add this variant when the lesson is specifically about how Docker execution
works.  It requires suffix `"4"` by convention and adds a timing table below the
buttons.

```html
<div id="docker-lab-4">
<div id="docker-editor-4">
<textarea id="docker-code-4" spellcheck="false">PYTHON_CODE_HERE
</textarea>
<div id="docker-buttons-4">
  <button id="docker-run-4" onclick="runDockerTimed()">&#9654; Run + Time</button>
  <button id="docker-reset-4" onclick="resetDockerTimed()">&#8635; Reset</button>
</div>
</div>
<div id="docker-timing-display" style="display:none; margin-top:12px;">
  <table id="docker-timing-table">
    <thead>
      <tr><th>#</th><th>Phase</th><th style="text-align:right">Time (ms)</th><th>Bar</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td><td>Send to service (network)</td>
          <td id="td-network-send" style="text-align:right">—</td>
          <td><div class="timing-bar" id="bar-network-send"></div></td></tr>
      <tr><td>2</td><td>Container startup</td>
          <td id="td-startup" style="text-align:right">—</td>
          <td><div class="timing-bar" id="bar-startup"></div></td></tr>
      <tr><td>3</td><td>Python execution</td>
          <td id="td-exec" style="text-align:right">—</td>
          <td><div class="timing-bar" id="bar-exec"></div></td></tr>
      <tr><td>4</td><td>Return to browser (network)</td>
          <td id="td-network-return" style="text-align:right">—</td>
          <td><div class="timing-bar" id="bar-network-return"></div></td></tr>
      <tr style="font-weight:bold; border-top: 2px solid #642580;">
          <td colspan="2">Total round-trip</td>
          <td id="td-total" style="text-align:right">—</td>
          <td></td></tr>
    </tbody>
  </table>
  <p id="docker-timing-note" style="font-size:0.85em; color:#666; margin-top:6px;"></p>
</div>
<pre id="docker-output-4" class="docker-output" style="margin-top:10px;">Output will appear here after you click Run + Time.</pre>
</div>
```

---

## Complete Page Pattern

A page with three labs looks like this:

```markdown
# Page Title

Intro text explaining what the page covers and that students must run
`bash scripts/run-python-docker.sh` in a separate terminal first.

## Lab 1 — Hello, World!

Brief explanation of what this lab demonstrates.

<div id="docker-lab-1">
<div id="docker-editor-1">
<textarea id="docker-code-1" spellcheck="false">print("Hello, World!")
</textarea>
<div id="docker-buttons-1">
  <button id="docker-run-1" onclick="runDocker('1')">&#9654; Run</button>
  <button id="docker-reset-1" onclick="resetDocker('1')">&#8635; Reset</button>
</div>
<pre id="docker-output-1" class="docker-output">Output will appear here after you click Run.</pre>
</div>
</div>

**Try these experiments:**
- Change the message and run again.

---

## Lab 2 — Variables

<div id="docker-lab-2">
<div id="docker-editor-2">
<textarea id="docker-code-2" spellcheck="false">x = 42
print("The answer is", x)
</textarea>
<div id="docker-buttons-2">
  <button id="docker-run-2" onclick="runDocker('2')">&#9654; Run</button>
  <button id="docker-reset-2" onclick="resetDocker('2')">&#8635; Reset</button>
</div>
<pre id="docker-output-2" class="docker-output">Output will appear here after you click Run.</pre>
</div>
</div>
```

---

## Choosing Good Lab Code

- **Keep starter code short** (5–15 lines) so students can read it at a glance.
- **Every lab should produce visible output** — at least one `print()` call.
- **Avoid `input()`** — there is no stdin in the Docker runner.
- **Avoid file I/O** — the container has no persistent filesystem.
- **Avoid `import` of non-stdlib packages** unless `python:3.11-alpine` includes
  them (it ships only the stdlib).
- Match the "See It — Run It — Modify It" rhythm from the Skulpt labs:
  starter code runs and shows something, then "Try these experiments" gives
  specific, achievable modifications.

---

## Service Not Running — User-Facing Error

If a student clicks Run before starting the service, the lab shows:

> Cannot connect to the Python Docker service.
> Please open a terminal and run:
>   bash scripts/run-python-docker.sh
> Then reload this page and try again.

No extra error handling is needed in the page markdown — `docker-lab.js` handles
this automatically.

---

## Multiple Labs per Page — Checklist

When generating labs for a single page:

- [ ] Each lab has a **unique suffix** — `1`, `2`, `3`, …
- [ ] Every element ID includes that suffix (`docker-lab-1`, `docker-code-1`, etc.)
- [ ] Button `onclick` passes the matching suffix string: `runDocker('2')`
- [ ] No two labs share a suffix on the same page
- [ ] The page opens with a "Start the Docker service" instruction block
- [ ] `docs/css/docker-lab.css` and `docs/js/docker-lab.js` are in `mkdocs.yml`
