skillcaddy 0.27.0

package/public/claude.css

@@ -0,0 +1,2 @@
+/* Claude Code 列改用统一的 .enabled 组件（见 enabled.css）。该文件保留仅为兼容
+   历史引用与第三方加载顺序；样式集中在 enabled.css。 */

package/public/claudeUi.js

@@ -0,0 +1,119 @@
+import { emptyState } from './emptyState.js';
+
+// Claude Code 段复用与 .agents/skills 完全相同的 .enabled 组件。
+// 唯一差异：Claude Code 段有「同步」动作（项目 .agents/skills → Claude Code 软链），
+// 因此额外接收 syncEnabled 回调，并在列头由 index.html 提供按钮。
+export function renderClaudeStatus({ claude, skills, elements, onUnlink, onSync, isPreview = false, query = '' }) {
+  const normalizedQuery = query.trim().toLowerCase();
+  elements.unlinkClaude.disabled = isPreview || !claude || !claude.exists || claude.skills.length === 0;
+  if (isPreview) {
+    elements.unlinkClaude.title = '预览模式只读：先在下方读取你自己的项目再操作';
+    elements.syncClaude.disabled = true;
+    elements.syncClaude.title = '预览模式只读：先在下方读取你自己的项目再操作';
+  } else {
+    elements.syncClaude.disabled = !claude || !claude.exists;
+    elements.syncClaude.title = '把项目已启用的 skill 同步到 Claude Code';
+  }
+  if (onSync) elements.syncClaude.onclick = onSync;
+  if (!claude || !claude.exists) {
+    elements.claudeResultCount.hidden = true;
+    elements.claudeResultCount.textContent = '';
+    // 此前这里直接清空，整栏渲染成一片空白：用户既不知道这栏是什么，
+    // 也不知道同栏标题里的「同步」就是填充它的入口。
+    elements.claudeSkillList.replaceChildren(emptyState(
+      '还没有 Claude Code 入口',
+      '点这一栏标题右侧的「同步」，把 .agents/skills 已启用的 skill 同步到 Claude Code。'
+    ));
+    return 0;
+  }
+
+  const filtered = claude.skills.filter((skill) => matchesEnabledQuery(skill, skills, normalizedQuery));
+  elements.claudeResultCount.hidden = !normalizedQuery;
+  elements.claudeResultCount.textContent = normalizedQuery ? `显示 ${filtered.length}/${claude.skills.length}` : '';
+  if (filtered.length === 0 && claude.skills.length > 0) {
+    elements.claudeSkillList.replaceChildren(emptyState('没有匹配的 skill', '换一个名称或来源，或清空上方搜索。'));
+    return 0;
+  }
+
+  renderClaudeSkills({ skills: filtered, sourceSkills: skills, elements, onUnlink, isPreview });
+  return filtered.length;
+}
+
+function matchesEnabledQuery(skill, sourceSkills, query) {
+  if (!query) return true;
+  const sourceSkill = sourceSkills.find((candidate) => candidate.name === skill.alias);
+  const fields = [
+    skill.alias,
+    skill.targetPath,
+    sourceSkill?.name,
+    sourceSkill?.source,
+    sourceSkill?.collection,
+    sourceSkill?.description,
+    sourceSkill?.note,
+    ...(sourceSkill?.tags || [])
+  ];
+  return fields.some((value) => String(value || '').toLowerCase().includes(query));
+}
+
+function renderClaudeSkills({ skills, sourceSkills, elements, onUnlink, isPreview = false }) {
+  elements.claudeSkillList.replaceChildren();
+  if (skills.length === 0) {
+    elements.claudeSkillList.append(emptyState(
+      'Claude Code 还没有同步任何 skill',
+      '点这一栏标题右侧的「同步」，把 .agents/skills 已启用的 skill 同步过来。'
+    ));
+    return;
+  }
+
+  skills.forEach((skill) => {
+    const item = document.createElement('article');
+    // 与 .agents/skills / 全局 / Hermes 同款结构：name + 来源徽标 + 路径 + 移除按钮。
+    item.className = 'enabled';
+    item.dataset.focusScope = '';
+    item.innerHTML = `
+      <div>
+        <div class="enabled-head">
+          <strong class="name"></strong>
+          <span class="tag-pill enabled-source"></span>
+        </div>
+        <p class="path"></p>
+      </div>
+      <div class="actions"></div>
+    `;
+    item.querySelector('.name').textContent = skill.alias;
+    item.querySelector('.path').textContent = skill.targetPath || (skill.isSymlink ? '断开的软链接' : '非软链接条目');
+
+    // Claude Code 软链的目标是某个 skill 原件；按 alias 找到来源后挂上 source 徽标，
+    // 视觉上与 .agents/skills 列表对齐（同源同名条目也能靠徽标区分）。
+    const sourceSkill = sourceSkills.find((s) => s.name === skill.alias);
+    const sourceChip = item.querySelector('.enabled-source');
+    if (sourceSkill) {
+      sourceChip.textContent = sourceSkill.source;
+      sourceChip.title = `${sourceSkill.collection} 来源`;
+      const description = sourceSkill.note || sourceSkill.description;
+      if (description) item.title = description;
+    } else {
+      sourceChip.hidden = true;
+    }
+
+    const button = document.createElement('button');
+    button.className = 'secondary danger';
+    button.type = 'button';
+    // 与 agents 列表一致：单条用「移除」。
+    button.textContent = '移除';
+    button.dataset.focusKey = `claude-remove:${skill.alias}`;
+    button.dataset.focusFallbackSelector = '#claudeSkillList [data-focus-key^="claude-remove:"]:not(:disabled)';
+    button.dataset.focusFallbackKey = 'enabled-search';
+    button.setAttribute('aria-label', `从 Claude Code 移除 ${skill.alias}`);
+    button.disabled = isPreview || !skill.isSymlink;
+    if (!skill.isSymlink) {
+      button.textContent = '不可移除';
+      button.title = '非软链接条目无法移除';
+      button.setAttribute('aria-label', `${skill.alias} 不是软链接，无法移除`);
+    }
+    if (isPreview) button.title = '预览模式只读：先在下方读取你自己的项目再操作';
+    button.addEventListener('click', () => onUnlink(skill.alias));
+    item.querySelector('.actions').append(button);
+    elements.claudeSkillList.append(item);
+  });
+}

package/public/emptyState.js

@@ -0,0 +1,12 @@
+// 空态统一在这里构造：先说明这是什么，再给下一步。
+// 只写「没有内容」的空态会让用户以为出了错，而不是知道该做什么。
+export function emptyState(title, detail) {
+  const element = document.createElement('div');
+  element.className = 'empty';
+
+  const heading = document.createElement('strong');
+  heading.textContent = title;
+  element.append(heading, document.createTextNode(detail));
+
+  return element;
+}

package/public/enabled.css

@@ -0,0 +1,303 @@
+/* 四个作用域是四个 agent 通道：项目级 Agents/Claude 并列，跨项目的全局与
+   按需出现的 Hermes 各自占满下一行。列表限高，确保全局通道不会被长列表推走。 */
+.enabled-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+  background: var(--surface-soft);
+  padding: 12px;
+}
+
+.enabled-column {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--scope-line, var(--hairline));
+  border-radius: var(--radius-md);
+  background: var(--scope-surface, var(--canvas));
+}
+
+.scope-agents {
+  --scope-surface: var(--scope-agents-surface);
+  --scope-line: var(--scope-agents-line);
+  --scope-ink: var(--scope-agents-ink);
+}
+
+.scope-claude {
+  --scope-surface: var(--scope-claude-surface);
+  --scope-line: var(--scope-claude-line);
+  --scope-ink: var(--scope-claude-ink);
+}
+
+.scope-global,
+.scope-hermes {
+  grid-column: 1 / -1;
+}
+
+.scope-global {
+  --scope-surface: var(--scope-global-surface);
+  --scope-line: var(--scope-global-line);
+  --scope-ink: var(--scope-global-ink);
+}
+
+.scope-hermes {
+  --scope-surface: var(--scope-hermes-surface);
+  --scope-line: var(--scope-hermes-line);
+  --scope-ink: var(--scope-hermes-ink);
+}
+
+.column-title {
+  display: flex;
+  min-height: 84px;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid var(--hairline);
+  padding: 14px 16px;
+}
+
+.enabled-toolbar {
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+  border-bottom: 1px solid var(--hairline);
+  background: var(--canvas);
+  padding: 12px 20px;
+}
+
+.enabled-search {
+  display: grid;
+  flex: 1 1 auto;
+  gap: 4px;
+  min-width: 0;
+}
+
+.enabled-search > span {
+  display: block;
+  color: var(--muted);
+  font: 500 12px/1.4 var(--sans);
+}
+
+.enabled-search input {
+  min-height: 36px;
+}
+
+.enabled-search-summary {
+  flex: 0 0 auto;
+  margin: 0 0 9px;
+  color: var(--muted-soft);
+  font: 12px/1.4 var(--mono);
+  white-space: nowrap;
+}
+
+/* 专属符号是通道的快速识别物；固定线宽与单色字体避免落入彩色 emoji 风格。 */
+.scope-icon {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  flex: 0 0 32px;
+  place-items: center;
+  border: 1px solid currentColor;
+  border-radius: 50%;
+  color: var(--scope-ink);
+  font: 18px/1 "Apple Symbols", "Segoe UI Symbol", sans-serif;
+}
+
+.scope-title-copy {
+  min-width: 0;
+}
+
+.scope-title-copy h3 {
+  color: var(--scope-ink);
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.scope-summary {
+  margin: 4px 0 0;
+  color: var(--muted);
+  font: 12px/1.45 var(--sans);
+}
+
+.scope-summary .count {
+  color: var(--scope-ink);
+}
+
+.scope-result {
+  color: var(--scope-ink);
+  font: 500 11px/1.4 var(--mono);
+  white-space: nowrap;
+}
+
+.column-title-actions {
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 批量动作固定在卡片底部，与通道身份、计数和说明分离。 */
+.column-title-actions button,
+.scope-card-footer > button.column-title-action {
+  height: 36px;
+  min-height: 36px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.scope-card-footer {
+  display: flex;
+  min-height: 58px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: auto;
+  border-top: 1px solid var(--hairline);
+  padding: 10px 12px;
+}
+
+.scope-card-footer code {
+  min-width: 0;
+  overflow: hidden;
+  color: var(--muted-soft);
+  font: 11px/1.4 var(--mono);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.count {
+  display: inline-block;
+  margin-left: 0;
+  border-radius: 999px;
+  background: var(--surface-card);
+  color: var(--ink);
+  padding: 2px 8px;
+  font: 500 12px/1.4 var(--sans);
+  font-variant-numeric: tabular-nums;
+  vertical-align: middle;
+}
+
+/* 列表行：四个段（.agents/skills、Claude Code、全局、Hermes）共用同一个 .enabled 组件。
+   之前 Claude Code 单独走 .claude-skill，导致没有「来源徽标」与项目列不齐。 */
+.list {
+  display: grid;
+  gap: 1px;
+  background: var(--hairline);
+  min-width: 0;
+}
+
+.list.compact {
+  max-height: 280px;
+  overflow-y: auto;
+  margin: 0;
+  scrollbar-color: var(--scroll-thumb) transparent;
+}
+
+.enabled {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  background: var(--canvas);
+  padding: 14px 16px;
+  min-width: 0;
+}
+
+.enabled-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.enabled-head .name {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  color: var(--body-strong);
+  font-weight: 500;
+}
+
+.enabled-source {
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: var(--surface-card);
+  color: var(--ink);
+  padding: 2px 8px;
+  font: 500 12px/1.4 var(--sans);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.enabled p {
+  display: none;
+  margin: 4px 0 0;
+  color: var(--muted);
+  font: 12px/1.45 var(--mono);
+  overflow-wrap: anywhere;
+}
+
+/* 路径默认隐藏（行高优先）；悬停/键盘聚焦展开——同名 skill 靠它区分来源。 */
+.enabled:hover p,
+.enabled:focus-within p {
+  display: block;
+}
+
+@media (max-width: 760px) {
+  .enabled-toolbar {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .enabled-search input {
+    min-height: 44px;
+  }
+
+  .enabled-search-summary {
+    margin: 0;
+  }
+
+  .enabled-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .scope-global,
+  .scope-hermes {
+    grid-column: auto;
+  }
+
+  .column-title-actions button,
+  .scope-card-footer > button.column-title-action {
+    min-height: 44px;
+  }
+
+  /* 触屏没有 hover：路径（同名 skill 的区分手段）常显。 */
+  .enabled p {
+    display: block;
+  }
+}
+
+@media (max-width: 520px) {
+  .scope-card-footer {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .scope-card-footer code {
+    white-space: normal;
+  }
+
+  .column-title-actions {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .column-title-actions button,
+  .scope-card-footer > button.column-title-action {
+    width: 100%;
+  }
+}

package/public/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="7" fill="#141413"/>
+  <rect x="15" y="7" width="2" height="18" rx="1" fill="#5db8a6"/>
+  <rect x="7" y="15" width="18" height="2" rx="1" fill="#5db8a6"/>
+</svg>

package/public/index.html

@@ -0,0 +1,199 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>SkillCaddy</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="stylesheet" href="/styles.css">
+    <link rel="stylesheet" href="/enabled.css">
+    <link rel="stylesheet" href="/claude.css">
+  </head>
+  <body>
+    <main class="shell">
+      <header class="topbar">
+        <div class="brand">
+          <span class="brand-mark" aria-hidden="true"></span>
+          <span>SkillCaddy</span>
+        </div>
+        <div class="topbar-actions">
+          <label class="topbar-toggle" title="在已启用面板和库操作里显示或隐藏 Hermes 段">
+            <input id="hermesToggle" type="checkbox" data-focus-key="hermes-toggle" aria-describedby="hermesToggleLabel">
+            <span class="topbar-toggle-track" aria-hidden="true"></span>
+            <span id="hermesToggleLabel" class="topbar-toggle-label">Hermes</span>
+          </label>
+          <span id="versionTag" class="version" aria-label="版本号"></span>
+          <a id="githubLink" class="topbar-link" href="https://github.com/chenweil/skillcaddy" target="_blank" rel="noreferrer noopener" data-focus-key="github-link" title="在 GitHub 查看 Skillcaddy" aria-label="在 GitHub 查看 Skillcaddy">
+            <svg class="github-icon" viewBox="0 0 16 16" aria-hidden="true">
+              <path fill="currentColor" d="M8 1.25a6.75 6.75 0 0 0-2.134 13.154c.337.062.46-.146.46-.324v-1.264c-1.872.407-2.267-.793-2.267-.793-.307-.78-.75-.988-.75-.988-.612-.418.046-.41.046-.41.677.048 1.034.695 1.034.695.602 1.031 1.578.733 1.963.56.061-.436.236-.733.429-.902-1.494-.17-3.065-.747-3.065-3.328 0-.735.263-1.336.694-1.806-.07-.17-.301-.855.066-1.782 0 0 .566-.181 1.856.69A6.45 6.45 0 0 1 8 4.53a6.47 6.47 0 0 1 1.69.228c1.29-.871 1.855-.69 1.855-.69.368.927.137 1.612.067 1.782.432.47.694 1.071.694 1.806 0 2.587-1.574 3.156-3.073 3.322.242.209.457.62.457 1.25v1.848c0 .18.122.389.464.323A6.75 6.75 0 0 0 8 1.25Z"/>
+            </svg>
+            <span class="topbar-link-label">GitHub</span>
+          </a>
+          <button id="refreshButton" class="icon-button" data-focus-key="refresh" title="刷新" aria-label="刷新">↻</button>
+        </div>
+      </header>
+
+      <section class="hero">
+        <div class="hero-copy">
+          <h1>把本地 skills 像产品资产一样管理。</h1>
+          <p class="lede">集中整理 official、github、personal 与 archived 来源，再把需要的 skill 安全启用到当前项目和 Claude Code。</p>
+        </div>
+        <div class="product-surface" aria-label="当前库状态">
+          <div class="surface-header">
+            <span></span>
+            <span></span>
+            <span></span>
+            <strong>skillcaddy/state</strong>
+          </div>
+          <div class="surface-grid">
+            <div>
+              <span>Skill 原件</span>
+              <strong id="heroTotalSkills">0</strong>
+            </div>
+            <div>
+              <span>Agents 启用</span>
+              <strong id="heroAgentsCount">0</strong>
+            </div>
+            <div>
+              <span>Claude Code 启用</span>
+              <strong id="heroClaudeCount">0</strong>
+            </div>
+          </div>
+          <p id="activeProject" class="surface-path">等待读取项目路径</p>
+        </div>
+      </section>
+
+      <form class="controls" id="controlsForm">
+        <label>
+          <span>目标项目路径</span>
+          <small class="field-hint">输入项目路径后点「添加项目」保存到下方历史，回车直接读取</small>
+          <input id="projectPath" type="text" data-focus-key="project-path" spellcheck="false" placeholder="/Users/your-name/projects/my-app">
+        </label>
+        <button id="addProject" class="secondary" type="button" data-focus-key="add-project" title="仅把路径存入下方历史，不读取">添加项目</button>
+        <button id="loadProject" type="submit" data-focus-key="load-project" title="读取该项目的启用状态（回车同效）">读取项目</button>
+        <div id="projectHistory" class="project-history" aria-label="历史项目"></div>
+      </form>
+
+      <section class="workspace">
+        <aside class="panel">
+          <div class="panel-title">
+            <div>
+              <h2>已启用</h2>
+            </div>
+            <span>Agent 通道</span>
+          </div>
+          <div class="enabled-toolbar">
+            <label class="enabled-search" for="enabledSearch">
+              <span>查找已启用</span>
+              <input id="enabledSearch" type="search" data-focus-key="enabled-search" placeholder="搜索名称或来源…" aria-label="搜索已启用的 skill" aria-controls="enabledList claudeSkillList globalList hermesList" autocomplete="off">
+            </label>
+            <p id="enabledSearchSummary" class="enabled-search-summary" role="status" aria-live="polite" hidden></p>
+          </div>
+          <div class="enabled-grid">
+            <section class="enabled-column scope-card scope-agents">
+              <div class="column-title">
+                <span class="scope-icon" aria-hidden="true">⚙</span>
+                <div class="scope-title-copy">
+                  <h3>Agents</h3>
+                  <p class="scope-summary"><strong id="agentsCount" class="count">0</strong> 已启用 · 当前项目直接使用 <span id="agentsResultCount" class="scope-result" hidden></span></p>
+                </div>
+              </div>
+              <div id="enabledList" class="list compact"></div>
+              <div class="scope-card-footer">
+                <code>.agents/skills</code>
+                <button id="disableAgents" class="secondary danger column-title-action" data-focus-key="agents-clear" data-focus-fallback-key="skill-search" title="一键清空 .agents/skills（数量见上方计数）" aria-label="一键清空 .agents/skills">批量清空</button>
+              </div>
+            </section>
+            <section class="enabled-column scope-card scope-claude">
+              <div class="column-title">
+                <span class="scope-icon" aria-hidden="true">⌬</span>
+                <div class="scope-title-copy">
+                  <h3>Claude Code</h3>
+                  <p class="scope-summary"><strong id="claudeCount" class="count">0</strong> 已启用 · 同步自 Agents <span id="claudeResultCount" class="scope-result" hidden></span></p>
+                </div>
+              </div>
+              <div id="claudeSkillList" class="list compact"></div>
+              <div class="scope-card-footer">
+                <code>.claude/skills</code>
+                <div class="column-title-actions">
+                  <button id="syncClaude" data-focus-key="claude-sync" title="把项目已启用的 skill 同步到 Claude Code">同步</button>
+                  <button id="unlinkClaude" class="secondary danger column-title-action" data-focus-key="claude-clear" data-focus-fallback-key="claude-sync" title="一键清空 Claude Code（数量见上方计数）" aria-label="一键清空 Claude Code">批量清空</button>
+                </div>
+              </div>
+            </section>
+            <section class="enabled-column scope-card scope-global">
+              <div class="column-title">
+                <span class="scope-icon" aria-hidden="true">⌂</span>
+                <div class="scope-title-copy">
+                  <h3>全局</h3>
+                  <p class="scope-summary"><strong id="globalCount" class="count">0</strong> 已启用 · 所有项目都能使用 <span id="globalResultCount" class="scope-result" hidden></span></p>
+                </div>
+              </div>
+              <div id="globalList" class="list compact"></div>
+              <div class="scope-card-footer">
+                <code>~/.agents/skills</code>
+                <button id="disableGlobal" class="secondary danger column-title-action" data-focus-key="global-clear" data-focus-fallback-key="skill-search" title="一键清空全局 .agents/skills（数量见上方计数）" aria-label="一键清空全局 .agents/skills">批量清空</button>
+              </div>
+            </section>
+            <section class="enabled-column scope-card scope-hermes" data-hermes-section>
+              <div class="column-title">
+                <span class="scope-icon" aria-hidden="true">⏣</span>
+                <div class="scope-title-copy">
+                  <h3>Hermes</h3>
+                  <p class="scope-summary"><strong id="hermesCount" class="count">0</strong> 已启用 · 仅适用于 Hermes <span id="hermesResultCount" class="scope-result" hidden></span></p>
+                </div>
+              </div>
+              <div id="hermesList" class="list compact"></div>
+              <div class="scope-card-footer">
+                <code>~/.hermes/skills</code>
+                <button id="disableHermes" class="secondary danger column-title-action" data-focus-key="hermes-clear" data-focus-fallback-key="skill-search" title="一键清空 Hermes ~/.hermes/skills（数量见上方计数）" aria-label="一键清空 Hermes ~/.hermes/skills">批量清空</button>
+              </div>
+            </section>
+          </div>
+        </aside>
+
+        <section class="panel library-panel">
+          <div class="panel-title">
+            <div>
+              <h2>Skill 原件库 <strong id="totalSkills" class="count">0</strong></h2>
+            </div>
+            <div class="library-title-actions">
+              <div class="advice-popover-anchor">
+                <button id="adviceToggle" class="advice-toggle" type="button" data-focus-key="advice-toggle" hidden aria-expanded="false" aria-controls="adviceList" title="查看提示">
+                  <svg class="advice-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <circle cx="8" cy="8" r="6.5" />
+                    <line x1="8" y1="7" x2="8" y2="11.5" />
+                    <circle cx="8" cy="4.5" r="0.6" fill="currentColor" stroke="none" />
+                  </svg>
+                  <span id="adviceCount" class="count">0</span>
+                </button>
+                <section id="adviceList" class="advice-list advice-popover" hidden role="dialog" aria-label="提示列表"></section>
+              </div>
+              <select id="sourceFilter" data-focus-key="source-filter" title="来源过滤">
+                <option value="">全部来源</option>
+                <option value="local">local</option>
+                <option value="official">official</option>
+                <option value="github">github</option>
+                <option value="personal">personal</option>
+                <option value="archived">archived</option>
+              </select>
+            </div>
+          </div>
+          <div class="library-search">
+            <input id="skillSearch" type="text" data-focus-key="skill-search" placeholder="搜索名称、描述或标签…（/ 聚焦，Esc 清除）" aria-label="搜索 skills" aria-keyshortcuts="/">
+          </div>
+          <!-- advice 已搬到右上角 popover；主工作流（搜索 → 标签 → 库）保持线性。 -->
+          <nav id="tagTabs" class="tag-tabs" aria-label="Skill 标签过滤"></nav>
+          <div id="skillList" class="list"></div>
+        </section>
+      </section>
+
+      <div class="message-region">
+        <p id="message" class="message" role="status"></p>
+        <p id="errorMessage" class="message is-error" role="alert"></p>
+      </div>
+    </main>
+
+    <script src="/app.js" type="module"></script>
+  </body>
+</html>