dsh-handwritten-notes

A DeepSeek Harness plugin that ships two bundled agent skills and registers them with the host skill registry (ctx.skills), so they work through DSH's native /skill-name gesture, the built-in / completion, and the skill-picker plugin — no client UI required.

| Skill (gesture) | What it does | Runtime | |---|---|---| | /hand-drawn-diagrams | Excalidraw-style hand-drawn charts, diagrams, flows, explainers, wireframes, page mockups — a faithful port of the hand-drawn-diagrams skill, including its Python render/validate scripts. | Python 3.11+ + uv (Playwright fallback, optional Chrome DevTools MCP) | | /handwritten-notes | Handwritten-style study notes / revision pages / cheat sheets as a single self-contained HTML file (handwriting webfonts, ruled paper, hand-drawn inline-SVG charts). | None — pure HTML output |

Skill vs plugin: why a plugin

DSH already supports plain filesystem skills (a SKILL.md in ~/.dsh/skills or <workspace>/.agents/skills, auto-loaded via /name). A bare skill is sufficient for a pure-instructions skill, but it is not the convenient choice here, because hand-drawn-diagrams is not instructions-only:

• it ships ~20 reference docs plus Python render/validate scripts,
• it needs a stable, versioned, installable distribution rather than a manual copy into the skills directory,
• its internal {skill-root} / relative-path references map cleanly onto DSH's skill-registry resourceBase (the directory announced in <skill_resources>).

A plugin provides all three via dsh plugin add and ctx.skills.registerProvider() (the same mechanism as the bundled @deepseek-ai/dsh-skill-badge provider). The trade-off is a small build step and a cordis.patch.yml — worth it for a code-carrying skill.

Install

# Method 1: local link (recommended while developing)
dsh plugin --profile <profile> add link:$PWD

# Method 2: install from Git
dsh plugin --profile <profile> add "github:<owner>/dsh-handwritten-notes"

# Method 3: after publishing to npm
dsh plugin --profile <profile> add dsh-handwritten-notes

Restart dsh web (or refresh the page) to load the new bundle. Then type /hand-drawn-diagrams or /handwritten-notes in the composer, or pick them from the ⚡ skill picker.

Usage

/hand-drawn-diagrams draw an architecture diagram: client -> API gateway -> auth -> database
/handwritten-notes make study notes on TCP's three-way handshake with a hand-drawn diagram

/hand-drawn-diagrams follows its ported 3-step workflow (route → draw → validate & deliver) and writes .excalidraw files to /tmp/; it needs uv (and Playwright only for PNG/animated-SVG export — Chrome DevTools MCP is the preferred, install-free path).

/handwritten-notes writes one self-contained HTML file into your workspace and, on request, can screenshot it to PNG.

How it works

src/index.js        registerProvider() -> two bundled SkillCandidates
assets/…            skill bodies (SKILL.md) + references/steps/scripts
cordis.patch.yml    inserts the plugin row into the profile roster
package.json        dsh.bundle.patch -> cordis.patch.yml; main -> lib/index.js

The provider mirrors dsh-skill-badge: a function plugin exporting name, inject (['skills']), and apply. Each skill's resourceBase points at its assets/ directory, so the model resolves the skill's relative paths (./workflow.md, references/…, scripts/…) against that base. Skill bodies are read from assets/*/SKILL.md at load time.

Structure

dsh-handwritten-notes/
├── package.json
├── cordis.patch.yml
├── build.mjs                     # esbuild: src/index.js -> lib/index.js
├── src/index.js                  # bundled skill provider (host half)
├── assets/
│   ├── hand-drawn-diagrams/      # ported skill: SKILL.md, workflow.md,
│   │   │                         #   steps/, references/, scripts/
│   └── handwritten-notes/        # new skill: SKILL.md, references/template.html,
│                                 #   references/charts.md
├── lib/                          # build output (generated)
└── README.md

Development

npm install        # provides esbuild
npm run build      # src/index.js -> lib/index.js
node --check lib/index.js
node tests/smoke.mjs   # optional: prove the provider registers 2 skills

The plugin is host-only ESM. There is no client bundle, so no __ModuleLoader__ handshake is needed; lib/index.js imports only Node built-ins and the host-provided peer @deepseek-ai/dsh-skill.

License

MIT. The ported hand-drawn-diagrams skill content retains the upstream project's MIT license (see assets/hand-drawn-diagrams/).