ドキュメント&知識ベース · nexu-io/html-anything

kanban-board

To do / In progress / In review / Done の4カラム、カード + アバター + スイムレーン

L1 基本 · ソース登録のみV1 コミット固定Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(仓库根 LICENSE 文件为 Apache License Version 2.0;package.json "license": "Apache-2.0";GitHub API spdx_id Apache-2.0)Commit 553ed98c28
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

Trelloスタイルの4カラムカンバン + 上部フィルターバー(担当者 / ラベル / 検索)。カラムヘッダーにはカラーインジケーターとカードカウントを配置。

next/src/lib/templates/skills/kanban-board/SKILL.md
- 4 列: To do / In progress / In review / Done
本文ではカードのメタデータ(タイトル / ラベル / 期日 / アバター / コメント数)も定義されており、空のボードではなく「実際に誰かが使っている」デモ状態を再現しています。

「実際にはドラッグしないが、視覚的にドラッグ可能に見せる」仕様を静的表現で実現:カードの `cursor: grab`、破線のカード追加スロット、ホバー時の枠線変化。

next/src/lib/templates/skills/kanban-board/example.html
.card { padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; cursor: grab; transition: border-color 0.15s, box-shadow 0.15s; }
サンプルは完全スクリプトレスであり、すべての「インタラクティブ感」はカーソル、ホバー、破線枠といったCSSの視覚的ヒントによって担われています。

スイムレーン(Epic/担当者別グループ化)はオプションの拡張機能として本文に記載され、サンプルではカラム + フィルターチップとして提示。

next/src/lib/templates/skills/kanban-board/SKILL.md
- 可选 swimlanes (按 epic / assignee 分组)
スイムレーンは「オプション」とされており、同一カラムが異なるグループ下で重複して現れることをテンプレートとして許容し、厳密な制約とはしていません。

テンプレート自体がプロンプト:SKILL.md 本文をローダーが読み出し、共有前置きおよびユーザーコンテンツと結合した上で、ローカルの agent CLI に渡して実行。

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
ランタイムはテンプレートディレクトリ内のコードを実行しません:/api/convert は {agent, templateId, content} のみを受け取り、loadSkill(templateId) で SKILL.md 本文を取得してプロンプトの主体とし、ローカルで認証済みの agent CLI に渡します。HTMLは stdout 経由でフロントエンドにストリーミングされます。

skill ディレクトリは純粋なテキストアセット:ローダーはディスクから SKILL.md 本文を読み取るのみで、ディレクトリ内の実行可能コードは一切ロードされません。

next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
ファイルシステム上の skill は単なるテキストです:ローダーがディレクトリごとに SKILL.md を読み込み、frontmatter をピッカー用メタデータとして抽出し、本文を body として返します。このテンプレートディレクトリ内のモジュールがインポートまたは実行されることはありません。

共有前置きはテンプレートより先に注入され、「テンプレートはレイアウト/スタイル/配色/フォント/コンポーネントセットのみを定義し、数量はユーザーコンテンツによって決まる」ことを最優先事項として規定。

next/src/lib/templates/shared.ts
【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】
共有前置きはテンプレート本文の前に注入され、「テンプレートはレイアウト/スタイル/配色/フォント/コンポーネントセットのみを定義し、数量はユーザーコンテンツによって決まる」と定めています。そのため、本テンプレート内のレイアウト一覧は「再利用可能なレイアウトプール」であり、ページ数やフレーム数の上限ではありません。

共有前置きはテンプレートより先に注入され、「テンプレートはレイアウト/スタイル/配色/フォント/コンポーネントセットのみを定義し、数量はユーザーコンテンツによって決まる」ことを最優先事項として規定。

next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
前置きではファイルシステムツールの使用を明示的に禁止し、純粋なHTMLを返答本文からストリーミング出力することを要求しています。ディスクへの保存はフロントエンドが担うため、skill 側にはディスク書き込み動作が存在しません。

skill ディレクトリは純粋なテキストアセット:ローダーはディスクから SKILL.md 本文を読み取るのみで、ディレクトリ内の実行可能コードは一切ロードされません。

next/src/lib/templates/loader.ts
const exampleHtml = safeRead(path.join(dir, "example.html"));
ディレクトリ内の example.html はリポジトリとともに配布されるゴールデンサンプルであり、プレビュー用ルートがビルドやコンパイルなしで直接ディスクから読み出して返します。品質基準であると同時に詳細ページ用素材でもあります。

2コア機能

014カラムカンバン + ヘッダーカウントとカラーインジケーター
02上部フィルターバー(Members / Labels / Search tickets…)
03カードラベルの色体系(bug/feat/design/chore/research)
04ドラッグ可能な視覚的ヒント(cursor: grab)と破線のカード追加枠
05オプションのスイムレーングループ化(Epic / 担当者別)

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: プロンプト指示とルールテキストのみで構成され、スクリプト実行や外部影響は一切なし
監査ノート: 🟢 グリーン(安全)。判定対象=skill ディレクトリ自体:ディレクトリ内にURLはゼロ(example.html にも http(s) エンドポイントなし)。ディレクトリ内には SKILL.md と example.html のみが存在し、スクリプト、実行可能コード、ネットワークエンドポイント、認証情報の読み取り、ディスク書き込み指示はすべてゼロです。SKILL.md に従った実行結果はホストモデルによるHTMLテキストの出力であり、外部送信やディスク保存処理は一切含まれません。ホストシェルおよび生成物利用側の動作は判定基準には含めず、verdict.risks にのみ記録しています:shared.ts 前置きが Tailwind CDN (https://cdn.tailwindcss.com) と Google Fonts の参照を要求している点、ランタイムがローカルでログイン済みの agent CLI を spawn する点(envFor が process.env を透過)、プレビュー iframe に sandbox="allow-scripts allow-same-origin" が設定されている点。

5二重目の独立検証

  • [discrepancy] 规范↔示例:列名 — 正文写「To do / In progress / In review / Done」四列,示例首列是 `Backlog`(其余 In progress / In review / Done 一致)——命名口径不一致,模型照示例会输出 Backlog。
  • [discrepancy] 规范↔示例:卡片元数据 — 正文要求卡片含「标题 / labels / due / avatar / 评论数」;示例命中标题、标签色(tag-feat 等)、头像缩写(av-sm av-dev)、点数(3 pts)与工单号,但**没有 due 日期、也没有评论数**——两项规范要求未在样本落地。
  • [ok] 规范↔示例:filter bar — 示例 topbar 有 `Search tickets…` 输入框,filterbar 有 Members / Labels 两组 chips,与正文 assignee/label/search 要求一致。
  • [ok] 「看起来可拖」实现方式 — 示例用 `.card { … cursor: grab; }` 与 `.add-card` 虚线槽表达可拖,未引入任何拖拽脚本,符合正文「不需要真 drag,但视觉上要像可拖」。
  • [ok] 泳道未在示例出现 — 正文把 swimlanes 标为「可选」,示例采用单层四列,属可选未启用,非缺口。
  • [ok] 目录资产面普查 — glob 全量:SKILL.md、example.html;无 scripts/、无 references/、无数据文件、无包管理器清单。
  • [ok] 可执行代码普查 — example.html 内 <script> 计数 = 0,fetch/XMLHttpRequest/WebSocket 命中 0;SKILL.md 全篇无脚本或可执行代码。
  • [ok] 外链端点普查 — 目录内(含 example.html)零 http(s) 命中,产物离线自持。

6結論

  • 4カラム + フィルターバーの標準的なカンバンレイアウトですぐに利用可能
  • スクリプトなしで「ドラッグ可能」な見た目を実現し、軽量でオフラインでも閲覧可能
  • 実際のカンバンに近いカードの情報密度(ラベル/ポイント/アバター/チケット番号)
  • 最適な用途: スプリントカンバンのスクリーンショット、プロダクト/運用のワークフロー展示ページ、TrelloスタイルのUIコンセプトモックアップ。「チームが実際に運用しているような」静的カンバンのビジュアルが必要な場合に最適です。
    不向きな用途: 実際のドラッグ&ドロップや状態の永続化が必要なプロジェクト管理シナリオ、Jira/Linearのデータと連動するリアルタイムカンバン、特定ツールのカラム名(例:To do/In progress の3フェーズ形式など)に厳格に準拠する必要がありサンプルを確認しない場面。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload kanban-board.tar.gz
    sha256: eec7d423885faf6f…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.