frostbyte_neo/yao-meta-skill
1
0
Fork 0
Code Issues Pull Requests Actions Deployments Models Agent Notes Packages Projects Releases Wiki Activity

Refine skill overview metrics layout

Browse Source
This commit is contained in:
yaojingang
2026-06-17 02:05:45 +08:00
parent f7f3c7c806
commit f295fdf610
4 changed files with 76 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/skill-overview.css
+27 -12
View File
@@ -343,12 +343,12 @@
}
.metrics-flow {
display: grid;
gap: 24px;
gap: 30px;
}
.metrics-primary {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
gap: 18px;
grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
gap: 22px;
align-items: start;
}
.metrics-primary .chart-figure {
@@ -362,7 +362,7 @@
.metrics-note {
display: grid;
align-content: start;
gap: 16px;
gap: 14px;
}
.metrics-note p {
margin: 0;
@@ -401,6 +401,21 @@
line-height: 1.5;
overflow-wrap: break-word;
}
.metric-detail-section {
display: grid;
gap: 14px;
}
.detail-section-kicker {
display: inline-flex;
width: fit-content;
min-height: 28px;
align-items: center;
padding: 3px 8px;
border-radius: 6px;
background: var(--brand-soft);
color: var(--brand);
font-size: 12px;
}
.metric-status {
display: inline-flex;
align-items: center;
@@ -412,7 +427,7 @@
font-size: 12px;
}
.metric-detail-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
grid-template-columns: repeat(2, minmax(min(100%, 420px), 1fr));
align-items: stretch;
}
.list, .compact-list, .step-list {
@@ -442,16 +457,15 @@
}
.metric-card {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
grid-template-columns: minmax(112px, 0.28fr) minmax(0, 1fr);
gap: 18px;
align-content: start;
min-height: 0;
}
.metric-card-head {
display: flex;
gap: 14px;
align-items: flex-start;
justify-content: space-between;
display: grid;
gap: 10px;
align-content: start;
}
.metric-card strong {
display: block;
@@ -467,13 +481,14 @@
color: var(--muted);
font-size: 13px;
line-height: 1.45;
overflow-wrap: break-word;
}
.metric-card-body {
min-width: 0;
}
.metric-card-body .compact-list {
gap: 7px;
max-width: 62ch;
max-width: 76ch;
}
.metric-card-body .compact-list li {
overflow-wrap: break-word;
reports/skill-overview.html
+33 -14
View File
@@ -350,12 +350,12 @@
}
.metrics-flow {
display: grid;
gap: 24px;
gap: 30px;
}
.metrics-primary {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
gap: 18px;
grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
gap: 22px;
align-items: start;
}
.metrics-primary .chart-figure {
@@ -369,7 +369,7 @@
.metrics-note {
display: grid;
align-content: start;
gap: 16px;
gap: 14px;
}
.metrics-note p {
margin: 0;
@@ -408,6 +408,21 @@
line-height: 1.5;
overflow-wrap: break-word;
}
.metric-detail-section {
display: grid;
gap: 14px;
}
.detail-section-kicker {
display: inline-flex;
width: fit-content;
min-height: 28px;
align-items: center;
padding: 3px 8px;
border-radius: 6px;
background: var(--brand-soft);
color: var(--brand);
font-size: 12px;
}
.metric-status {
display: inline-flex;
align-items: center;
@@ -419,7 +434,7 @@
font-size: 12px;
}
.metric-detail-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
grid-template-columns: repeat(2, minmax(min(100%, 420px), 1fr));
align-items: stretch;
}
.list, .compact-list, .step-list {
@@ -449,16 +464,15 @@
}
.metric-card {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
grid-template-columns: minmax(112px, 0.28fr) minmax(0, 1fr);
gap: 18px;
align-content: start;
min-height: 0;
}
.metric-card-head {
display: flex;
gap: 14px;
align-items: flex-start;
justify-content: space-between;
display: grid;
gap: 10px;
align-content: start;
}
.metric-card strong {
display: block;
@@ -474,13 +488,14 @@
color: var(--muted);
font-size: 13px;
line-height: 1.45;
overflow-wrap: break-word;
}
.metric-card-body {
min-width: 0;
}
.metric-card-body .compact-list {
gap: 7px;
max-width: 62ch;
max-width: 76ch;
}
.metric-card-body .compact-list li {
overflow-wrap: break-word;
@@ -787,14 +802,18 @@
</div>
<div class="section-body metrics-report">
<div class="metrics-flow">
<div class="metrics-primary">
<div class="metrics-primary" aria-label="指标图表与成熟度摘要">
<figure class="chart-figure" data-chart="radar"><svg viewBox="0 0 300 300" role="img" aria-label="评分雷达"><text data-lang="zh-CN" x="20" y="28" class="chart-title">评分雷达</text><text data-lang="en" x="20" y="28" class="chart-title">Rating Radar</text><polygon points="150.0,127.0 171.9,142.9 163.5,168.6 136.5,168.6 128.1,142.9" fill="none" stroke="#e8e6dc" stroke-width="1"/><polygon points="150.0,104.0 193.7,135.8 177.0,187.2 123.0,187.2 106.3,135.8" fill="none" stroke="#e8e6dc" stroke-width="1"/><polygon points="150.0,81.0 215.6,128.7 190.6,205.8 109.4,205.8 84.4,128.7" fill="none" stroke="#e8e6dc" stroke-width="1"/><polygon points="150.0,58.0 237.5,121.6 204.1,224.4 95.9,224.4 62.5,121.6" fill="none" stroke="#e8e6dc" stroke-width="1"/><polygon points="150.0,58.0 237.5,121.6 204.1,224.4 95.9,224.4 62.5,121.6" fill="#E4ECF5" stroke="#1B365D" stroke-width="2"/><text data-lang="zh-CN" x="150.0" y="26.0" text-anchor="middle" dominant-baseline="middle">完整度</text><text data-lang="en" x="150.0" y="26.0" text-anchor="middle" dominant-baseline="middle">Completeness</text><text data-lang="zh-CN" x="267.9" y="111.7" text-anchor="middle" dominant-baseline="middle">触发清晰</text><text data-lang="en" x="267.9" y="111.7" text-anchor="middle" dominant-baseline="middle">Trigger clarity</text><text data-lang="zh-CN" x="222.9" y="250.3" text-anchor="middle" dominant-baseline="middle">证据充分</text><text data-lang="en" x="222.9" y="250.3" text-anchor="middle" dominant-baseline="middle">Evidence depth</text><text data-lang="zh-CN" x="77.1" y="250.3" text-anchor="middle" dominant-baseline="middle">可维护性</text><text data-lang="en" x="77.1" y="250.3" text-anchor="middle" dominant-baseline="middle">Maintainability</text><text data-lang="zh-CN" x="32.1" y="111.7" text-anchor="middle" dominant-baseline="middle">可迁移性</text><text data-lang="en" x="32.1" y="111.7" text-anchor="middle" dominant-baseline="middle">Portability</text></svg><figcaption><span data-lang="zh-CN">评分雷达展示结构完整度、触发边界、证据、维护和迁移的相对强弱。</span><span data-lang="en">The radar chart compares completeness, trigger clarity, evidence, maintainability, and portability.</span></figcaption></figure>
<article class="panel metrics-note metrics-summary-panel">
<h3><span data-lang="zh-CN">成熟度条</span><span data-lang="en">Maturity Bar</span></h3>
<p><span data-lang="zh-CN">这里把每个指标压缩为状态、分数和第一条证据，先给出整体判断，再进入下方明细。</span><span data-lang="en">This compresses each metric into status, score, and the first evidence item before the detailed cards below.</span></p>
<ol class='metric-summary-list'><li><span class='metric-status'><span data-lang="zh-CN">稳定</span><span data-lang="en">Stable</span></span><b><span data-lang="zh-CN">完整度</span><span data-lang="en">Completeness</span></b><em>100</em><small><span data-lang="zh-CN">SKILL.md 已存在，是 Skill 的入口。</span><span data-lang="en">SKILL.md exists and acts as the skill entrypoint.</span></small></li><li><span class='metric-status'><span data-lang="zh-CN">稳定</span><span data-lang="en">Stable</span></span><b><span data-lang="zh-CN">触发清晰</span><span data-lang="en">Trigger clarity</span></b><em>100</em><small><span data-lang="zh-CN">frontmatter description 已存在，具备基础路由面。</span><span data-lang="en">The frontmatter description exists, giving the skill a basic routing surface.</span></small></li><li><span class='metric-status'><span data-lang="zh-CN">稳定</span><span data-lang="en">Stable</span></span><b><span data-lang="zh-CN">证据充分</span><span data-lang="en">Evidence depth</span></b><em>100</em><small><span data-lang="zh-CN">已生成 20 / 20 类报告证据。</span><span data-lang="en">Generated 20 / 20 evidence report types.</span></small></li><li><span class='metric-status'><span data-lang="zh-CN">稳定</span><span data-lang="en">Stable</span></span><b><span data-lang="zh-CN">可维护性</span><span data-lang="en">Maintainability</span></b><em>100</em><small><span data-lang="zh-CN">SKILL.md 约 360 个词/字。</span><span data-lang="en">SKILL.md is about 360 words/characters.</span></small></li><li><span class='metric-status'><span data-lang="zh-CN">稳定</span><span data-lang="en">Stable</span></span><b><span data-lang="zh-CN">可迁移性</span><span data-lang="en">Portability</span></b><em>100</em><small><span data-lang="zh-CN">agents/interface.yaml 已存在。</span><span data-lang="en">agents/interface.yaml exists.</span></small></li><li><span class='metric-status'><span data-lang="zh-CN">关注</span><span data-lang="en">Watch</span></span><b><span data-lang="zh-CN">上下文成本</span><span data-lang="en">Context cost</span></b><em>42</em><small><span data-lang="zh-CN">入口约 360 个词/字，references 约 16914 个词/字。</span><span data-lang="en">Entrypoint is about 360 words/characters; references are about 16914.</span></small></li></ol>
</article>
</div>
<div class="metric-grid metric-detail-grid"><article class='metric-card'><div class='metric-card-head'><span class='metric-label'><span data-lang="zh-CN">完整度</span><span data-lang="en">Completeness</span></span><strong>100</strong></div><div class='metric-card-body'><ul class="compact-list"><li><span data-lang="zh-CN">SKILL.md 已存在，是 Skill 的入口。</span><span data-lang="en">SKILL.md exists and acts as the skill entrypoint.</span></li><li><span data-lang="zh-CN">README.md 已存在，便于人工阅读。</span><span data-lang="en">README.md exists for human-readable usage.</span></li><li><span data-lang="zh-CN">agents/interface.yaml 已存在，便于跨平台适配。</span><span data-lang="en">agents/interface.yaml exists for cross-platform adaptation.</span></li></ul></div></article><article class='metric-card'><div class='metric-card-head'><span class='metric-label'><span data-lang="zh-CN">触发清晰</span><span data-lang="en">Trigger clarity</span></span><strong>100</strong></div><div class='metric-card-body'><ul class="compact-list"><li><span data-lang="zh-CN">frontmatter description 已存在，具备基础路由面。</span><span data-lang="en">The frontmatter description exists, giving the skill a basic routing surface.</span></li><li><span data-lang="zh-CN">description 有足够长度说明任务边界。</span><span data-lang="en">The description is long enough to explain the task boundary.</span></li><li><span data-lang="zh-CN">description 已包含使用场景或排除边界信号。</span><span data-lang="en">The description includes usage-scenario or exclusion-boundary signals.</span></li></ul></div></article><article class='metric-card'><div class='metric-card-head'><span class='metric-label'><span data-lang="zh-CN">证据充分</span><span data-lang="en">Evidence depth</span></span><strong>100</strong></div><div class='metric-card-body'><ul class="compact-list"><li><span data-lang="zh-CN">已生成 20 / 20 类报告证据。</span><span data-lang="en">Generated 20 / 20 evidence report types.</span></li><li><span data-lang="zh-CN">skill-ir.json 已存在。</span><span data-lang="en">skill-ir.json exists.</span></li><li><span data-lang="zh-CN">compiled_targets.json 已存在。</span><span data-lang="en">compiled_targets.json exists.</span></li></ul></div></article><article class='metric-card'><div class='metric-card-head'><span class='metric-label'><span data-lang="zh-CN">可维护性</span><span data-lang="en">Maintainability</span></span><strong>100</strong></div><div class='metric-card-body'><ul class="compact-list"><li><span data-lang="zh-CN">SKILL.md 约 360 个词/字。</span><span data-lang="en">SKILL.md is about 360 words/characters.</span></li><li><span data-lang="zh-CN">入口文件保持克制，可维护性较好。</span><span data-lang="en">The entrypoint stays restrained, which supports maintainability.</span></li><li><span data-lang="zh-CN">references/ 已承载扩展指导。</span><span data-lang="en">references/ carries extended guidance.</span></li></ul></div></article><article class='metric-card'><div class='metric-card-head'><span class='metric-label'><span data-lang="zh-CN">可迁移性</span><span data-lang="en">Portability</span></span><strong>100</strong></div><div class='metric-card-body'><ul class="compact-list"><li><span data-lang="zh-CN">agents/interface.yaml 已存在。</span><span data-lang="en">agents/interface.yaml exists.</span></li><li><span data-lang="zh-CN">manifest.json 已存在。</span><span data-lang="en">manifest.json exists.</span></li><li><span data-lang="zh-CN">目标平台或 adapter target 已声明。</span><span data-lang="en">Target platforms or adapter targets are declared.</span></li></ul></div></article><article class='metric-card'><div class='metric-card-head'><span class='metric-label'><span data-lang="zh-CN">上下文成本</span><span data-lang="en">Context cost</span></span><strong>42</strong></div><div class='metric-card-body'><ul class="compact-list"><li><span data-lang="zh-CN">入口约 360 个词/字，references 约 16914 个词/字。</span><span data-lang="en">Entrypoint is about 360 words/characters; references are about 16914.</span></li><li><span data-lang="zh-CN">分数越高代表上下文成本越低。</span><span data-lang="en">A higher score means lower context cost.</span></li><li><span data-lang="zh-CN">上下文成本偏高，建议压缩入口或拆分 references。</span><span data-lang="en">Context cost is high; compress the entrypoint or split references further.</span></li></ul></div></article></div>
<div class="metric-detail-section">
<div class="detail-section-kicker"><span data-lang="zh-CN">指标明细</span><span data-lang="en">Metric Details</span></div>
<div class="metric-grid metric-detail-grid"><article class='metric-card'><div class='metric-card-head'><span class='metric-label'><span data-lang="zh-CN">完整度</span><span data-lang="en">Completeness</span></span><strong>100</strong></div><div class='metric-card-body'><ul class="compact-list"><li><span data-lang="zh-CN">SKILL.md 已存在，是 Skill 的入口。</span><span data-lang="en">SKILL.md exists and acts as the skill entrypoint.</span></li><li><span data-lang="zh-CN">README.md 已存在，便于人工阅读。</span><span data-lang="en">README.md exists for human-readable usage.</span></li><li><span data-lang="zh-CN">agents/interface.yaml 已存在，便于跨平台适配。</span><span data-lang="en">agents/interface.yaml exists for cross-platform adaptation.</span></li></ul></div></article><article class='metric-card'><div class='metric-card-head'><span class='metric-label'><span data-lang="zh-CN">触发清晰</span><span data-lang="en">Trigger clarity</span></span><strong>100</strong></div><div class='metric-card-body'><ul class="compact-list"><li><span data-lang="zh-CN">frontmatter description 已存在，具备基础路由面。</span><span data-lang="en">The frontmatter description exists, giving the skill a basic routing surface.</span></li><li><span data-lang="zh-CN">description 有足够长度说明任务边界。</span><span data-lang="en">The description is long enough to explain the task boundary.</span></li><li><span data-lang="zh-CN">description 已包含使用场景或排除边界信号。</span><span data-lang="en">The description includes usage-scenario or exclusion-boundary signals.</span></li></ul></div></article><article class='metric-card'><div class='metric-card-head'><span class='metric-label'><span data-lang="zh-CN">证据充分</span><span data-lang="en">Evidence depth</span></span><strong>100</strong></div><div class='metric-card-body'><ul class="compact-list"><li><span data-lang="zh-CN">已生成 20 / 20 类报告证据。</span><span data-lang="en">Generated 20 / 20 evidence report types.</span></li><li><span data-lang="zh-CN">skill-ir.json 已存在。</span><span data-lang="en">skill-ir.json exists.</span></li><li><span data-lang="zh-CN">compiled_targets.json 已存在。</span><span data-lang="en">compiled_targets.json exists.</span></li></ul></div></article><article class='metric-card'><div class='metric-card-head'><span class='metric-label'><span data-lang="zh-CN">可维护性</span><span data-lang="en">Maintainability</span></span><strong>100</strong></div><div class='metric-card-body'><ul class="compact-list"><li><span data-lang="zh-CN">SKILL.md 约 360 个词/字。</span><span data-lang="en">SKILL.md is about 360 words/characters.</span></li><li><span data-lang="zh-CN">入口文件保持克制，可维护性较好。</span><span data-lang="en">The entrypoint stays restrained, which supports maintainability.</span></li><li><span data-lang="zh-CN">references/ 已承载扩展指导。</span><span data-lang="en">references/ carries extended guidance.</span></li></ul></div></article><article class='metric-card'><div class='metric-card-head'><span class='metric-label'><span data-lang="zh-CN">可迁移性</span><span data-lang="en">Portability</span></span><strong>100</strong></div><div class='metric-card-body'><ul class="compact-list"><li><span data-lang="zh-CN">agents/interface.yaml 已存在。</span><span data-lang="en">agents/interface.yaml exists.</span></li><li><span data-lang="zh-CN">manifest.json 已存在。</span><span data-lang="en">manifest.json exists.</span></li><li><span data-lang="zh-CN">目标平台或 adapter target 已声明。</span><span data-lang="en">Target platforms or adapter targets are declared.</span></li></ul></div></article><article class='metric-card'><div class='metric-card-head'><span class='metric-label'><span data-lang="zh-CN">上下文成本</span><span data-lang="en">Context cost</span></span><strong>42</strong></div><div class='metric-card-body'><ul class="compact-list"><li><span data-lang="zh-CN">入口约 360 个词/字，references 约 16914 个词/字。</span><span data-lang="en">Entrypoint is about 360 words/characters; references are about 16914.</span></li><li><span data-lang="zh-CN">分数越高代表上下文成本越低。</span><span data-lang="en">A higher score means lower context cost.</span></li><li><span data-lang="zh-CN">上下文成本偏高，建议压缩入口或拆分 references。</span><span data-lang="en">Context cost is high; compress the entrypoint or split references further.</span></li></ul></div></article></div>
</div>
</div>
</div>
</section>
scripts/render_skill_overview.py
+6 -2
View File
@@ -378,14 +378,18 @@ def render_html(summary: dict) -> str:
</div>
<div class="section-body metrics-report">
<div class="metrics-flow">
<div class="metrics-primary">
<div class="metrics-primary" aria-label="指标图表与成熟度摘要">
{charts["radar"]}
<article class="panel metrics-note metrics-summary-panel">
<h3>{bi_span("成熟度条", "Maturity Bar")}</h3>
<p>{bi_span("这里把每个指标压缩为状态、分数和第一条证据，先给出整体判断，再进入下方明细。", "This compresses each metric into status, score, and the first evidence item before the detailed cards below.")}</p>
{render_metric_summary(scorecard)}
</article>
</div>
<div class="metric-grid metric-detail-grid">{render_metric_cards(scorecard)}</div>
<div class="metric-detail-section">
<div class="detail-section-kicker">{bi_span("指标明细", "Metric Details")}</div>
<div class="metric-grid metric-detail-grid">{render_metric_cards(scorecard)}</div>
</div>
</div>
</div>
</section>
tests/verify_skill_overview.py
+10 -2
View File
@@ -52,10 +52,14 @@ def main() -> None:
assert ".metrics-primary" in css_contract, css_contract[:7000]
assert ".metrics-flow" in css_contract, css_contract[:9000]
assert ".metric-detail-grid" in css_contract, css_contract[:9000]
assert ".metric-detail-section" in css_contract, css_contract[:9000]
assert ".detail-section-kicker" in css_contract, css_contract[:9000]
assert ".section-head {\n display: grid;\n grid-template-columns: minmax(0, 1fr);" in css_contract, css_contract[:7000]
assert "grid-template-columns: minmax(0, 246px) minmax(0, 1fr)" not in css_contract, css_contract[:7000]
assert ".metrics-primary {\n display: grid;\n grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);" in css_contract, css_contract[:9000]
assert ".metric-detail-grid {\n grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));" in css_contract, css_contract[:9000]
assert ".metrics-primary {\n display: grid;\n grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);" in css_contract, css_contract[:9000]
assert ".metric-detail-grid {\n grid-template-columns: repeat(2, minmax(min(100%, 420px), 1fr));" in css_contract, css_contract[:9000]
assert ".metric-card {\n display: grid;\n grid-template-columns: minmax(112px, 0.28fr) minmax(0, 1fr);" in css_contract, css_contract[:11000]
assert "repeat(auto-fit, minmax(min(100%, 320px), 1fr))" not in css_contract, css_contract[:9000]
assert "grid-template-columns: minmax(420px, 1fr)" not in css_contract, css_contract[:9000]
assert "overflow-wrap: break-word" in css_contract, css_contract[:9000]
assert ".metrics-primary, .metric-detail-grid, .two-col" in css_contract, css_contract[-2600:]
@@ -292,7 +296,11 @@ def main() -> None:
assert 'class="section-body metrics-report"' in report_html, report_html[:9000]
assert 'class="metrics-flow"' in report_html, report_html[:9000]
assert 'class="metrics-primary"' in report_html, report_html[:9000]
assert 'aria-label="指标图表与成熟度摘要"' in report_html, report_html[:9000]
assert 'class="metrics-stack"' not in report_html, report_html[:9000]
assert 'class="metric-detail-section"' in report_html, report_html[:12000]
assert 'class="detail-section-kicker"' in report_html, report_html[:12000]
assert "指标明细" in report_html, report_html[:12000]
assert 'class="metric-grid metric-detail-grid"' in report_html, report_html[:12000]
assert report_html.index('class="metrics-primary"') < report_html.index('class="metric-grid metric-detail-grid"'), report_html[:12000]
assert "class='metric-summary-list'" in report_html, report_html[:9000]