From f5e30a8d1487d242773adc14614df5508e2dd2d1 Mon Sep 17 00:00:00 2001 From: masnwilliams <43387599+masnwilliams@users.noreply.github.com> Date: Wed, 15 Apr 2026 19:39:30 +0000 Subject: [PATCH 1/3] change copy prompt button hover from bg color to underline --- snippets/copy-prompt-button.jsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/snippets/copy-prompt-button.jsx b/snippets/copy-prompt-button.jsx index caac692..381d0bd 100644 --- a/snippets/copy-prompt-button.jsx +++ b/snippets/copy-prompt-button.jsx @@ -68,16 +68,15 @@ export const CopyPromptButton = () => { backgroundColor: '#111', border: '1px solid rgba(255, 255, 255, 0.08)', cursor: 'pointer', - transition: 'background-color 0.15s ease, border-color 0.15s ease', + textDecoration: 'none', + transition: 'text-decoration 0.15s ease', fontFamily: 'inherit', }} onMouseEnter={(e) => { - e.currentTarget.style.backgroundColor = '#222'; - e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.15)'; + e.currentTarget.style.textDecoration = 'underline'; }} onMouseLeave={(e) => { - e.currentTarget.style.backgroundColor = '#111'; - e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; + e.currentTarget.style.textDecoration = 'none'; }} > {copied ? ( From 6e3f46a62e9fa9511db7cfd06077638f85c6b511 Mon Sep 17 00:00:00 2001 From: masnwilliams <43387599+masnwilliams@users.noreply.github.com> Date: Wed, 15 Apr 2026 19:44:09 +0000 Subject: [PATCH 2/3] add static placeholder for copy prompt button to prevent late loading pop-in --- index.mdx | 7 +++++++ snippets/copy-prompt-button.jsx | 7 ++++++- style.css | 21 +++++++++++++++++++++ 3 files changed, 34 insertions(+), 1 deletion(-) diff --git a/index.mdx b/index.mdx index a2d25d3..c8f16d6 100644 --- a/index.mdx +++ b/index.mdx @@ -35,6 +35,13 @@ import { CopyPromptButton } from '/snippets/copy-prompt-button.jsx'; copy and paste this into your AI coding agent (Cursor, Claude, Windsurf, etc.). it installs the Kernel CLI and skills, authenticates you, and opens a live browser session that you or your agent can interact with.

+
+ + + + + copy prompt +
diff --git a/snippets/copy-prompt-button.jsx b/snippets/copy-prompt-button.jsx index 381d0bd..fd0dfff 100644 --- a/snippets/copy-prompt-button.jsx +++ b/snippets/copy-prompt-button.jsx @@ -1,8 +1,13 @@ -const { useState, useCallback } = React; +const { useState, useCallback, useLayoutEffect } = React; export const CopyPromptButton = () => { const [copied, setCopied] = useState(false); + useLayoutEffect(() => { + const placeholder = document.querySelector('.copy-prompt-placeholder'); + if (placeholder) placeholder.style.display = 'none'; + }, []); + const prompt = `# Setup Kernel ## Prerequisites diff --git a/style.css b/style.css index a19ac30..25535d5 100644 --- a/style.css +++ b/style.css @@ -178,3 +178,24 @@ table tbody td:first-child { width: 100%; } } + +/* static placeholder for copy prompt button — visible before React hydrates */ +.copy-prompt-placeholder { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + width: 100%; + max-width: 352px; + height: 56px; + padding: 0 32px; + font-size: 0.9375rem; + font-weight: 500; + letter-spacing: 0.01em; + color: #fff; + background-color: #111; + border: 1px solid rgba(255, 255, 255, 0.08); + cursor: pointer; + font-family: inherit; + box-sizing: border-box; +} From 41d71e89b7de738002f72c13eeda503f6ddc9c9e Mon Sep 17 00:00:00 2001 From: masnwilliams <43387599+masnwilliams@users.noreply.github.com> Date: Wed, 15 Apr 2026 19:45:18 +0000 Subject: [PATCH 3/3] Revert "add static placeholder for copy prompt button to prevent late loading pop-in" This reverts commit 6e3f46a62e9fa9511db7cfd06077638f85c6b511. --- index.mdx | 7 ------- snippets/copy-prompt-button.jsx | 7 +------ style.css | 21 --------------------- 3 files changed, 1 insertion(+), 34 deletions(-) diff --git a/index.mdx b/index.mdx index c8f16d6..a2d25d3 100644 --- a/index.mdx +++ b/index.mdx @@ -35,13 +35,6 @@ import { CopyPromptButton } from '/snippets/copy-prompt-button.jsx'; copy and paste this into your AI coding agent (Cursor, Claude, Windsurf, etc.). it installs the Kernel CLI and skills, authenticates you, and opens a live browser session that you or your agent can interact with.

-
- - - - - copy prompt -
diff --git a/snippets/copy-prompt-button.jsx b/snippets/copy-prompt-button.jsx index fd0dfff..381d0bd 100644 --- a/snippets/copy-prompt-button.jsx +++ b/snippets/copy-prompt-button.jsx @@ -1,13 +1,8 @@ -const { useState, useCallback, useLayoutEffect } = React; +const { useState, useCallback } = React; export const CopyPromptButton = () => { const [copied, setCopied] = useState(false); - useLayoutEffect(() => { - const placeholder = document.querySelector('.copy-prompt-placeholder'); - if (placeholder) placeholder.style.display = 'none'; - }, []); - const prompt = `# Setup Kernel ## Prerequisites diff --git a/style.css b/style.css index 25535d5..a19ac30 100644 --- a/style.css +++ b/style.css @@ -178,24 +178,3 @@ table tbody td:first-child { width: 100%; } } - -/* static placeholder for copy prompt button — visible before React hydrates */ -.copy-prompt-placeholder { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - width: 100%; - max-width: 352px; - height: 56px; - padding: 0 32px; - font-size: 0.9375rem; - font-weight: 500; - letter-spacing: 0.01em; - color: #fff; - background-color: #111; - border: 1px solid rgba(255, 255, 255, 0.08); - cursor: pointer; - font-family: inherit; - box-sizing: border-box; -}