Docs & Knowledge · nexu-io/html-anything
kanban-board
Four columns (To do / In progress / In review / Done), cards + avatars + swimlanes
L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
Trello-style four-column board with a top filter bar (assignee / label / search), featuring colored dots and card counts in column headers.
next/src/lib/templates/skills/kanban-board/SKILL.md
- 4 列: To do / In progress / In review / Done
The main text defines card metadata as well (title / labels / due / avatar / comment count), creating a realistic, in-use demo state rather than an empty board.
The illusion of "no actual dragging, but visually looks draggable" is achieved via static cues: cards with `cursor: grab`, dashed add-card slots, and hover border changes.
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; }
Zero scripts in the example; all interactive feel is conveyed through CSS cues like cursor, hover, and dashed placeholder slots.
Swimlanes (grouped by epic/assignee) are included in the body text as an optional extension, while the example presents them via columns and filter chips.
next/src/lib/templates/skills/kanban-board/SKILL.md
- 可选 swimlanes (按 epic / assignee 分组)
Swimlanes are marked as "optional", indicating that the template allows the same column to appear repeatedly under different groups rather than treating it as a hard constraint.
The template itself is the prompt: SKILL.md body text is read by the loader, assembled with the shared prelude and user content, and passed to the local agent CLI for execution.
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
No code from the template directory is executed at runtime: /api/convert only receives {agent, templateId, content}, uses loadSkill(templateId) to extract SKILL.md body as the prompt core, and forwards it to the authenticated local agent CLI; HTML streams back to the frontend via stdout.
The skill directory contains pure text assets: the loader reads SKILL.md body from disk, and no executable code inside the directory is loaded.
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
Skills in the file system are strictly text: the loader scans SKILL.md directory by directory, extracts frontmatter as picker metadata, and returns the body as text; no modules within this template directory are imported or executed.
The shared prelude is injected before the template, establishing the highest priority rule: "The template only defines layout, style, color palette, typography, and component library; quantity is determined by user content."
next/src/lib/templates/shared.ts
【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】
Injected before the template body, the shared prelude mandates that "the template only defines layout/style/palette/font/components, while quantity depends on user content"—meaning the layout inventory in this template serves as a reusable pattern pool, not a page/frame limit.
The shared prelude is injected before the template, establishing the highest priority rule: "The template only defines layout, style, color palette, typography, and component library; quantity is determined by user content."
next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
The prelude strictly forbids filesystem tools and mandates pure HTML streaming output within the response body, leaving disk writes to the frontend—ensuring zero disk write behavior on the skill side.
The skill directory contains pure text assets: the loader reads SKILL.md body from disk, and no executable code inside the directory is loaded.
next/src/lib/templates/loader.ts
const exampleHtml = safeRead(path.join(dir, "example.html"));
The bundled example.html is a golden sample distributed with the repository; the preview route directly reads and serves it from disk (no build, no compile), serving as both a quality baseline and detail page asset.
2Core Capabilities
01Four-column board with column header counters and colored status dots
02Top filter bar (Members / Labels / Search tickets…)
03Card label color system (bug/feat/design/chore/research)
04Draggable visual cues (cursor: grab) and dashed add-card slots
05Optional swimlane grouping (by epic / assignee)
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Can be auto-loaded
For Administrators
Register source and version
Evidence & Triggers (File Paths & Excerpts)
- SKILL.md: Pure prompt instructions and rule text; no script execution or external impact
Audit Notes: 🟢 Green. Target evaluated = the skill directory itself: zero URLs inside the directory (example.html contains no http(s) endpoints either). The directory contains only SKILL.md and example.html, with zero scripts, zero executable code, zero network endpoints, zero credential reading, and zero disk write instructions. Executing in accordance with SKILL.md results in the host model generating an HTML text output without any outbound networking or disk write actions. Host wrapper and artifact runtime behaviors do not affect the rating level and are recorded under verdict.risks: shared.ts prelude requires the output to reference Tailwind CDN (https://cdn.tailwindcss.com) and Google Fonts, the runtime spawns the logged-in local agent CLI (envFor passes process.env through), and the preview iframe is sandboxed with sandbox="allow-scripts allow-same-origin".
5Second-Pass Verification
- [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) 命中，产物离线自持。
6Verdict & Scenarios
Best for: Sprint board screenshots, product/operations workflow presentation pages, Trello-style UI concept mockups; ideal when a realistic static board aesthetic that looks actively used by a team is needed.
Not for: Project management scenarios requiring actual drag-and-drop and state persistence; real-time boards needing data synchronization with Jira/Linear; situations requiring strict column names from a specific tool (e.g., standard 3-column To do/In progress) without checking the example.
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload kanban-board.tar.gz
sha256:
Option B · Copy Guide for Agenteec7d423885faf6f…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.