191 lines
6.2 KiB
XML
191 lines
6.2 KiB
XML
<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&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 & 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>
|