From c45bcfc50d770723bae3a7cb3022bc38f220ae46 Mon Sep 17 00:00:00 2001
From: Shayan Rais <shanraisshan@gmail.com>
Date: Sat, 2 May 2026 15:21:04 +0500
Subject: [PATCH] add HD How to Use badge SVG

144x40 variant of how-to-use.svg with shimmer animation, matching the
orchestration-workflow-hd pattern but keeping the original green fill
(#2ea44f). Used by the How to Use section heading in README.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 !/tags/how-to-use-hd.svg | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 !/tags/how-to-use-hd.svg

diff --git a/!/tags/how-to-use-hd.svg b/!/tags/how-to-use-hd.svg
new file mode 100644
index 0000000..d8196ae
--- /dev/null
+++ b/!/tags/how-to-use-hd.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="144" height="40" role="img" aria-label="How to Use">
+  <title>How to Use</title>
+  <style>
+    @keyframes shimmer {
+      0% { transform: translateX(-144px); }
+      100% { transform: translateX(144px); }
+    }
+    .shine { animation: shimmer 2.5s ease-in-out infinite; }
+  </style>
+  <linearGradient id="s" x2="0" y2="100%">
+    <stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
+    <stop offset="1" stop-opacity=".1"/>
+  </linearGradient>
+  <linearGradient id="shimmer" x1="0" y1="0" x2="1" y2="0">
+    <stop offset="0" stop-color="#fff" stop-opacity="0"/>
+    <stop offset="0.4" stop-color="#fff" stop-opacity="0"/>
+    <stop offset="0.5" stop-color="#fff" stop-opacity=".3"/>
+    <stop offset="0.6" stop-color="#fff" stop-opacity="0"/>
+    <stop offset="1" stop-color="#fff" stop-opacity="0"/>
+  </linearGradient>
+  <clipPath id="r">
+    <rect width="144" height="40" rx="5" fill="#fff"/>
+  </clipPath>
+  <g clip-path="url(#r)">
+    <rect width="144" height="40" fill="#2ea44f"/>
+    <rect width="144" height="40" fill="url(#s)"/>
+    <rect class="shine" width="144" height="40" fill="url(#shimmer)"/>
+  </g>
+  <g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="18">
+    <text x="72" y="26">How to Use</text>
+  </g>
+</svg>