refactor(agent-skills): condense callout to single-line layout

Redesign the callout to fit title, prompt, and copy button on one row.
Remove the Recommended badge. Smaller padding and font sizes throughout.
Description and View docs link sit in a compact sub-row below.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: HazAT

src/components/agentSkillsCallout/index.tsx

@@ -78,22 +78,16 @@ export function AgentSkillsCallout({skill, platformName}: Props) {
   );
 
   const description = platformName
-    ? `Your agent will analyze your codebase, detect your stack, and set up Sentry in your ${platformName} app automatically.`
-    : 'Your agent will analyze your codebase, detect your stack, and set up Sentry automatically.';
+    ? `Your agent will set up Sentry in your ${platformName} app automatically.`
+    : 'Your agent will set up Sentry automatically.';
 
   return (
     <div className={styles.wrapper} data-mdast="ignore">
-      <div className={styles.header}>
-        <div className={styles.titleRow}>
+      <div className={styles.mainRow}>
+        <div className={styles.left}>
           <span className={styles.title}>Agent-Assisted Setup</span>
-          <span className={styles.badge}>Recommended</span>
         </div>
-      </div>
-
-      <p className={styles.subtitle}>Paste this into your coding agent</p>
-
-      <div className={styles.promptRow}>
-        <div className={styles.promptBox}>
+        <div className={styles.promptArea}>
           <code className={styles.promptText}>{prompt}</code>
         </div>
         <button className={styles.copyButton} onClick={copyPrompt} type="button">
@@ -102,7 +96,7 @@ export function AgentSkillsCallout({skill, platformName}: Props) {
         </button>
       </div>
 
-      <div className={styles.footer}>
+      <div className={styles.subRow}>
         <span className={styles.description}>
           {description} Works with Cursor, Claude Code, Codex, and more.
         </span>

src/components/agentSkillsCallout/style.module.scss

@@ -1,6 +1,6 @@
 .wrapper {
   margin-bottom: 1rem;
-  padding: 1rem 1.25rem;
+  padding: 0.65rem 1rem;
   border-radius: 8px;
   border: 1px solid color-mix(in srgb, var(--accent-purple), transparent 60%);
   background: color-mix(in srgb, var(--accent-purple), transparent 92%);
@@ -12,71 +12,43 @@
   color: var(--desatPurple15);
 }
 
-.header {
-  margin-bottom: 0.5rem;
+.mainRow {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
 }
 
-.titleRow {
+.left {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.4rem;
+  flex-shrink: 0;
 }
 
 .title {
   font-weight: 600;
-  font-size: 1rem;
-}
-
-.badge {
-  font-size: 0.7rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  padding: 0.15rem 0.5rem;
-  border-radius: 999px;
-  border: 1px solid var(--accent-purple);
-  color: var(--accent-purple);
-  line-height: 1.3;
-}
-
-:global(.dark) .badge {
-  color: var(--accent-purple-light);
-  border-color: var(--accent-purple-light);
-}
-
-.subtitle {
-  font-size: 0.85rem;
-  opacity: 0.7;
-  margin: 0 0 0.6rem;
-}
-
-.promptRow {
-  display: flex;
-  align-items: stretch;
-  gap: 0.5rem;
-  margin-bottom: 0.75rem;
+  font-size: 0.9rem;
+  white-space: nowrap;
 }
 
-.promptBox {
+.promptArea {
   flex: 1;
   min-width: 0;
   background: var(--gray-100);
   border: 1px solid var(--gray-200);
-  border-radius: 6px;
-  padding: 0.55rem 0.75rem;
-  display: flex;
-  align-items: center;
+  border-radius: 5px;
+  padding: 0.35rem 0.6rem;
   overflow-x: auto;
 }
 
-:global(.dark) .promptBox {
-  background: var(--desatPurple0);
+:global(.dark) .promptArea {
+  background: color-mix(in srgb, var(--desatPurple0), transparent 20%);
   border-color: var(--desatPurple3);
 }
 
 .promptText {
   font-family: var(--font-family-monospace);
-  font-size: 0.82rem;
+  font-size: 0.78rem;
   white-space: nowrap;
   color: inherit;
   background: none;
@@ -87,16 +59,17 @@
 .copyButton {
   display: flex;
   align-items: center;
-  gap: 0.4rem;
-  padding: 0.5rem 1rem;
+  gap: 0.35rem;
+  padding: 0.35rem 0.75rem;
   border: 1px solid var(--gray-200);
-  border-radius: 6px;
+  border-radius: 5px;
   background: var(--white);
   color: var(--gray-500);
-  font-size: 0.82rem;
+  font-size: 0.78rem;
   font-weight: 500;
   white-space: nowrap;
   cursor: pointer;
+  flex-shrink: 0;
   transition:
     background-color 150ms,
     border-color 150ms;
@@ -126,23 +99,22 @@
   }
 }
 
-.footer {
+.subRow {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
-  gap: 1rem;
-  margin-bottom: 0.25rem;
+  gap: 0.75rem;
+  margin-top: 0.35rem;
   flex-wrap: wrap;
 }
 
 .description {
-  font-size: 0.8rem;
-  opacity: 0.7;
-  line-height: 1.5;
+  font-size: 0.75rem;
+  opacity: 0.6;
 }
 
 .viewDocs {
-  font-size: 0.8rem;
+  font-size: 0.75rem;
   color: var(--accent-purple);
   text-decoration: none;
   white-space: nowrap;
@@ -158,22 +130,22 @@
 }
 
 .expandSection {
-  margin-top: 0.75rem;
+  margin-top: 0.35rem;
   border-top: 1px solid color-mix(in srgb, var(--accent-purple), transparent 70%);
-  margin-bottom: -0.8rem;
+  margin-bottom: -0.5rem;
 }
 
 .expandSummary {
   display: flex;
   align-items: center;
-  gap: 0.35rem;
+  gap: 0.3rem;
   cursor: pointer;
-  font-size: 0.85rem;
+  font-size: 0.78rem;
   font-weight: 500;
-  opacity: 0.7;
+  opacity: 0.6;
   list-style: none;
   user-select: none;
-  padding: 0.6rem 0;
+  padding: 0.4rem 0;
 
   &::-webkit-details-marker {
     display: none;
@@ -190,8 +162,8 @@
 }
 
 .expandIcon {
-  width: 14px;
-  height: 14px;
+  width: 13px;
+  height: 13px;
   flex-shrink: 0;
 }
 
@@ -200,7 +172,7 @@
   padding-bottom: 0.25rem;
 
   & p {
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     margin-bottom: 0.5rem;
   }
 }