Credit Visual Explainer

site/components/guide-evidence.module.css

@@ -200,6 +200,15 @@
   background: var(--lilac);
 }
 
+.sources :global(a:last-child:nth-child(odd)) {
+  grid-column: 1 / -1;
+}
+
+.sources :global(a:nth-child(5))::before {
+  border-radius: 50%;
+  background: var(--pink);
+}
+
 .sources :global(a)::after {
   width: 1rem;
   height: 1rem;
@@ -676,6 +685,10 @@
     column-gap: 0;
     margin-block: 1rem 2.25rem;
   }
+
+  .sources :global(a:last-child:nth-child(odd)) {
+    grid-column: auto;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

site/components/site-footer.tsx

@@ -37,6 +37,13 @@ export function SiteFooter() {
         >
           Original HTML gallery
         </a>
+        <a
+          href="https://github.com/nicobailon/visual-explainer"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Visual Explainer by Nico Bailon
+        </a>
       </nav>
     </footer>
   );

site/content/docs/index.mdx

@@ -50,6 +50,16 @@ This guide collects ideas from:
       <small>GitHub repository</small>
     </span>
   </a>
+  <a
+    href="https://github.com/nicobailon/visual-explainer"
+    target="_blank"
+    rel="noreferrer"
+  >
+    <span data-source-copy>
+      <strong>Visual Explainer</strong>
+      <small>Nico Bailon · Agent skill for visual HTML</small>
+    </span>
+  </a>
 </GuideSources>
 
 ## Start without a skill