diff --git a/src/renderer/components/skills/SkillImportModal.tsx b/src/renderer/components/skills/SkillImportModal.tsx
index 07c4f6cd..41593ca8 100644
--- a/src/renderer/components/skills/SkillImportModal.tsx
+++ b/src/renderer/components/skills/SkillImportModal.tsx
@@ -5,7 +5,7 @@ import {
   Globe,
   Link,
 } from "@phosphor-icons/react";
-import { Modal, ActionButton } from "../ui";
+import { Modal, ActionButton, Input } from "../ui";
 import { useAppStore } from "../../state/store";
 
 type TabId = "github" | "local" | "url" | "skills_sh";
@@ -143,21 +143,13 @@ export function SkillImportModal({
         <div className="space-y-3">
           {activeTab === "local" ? (
             <div className="flex gap-2">
-              <input
-                className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 w-full rounded-lg border border-border bg-card px-3.5 py-2.5 text-[14px] text-foreground placeholder:text-muted-foreground"
-                value={source}
-                onChange={(e) => setSource(e.target.value)}
-                placeholder={placeholder.local}
-              />
+              <div className="flex-1">
+                <Input value={source} onChange={setSource} placeholder={placeholder.local} />
+              </div>
               <ActionButton label="Browse" onClick={() => void handleBrowse()} />
             </div>
           ) : (
-            <input
-              className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 w-full rounded-lg border border-border bg-card px-3.5 py-2.5 text-[14px] text-foreground placeholder:text-muted-foreground"
-              value={source}
-              onChange={(e) => setSource(e.target.value)}
-              placeholder={placeholder[activeTab]}
-            />
+            <Input value={source} onChange={setSource} placeholder={placeholder[activeTab]} />
           )}
 
           {activeTab === "skills_sh" && (
diff --git a/src/renderer/components/skills/SkillsSection.tsx b/src/renderer/components/skills/SkillsSection.tsx
index 40c3f741..f9f80d23 100644
--- a/src/renderer/components/skills/SkillsSection.tsx
+++ b/src/renderer/components/skills/SkillsSection.tsx
@@ -5,7 +5,7 @@ import {
 } from "@phosphor-icons/react";
 import type { AgentRecord } from "@shared/types";
 import { useAppStore } from "../../state/store";
-import { EmptyState } from "../ui";
+import { ActionButton, EmptyState } from "../ui";
 import { SkillList } from "./SkillList";
 import { SkillImportModal } from "./SkillImportModal";
 import { SkillDetail } from "./SkillDetail";
@@ -106,14 +106,12 @@ export function SkillsSection({
               title="No skills imported"
               detail="Import skills from GitHub, a local path, or skills.sh to get started."
               action={
-                <button
-                  type="button"
-                  className="focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 inline-flex items-center gap-2 rounded-lg border border-transparent bg-primary px-4 py-2.5 text-[12px] font-bold text-primary-foreground shadow-[0_1px_3px_rgba(74,93,122,0.35)] transition hover:bg-primary/90"
+                <ActionButton
+                  label="Import Skill"
+                  icon={Plus}
+                  tone="accent"
                   onClick={() => setSkillImportModalOpen(true)}
-                >
-                  <Plus size={14} weight="bold" />
-                  Import Skill
-                </button>
+                />
               }
             />
           ) : (