From 2e05edc399b7d9b43a3761ba25d1e3961017d56a Mon Sep 17 00:00:00 2001
From: Lliar-liar <1169523200@qq.com>
Date: Sun, 24 May 2026 18:18:36 +0000
Subject: [PATCH] Add project links and citation section

---
 README.md     |   5 +-
 index.html    | 133 ++++++++++++++++++++++++++++++++++++++++++++++++++
 skillopt.html | 133 ++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 270 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 26bba03..6a9e59c 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,10 @@
 
 *Train agent skills like you train neural networks — with epochs, learning rates, and validation gates — but without touching model weights.*
 
+[Project page](https://microsoft.github.io/SkillOpt/) · [Paper](https://microsoft.github.io/SkillOpt/#paper) · [Project video](https://youtu.be/JUBMDTCiM0M)
+
+[![SkillOpt project video](https://img.youtube.com/vi/JUBMDTCiM0M/maxresdefault.jpg)](https://youtu.be/JUBMDTCiM0M)
+
 ---
 
 ## What is SkillOpt?
@@ -414,4 +418,3 @@ For SWEBench, you also need a working Docker environment plus the SWE-bench harn
 }
 ```
 
-
diff --git a/index.html b/index.html
index 839a654..4f68c93 100644
--- a/index.html
+++ b/index.html
@@ -213,6 +213,12 @@
       border-color: rgba(248, 250, 247, 0.48);
     }
 
+    .button.tertiary {
+      color: #111820;
+      background: var(--gold);
+      border-color: var(--gold);
+    }
+
     .hero-ledger {
       position: relative;
       overflow: hidden;
@@ -1178,6 +1184,80 @@
       font-size: 0.92rem;
     }
 
+    .resource-panel {
+      display: grid;
+      grid-template-columns: minmax(0, 0.75fr) minmax(280px, 0.55fr);
+      gap: 18px;
+      align-items: stretch;
+    }
+
+    .resource-card,
+    .citation-panel {
+      padding: 22px;
+      background: rgba(255, 255, 255, 0.72);
+      border: 1px solid var(--line);
+      border-radius: 8px;
+    }
+
+    .resource-card h3,
+    .citation-panel h3 {
+      margin: 0 0 10px;
+      font-family: var(--display);
+      font-size: 1.4rem;
+      line-height: 1.05;
+    }
+
+    .resource-card p,
+    .citation-panel p {
+      margin: 0;
+      color: var(--muted);
+      line-height: 1.55;
+    }
+
+    .resource-links {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 18px;
+    }
+
+    .resource-link {
+      display: inline-flex;
+      align-items: center;
+      min-height: 38px;
+      padding: 8px 12px;
+      color: var(--ink);
+      background: var(--paper);
+      border: 1px solid var(--line-strong);
+      border-radius: 6px;
+      font-family: var(--mono);
+      font-size: 0.76rem;
+      font-weight: 700;
+      text-decoration: none;
+    }
+
+    .resource-link.primary {
+      color: #f8faf7;
+      background: var(--black);
+      border-color: var(--black);
+    }
+
+    .citation-box {
+      overflow-x: auto;
+      margin: 16px 0 0;
+      padding: 16px;
+      color: #f8faf7;
+      background: var(--black);
+      border-radius: 8px;
+    }
+
+    .citation-box code {
+      font-family: var(--mono);
+      font-size: 0.74rem;
+      line-height: 1.55;
+      white-space: pre;
+    }
+
     .footer {
       margin-top: 80px;
       padding: 32px 0 44px;
@@ -1191,6 +1271,12 @@
       flex-wrap: wrap;
     }
 
+    .footer a {
+      color: inherit;
+      text-decoration-color: var(--line-strong);
+      text-underline-offset: 3px;
+    }
+
     @media (max-width: 980px) {
       .topbar {
         position: static;
@@ -1213,6 +1299,7 @@
       .manifesto,
       .teaser-heading,
       .section-header,
+      .resource-panel,
       .evolution-shell {
         grid-template-columns: 1fr;
       }
@@ -1334,6 +1421,9 @@
       <a href="#ablations">Ablations</a>
       <a href="#evolution">Evolution</a>
       <a href="#transfer">Transfer</a>
+      <a href="#paper">Paper</a>
+      <a href="#citation">Citation</a>
+      <a href="https://github.com/microsoft/SkillOpt" target="_blank" rel="noopener">Code</a>
     </nav>
   </header>
 
@@ -1352,6 +1442,8 @@
           <a class="button primary" href="#idea">Core Idea</a>
           <a class="button secondary" href="#method">Method</a>
           <a class="button secondary" href="#results">View Results</a>
+          <a class="button tertiary" href="https://github.com/microsoft/SkillOpt" target="_blank" rel="noopener">Code Repo</a>
+          <a class="button secondary" href="#paper">Paper</a>
         </div>
       </div>
 
@@ -1933,8 +2025,49 @@
       </div>
     </section>
 
+    <section class="section" id="paper">
+      <div class="section-header">
+        <div class="section-eyebrow">07 / Links</div>
+        <div>
+          <h2>Paper, code, and citation.</h2>
+          <p class="section-lede">
+            The code repository is public. The paper link is reserved here and will
+            be replaced with the final preprint URL.
+          </p>
+        </div>
+      </div>
+
+      <div class="resource-panel">
+        <article class="resource-card">
+          <h3>Project resources</h3>
+          <p>
+            Use the repository for code and this page section as the temporary paper target
+            until the final paper URL is available.
+          </p>
+          <div class="resource-links" aria-label="Project resource links">
+            <a class="resource-link primary" href="https://github.com/microsoft/SkillOpt" target="_blank" rel="noopener">Code repository</a>
+            <a class="resource-link" href="#paper">Paper placeholder</a>
+            <a class="resource-link" href="https://youtu.be/JUBMDTCiM0M" target="_blank" rel="noopener">Project video</a>
+          </div>
+        </article>
+
+        <article class="citation-panel" id="citation">
+          <h3>Citation</h3>
+          <p>Use this placeholder BibTeX until the camera-ready citation is available.</p>
+          <pre class="citation-box"><code>@misc{skillopt2026,
+  title = {SkillOpt: Executive Strategy for Self-Evolving Agent Skills},
+  author = {SkillOpt Authors},
+  year = {2026},
+  note = {Preprint forthcoming},
+  url = {https://microsoft.github.io/SkillOpt/}
+}</code></pre>
+        </article>
+      </div>
+    </section>
+
     <footer class="footer">
       <span>SkillOpt: Executive Strategy for Self-Evolving Agent Skills</span>
+      <span><a href="https://github.com/microsoft/SkillOpt" target="_blank" rel="noopener">Code</a> / <a href="#paper">Paper</a> / <a href="#citation">Citation</a></span>
     </footer>
   </main>
   <script>
diff --git a/skillopt.html b/skillopt.html
index 839a654..4f68c93 100644
--- a/skillopt.html
+++ b/skillopt.html
@@ -213,6 +213,12 @@
       border-color: rgba(248, 250, 247, 0.48);
     }
 
+    .button.tertiary {
+      color: #111820;
+      background: var(--gold);
+      border-color: var(--gold);
+    }
+
     .hero-ledger {
       position: relative;
       overflow: hidden;
@@ -1178,6 +1184,80 @@
       font-size: 0.92rem;
     }
 
+    .resource-panel {
+      display: grid;
+      grid-template-columns: minmax(0, 0.75fr) minmax(280px, 0.55fr);
+      gap: 18px;
+      align-items: stretch;
+    }
+
+    .resource-card,
+    .citation-panel {
+      padding: 22px;
+      background: rgba(255, 255, 255, 0.72);
+      border: 1px solid var(--line);
+      border-radius: 8px;
+    }
+
+    .resource-card h3,
+    .citation-panel h3 {
+      margin: 0 0 10px;
+      font-family: var(--display);
+      font-size: 1.4rem;
+      line-height: 1.05;
+    }
+
+    .resource-card p,
+    .citation-panel p {
+      margin: 0;
+      color: var(--muted);
+      line-height: 1.55;
+    }
+
+    .resource-links {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 18px;
+    }
+
+    .resource-link {
+      display: inline-flex;
+      align-items: center;
+      min-height: 38px;
+      padding: 8px 12px;
+      color: var(--ink);
+      background: var(--paper);
+      border: 1px solid var(--line-strong);
+      border-radius: 6px;
+      font-family: var(--mono);
+      font-size: 0.76rem;
+      font-weight: 700;
+      text-decoration: none;
+    }
+
+    .resource-link.primary {
+      color: #f8faf7;
+      background: var(--black);
+      border-color: var(--black);
+    }
+
+    .citation-box {
+      overflow-x: auto;
+      margin: 16px 0 0;
+      padding: 16px;
+      color: #f8faf7;
+      background: var(--black);
+      border-radius: 8px;
+    }
+
+    .citation-box code {
+      font-family: var(--mono);
+      font-size: 0.74rem;
+      line-height: 1.55;
+      white-space: pre;
+    }
+
     .footer {
       margin-top: 80px;
       padding: 32px 0 44px;
@@ -1191,6 +1271,12 @@
       flex-wrap: wrap;
     }
 
+    .footer a {
+      color: inherit;
+      text-decoration-color: var(--line-strong);
+      text-underline-offset: 3px;
+    }
+
     @media (max-width: 980px) {
       .topbar {
         position: static;
@@ -1213,6 +1299,7 @@
       .manifesto,
       .teaser-heading,
       .section-header,
+      .resource-panel,
       .evolution-shell {
         grid-template-columns: 1fr;
       }
@@ -1334,6 +1421,9 @@
       <a href="#ablations">Ablations</a>
       <a href="#evolution">Evolution</a>
       <a href="#transfer">Transfer</a>
+      <a href="#paper">Paper</a>
+      <a href="#citation">Citation</a>
+      <a href="https://github.com/microsoft/SkillOpt" target="_blank" rel="noopener">Code</a>
     </nav>
   </header>
 
@@ -1352,6 +1442,8 @@
           <a class="button primary" href="#idea">Core Idea</a>
           <a class="button secondary" href="#method">Method</a>
           <a class="button secondary" href="#results">View Results</a>
+          <a class="button tertiary" href="https://github.com/microsoft/SkillOpt" target="_blank" rel="noopener">Code Repo</a>
+          <a class="button secondary" href="#paper">Paper</a>
         </div>
       </div>
 
@@ -1933,8 +2025,49 @@
       </div>
     </section>
 
+    <section class="section" id="paper">
+      <div class="section-header">
+        <div class="section-eyebrow">07 / Links</div>
+        <div>
+          <h2>Paper, code, and citation.</h2>
+          <p class="section-lede">
+            The code repository is public. The paper link is reserved here and will
+            be replaced with the final preprint URL.
+          </p>
+        </div>
+      </div>
+
+      <div class="resource-panel">
+        <article class="resource-card">
+          <h3>Project resources</h3>
+          <p>
+            Use the repository for code and this page section as the temporary paper target
+            until the final paper URL is available.
+          </p>
+          <div class="resource-links" aria-label="Project resource links">
+            <a class="resource-link primary" href="https://github.com/microsoft/SkillOpt" target="_blank" rel="noopener">Code repository</a>
+            <a class="resource-link" href="#paper">Paper placeholder</a>
+            <a class="resource-link" href="https://youtu.be/JUBMDTCiM0M" target="_blank" rel="noopener">Project video</a>
+          </div>
+        </article>
+
+        <article class="citation-panel" id="citation">
+          <h3>Citation</h3>
+          <p>Use this placeholder BibTeX until the camera-ready citation is available.</p>
+          <pre class="citation-box"><code>@misc{skillopt2026,
+  title = {SkillOpt: Executive Strategy for Self-Evolving Agent Skills},
+  author = {SkillOpt Authors},
+  year = {2026},
+  note = {Preprint forthcoming},
+  url = {https://microsoft.github.io/SkillOpt/}
+}</code></pre>
+        </article>
+      </div>
+    </section>
+
     <footer class="footer">
       <span>SkillOpt: Executive Strategy for Self-Evolving Agent Skills</span>
+      <span><a href="https://github.com/microsoft/SkillOpt" target="_blank" rel="noopener">Code</a> / <a href="#paper">Paper</a> / <a href="#citation">Citation</a></span>
     </footer>
   </main>
   <script>