メニュー
Use when content should be delivered as a local HTML artifact instead of plain markdown, especially when it needs a collapsible left sidebar navigation, calm reading-oriented styling, and must be saved under the project's html directory
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
为健身房训练者建立本地档案、制定和调整训练计划、记录训练并按需提供基础饮食提醒。用户讨论健身目标、训练计划、训练复盘、重量进展、恢复或健身饮食时使用。
Use only when the user explicitly invokes after-code after finishing a bug fix or feature and wants a post-dev retro focused on AI pitfalls, validation gaps, and architecture-level lessons rather than code walkthroughs
Use only when the user explicitly invokes pre-code before fixing a bug or building a feature and wants an architecture-first pre-dev orientation before writing code
SOC 職業分類に基づく
| name | html-use |
| description | Use when content should be delivered as a local HTML artifact instead of plain markdown, especially when it needs a collapsible left sidebar navigation, calm reading-oriented styling, and must be saved under the project's html directory |
把内容做成可直接打开的 HTML 成品，不停留在聊天排版。
核心原则：
html/适合：
HTML 展示不要用在：
HTML 文件统一放到当前项目下的：
html/
规则：
html/ 不存在，先创建.html 后缀命名示例：
payment-architecture-map.htmlbug-retro-summary.htmlfeature-scope-review.html每个 HTML 产物都必须满足：
根结构建议：
<div class="app-shell" id="appShell">
<aside class="sidebar">...</aside>
<main class="content">...</main>
</div>
默认风格不是“产品后台蓝白卡片”，而是“阅读型技术说明页”：
目标感觉：
长内容优先拆成这些块，而不是一整页散文：
header / summarydiagram / flowstep walkthroughkey filesgotchas / red flagsacceptance / next step如果内容是总结类、方案类、复盘类，这套块结构优先于随意排版。
<!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>
:root {
--ivory: #faf9f5;
--slate: #141413;
--clay: #d97757;
--oat: #e3dacc;
--olive: #788c5d;
--gray-150: #f0eee6;
--gray-300: #d1cfc5;
--gray-500: #87867f;
--gray-700: #3d3d3a;
--serif: ui-serif, Georgia, "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", sans-serif;
--mono: ui-monospace, "SF Mono", Menlo, Monaco, monospace;
--sidebar-width: 280px;
--sidebar-collapsed: 84px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ivory);
color: var(--gray-700);
font-family: var(--sans);
}
.app-shell {
display: grid;
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
min-height: 100vh;
transition: grid-template-columns 0.2s ease;
}
.app-shell.is-collapsed {
grid-template-columns: var(--sidebar-collapsed) minmax(0, 1fr);
}
.sidebar {
position: sticky;
top: 0;
height: 100vh;
padding: 18px 14px;
background: rgba(250, 249, 245, 0.94);
border-right: 1px solid var(--gray-300);
overflow: auto;
}
.sidebar-toggle {
width: 100%;
margin-bottom: 14px;
border: 1px solid var(--gray-300);
background: #fff;
color: var(--slate);
border-radius: 12px;
padding: 10px 12px;
cursor: pointer;
}
.nav-link {
display: block;
padding: 10px 12px;
color: var(--gray-500);
text-decoration: none;
border-radius: 10px;
}
.nav-link:hover,
.nav-link:focus-visible {
color: var(--clay);
background: rgba(217, 119, 87, 0.08);
outline: none;
}
.content {
padding: 40px 28px 72px;
max-width: 1080px;
width: 100%;
}
h1, h2, h3 {
color: var(--slate);
font-family: var(--serif);
font-weight: 500;
letter-spacing: -0.02em;
}
.eyebrow,
.meta,
code,
pre {
font-family: var(--mono);
}
.panel {
background: #fff;
border: 1.5px solid var(--gray-300);
border-radius: 14px;
padding: 18px 20px;
}
@media (max-width: 900px) {
.app-shell,
.app-shell.is-collapsed {
grid-template-columns: 1fr;
}
.sidebar {
position: relative;
height: auto;
}
}
</style>
</head>
<body>
<div class="app-shell" id="appShell">
<aside class="sidebar">
<button class="sidebar-toggle" type="button" id="sidebarToggle">收起导航</button>
<nav>
<a class="nav-link" href="#section-1">部分 1</a>
<a class="nav-link" href="#section-2">部分 2</a>
</nav>
</aside>
<main class="content">
<section id="section-1" class="panel">
<div class="eyebrow">Summary</div>
<h1>部分 1</h1>
</section>
<section id="section-2" class="panel">
<h2>部分 2</h2>
</section>
</main>
</div>
<script>
const shell = document.getElementById("appShell");
const toggle = document.getElementById("sidebarToggle");
toggle.addEventListener("click", () => {
const collapsed = shell.classList.toggle("is-collapsed");
toggle.textContent = collapsed ? "展开导航" : "收起导航";
});
</script>
</body>
</html>
html/summary / steps / files / risks 等信息块asidemainhref="#section-id"is-collapsedhtml/交付前至少确认：
html/ 目录存在