Bundles OKF data into a single, minifyed, and standalone HTML file for easy sharing and offline access.
Install
mkdir -p .claude/skills/okf-to-web && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/11709" && unzip -o skill.zip -d .claude/skills/okf-to-web && rm skill.zipInstalls to .claude/skills/okf-to-web
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
把符合 OKF v0.1 的知识包打包成单个自包含且经过压缩(minify)的 HTML 文件, 内嵌导航, Markdown 阅读器与概念关系图谱, 数据不出页面, 无需后端. 适用场景包括把 OKF bundle 变成一个可分享的单文件网页, 离线浏览知识库, 生成对标官方 viz.html 的可视化. 当用户提到 okf to web, OKF 转单文件网页, 可视化 OKF, minify 知识库, 或要一个自包含 HTML 时触发.Key capabilities
- →Package an OKF v0.1 knowledge bundle into a single HTML file
- →Embed navigation, Markdown reader, and concept relationship graph
- →Minify the HTML file for reduced size
- →Ensure all data is self-contained within the HTML, without external requests
- →Support offline viewing of the knowledge base
How it works
The skill validates the OKF bundle, generates a single HTML file with embedded data and interactive elements, then minifies the HTML using a Node.js script.
Inputs & outputs
When to use okf-to-web
- →Share knowledge bundles
- →Offline knowledge base viewing
- →Create single-file docs
About this skill
OKF to Web
把任意符合 OKF v0.1 的知识包,打包成单个自包含、压缩过的 .html——左侧分组导航 + 中间 Markdown 阅读器 + 右侧概念关系图谱。数据全部内嵌,不出页面,无后端、无安装,双击即开。对标官方 viz.html。
与 okf-to-book 的区别:那个生成多页 VitePress 站点(需 npm 构建);本 Skill 产出一个文件,适合分享、归档、离线。
前置
- Python 3(生成)+ Node.js(压缩,本机已具备)。
工作流
- 校验 bundle:
../okf-creator/scripts/validate_okf.py <bundle>。 - 生成单文件:
python scripts/build_web.py <bundle 目录> -o okf.html --title "我的知识库" - 压缩(minify,零依赖 node 脚本):
保护node scripts/minify.mjs okf.html okf.min.html<pre>/<script>/<style>与内嵌 JSON 数据,折叠标签间空白、删注释、压 CSS/JS。 - 把
okf.min.html直接分享 / 部署到任意静态托管,或本地双击打开。
设计要点
- 单文件自包含:所有概念以 JSON 内嵌
<script type="application/json">,JS 用极小的内联 Markdown 渲染器 + SVG 图谱,无任何外部请求 → 数据安全、可离线。 - 嵌入安全:正文里的
</script>会被转义为<\/script>,不会提前闭合脚本。 - 图谱:概念间正文链接 → 关系边;点节点跳转概念。
- 亮色主题、中文 UI(字节风),响应式(窄屏自动隐藏图谱)。
- 压缩比说明:大头是内嵌知识文本(本就不应破坏性压缩),所以体积下降主要来自 HTML/CSS/JS 外壳,属正常。
可扩展
- 想要力导向图谱、全文搜索高亮、暗色切换,可在
build_web.py的内联 JS 模板里加; - 想要真正激进的 JS 压缩,可改用
npx terser(需联网安装),本脚本默认走零依赖安全压缩。
配套
任何 producer 的产物(feishu / awesome / obsidian / notion / html / github)都能直接喂给本 Skill。反向见 book-to-okf。
When not to use it
- →When a multi-page VitePress site is preferred over a single HTML file
- →When the knowledge bundle does not conform to OKF v0.1
- →When advanced JS compression requiring network installation is needed
Prerequisites
Limitations
- →The primary volume reduction comes from HTML/CSS/JS shell compression, not destructive text compression
- →Advanced JS compression requires `npx terser` which needs network installation
- →Requires Python 3 for generation and Node.js for minification
How it compares
This skill produces a single, self-contained, and minified HTML file for an OKF knowledge bundle, suitable for sharing and offline use, unlike a multi-page site requiring npm build.
Compared to similar skills
okf-to-web side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| okf-to-web (this skill) | 0 | 2mo | Review | Intermediate |
| markdown-to-html | 16 | 6mo | Review | Beginner |
| claude-md-enhancer | 1 | 9mo | Review | Beginner |
| deepinit | 1 | 4mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by yzfly
View all by yzfly →You might also like
markdown-to-html
github
Convert Markdown files to HTML similar to `marked.js`, `pandoc`, `gomarkdown/markdown`, or similar tools; or writing custom script to convert markdown to html and/or working on web template systems like `jekyll/jekyll`, `gohugoio/hugo`, or similar web templating systems that utilize markdown documents, converting them to html. Use when asked to "convert markdown to html", "transform md to html", "render markdown", "generate html from markdown", or when working with .md files and/or web a templating system that converts markdown to HTML output. Supports CLI and Node.js workflows with GFM, CommonMark, and standard Markdown flavors.
claude-md-enhancer
alirezarezvani
Analyzes, generates, and enhances CLAUDE.md files for any project type using best practices, modular architecture support, and tech stack customization. Use when setting up new projects, improving existing CLAUDE.md files, or establishing AI-assisted development standards.
deepinit
Yeachan-Heo
Deep codebase initialization with hierarchical AGENTS.md documentation
ability-generator
lofcz
This skill generates markdown skill templates to be later used.
sample-with-references
svelte-society
Demonstrates progressive disclosure by linking to reference files. Use this pattern when your skill has detailed content that should load on-demand.
website-maintainer
yamadashy
Use this skill when working on the Repomix documentation website in `website/` directory, including VitePress configuration, multi-language content, or translation workflows.