Menu
通过 HTML 页面展示内容给用户。当需要生成可视化报表、交互式演示、数据展示、富文本页面等内容并分享给用户查看时使用。支持公开和密码保护的私密页面。触发词：发布页面、生成网页、HTML 展示、分享链接、可视化报表。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
与 Notion 工作区交互 — 搜索、查找、添加、创建、编辑、更新、删除、导出、查询页面/数据库/内容块/待办事项。当用户提到 Notion 并涉及任何操作（搜索文档、添加数据库行、加 todo、导出 markdown、查询任务状态、记笔记、写会议纪要、配置 token）时使用。这是直接执行 Notion API 操作的 CLI 工具，无需编码。不用于：编写调用 Notion API 的脚本、排查 Notion UI 显示问题、规划迁移方案。
Beancount 个人财务管理 — 账单导入、查询分析、资产盘点、投资分析。 AI 直接读取账单文件（CSV/XLSX）并生成 beancount 交易，不依赖外部 CLI 工具。 当用户提到账单、记账、beancount、财务、收支、预算、报表、盘点、对账、导入账单、 股票分析、投资建议时使用。也适用于用户提供一个 CSV/XLSX 文件并希望将其转换为 beancount 格式的场景。
Take a photo using the MacBook's built-in camera and analyze it with Claude's vision. Use this skill whenever the user wants to capture a photo from their webcam/camera, see what's in front of the camera, take a selfie, snap a picture, or visually inspect something using the laptop camera. Also trigger when users say things like "look at this", "what do you see", "take a picture", "use my camera", "capture what's on my desk", or any request that involves using the MacBook's physical camera to see the real world. This is specifically for the built-in laptop camera — not screenshots or screen capture.
Use this skill when a user shares multiple ideas, features, or rough concepts — as a numbered list, bullet points, or loose collection — and wants them organized into structured documents. Trigger when the user has 3+ raw items and asks to: organize/整理 them, group by theme/按主题分类, expand into vision docs/展开分析, assess feasibility/可行性, write user stories, prioritize, or turn rough notes into proper specs. Covers brainstorm dumps, feature wishlists, user feedback batches, project vision lists, and whiteboard outputs. Also trigger when someone describes having collected many ideas (e.g. 'I have 20 ideas', '收集到30多条反馈') even before listing them all. Key pattern: multiple loosely-related items in → structured thematic analysis out. Do NOT use for: single-feature design docs, competitive analysis, code generation, PR reviews, or general Q&A.
Playwright MCP guide for 飞书/Feishu Lark IM messenger E2E testing and 飞书聊天自动化 (feishu.cn, larkoffice.com). Read BEFORE operating 飞书聊天窗口 with Playwright: fill() and browser_fill_form fail with 'Element is not an input' on lark__editor contenteditable — use browser_type instead; @mention picker (飞书@提及用户/bot), Thread 回复面板, and sidebar navigation all require non-standard patterns you cannot guess. Covers: 飞书发消息, 读取消息历史, lark messenger 自动化, chatbot response testing via Feishu web UI.
Fetch content from Feishu open platform documentation (open.feishu.cn) as structured Markdown. Feishu developer docs are SPA pages — WebFetch only returns empty HTML shells with no actual content. This skill uses Playwright MCP (Chrome Extension / extend mode) to render the page and extract content via the built-in "复制页面" button, which copies the full page as Markdown to the clipboard. Use this skill PROACTIVELY whenever you encounter or need to reference: - Any open.feishu.cn/document/ URL (card components, API endpoints, SDK guides, etc.) - Feishu card JSON component specs (tag definitions, properties, examples) - Feishu API documentation (request/response formats, error codes, permissions) - Feishu event subscription or webhook documentation - Any Feishu open platform integration pattern DO NOT use this skill for: - User's own Lark cloud documents (bytedance.larkoffice.com) — use download-lark-doc or lark-parse instead - Non-Feishu URLs — use WebFetch or other tools IMPORTANT: This skill requires Playwrigh
| name | htmlput |
| description | 通过 HTML 页面展示内容给用户。当需要生成可视化报表、交互式演示、数据展示、富文本页面等内容并分享给用户查看时使用。支持公开和密码保护的私密页面。触发词：发布页面、生成网页、HTML 展示、分享链接、可视化报表。 |
| user-invocable | true |
| disable-model-invocation | false |
| allowed-tools | Bash, Read, Write |
将 HTML 内容发布到 htmlput.com，生成可分享的链接。适用于需要通过网页向用户展示内容的场景。
cd ${CLAUDE_PLUGIN_ROOT}/src && uv run htmlput-cli <command>
~/.htmlput-cli/config.yamlcd ${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 页面展示内容时，按以下流程操作：
根据用户需求生成完整的 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>
要求：
发布前必须检查内容是否包含敏感信息：
如果发现敏感信息：使用 AskUserQuestion 询问用户：
# 将 HTML 写入临时文件（使用 Write 工具）
# 写入到 /tmp/htmlput_<timestamp>.html
# 公开发布
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 "用户指定的密码"
向用户展示：
| 场景 | 说明 |
|---|---|
| 数据报表 | 用 Chart.js / ECharts 生成交互式图表 |
| 可视化展示 | 用 D3.js / Mermaid 生成数据可视化 |
| 交互式演示 | React/Vue 单页应用 |
| 富文本内容 | 格式化文档、简历、邀请函 |
| 原型展示 | UI 原型、Wireframe |
| 代码演示 | 带语法高亮的代码展示页面 |
生成 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 参数 |