anki
Review your AnkiWeb decks above the Claude Code prompt while Claude works. Syncs straight with AnkiWeb through Anki's own Rust core; no Anki desktop or AnkiConnect needed.
確かめやすいコードターミナル＋デスクトップバンドトーストBoxButtonText
何をするか
- プロンプトの上の帯・トーストを描く
- /anki を足す
- session.end・session.start・turn.complete・turn.startにフックする
- ターンをまたいで自分の状態を持つ
- プロセスを起こす
良いところ
- ネットワークに出ない
- TypeScript で書かれている
- エラーを扱う
- ファイルを書かない
作り始めるためのコード
2 種類あります。上のデザインから modscode が書いた雛形と、その Mod 自身のコードのうち描いている部分です。
雛形（register.tsx）
register.tsx
import type { Register } from 'claude-code'
// Drawn like anki by hbkse (band, toast), as modscode read it from the mod's code:
// https://modscode.com/gallery/hbkse-anki/
// Written by modscode from that reading, not copied from the mod: use it as you like.
// Each value below stands for one the mod works out at run time; put in your own.
export const register: Register = on => {
// the band above the prompt; what else goes there is drawn under it
on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
const { Box, Text, Button } = $.ui.resolve(e)
const title = '…'
const tally = '…'
const lead = '…'
const chunk = '…'
const chunk2 = '…'
const chunk3 = '…'
const chunk4 = '…'
const chunk5 = '…'
const chunk6 = '…'
const chunk7 = '…'
const chunk8 = '…'
const chunk9 = '…'
const lead2 = '…'
const chunk10 = '…'
const chunk11 = '…'
const chunk12 = '…'
const chunk13 = '…'
const chunk14 = '…'
const chunk15 = '…'
const chunk16 = '…'
const chunk17 = '…'
const chunk18 = '…'
const lead3 = '…'
const chunk19 = '…'
const chunk20 = '…'
const chunk21 = '…'
const chunk22 = '…'
const chunk23 = '…'
const chunk24 = '…'
const chunk25 = '…'
const chunk26 = '…'
const chunk27 = '…'
const lead4 = '…'
const chunk28 = '…'
const chunk29 = '…'
const chunk30 = '…'
const chunk31 = '…'
const chunk32 = '…'
const chunk33 = '…'
const chunk34 = '…'
const chunk35 = '…'
const chunk36 = '…'
const lead5 = '…'
const chunk37 = '…'
const chunk38 = '…'
const chunk39 = '…'
const chunk40 = '…'
const chunk41 = '…'
const chunk42 = '…'
const chunk43 = '…'
const chunk44 = '…'
const chunk45 = '…'
const lead6 = '…'
const chunk46 = '…'
const chunk47 = '…'
const chunk48 = '…'
const chunk49 = '…'
const chunk50 = '…'
const chunk51 = '…'
const chunk52 = '…'
const chunk53 = '…'
const chunk54 = '…'
const key = '…'
const name = '…'
return (
<Box flexDirection="column" borderStyle="round" borderColor="cyan" paddingX={1}>
<Box justifyContent="space-between">
<Text color="cyan" bold>
{title}
</Text>
<Text dimColor>
{tally}
</Text>
</Box>
<Box flexDirection="column">
<Box flexDirection="row" flexWrap="wrap">
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{lead}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk2}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk3}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk4}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk5}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk6}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk7}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk8}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk9}
</Text>
</Box>
</Box>
<Box flexDirection="row" flexWrap="wrap">
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{lead2}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk10}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk11}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk12}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk13}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk14}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk15}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk16}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk17}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk18}
</Text>
</Box>
</Box>
<Box flexDirection="row" flexWrap="wrap">
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{lead3}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk19}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk20}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk21}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk22}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk23}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk24}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk25}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk26}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk27}
</Text>
</Box>
</Box>
</Box>
<Box flexDirection="column">
<Box flexDirection="row" flexWrap="wrap">
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{lead4}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk28}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk29}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk30}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk31}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk32}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk33}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk34}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk35}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk36}
</Text>
</Box>
</Box>
<Box flexDirection="row" flexWrap="wrap">
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{lead5}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk37}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk38}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk39}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk40}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk41}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk42}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk43}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk44}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk45}
</Text>
</Box>
</Box>
<Box flexDirection="row" flexWrap="wrap">
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{lead6}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk46}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk47}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk48}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk49}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk50}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk51}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk52}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk53}
</Text>
</Box>
<Box flexDirection="column">
<Text>
{" "}
</Text>
<Text>
{chunk54}
</Text>
</Box>
</Box>
</Box>
<Box gap={2}>
<Button hotkey={`${key}`} plain label={`${name}`} />
<Button hotkey={`${key}`} plain label={`${name}`} />
<Button hotkey={`${key}`} plain label={`${name}`} />
<Button hotkey="5" plain label="undo" />
<Button hotkey="0" plain label="decks" />
</Box>
{await next(e)}
</Box>
)
})
on('session.start', async ($, e, next) => {
const ankiwebSays = '…'
await $.ui.toast(`Logged in to AnkiWeb and synced.${ankiwebSays}`)
await $.ui.toast(`AnkiWeb needs a one-way sync: /anki download (take AnkiWeb's copy) or /anki upload (replace it with this one).`)
return next(e)
})
}
Mod 自身のコード
読んだコミットにライセンスの全文が見つからなかったため、ソースの場所へのリンクだけにしています。
コードが呼ぶもの
プログラム起動環境変数保存
コードから読み取ったデザイン
Logged in to AnkiWeb and synced.
AnkiWeb needs a one-way sync: /anki download (take AnkiWeb's copy) or /anki upload (replace it with this one).
Claude に頼む…
読み取ったコミットのソースから描いたもので、動かした結果ではありません。一覧は 3 回描き、条件はデスクトップアプリで描く最初の分岐を取り、動かしたときにだけ決まる値は仮の例（点線の下線）にするか省きます。色と書体はこのサイトのものです。
コードから読めること
2026-10-06 に読んだコミット 8d78425ffb8c のソースから。最初のまとまりが載せる条件で、残りは自分で判断するための材料です。後のコミットは、次に読むまで見ていません。
| 載せる条件: 確かめやすいコード | |
|---|---|
| 入口を読んだ | hooks/hooks.json が名指すモジュールをすべて読んだ。hooks/register.tsx |
| 解析できる | すべてのファイルが TypeScript か JavaScript として解析できる。1 ファイルを解析 |
| コードが Mod の中で完結 | import は Mod 自身のファイルかエンジンのモジュールだけ。パッケージも require もない。コードはすべて Mod の中 |
| 読める | 圧縮した行・eval・new Function・計算した道の import()・符号化した塊がない。圧縮・eval・符号化した塊なし |
| 呼び出しが見える | 通信とプログラム起動はその場で $.http.fetch・$.process.run と書き、他へ渡さない。外への呼び出しはすべてその場の $ で |
| 入れる前に自分で判断する材料 | |
| 描く場所 | コードから読んだ、描く先。ターミナル・デスクトップアプリ・両方・何も描かない（フックだけ: 見張りやプロンプトの書き換え）のどれか。出すだけで、外す理由にはしない。ターミナルとデスクトップアプリに同じように描く |
| 入れる手順 | リポジトリ自身の .claude-plugin/marketplace.json にこの Mod が載っていて、ページに書いた手順でそのマーケットプレイスから入れられるか。リポジトリの .claude-plugin/marketplace.json に載っておらず、入れる手順は出せない |
| Windows のプログラム | $.process で起動するプログラムが Windows にあるか（tail・date・open・osascript・/usr/… などは無い）。hooks/register.tsx:414 uname（Windows にない） |
| 通信 | fetch の送り先（https のホスト）がコードに書いてあるか。通信なし |
| プログラム | 起動するプログラムの名前がコードに書いてあり、シェル・インタプリタ・通信用の道具でないか。hooks/register.tsx:112 実行時に決まるプログラム; hooks/register.tsx:441 実行時に決まるプログラム; hooks/register.tsx:451 実行時に決まるプログラム |
| 読んで送る | ファイルや環境変数を読み、かつ通信するか。通信しない |
| ソースの鍵 | ソースに API キーや秘密鍵らしきものがあるか。ソースに鍵なし |
| ライセンス | オープンなライセンス（MIT・Apache-2.0・BSD・ISC・Unlicense・0BSD・CC0）で全文があれば、modscode にコードを載せる。違えばリンクだけ。AGPL-3.0（オープンなライセンスではない） |
コードの文面を読んだだけで、安全の審査ではありません。動かしてはおらず、起動するプログラムの中で何が起きるかも見えません。入れる前の確認はあなたの役目です。 載せる条件
入れる
入れる前に、必ず自分で確かめてください。Mod はサンドボックスなしで、あなたの権限で動きます。modscode はこのコードの安全を保証しません。下のコードを読み（またはフォルダーで claude plugin validate .）、触るものを見て、読んだコミットを入れてください。
リポジトリの .claude-plugin/marketplace.json にこの Mod が載っていないため、入れる手順は出せません。コードとして読むか、作者の README に従ってください。
Claude に聞く
modscode のコネクタを入れると、Claude がこのデザイン・コードが触るもの・コードを読んで、それをもとに作れます。たとえば:
modscode のデザイン「hbkse-anki」をコードごと読んで、同じようなペインを作って似たデザイン
-
Claude に頼む…2h 10m · █████░░░✓ build ✓ build ✓ buildJavaKotlin3 Python■ ok 3 ■ ok 3 ■ ok 3 Razor proven 3 Razor proven 3 Razor proven 3Phases ──────── 3/3build Pythonbuild Pythonbuild Python… 3 more phasesLua ──────── 3/Kotlin■ the whole upgrade Ruby■ build build Ruby■ build build Ruby■ build build Ruby … 3 moreNext ──────── PythonRuby (by hand)Podsclick a button, or ctrl+x tab then Tab, EnterAttention ──────── 3! Scala ! Scala ! Scala … 3 moreSession ──────── okJava
-
could not fill the prompt boxcould not fill:Claude に頼む…
-
▴Token OptimizerCheckpointCheckpointCheckpointbuildStart freshbuildStart freshbuildStart freshbuildCheckpointCheckpointCheckpointCheckpointCheckpointCheckpointCheckpointCheckpointCheckpointbuildbuildbuildTokens savedSaved Clean up tokens in 30 days (chat 2 this session)Claude に頼む…
-
reflect · "Skip" ×3Save to ./CLAUDE.mdGlobal insteadEditSkipreflect · "Skip" ×3Save to ./CLAUDE.mdGlobal insteadEditSkipreflect · "Skip" ×3reflect · +3 more · /reflect-queueSave to ./CLAUDE.mdGlobal insteadEditSkipClaude に頼む…
-
Open a file first: /crit-tui file <path>Reopen this one in the crit browser view.Claude に頼む…
-
✉ 3 unread AMP message ReadHideClaude に頼む…