From f295fdf61001212b7984d9eb403bc80269f8699f Mon Sep 17 00:00:00 2001 From: yaojingang Date: Wed, 17 Jun 2026 02:05:45 +0800 Subject: [PATCH] Refine skill overview metrics layout --- assets/skill-overview.css | 39 ++++++++++++++++++-------- reports/skill-overview.html | 47 ++++++++++++++++++++++---------- scripts/render_skill_overview.py | 8 ++++-- tests/verify_skill_overview.py | 12 ++++++-- 4 files changed, 76 insertions(+), 30 deletions(-) diff --git a/assets/skill-overview.css b/assets/skill-overview.css index c1784a2..b626f5e 100644 --- a/assets/skill-overview.css +++ b/assets/skill-overview.css @@ -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; diff --git a/reports/skill-overview.html b/reports/skill-overview.html index 8f5fcf3..11fc901 100644 --- a/reports/skill-overview.html +++ b/reports/skill-overview.html @@ -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 @@
-
+
评分雷达Rating Radar完整度Completeness触发清晰Trigger clarity证据充分Evidence depth可维护性Maintainability可迁移性Portability
评分雷达展示结构完整度、触发边界、证据、维护和迁移的相对强弱。The radar chart compares completeness, trigger clarity, evidence, maintainability, and portability.

成熟度条Maturity Bar

+

这里把每个指标压缩为状态、分数和第一条证据，先给出整体判断，再进入下方明细。This compresses each metric into status, score, and the first evidence item before the detailed cards below.

  1. 稳定Stable完整度Completeness100SKILL.md 已存在，是 Skill 的入口。SKILL.md exists and acts as the skill entrypoint.
  2. 稳定Stable触发清晰Trigger clarity100frontmatter description 已存在，具备基础路由面。The frontmatter description exists, giving the skill a basic routing surface.
  3. 稳定Stable证据充分Evidence depth100已生成 20 / 20 类报告证据。Generated 20 / 20 evidence report types.
  4. 稳定Stable可维护性Maintainability100SKILL.md 约 360 个词/字。SKILL.md is about 360 words/characters.
  5. 稳定Stable可迁移性Portability100agents/interface.yaml 已存在。agents/interface.yaml exists.
  6. 关注Watch上下文成本Context cost42入口约 360 个词/字，references 约 16914 个词/字。Entrypoint is about 360 words/characters; references are about 16914.
-
完整度Completeness100
  • SKILL.md 已存在，是 Skill 的入口。SKILL.md exists and acts as the skill entrypoint.
  • README.md 已存在，便于人工阅读。README.md exists for human-readable usage.
  • agents/interface.yaml 已存在，便于跨平台适配。agents/interface.yaml exists for cross-platform adaptation.
触发清晰Trigger clarity100
  • frontmatter description 已存在，具备基础路由面。The frontmatter description exists, giving the skill a basic routing surface.
  • description 有足够长度说明任务边界。The description is long enough to explain the task boundary.
  • description 已包含使用场景或排除边界信号。The description includes usage-scenario or exclusion-boundary signals.
证据充分Evidence depth100
  • 已生成 20 / 20 类报告证据。Generated 20 / 20 evidence report types.
  • skill-ir.json 已存在。skill-ir.json exists.
  • compiled_targets.json 已存在。compiled_targets.json exists.
可维护性Maintainability100
  • SKILL.md 约 360 个词/字。SKILL.md is about 360 words/characters.
  • 入口文件保持克制，可维护性较好。The entrypoint stays restrained, which supports maintainability.
  • references/ 已承载扩展指导。references/ carries extended guidance.
可迁移性Portability100
  • agents/interface.yaml 已存在。agents/interface.yaml exists.
  • manifest.json 已存在。manifest.json exists.
  • 目标平台或 adapter target 已声明。Target platforms or adapter targets are declared.
上下文成本Context cost42
  • 入口约 360 个词/字，references 约 16914 个词/字。Entrypoint is about 360 words/characters; references are about 16914.
  • 分数越高代表上下文成本越低。A higher score means lower context cost.
  • 上下文成本偏高，建议压缩入口或拆分 references。Context cost is high; compress the entrypoint or split references further.
+
+
指标明细Metric Details
+
完整度Completeness100
  • SKILL.md 已存在，是 Skill 的入口。SKILL.md exists and acts as the skill entrypoint.
  • README.md 已存在，便于人工阅读。README.md exists for human-readable usage.
  • agents/interface.yaml 已存在，便于跨平台适配。agents/interface.yaml exists for cross-platform adaptation.
触发清晰Trigger clarity100
  • frontmatter description 已存在，具备基础路由面。The frontmatter description exists, giving the skill a basic routing surface.
  • description 有足够长度说明任务边界。The description is long enough to explain the task boundary.
  • description 已包含使用场景或排除边界信号。The description includes usage-scenario or exclusion-boundary signals.
证据充分Evidence depth100
  • 已生成 20 / 20 类报告证据。Generated 20 / 20 evidence report types.
  • skill-ir.json 已存在。skill-ir.json exists.
  • compiled_targets.json 已存在。compiled_targets.json exists.
可维护性Maintainability100
  • SKILL.md 约 360 个词/字。SKILL.md is about 360 words/characters.
  • 入口文件保持克制，可维护性较好。The entrypoint stays restrained, which supports maintainability.
  • references/ 已承载扩展指导。references/ carries extended guidance.
可迁移性Portability100
  • agents/interface.yaml 已存在。agents/interface.yaml exists.
  • manifest.json 已存在。manifest.json exists.
  • 目标平台或 adapter target 已声明。Target platforms or adapter targets are declared.
上下文成本Context cost42
  • 入口约 360 个词/字，references 约 16914 个词/字。Entrypoint is about 360 words/characters; references are about 16914.
  • 分数越高代表上下文成本越低。A higher score means lower context cost.
  • 上下文成本偏高，建议压缩入口或拆分 references。Context cost is high; compress the entrypoint or split references further.
+
diff --git a/scripts/render_skill_overview.py b/scripts/render_skill_overview.py index 58cff47..e14d7d0 100644 --- a/scripts/render_skill_overview.py +++ b/scripts/render_skill_overview.py @@ -378,14 +378,18 @@ def render_html(summary: dict) -> str:
-
+
{charts["radar"]}

{bi_span("成熟度条", "Maturity Bar")}

+

{bi_span("这里把每个指标压缩为状态、分数和第一条证据，先给出整体判断，再进入下方明细。", "This compresses each metric into status, score, and the first evidence item before the detailed cards below.")}

{render_metric_summary(scorecard)}
-
{render_metric_cards(scorecard)}
+
+
{bi_span("指标明细", "Metric Details")}
+
{render_metric_cards(scorecard)}
+
diff --git a/tests/verify_skill_overview.py b/tests/verify_skill_overview.py index 0041ef9..05d17b2 100644 --- a/tests/verify_skill_overview.py +++ b/tests/verify_skill_overview.py @@ -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]