html-artifact-report-skill/examples/executive-decision-brief/artifact.html at main · DeepCogNeural/html-artifact-report-skill · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="artifact-contract" content="artifact-report.v1">
<meta name="artifact-id" content="executive-decision-brief">
<title>Adopt the HTML Artifact Report Skill</title>
<style>
  :root {
    --ivory:#FAF9F5; --slate:#141413; --clay:#D97757; --oat:#E3DACC; --olive:#788C5D;
    --gray-100:#F0EEE6; --gray-300:#D1CFC5; --gray-500:#87867F; --gray-700:#3D3D3A; --white:#FFFFFF;
    --serif:ui-serif, Georgia, "Times New Roman", serif;
    --sans:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono:ui-monospace, "SF Mono", Menlo, Monaco, monospace;
  }
  * { box-sizing:border-box; }
  body { margin:0; padding:56px 32px 120px; background:var(--ivory); color:var(--gray-700); font-family:var(--sans); font-size:15px; line-height:1.62; }
  .page { max-width:1180px; margin:0 auto; }
  header { margin-bottom:10px; }
  .eyebrow { color:var(--gray-500); font-family:var(--mono); font-size:12px; letter-spacing:0; text-transform:uppercase; margin-bottom:12px; }
  h1,h2,h3 { color:var(--slate); font-family:var(--serif); font-weight:500; line-height:1.12; }
  h1 { margin:0 0 18px; font-size:38px; }
  h2 { margin:0; font-size:26px; }
  h3 { margin:0 0 8px; font-size:22px; }
  p { margin:0 0 12px; }
  code { background:var(--gray-100); border-radius:4px; color:var(--slate); font-family:var(--mono); font-size:.92em; padding:1px 5px; }
  .prompt-box,.card,.table-wrap,details { background:var(--white); border:1.5px solid var(--gray-300); border-radius:12px; }
  .prompt-box { padding:16px 20px; font-size:14.5px; }
  .tldr { background:var(--slate); border-radius:12px; color:var(--ivory); margin:10px 0 34px; padding:22px 26px; }
  .summary { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:60px; }
  .card { padding:18px 20px; }
  .k { color:var(--gray-500); font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:0; text-transform:uppercase; }
  .v { color:var(--slate); font-size:18px; font-weight:700; margin-top:6px; }
  section { margin-bottom:64px; scroll-margin-top:24px; }
  section:last-of-type { margin-bottom:0; }
  .sec-head { display:flex; align-items:baseline; gap:14px; margin-bottom:8px; }
  .num { background:var(--oat); border-radius:8px; color:var(--slate); font-family:var(--mono); font-size:12px; padding:3px 9px; }
  .sec-intro { color:var(--gray-500); font-size:14.5px; margin:0 0 26px; max-width:720px; }
  .diagram { background:var(--white); border:1.5px solid var(--gray-300); border-radius:12px; overflow-x:auto; padding:18px; }
  .diagram text { font-family:var(--sans); }
  .table-wrap { overflow-x:auto; }
  table { border-collapse:collapse; min-width:760px; width:100%; }
  th,td { border-bottom:1px solid var(--gray-300); padding:11px 12px; text-align:left; vertical-align:top; }
  th { background:var(--gray-100); color:var(--gray-700); font-size:12px; text-transform:uppercase; }
  details { margin:14px 0; padding:14px 16px; }
  summary { color:var(--clay); cursor:pointer; font-weight:700; }
  pre { background:var(--slate); border-radius:10px; color:var(--ivory); overflow-x:auto; padding:14px 16px; }
  button[data-copy] { background:var(--slate); border:0; border-radius:7px; color:var(--ivory); cursor:pointer; font:700 12px var(--sans); padding:8px 10px; }
</style>
</head>
<body>
<div class="page">
  <header>
    <div class="eyebrow">Skill · Executive decision · 2026-06-08</div>
    <h1>Adopt the HTML Artifact Report Skill</h1>
    <div class="prompt-box">Decision brief for publishing v1 as a standalone clean-room skill repository.</div>
  </header>
  <main>
    <div class="tldr" data-component-id="cmp-tldr"><strong>TL;DR:</strong> Ship v1 as a standalone MIT skill repository because the scope is narrow, the dual-output contract is testable, and the licensing boundary is explicit.</div>
    <div class="summary" aria-label="summary" data-component-id="cmp-summary">
      <div class="card"><div class="k">Decision</div><div class="v">Ship v1</div></div>
      <div class="card"><div class="k">Evidence</div><div class="v">3 layers</div></div>
      <div class="card"><div class="k">Risk</div><div class="v">Drift</div></div>
      <div class="card"><div class="k">Next</div><div class="v">Publish</div></div>
    </div>
    <section data-section-id="decision">
      <div class="sec-head"><div class="num">01</div><div><h2>Decision</h2></div></div>
      <p class="sec-intro">The repository should start as a skill-first artifact contract, not as an app.</p>
      <div class="diagram" data-component-id="cmp-flow">
        <svg viewBox="0 0 760 150" role="img" aria-label="Source to artifact flow">
          <defs><marker id="arrow" markerWidth="8" markerHeight="8" refX="7" refY="4" orient="auto"><path d="M0,0 L8,4 L0,8 Z" fill="#D97757"></path></marker></defs>
          <rect x="28" y="42" width="160" height="64" rx="10" fill="#FFFFFF" stroke="#D1CFC5"></rect><text x="54" y="78" font-size="15" font-weight="700">Notes</text>
          <line x1="188" y1="74" x2="292" y2="74" stroke="#D97757" stroke-width="2" marker-end="url(#arrow)"></line>
          <rect x="294" y="42" width="170" height="64" rx="10" fill="#FFFFFF" stroke="#D1CFC5"></rect><text x="320" y="78" font-size="15" font-weight="700">Manifest</text>
          <line x1="464" y1="74" x2="566" y2="74" stroke="#D97757" stroke-width="2" marker-end="url(#arrow)"></line>
          <rect x="568" y="42" width="160" height="64" rx="10" fill="#FFF7F3" stroke="#D97757"></rect><text x="594" y="78" font-size="15" font-weight="700">HTML report</text>
        </svg>
      </div>
    </section>
    <section data-section-id="evidence">
      <div class="sec-head"><div class="num">02</div><div><h2>Evidence</h2></div></div>
      <p class="sec-intro">The project has a tight v1 surface and explicit checks.</p>
      <details data-component-id="cmp-raw-evidence">
        <summary>Evidence table</summary>
        <div class="table-wrap" data-component-id="cmp-evidence-table">
          <table><thead><tr><th>Signal</th><th>Result</th><th>Meaning</th></tr></thead><tbody>
            <tr><td>Scope</td><td>One canonical profile</td><td>Low maintenance surface</td></tr>
            <tr><td>Contract</td><td>HTML plus JSON</td><td>Human and agent needs are separated</td></tr>
            <tr><td>Checks</td><td>Static plus cross-file</td><td>Drift is caught before release</td></tr>
          </tbody></table>
        </div>
      </details>
    </section>
    <section data-section-id="verification">
      <div class="sec-head"><div class="num">03</div><div><h2>Verification</h2></div></div>
      <p class="sec-intro">The same repository scripts validate this example.</p>
      <details data-component-id="cmp-commands"><summary>Reusable commands</summary><button data-copy="#commands">Copy</button><pre id="commands">python3 scripts/check_examples.py
python3 -m unittest discover -s tests</pre></details>
    </section>
    <section data-section-id="next-action">
      <div class="sec-head"><div class="num">04</div><div><h2>Next Action</h2></div></div>
      <p class="sec-intro">Initialize, commit, and publish after review.</p>
      <div class="card" data-component-id="cmp-limitations"><div class="k">Limitations</div><p>This static example does not prove downstream marketplace installation yet.</p></div>
    </section>
  </main>
</div>
<script>document.querySelectorAll("button[data-copy]").forEach((button)=>{button.addEventListener("click",async()=>{const target=document.querySelector(button.getAttribute("data-copy"));if(!target)return;await navigator.clipboard.writeText(target.textContent.trim());const old=button.textContent;button.textContent="Copied";setTimeout(()=>{button.textContent=old;},1200);});});</script>
</body>
</html>