htmlput - SKILL.md Agent Skill

name: htmlput description: 通过 HTML 页面展示内容给用户。当需要生成可视化报表、交互式演示、数据展示、富文本页面等内容并分享给用户查看时使用。支持公开和密码保护的私密页面。触发词：发布页面、生成网页、HTML 展示、分享链接、可视化报表。 user-invocable: true disable-model-invocation: false allowed-tools: Bash, Read, Write

HTMLPut - 发布 HTML 页面

将 HTML 内容发布到 htmlput.com，生成可分享的链接。适用于需要通过网页向用户展示内容的场景。

命令前缀

cd ${CLAUDE_PLUGIN_ROOT}/src && uv run htmlput-cli <command>

当前配置

配置文件: ~/.htmlput-cli/config.yaml
配置状态: !cd ${CLAUDE_PLUGIN_ROOT}/src && uv run htmlput-cli config show 2>/dev/null | head -3

前置条件

首次使用需要配置 htmlput.com 账户：

cd ${CLAUDE_PLUGIN_ROOT}/src && uv run htmlput-cli config setup --email "your@email.com" --password "your_password"

命令参考

发布页面

# 从文件发布
cd ${CLAUDE_PLUGIN_ROOT}/src && uv run htmlput-cli publish --file "/path/to/page.html" --title "页面标题"

# 从 HTML 字符串发布
cd ${CLAUDE_PLUGIN_ROOT}/src && uv run htmlput-cli publish --html "<h1>Hello</h1><p>Content</p>" --title "页面标题"

# 从 stdin 发布
cat /path/to/file.html | cd ${CLAUDE_PLUGIN_ROOT}/src && uv run htmlput-cli publish --stdin --title "页面标题"

# 私密发布（需要密码访问）
cd ${CLAUDE_PLUGIN_ROOT}/src && uv run htmlput-cli publish --file "/path/to/page.html" --title "私密页面" --private --password "access_password"

配置管理

# 设置账户
cd ${CLAUDE_PLUGIN_ROOT}/src && uv run htmlput-cli config setup --email "user@example.com" --password "pwd"

# 查看配置
cd ${CLAUDE_PLUGIN_ROOT}/src && uv run htmlput-cli config show

# 清除配置
cd ${CLAUDE_PLUGIN_ROOT}/src && uv run htmlput-cli config clear

标准工作流

当需要通过 HTML 页面展示内容时，按以下流程操作：

步骤 1：生成 HTML 内容

根据用户需求生成完整的 HTML 页面。页面应包含完整的 <!DOCTYPE html> 结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
    <style>
        /* 内联样式 */
    </style>
</head>
<body>
    <!-- 页面内容 -->
    <script>
        // 内联脚本
    </script>
</body>
</html>

要求：

所有 CSS 和 JS 必须内联（不依赖本地文件）
外部库通过 CDN 引入（unpkg, cdnjs 等）
确保页面独立可运行

步骤 2：检查敏感信息

发布前必须检查内容是否包含敏感信息：

个人身份信息（姓名、手机号、邮箱、身份证号）
API Key、Token、密码
内网地址、内部系统 URL
公司内部数据

如果发现敏感信息：使用 AskUserQuestion 询问用户：

是否需要密码保护？
是否要脱敏后再发布？
是否取消发布？

步骤 3：写入临时文件

# 将 HTML 写入临时文件（使用 Write 工具）
# 写入到 /tmp/htmlput_<timestamp>.html

步骤 4：发布

# 公开发布
cd ${CLAUDE_PLUGIN_ROOT}/src && uv run htmlput-cli publish --file "/tmp/htmlput_xxx.html" --title "页面标题"

# 如果需要密码保护
cd ${CLAUDE_PLUGIN_ROOT}/src && uv run htmlput-cli publish --file "/tmp/htmlput_xxx.html" --title "页面标题" --private --password "用户指定的密码"

步骤 5：返回结果

向用户展示：

访问链接 URL
如果是私密页面，告知访问密码

适用场景

场景	说明
数据报表	用 Chart.js / ECharts 生成交互式图表
可视化展示	用 D3.js / Mermaid 生成数据可视化
交互式演示	React/Vue 单页应用
富文本内容	格式化文档、简历、邀请函
原型展示	UI 原型、Wireframe
代码演示	带语法高亮的代码展示页面

常用 CDN 库

生成 HTML 时可使用这些 CDN 库：

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>

<!-- React 18 -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!-- Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<!-- Mermaid -->
<script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>

<!-- Highlight.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

请求映射

用户请求	动作
"生成报表/图表并分享"	生成 HTML → 发布 → 返回链接
"把这个数据做成网页"	生成 HTML → 发布 → 返回链接
"发布一个页面"	确认内容 → 发布 → 返回链接
"设置 htmlput 账户"	执行 config setup
"这个页面需要密码"	加 --private --password 参数