用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/sapegin/dotfiles --skill pretty-html命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
Review a diff for local code quality, AI-generated slop, and polish in application code, configuration, documentation, and agent artifacts.
Review a diff for requirements, behavior, APIs, architecture, and maintainability across code, configuration, documentation and agent artifacts.
Audit every local skill for predictable behavior, sound structure, and prompt quality.
| name | pretty-html |
| description | Create and update standalone HTML documents with syntax highlighting, diagrams, and live demos. |
| disable-model-invocation | true |
Create lightweight HTML pages backed by shared assets in $DOTFILES_DIR/pretty-html/_assets/. Pages hold prose and semantic markup only; styling and interactivity come from shared assets.
Shared assets live in $DOTFILES_DIR/pretty-html/_assets/ (git-tracked). Handbook pages in the vault use a synced copy at ~/murder/zz-handbook/_assets/ — see Sync after changing assets.
| Intent | Page location | Git |
|---|---|---|
| Durable handbook reference | ~/murder/zz-handbook/<topic>/ — use the teach skill | Obsidian vault |
| Temporary explainer, demo, one-off | $DOTFILES_DIR/pretty-html/pages/ | Ignored |
| Golden reference | $DOTFILES_DIR/pretty-html/example.html | Tracked |
Link only doc.css (it @imports squirrelsong.css) and components.js (lazy-loads highlight.js and Mermaid from _assets/lib/). Adjust the _assets/ prefix by depth:
| Page location | Stylesheet | Components |
|---|---|---|
pretty-html/example.html | _assets/doc.css | _assets/components.js |
pretty-html/pages/<doc>.html | ../_assets/doc.css | ../_assets/components.js |
zz-handbook/<topic>/<doc>.html | ../_assets/doc.css | ../_assets/components.js |
Copy from example.html. Every page needs:
.light or .dark on <html> from prefers-color-scheme at load time; no toggle, no change listener.doc.css (imports Squirrelsong).<body> — components.js only (classic script, not type="module" — required for reliable file:// pages). It lazy-loads highlight.js and Mermaid.<main> — main content wrapper.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1"
/>
<title>Layout — CSS</title>
<script>
document.documentElement.classList.add(
matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light'
);
</script>
<link rel="stylesheet" href="../_assets/doc.css" />
</head>
<body>
<main>
<nav class="breadcrumbs" aria-label="Breadcrumb">
<a href="../index.html">Handbook</>
/
CSS
Light DOM custom elements — no Shadow DOM, so Squirrelsong CSS variables apply.
<ss-callout variant="…">Aside boxes for facts easy to forget. Variants: remember, gotcha, prefer, avoid, info. Pure CSS labels — put content directly inside.
<ss-callout variant="remember">
<code>place-items</code> centers on both axes in a grid container.
</ss-callout>
<ss-code language="…">Put raw source in a <pre> child (semantic preformatted text; Oxfmt leaves <pre> alone). Leading and trailing whitespace on the <pre> contents are trimmed. highlight.js loads lazily on first <ss-code>. Plain text without <pre> still works but is easy for formatters to break.
<ss-code language="css">
<pre>
.box {
display: grid;
place-items: center;
}
</pre>
</ss-code>
Do not hand-write highlighted <pre class="hljs"> markup — the component replaces content after highlight.js runs.
<ss-diagram>Mermaid source in a <pre> child; rendered at runtime on first diagram. Leading and trailing whitespace on the <pre> contents are trimmed.
<ss-diagram>
<pre>
flowchart LR
A --> B --> C
</pre>
</ss-diagram>
<ss-demo>Live preview in a sandboxed iframe (allow-scripts only). Put HTML/CSS/JS as child elements — not escaped text. The component reads innerHTML, not textContent.
<ss-demo>
<style>
.box {
color: rebeccapurple;
}
</style>
<div class="box">Hello</div>
</ss-demo>
<ss-resources>Further-reading section. Wrap a <ul> of external links inside.
<ss-resources>
<ul>
<li><a href="https://developer.mozilla.org/…">MDN: …</a></li>
</ul>
</ss-resources>
Prefer official or high-trust sources (MDN, specs, vendor docs).
<nav class="breadcrumbs" aria-label="Breadcrumb"> before page content. Handbook topic documents link to the root handbook index and their topic hub; topic hubs mark the topic name with aria-current="page".<ss-code> / <ss-diagram> source in <pre>.<script> in authored content except the one-line theme bootstrap in <head>. No pre-rendered SVG, no duplicated library code.$DOTFILES_DIR/pretty-html/_assets/ before inventing new patterns. Add reusable widgets to components.js and styles to doc.css.squirrelsong.css — it syncs from $THEMES_DIR/CSS/squirrelsong.css._assets/lib/ (highlight.js, Mermaid). Pin new versions there when upgrading and update _assets/lib/versions.json.Open it in the default browser:
open /path/to/page.html
Run sync-dotfiles after changing _assets/. Never symlink into ~/murder (iCloud).
基于 SOC 职业分类
