planpage

仓库创建 2026年6月27日最近提交 22 天前SkillHot 收录 22 天前

▸ 精选理由

以可视化方式批准或调整决策，提升沟通效率

▸ 风险提示

需要安装 npm 包并运行本地服务器，可能下载外部依赖

这个 Skill 做什么

将计划渲染为可交互的单文件 HTML 页面并提供回传服务器

把计划、审核门或报告渲成漂亮的单文件、交互式 HTML 页面，并带一个本地回传服务器，让用户在浏览器里批准或调整决策并把选择传回给代理。需要审批关卡、决策复核或分享前后报告时用它比手写前端快多了。特色是基于开源 planpage（Preact 组件）直接生成可回传页面，组件化且自带交互和画廊。

▸ 展开 SKILL.md 英文原文

Render a skill's plan, review gate, or report as a beautiful, self-contained, INTERACTIVE HTML page — via the open-source planpage package (Preact components → static HTML + a local post-back server so the user can approve / adjust / flip decisions in the browser and the choice comes straight back to the agent). Use whenever a skill needs an approval gate, a decision review, or a shareable before/after report — author with the kit's components instead of hand-rolling HTML each time.

开发编程交互式计划HTML渲染npm集成通用

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/YosefHayim/dufflebag/main/src/skills/planpage/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/YosefHayim/dufflebag/main/src/skills/planpage/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# planpage — interactive HTML plans for skills

Like `mcp-ui`, but for terminal skills. This skill is a **thin consumer of the open-source [`planpage`](https://github.com/YosefHayim/planpage) package** (on npm — `npm i planpage`, or zero-install with `npx planpage`). The components, the render engine, the auto-captured gallery, and the post-back server all live there as the single source of truth. Don't hand-roll HTML here; author with the package.

## What the package gives you

- **Components** — `SectionCard`, `PickBlock`, `DiffBlock`, `TreePanel`, `Flow`, `CodeBlock`, `CodeExplorer` (IDE-style file tree + editor pane, per-file before/after), plus plan-native pieces: `Callout`, `RiskList`

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有