diff --git a/web/src/features/skill/install-command.test.ts b/web/src/features/skill/install-command.test.ts
index 9649037c..60b8ee3a 100644
--- a/web/src/features/skill/install-command.test.ts
+++ b/web/src/features/skill/install-command.test.ts
@@ -111,6 +111,20 @@ describe('install-command', () => {
     expect(html).toContain('break-all')
   })
 
+  it('renders install method tabs with only a short active underline', () => {
+    setMockWindow('https://app.example.com')
+
+    const html = renderToStaticMarkup(createElement(InstallCommand, {
+      namespace: 'global',
+      slug: 'meeting-minutes-generator',
+    }))
+
+    expect(html).toContain('after:w-6')
+    expect(html).toContain('after:h-0.5')
+    expect(html).not.toContain('rounded-lg border bg-background/80 p-1')
+    expect(html).not.toContain('flex-1 rounded-md')
+  })
+
   it('renders ClawHub CLI as the default install method', () => {
     setMockWindow('https://app.example.com')
 
diff --git a/web/src/features/skill/install-command.tsx b/web/src/features/skill/install-command.tsx
index 3ed088c5..3f409b9d 100644
--- a/web/src/features/skill/install-command.tsx
+++ b/web/src/features/skill/install-command.tsx
@@ -43,6 +43,9 @@ interface CommandBlockProps {
   command: string
 }
 
+const installMethodTabTriggerClass =
+  "relative border-b-0 px-1 py-2 text-xs after:absolute after:bottom-[-1px] after:left-1/2 after:h-0.5 after:w-6 after:-translate-x-1/2 after:rounded-full after:bg-transparent after:content-[''] data-[state=active]:after:bg-primary"
+
 function CommandBlock({ command }: CommandBlockProps) {
   const { t } = useTranslation()
   const [copied, copy] = useCopyToClipboard()
@@ -85,11 +88,11 @@ export function InstallCommand({ namespace, slug }: InstallCommandProps) {
 
   return (
     <Tabs defaultValue="clawhub" className="space-y-3">
-      <TabsList className="w-full gap-2 rounded-lg border bg-background/80 p-1 text-xs">
-        <TabsTrigger value="clawhub" className="flex-1 rounded-md px-3 py-2 text-xs">
+      <TabsList className="w-full gap-6 border-border/70 bg-transparent p-0 text-xs">
+        <TabsTrigger value="clawhub" className={installMethodTabTriggerClass}>
           {t('skillDetail.installMethodClawhub')}
         </TabsTrigger>
-        <TabsTrigger value="skillhub" className="flex-1 rounded-md px-3 py-2 text-xs">
+        <TabsTrigger value="skillhub" className={installMethodTabTriggerClass}>
           {t('skillDetail.installMethodSkillhub')}
         </TabsTrigger>
       </TabsList>