add: English chart images for README_EN

README_EN.md

@@ -4,7 +4,7 @@ English | **[中文](README.md)**
 
 </div>
 
-![darwin.skill](assets/banner.svg)
+![darwin.skill](assets/banner-en.svg)
 
 <div align="center">
 
@@ -28,7 +28,7 @@ npx skills add alchaincyf/darwin-skill
 
 ## The Core Loop
 
-![Core Loop](assets/chart-loop.png)
+![Core Loop](assets/chart-loop-en.png)
 
 Evaluate → Improve → Test → Human Confirm → Keep or Revert. Repeat.
 
@@ -77,7 +77,7 @@ The key difference: autoresearch is fully autonomous (loss is just a number). Sk
 
 Total: 100 points. Structure (60) + Effectiveness (40).
 
-![Evaluation Rubric](assets/chart-rubric.png)
+![Evaluation Rubric](assets/chart-rubric-en.png)
 
 > Live test performance has the highest weight (25 points). A beautifully written skill that produces bad output is still a bad skill.
 
@@ -87,7 +87,7 @@ Total: 100 points. Structure (60) + Effectiveness (40).
 
 Five phases. Only one is the core.
 
-![Optimization Lifecycle](assets/chart-phases.png)
+![Optimization Lifecycle](assets/chart-phases-en.png)
 
 **Phase 2 (the heart):**
 
@@ -104,7 +104,7 @@ Five phases. Only one is the core.
 
 Scores can only go up. Failed experiments are cleanly reverted. No regressions accumulate over time.
 
-![Ratchet Mechanism](assets/chart-ratchet.png)
+![Ratchet Mechanism](assets/chart-ratchet-en.png)
 
 Round 2 scored 75, below the current best of 78. Auto-reverted. Effective baseline stays at 78. Subsequent improvements build from 78, not 75.
 

assets/banner-en.svg

@@ -0,0 +1,190 @@
+<svg width="1200" height="400" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&amp;display=swap');
+    </style>
+    <!-- Gradient for ratchet blocks -->
+    <linearGradient id="blockGrad1" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#444444"/>
+      <stop offset="100%" stop-color="#333333"/>
+    </linearGradient>
+    <linearGradient id="blockGrad2" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#666666"/>
+      <stop offset="100%" stop-color="#555555"/>
+    </linearGradient>
+    <linearGradient id="blockGrad3" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#8B5E3C"/>
+      <stop offset="100%" stop-color="#7A4F30"/>
+    </linearGradient>
+    <linearGradient id="blockGrad4" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#C04020"/>
+      <stop offset="100%" stop-color="#A83518"/>
+    </linearGradient>
+    <linearGradient id="blockGrad5" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%" stop-color="#D4532B"/>
+      <stop offset="100%" stop-color="#BF4422"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1200" height="400" fill="#111111"/>
+
+  <!-- Left accent line (Pentagram-style editorial vertical rule) -->
+  <rect x="60" y="48" width="3" height="304" fill="#D4532B"/>
+
+  <!-- Top horizontal rule -->
+  <rect x="60" y="48" width="760" height="2" fill="#FFFFFF" opacity="0.15"/>
+
+  <!-- Bottom horizontal rule -->
+  <rect x="60" y="350" width="760" height="1" fill="#FFFFFF" opacity="0.15"/>
+
+  <!-- CATEGORY LABEL -->
+  <text
+    x="80"
+    y="88"
+    font-family="'Inter', system-ui, -apple-system, sans-serif"
+    font-size="11"
+    font-weight="700"
+    letter-spacing="3"
+    fill="#D4532B"
+    text-transform="uppercase"
+  >CLAUDE CODE SKILL SYSTEM</text>
+
+  <!-- MAIN TITLE — two lines for visual weight -->
+  <text
+    x="80"
+    y="178"
+    font-family="'Inter', system-ui, -apple-system, sans-serif"
+    font-size="82"
+    font-weight="900"
+    fill="#FFFFFF"
+    letter-spacing="-2"
+  >darwin.skill</text>
+
+  <!-- Subtitle pipeline -->
+  <text
+    x="80"
+    y="312"
+    font-family="'Inter', system-ui, -apple-system, sans-serif"
+    font-size="16"
+    font-weight="400"
+    fill="#CCCCCC"
+    letter-spacing="0.5"
+  >Evaluate</text>
+
+  <text
+    x="160"
+    y="312"
+    font-family="'Inter', system-ui, -apple-system, sans-serif"
+    font-size="16"
+    font-weight="700"
+    fill="#D4532B"
+  >→</text>
+
+  <text
+    x="184"
+    y="312"
+    font-family="'Inter', system-ui, -apple-system, sans-serif"
+    font-size="16"
+    font-weight="400"
+    fill="#CCCCCC"
+    letter-spacing="0.5"
+  >Improve</text>
+
+  <text
+    x="262"
+    y="312"
+    font-family="'Inter', system-ui, -apple-system, sans-serif"
+    font-size="16"
+    font-weight="700"
+    fill="#D4532B"
+  >→</text>
+
+  <text
+    x="286"
+    y="312"
+    font-family="'Inter', system-ui, -apple-system, sans-serif"
+    font-size="16"
+    font-weight="400"
+    fill="#CCCCCC"
+    letter-spacing="0.5"
+  >Test &amp; Verify</text>
+
+  <text
+    x="400"
+    y="312"
+    font-family="'Inter', system-ui, -apple-system, sans-serif"
+    font-size="16"
+    font-weight="700"
+    fill="#D4532B"
+  >→</text>
+
+  <text
+    x="424"
+    y="312"
+    font-family="'Inter', system-ui, -apple-system, sans-serif"
+    font-size="16"
+    font-weight="400"
+    fill="#CCCCCC"
+    letter-spacing="0.5"
+  >Keep or Revert</text>
+
+  <!-- Footer credit -->
+  <text
+    x="80"
+    y="370"
+    font-family="'Inter', system-ui, -apple-system, sans-serif"
+    font-size="12"
+    font-weight="400"
+    fill="#666666"
+    letter-spacing="0.3"
+  >Inspired by Karpathy's autoresearch</text>
+
+  <!-- ============================================================ -->
+  <!-- RIGHT SIDE: Ratchet visualization                           -->
+  <!-- 5 bars of increasing height + score labels, anchored right  -->
+  <!-- ============================================================ -->
+
+  <!-- Thin divider between text and viz -->
+  <rect x="860" y="80" width="1" height="240" fill="#FFFFFF" opacity="0.08"/>
+
+  <!-- Bar 1 — smallest, dark gray (score ~40) -->
+  <rect x="890" y="278" width="36" height="42" rx="3" fill="url(#blockGrad1)"/>
+  <text x="908" y="274" font-family="'Inter', system-ui, sans-serif" font-size="10" font-weight="600" fill="#555555" text-anchor="middle">40</text>
+
+  <!-- Bar 2 — medium-small, mid gray (score ~55) -->
+  <rect x="944" y="252" width="36" height="68" rx="3" fill="url(#blockGrad2)"/>
+  <text x="962" y="248" font-family="'Inter', system-ui, sans-serif" font-size="10" font-weight="600" fill="#777777" text-anchor="middle">55</text>
+
+  <!-- Bar 3 — medium, warm brown (score ~68) -->
+  <rect x="998" y="220" width="36" height="100" rx="3" fill="url(#blockGrad3)"/>
+  <text x="1016" y="216" font-family="'Inter', system-ui, sans-serif" font-size="10" font-weight="600" fill="#8B5E3C" text-anchor="middle">68</text>
+
+  <!-- Bar 4 — tall, warm orange-red (score ~80) -->
+  <rect x="1052" y="188" width="36" height="132" rx="3" fill="url(#blockGrad4)"/>
+  <text x="1070" y="184" font-family="'Inter', system-ui, sans-serif" font-size="10" font-weight="600" fill="#C04020" text-anchor="middle">80</text>
+
+  <!-- Bar 5 — tallest, brand orange (score ~92) -->
+  <rect x="1106" y="152" width="36" height="168" rx="3" fill="url(#blockGrad5)"/>
+  <text x="1124" y="148" font-family="'Inter', system-ui, sans-serif" font-size="12" font-weight="700" fill="#D4532B" text-anchor="middle">92</text>
+
+  <!-- Baseline for bars -->
+  <rect x="880" y="320" width="276" height="1" fill="#FFFFFF" opacity="0.12"/>
+
+  <!-- Label below bars -->
+  <text x="1018" y="344" font-family="'Inter', system-ui, sans-serif" font-size="11" font-weight="600" fill="#555555" text-anchor="middle" letter-spacing="2">SCORE PROGRESSION</text>
+
+  <!-- Upward trend arrow on top-right -->
+  <polyline
+    points="890,268 944,242 998,210 1052,178 1124,142"
+    fill="none"
+    stroke="#D4532B"
+    stroke-width="1.5"
+    stroke-dasharray="4 3"
+    opacity="0.5"
+  />
+
+  <!-- Ratchet label top -->
+  <text x="890" y="124" font-family="'Inter', system-ui, sans-serif" font-size="10" font-weight="700" letter-spacing="2" fill="#D4532B" opacity="0.8">AUTO-OPTIMIZE</text>
+
+</svg>

assets/chart-loop-en.html

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>darwin.skill - Core Loop</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap" rel="stylesheet">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  html, body {
+    width: 1200px;
+    height: 500px;
+    background: #111111;
+    overflow: hidden;
+    font-family: 'Inter', sans-serif;
+  }
+</style>
+</head>
+<body>
+<svg width="1200" height="500" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <!-- Arrow markers -->
+    <marker id="arr-orange" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#D4532B"/>
+    </marker>
+    <marker id="arr-green" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#2B8A3E"/>
+    </marker>
+    <marker id="arr-red" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#C92A2A"/>
+    </marker>
+    <marker id="arr-orange-up" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
+      <polygon points="0 0, 10 3.5, 0 7" fill="#D4532B"/>
+    </marker>
+  </defs>
+
+  <!-- Background -->
+  <rect width="1200" height="500" fill="#111111"/>
+
+  <!-- CORE LOOP label -->
+  <text x="48" y="50" fill="#D4532B" font-family="Inter, sans-serif" font-size="11" font-weight="700" letter-spacing="3">CORE LOOP</text>
+
+  <!-- B1: EVALUATE -->
+  <rect x="48" y="165" width="124" height="70" fill="#FFFFFF"/>
+  <text x="110" y="196" fill="#111111" font-family="Inter, sans-serif" font-size="13" font-weight="800" text-anchor="middle">EVALUATE</text>
+  <text x="110" y="213" fill="#555555" font-family="Inter, sans-serif" font-size="10" font-weight="600" text-anchor="middle">Current Skill</text>
+
+  <!-- Arrow B1→B2 -->
+  <line x1="172" y1="200" x2="204" y2="200" stroke="#D4532B" stroke-width="2" marker-end="url(#arr-orange)"/>
+
+  <!-- B2: IMPROVE -->
+  <rect x="210" y="165" width="124" height="70" fill="#FFFFFF"/>
+  <text x="272" y="196" fill="#111111" font-family="Inter, sans-serif" font-size="13" font-weight="800" text-anchor="middle">GENERATE</text>
+  <text x="272" y="213" fill="#555555" font-family="Inter, sans-serif" font-size="10" font-weight="600" text-anchor="middle">Improvement</text>
+
+  <!-- Arrow B2→B3 -->
+  <line x1="334" y1="200" x2="366" y2="200" stroke="#D4532B" stroke-width="2" marker-end="url(#arr-orange)"/>
+
+  <!-- B3: VALIDATE -->
+  <rect x="372" y="165" width="124" height="70" fill="#FFFFFF"/>
+  <text x="434" y="196" fill="#111111" font-family="Inter, sans-serif" font-size="13" font-weight="800" text-anchor="middle">VALIDATE</text>
+  <text x="434" y="213" fill="#555555" font-family="Inter, sans-serif" font-size="10" font-weight="600" text-anchor="middle">via Testing</text>
+
+  <!-- Arrow B3→B4 -->
+  <line x1="496" y1="200" x2="528" y2="200" stroke="#D4532B" stroke-width="2" marker-end="url(#arr-orange)"/>
+
+  <!-- B4: CONFIRM -->
+  <rect x="534" y="165" width="124" height="70" fill="#FFFFFF"/>
+  <text x="596" y="196" fill="#111111" font-family="Inter, sans-serif" font-size="13" font-weight="800" text-anchor="middle">HUMAN</text>
+  <text x="596" y="213" fill="#555555" font-family="Inter, sans-serif" font-size="10" font-weight="600" text-anchor="middle">CONFIRM</text>
+
+  <!-- Arrow B4→Diamond -->
+  <line x1="658" y1="200" x2="698" y2="200" stroke="#D4532B" stroke-width="2" marker-end="url(#arr-orange)"/>
+
+  <!-- DECISION DIAMOND -->
+  <polygon points="790,152 838,200 790,248 742,200" fill="#D4532B"/>
+  <text x="790" y="196" fill="#FFFFFF" font-family="Inter, sans-serif" font-size="12" font-weight="800" text-anchor="middle">SCORE</text>
+  <text x="790" y="212" fill="#FFFFFF" font-family="Inter, sans-serif" font-size="12" font-weight="800" text-anchor="middle">UP?</text>
+
+  <!-- YES PATH -->
+  <path d="M790,152 L790,120 L954,120"
+        stroke="#2B8A3E" stroke-width="2" fill="none" marker-end="url(#arr-green)"/>
+
+  <!-- YES label -->
+  <text x="860" y="113" fill="#2B8A3E" font-family="Inter, sans-serif" font-size="10" font-weight="700" letter-spacing="1" text-anchor="middle">YES</text>
+
+  <!-- YES result block: KEEP / git commit -->
+  <rect x="960" y="85" width="130" height="70" fill="#2B8A3E"/>
+  <text x="1025" y="115" fill="#FFFFFF" font-family="Inter, sans-serif" font-size="13" font-weight="800" text-anchor="middle">KEEP</text>
+  <text x="1025" y="133" fill="rgba(255,255,255,0.75)" font-family="Inter, sans-serif" font-size="10" font-weight="600" text-anchor="middle">git commit</text>
+
+  <!-- NO PATH -->
+  <path d="M790,248 L790,280 L954,280"
+        stroke="#C92A2A" stroke-width="2" fill="none" marker-end="url(#arr-red)"/>
+
+  <!-- NO label -->
+  <text x="860" y="298" fill="#C92A2A" font-family="Inter, sans-serif" font-size="10" font-weight="700" letter-spacing="1" text-anchor="middle">NO</text>
+
+  <!-- NO result block: REVERT / git revert -->
+  <rect x="960" y="245" width="130" height="70" fill="#C92A2A"/>
+  <text x="1025" y="275" fill="#FFFFFF" font-family="Inter, sans-serif" font-size="13" font-weight="800" text-anchor="middle">REVERT</text>
+  <text x="1025" y="293" fill="rgba(255,255,255,0.75)" font-family="Inter, sans-serif" font-size="10" font-weight="600" text-anchor="middle">git revert</text>
+
+  <!-- LOOP BACK ARROW -->
+  <path d="M1090,120 L1155,120 L1155,420 L48,420 L48,235"
+        stroke="#D4532B" stroke-width="2" fill="none" stroke-dasharray="6,4"/>
+
+  <path d="M1090,280 L1155,280"
+        stroke="#D4532B" stroke-width="2" fill="none" stroke-dasharray="6,4"/>
+
+  <!-- Arrow head pointing up at B1 left -->
+  <polygon points="42,236 54,236 48,222" fill="#D4532B"/>
+
+  <!-- LOOP BACK label along bottom -->
+  <text x="590" y="448" fill="#444444" font-family="Inter, sans-serif" font-size="11" font-weight="600" text-anchor="middle" letter-spacing="3">LOOP BACK</text>
+
+  <!-- STEP NUMBERS -->
+  <text x="48" y="158" fill="#D4532B" font-family="Inter, sans-serif" font-size="10" font-weight="700">01</text>
+  <text x="210" y="158" fill="#D4532B" font-family="Inter, sans-serif" font-size="10" font-weight="700">02</text>
+  <text x="372" y="158" fill="#D4532B" font-family="Inter, sans-serif" font-size="10" font-weight="700">03</text>
+  <text x="534" y="158" fill="#D4532B" font-family="Inter, sans-serif" font-size="10" font-weight="700">04</text>
+  <text x="762" y="145" fill="#D4532B" font-family="Inter, sans-serif" font-size="10" font-weight="700" opacity="0.9">05</text>
+
+  <!-- SUBTITLE TEXT -->
+  <text x="48" y="476" fill="#333333" font-family="Inter, sans-serif" font-size="10" font-weight="600" letter-spacing="1">darwin.skill</text>
+  <text x="1152" y="476" fill="#333333" font-family="Inter, sans-serif" font-size="10" font-weight="600" text-anchor="end" letter-spacing="1">CONTINUOUS IMPROVEMENT ENGINE</text>
+
+</svg>
+</body>
+</html>

assets/chart-phases-en.html

@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Optimization Lifecycle</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap" rel="stylesheet">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    width: 1200px;
+    height: 400px;
+    background: #111111;
+    font-family: 'Inter', -apple-system, sans-serif;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .top-label {
+    position: absolute;
+    top: 28px;
+    left: 44px;
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0.18em;
+    color: #D4532B;
+    text-transform: uppercase;
+  }
+
+  /* Center row: phases + arrows */
+  .row {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    align-items: center;
+    gap: 0;
+  }
+
+  /* === Phase boxes === */
+  .phase {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    flex-shrink: 0;
+  }
+
+  .phase-num {
+    font-weight: 900;
+    line-height: 1;
+  }
+
+  .phase-name {
+    font-weight: 600;
+    text-align: center;
+    line-height: 1.3;
+  }
+
+  /* Regular dark */
+  .p-dark {
+    background: #1D1D1D;
+    border: 1px solid #2D2D2D;
+    width: 130px;
+    height: 130px;
+  }
+  .p-dark .phase-num {
+    font-size: 38px;
+    color: #FFFFFF;
+    margin-bottom: 10px;
+  }
+  .p-dark .phase-name {
+    font-size: 13px;
+    color: #888888;
+  }
+
+  /* White */
+  .p-white {
+    background: #FFFFFF;
+    border: 1px solid #DDDDDD;
+    width: 130px;
+    height: 130px;
+  }
+  .p-white .phase-num {
+    font-size: 38px;
+    color: #111111;
+    margin-bottom: 10px;
+  }
+  .p-white .phase-name {
+    font-size: 13px;
+    color: #555555;
+  }
+
+  /* Core - Phase 2 */
+  .p-core {
+    background: #D4532B;
+    border: 2px solid #E06035;
+    width: 196px;
+    height: 196px;
+    box-shadow: 0 0 50px rgba(212, 83, 43, 0.4), 0 0 16px rgba(212, 83, 43, 0.25);
+  }
+  .p-core .phase-num {
+    font-size: 56px;
+    color: #FFFFFF;
+    margin-bottom: 12px;
+  }
+  .p-core .phase-name {
+    font-size: 15px;
+    font-weight: 700;
+    color: rgba(255,255,255,0.93);
+  }
+
+  /* === Connector === */
+  .connector {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 72px;
+    flex-shrink: 0;
+    position: relative;
+  }
+
+  .conn-label {
+    font-size: 9.5px;
+    color: #505050;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
+    margin-bottom: 9px;
+  }
+
+  .arrow {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .arrow-line {
+    flex: 1;
+    height: 2px;
+    background: #D4532B;
+  }
+
+  .arrow-head {
+    width: 0;
+    height: 0;
+    border-top: 5px solid transparent;
+    border-bottom: 5px solid transparent;
+    border-left: 9px solid #D4532B;
+  }
+</style>
+</head>
+<body>
+
+  <div class="top-label">OPTIMIZATION LIFECYCLE</div>
+
+  <div class="row">
+
+    <div class="phase p-dark">
+      <div class="phase-num">0</div>
+      <div class="phase-name">Initialize</div>
+    </div>
+
+    <div class="connector">
+      <div class="conn-label">Human Confirm</div>
+      <div class="arrow">
+        <div class="arrow-line"></div>
+        <div class="arrow-head"></div>
+      </div>
+    </div>
+
+    <div class="phase p-dark">
+      <div class="phase-num">0.5</div>
+      <div class="phase-name">Test Design</div>
+    </div>
+
+    <div class="connector">
+      <div class="conn-label">Human Confirm</div>
+      <div class="arrow">
+        <div class="arrow-line"></div>
+        <div class="arrow-head"></div>
+      </div>
+    </div>
+
+    <div class="phase p-white">
+      <div class="phase-num">1</div>
+      <div class="phase-name">Baseline</div>
+    </div>
+
+    <div class="connector">
+      <div class="conn-label">Human Confirm</div>
+      <div class="arrow">
+        <div class="arrow-line"></div>
+        <div class="arrow-head"></div>
+      </div>
+    </div>
+
+    <div class="phase p-core">
+      <div class="phase-num">2</div>
+      <div class="phase-name">Optimize</div>
+    </div>
+
+    <div class="connector">
+      <div class="conn-label">Human Confirm</div>
+      <div class="arrow">
+        <div class="arrow-line"></div>
+        <div class="arrow-head"></div>
+      </div>
+    </div>
+
+    <div class="phase p-dark">
+      <div class="phase-num">3</div>
+      <div class="phase-name">Report</div>
+    </div>
+
+  </div>
+
+</body>
+</html>

assets/chart-ratchet-en.html

@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Ratchet Mechanism</title>
+<style>
+  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
+
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    width: 1200px;
+    height: 450px;
+    background: #111111;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .header {
+    padding: 28px 60px 0;
+    display: flex;
+    align-items: baseline;
+    gap: 16px;
+  }
+
+  .label {
+    color: #D4532B;
+    font-size: 13px;
+    font-weight: 800;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+  }
+
+  .subtitle {
+    color: #555;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 1px;
+  }
+
+  .chart-area {
+    flex: 1;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    padding: 0 60px 60px;
+    gap: 0;
+    position: relative;
+  }
+
+  .bars-wrapper {
+    display: flex;
+    align-items: flex-end;
+    gap: 40px;
+    position: relative;
+    width: 100%;
+    justify-content: center;
+  }
+
+  .bar-group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    width: 80px;
+  }
+
+  .score {
+    font-size: 36px;
+    font-weight: 800;
+    color: #ffffff;
+    margin-bottom: 10px;
+    line-height: 1;
+  }
+
+  .score.rollback {
+    color: #C92A2A;
+    text-decoration: line-through;
+    text-decoration-thickness: 3px;
+  }
+
+  .bar {
+    width: 80px;
+    border-radius: 4px 4px 0 0;
+    position: relative;
+  }
+
+  .bar.baseline {
+    background: #444444;
+  }
+
+  .bar.retained {
+    background: #ffffff;
+  }
+
+  .bar.rollback-bar {
+    background: transparent;
+    border: 2px dashed #C92A2A;
+    border-bottom: none;
+  }
+
+  .bar.highlight {
+    background: #D4532B;
+  }
+
+  .round-label {
+    margin-top: 12px;
+    color: #666666;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+  }
+
+  /* SVG overlay for arrows and ratchet line */
+  .svg-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+</style>
+</head>
+<body>
+
+<div class="header">
+  <div class="label">RATCHET MECHANISM</div>
+  <div class="subtitle">— effective baseline only moves up</div>
+</div>
+
+<div class="chart-area" id="chartArea">
+  <div class="bars-wrapper" id="barsWrapper">
+    <!-- bars will be injected by JS -->
+  </div>
+  <svg class="svg-overlay" id="svgOverlay"></svg>
+</div>
+
+<script>
+  const scores = [72, 78, 75, 84, 87];
+  const types  = ['baseline', 'retained', 'rollback', 'retained', 'highlight'];
+  const rounds = ['Round 0', 'Round 1', 'Round 2', 'Round 3', 'Round 4'];
+
+  // Effective baseline sequence (ratchet): 72, 78, 78, 84, 87
+  const effectiveBaseline = [72, 78, 78, 84, 87];
+
+  const maxScore = 90;
+  const minScore = 60;
+  const chartHeight = 270; // px available for bars
+
+  function barHeight(score) {
+    return Math.round((score - minScore) / (maxScore - minScore) * chartHeight);
+  }
+
+  const wrapper = document.getElementById('barsWrapper');
+
+  scores.forEach((score, i) => {
+    const group = document.createElement('div');
+    group.className = 'bar-group';
+    group.id = `group-${i}`;
+
+    const scoreEl = document.createElement('div');
+    scoreEl.className = 'score' + (types[i] === 'rollback' ? ' rollback' : '');
+    scoreEl.textContent = score;
+
+    const bar = document.createElement('div');
+    bar.className = 'bar ' + (types[i] === 'rollback' ? 'rollback-bar' : types[i]);
+    const h = barHeight(score);
+    bar.style.height = h + 'px';
+
+    const label = document.createElement('div');
+    label.className = 'round-label';
+    label.textContent = rounds[i];
+
+    group.appendChild(scoreEl);
+    group.appendChild(bar);
+    group.appendChild(label);
+    wrapper.appendChild(group);
+  });
+
+  // Draw arrows and ratchet line after layout
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      const svg = document.getElementById('svgOverlay');
+      const chartArea = document.getElementById('chartArea');
+      const chartRect = chartArea.getBoundingClientRect();
+
+      // Collect bar group positions
+      const groups = [];
+      for (let i = 0; i < 5; i++) {
+        const g = document.getElementById(`group-${i}`);
+        const rect = g.getBoundingClientRect();
+        // top of the bar (not the score label)
+        const bar = g.querySelector('.bar');
+        const barRect = bar.getBoundingClientRect();
+        groups.push({
+          cx: rect.left - chartRect.left + rect.width / 2,
+          barTop: barRect.top - chartRect.top,
+          barBottom: barRect.bottom - chartRect.top,
+        });
+      }
+
+      // Arrow heads: connect bar top centers (exclude rollback from arrows, draw arrow anyway between all)
+      const arrowColor = '#D4532B';
+      const arrowGap = 8;
+
+      let svgContent = `
+        <defs>
+          <marker id="arrow" markerWidth="8" markerHeight="8" refX="6" refY="3" orient="auto">
+            <path d="M0,0 L0,6 L8,3 z" fill="${arrowColor}" />
+          </marker>
+        </defs>
+      `;
+
+      // Draw horizontal arrows between consecutive bar centers at mid-height of the lower bar
+      for (let i = 0; i < 4; i++) {
+        const fromX = groups[i].cx + 40 + arrowGap;
+        const toX = groups[i+1].cx - 40 - arrowGap - 8;
+        const higherBarTop = Math.min(groups[i].barTop, groups[i+1].barTop);
+        const lowerBarTop = Math.max(groups[i].barTop, groups[i+1].barTop);
+        const lowerBarBottom = Math.max(groups[i].barBottom, groups[i+1].barBottom);
+        const y = lowerBarTop + (lowerBarBottom - lowerBarTop) * 0.5;
+
+        // Use a slightly raised y to look cleaner
+        const arrowY = Math.min(groups[i].barTop, groups[i+1].barTop) - 18;
+        const clampedY = Math.max(arrowY, 40);
+
+        svgContent += `<line x1="${fromX}" y1="${clampedY}" x2="${toX}" y2="${clampedY}"
+          stroke="${arrowColor}" stroke-width="2" marker-end="url(#arrow)" opacity="0.7"/>`;
+      }
+
+      // Ratchet line: connects effective baseline tops
+      const effectiveHeights = effectiveBaseline.map(s => barHeight(s));
+      const baselineBottom = groups[0].barBottom; // all bars share same bottom
+
+      // Points for ratchet line
+      const points = groups.map((g, i) => {
+        const effH = effectiveHeights[i];
+        const y = baselineBottom - effH;
+        return { x: g.cx, y };
+      });
+
+      // Draw dashed orange line through effective baseline tops
+      let pathD = `M ${points[0].x} ${points[0].y}`;
+      for (let i = 1; i < points.length; i++) {
+        pathD += ` L ${points[i].x} ${points[i].y}`;
+      }
+
+      svgContent += `<path d="${pathD}" fill="none" stroke="${arrowColor}" stroke-width="2"
+        stroke-dasharray="6,4" opacity="0.9"/>`;
+
+      // Dots at each effective baseline point
+      points.forEach((p, i) => {
+        svgContent += `<circle cx="${p.x}" cy="${p.y}" r="4" fill="${arrowColor}" opacity="0.9"/>`;
+      });
+
+      // Label for the ratchet line
+      svgContent += `<text x="${points[4].x + 10}" y="${points[4].y - 6}" fill="${arrowColor}"
+        font-family="Inter, sans-serif" font-size="11" font-weight="700" letter-spacing="0.5">EFFECTIVE FLOOR</text>`;
+
+      svg.innerHTML = svgContent;
+    });
+  });
+</script>
+</body>
+</html>

assets/chart-rubric-en.html

@@ -0,0 +1,351 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=1200">
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;900&display=swap" rel="stylesheet">
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+
+  body {
+    width: 1200px;
+    height: 600px;
+    overflow: hidden;
+    background: #111111;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    color: #FFFFFF;
+  }
+
+  .container {
+    width: 1200px;
+    height: 600px;
+    display: flex;
+    flex-direction: column;
+    padding: 44px 56px 36px 56px;
+    position: relative;
+  }
+
+  /* Header */
+  .header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 36px;
+  }
+
+  .rubric-label {
+    color: #D4532B;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+  }
+
+  .title {
+    font-size: 26px;
+    font-weight: 900;
+    color: #FFFFFF;
+    margin-top: 8px;
+    letter-spacing: -0.5px;
+  }
+
+  .subtitle {
+    font-size: 13px;
+    color: #666666;
+    margin-top: 4px;
+    font-weight: 400;
+  }
+
+  /* Main content: two columns + divider */
+  .main {
+    flex: 1;
+    display: flex;
+    gap: 0;
+    align-items: stretch;
+  }
+
+  /* Left panel */
+  .panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .panel-header {
+    display: flex;
+    align-items: baseline;
+    gap: 10px;
+    margin-bottom: 22px;
+  }
+
+  .panel-title {
+    font-size: 13px;
+    font-weight: 700;
+    color: #666666;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+  }
+
+  .panel-score {
+    font-size: 28px;
+    font-weight: 900;
+    color: #FFFFFF;
+  }
+
+  .panel-score.orange {
+    color: #D4532B;
+  }
+
+  /* Divider */
+  .divider {
+    width: 1px;
+    background: #D4532B;
+    margin: 0 44px;
+    flex-shrink: 0;
+  }
+
+  /* Bar items */
+  .bar-list {
+    display: flex;
+    flex-direction: column;
+    gap: 13px;
+    flex: 1;
+  }
+
+  .bar-item {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  .bar-meta {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+  }
+
+  .bar-label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #AAAAAA;
+    letter-spacing: 0.3px;
+  }
+
+  .bar-weight {
+    font-size: 22px;
+    font-weight: 900;
+    color: #FFFFFF;
+    line-height: 1;
+  }
+
+  .bar-weight.orange {
+    color: #D4532B;
+    font-size: 28px;
+  }
+
+  .bar-track {
+    width: 100%;
+    height: 6px;
+    background: #222222;
+    position: relative;
+  }
+
+  .bar-fill {
+    height: 100%;
+    background: #CCCCCC;
+    transition: none;
+  }
+
+  .bar-fill.orange {
+    background: linear-gradient(90deg, #D4532B 0%, #FF7A4D 100%);
+  }
+
+  /* Right panel: larger items */
+  .bar-item.large .bar-label {
+    font-size: 13px;
+    color: #AAAAAA;
+  }
+
+  .bar-item.large .bar-track {
+    height: 8px;
+  }
+
+  /* Bottom total */
+  .bottom {
+    margin-top: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 16px;
+    border-top: 1px solid #222222;
+    padding-top: 18px;
+  }
+
+  .total-label {
+    font-size: 13px;
+    font-weight: 700;
+    color: #666666;
+    letter-spacing: 3px;
+    text-transform: uppercase;
+  }
+
+  .total-score {
+    font-size: 38px;
+    font-weight: 900;
+    color: #FFFFFF;
+    line-height: 1;
+  }
+
+  .total-unit {
+    font-size: 13px;
+    color: #666666;
+    font-weight: 600;
+    letter-spacing: 2px;
+  }
+
+  .dot {
+    width: 4px;
+    height: 4px;
+    background: #D4532B;
+    display: inline-block;
+    margin: 0 6px 2px 6px;
+    vertical-align: middle;
+  }
+</style>
+</head>
+<body>
+<div class="container">
+
+  <!-- Header -->
+  <div class="header">
+    <div>
+      <div class="rubric-label">EVALUATION RUBRIC</div>
+      <div class="title">darwin.skill — 8-Dimension Evaluation Rubric</div>
+      <div class="subtitle">Automated quality scoring framework for Claude skill optimization</div>
+    </div>
+  </div>
+
+  <!-- Main -->
+  <div class="main">
+
+    <!-- Left: Structure -->
+    <div class="panel">
+      <div class="panel-header">
+        <div class="panel-title">Structure</div>
+        <div class="panel-score">60 pts</div>
+      </div>
+      <div class="bar-list">
+
+        <div class="bar-item">
+          <div class="bar-meta">
+            <span class="bar-label">Frontmatter Quality</span>
+            <span class="bar-weight">8</span>
+          </div>
+          <div class="bar-track">
+            <div class="bar-fill" style="width: calc(8/15*100%)"></div>
+          </div>
+        </div>
+
+        <div class="bar-item">
+          <div class="bar-meta">
+            <span class="bar-label">Workflow Clarity</span>
+            <span class="bar-weight">15</span>
+          </div>
+          <div class="bar-track">
+            <div class="bar-fill" style="width: 100%"></div>
+          </div>
+        </div>
+
+        <div class="bar-item">
+          <div class="bar-meta">
+            <span class="bar-label">Edge Case Coverage</span>
+            <span class="bar-weight">10</span>
+          </div>
+          <div class="bar-track">
+            <div class="bar-fill" style="width: calc(10/15*100%)"></div>
+          </div>
+        </div>
+
+        <div class="bar-item">
+          <div class="bar-meta">
+            <span class="bar-label">Checkpoint Design</span>
+            <span class="bar-weight">7</span>
+          </div>
+          <div class="bar-track">
+            <div class="bar-fill" style="width: calc(7/15*100%)"></div>
+          </div>
+        </div>
+
+        <div class="bar-item">
+          <div class="bar-meta">
+            <span class="bar-label">Instruction Specificity</span>
+            <span class="bar-weight">15</span>
+          </div>
+          <div class="bar-track">
+            <div class="bar-fill" style="width: 100%"></div>
+          </div>
+        </div>
+
+        <div class="bar-item">
+          <div class="bar-meta">
+            <span class="bar-label">Resource Integration</span>
+            <span class="bar-weight">5</span>
+          </div>
+          <div class="bar-track">
+            <div class="bar-fill" style="width: calc(5/15*100%)"></div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <!-- Vertical divider -->
+    <div class="divider"></div>
+
+    <!-- Right: Effect -->
+    <div class="panel">
+      <div class="panel-header">
+        <div class="panel-title">Effectiveness</div>
+        <div class="panel-score orange">40 pts</div>
+      </div>
+      <div class="bar-list">
+
+        <div class="bar-item large">
+          <div class="bar-meta">
+            <span class="bar-label">Overall Architecture</span>
+            <span class="bar-weight">15</span>
+          </div>
+          <div class="bar-track">
+            <div class="bar-fill" style="width: calc(15/25*100%)"></div>
+          </div>
+        </div>
+
+        <div class="bar-item large" style="margin-top: 12px;">
+          <div class="bar-meta" style="margin-bottom: 2px;">
+            <span class="bar-label" style="color:#D4532B; font-size:14px; font-weight:700; letter-spacing:0.5px;">Live Test Performance</span>
+            <span class="bar-weight orange">25</span>
+          </div>
+          <!-- Accent line above bar -->
+          <div style="width:100%; height:1px; background:#D4532B; opacity:0.25; margin-bottom:6px;"></div>
+          <div class="bar-track" style="height:14px; background:#1A0E0A;">
+            <div class="bar-fill orange" style="width:100%; height:100%;"></div>
+          </div>
+          <div style="font-size:11px; color:#D4532B; margin-top:5px; font-weight:600; letter-spacing:1px;">HIGHEST WEIGHT</div>
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+
+  <!-- Bottom total -->
+  <div class="bottom">
+    <span class="total-label">TOTAL</span>
+    <span class="dot"></span>
+    <span class="total-score">100</span>
+    <span class="total-unit">PTS</span>
+  </div>
+
+</div>
+</body>
+</html>