From 5da9945792045d22425f51f01b5b236d9aa7090c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=B7=E7=94=B5=E8=8A=BD=E8=A1=A3?=
 <zhangyanghaha0407@outlook.com>
Date: Thu, 16 Apr 2026 23:06:35 -0400
Subject: [PATCH] skills: replace hand-rolled primary button with ActionButton;
 use Input primitive (P2-33, P2-34)

---
 .../components/skills/SkillImportModal.tsx     | 18 +++++-------------
 .../components/skills/SkillsSection.tsx        | 14 ++++++--------
 2 files changed, 11 insertions(+), 21 deletions(-)

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>
+                />
               }
             />
           ) : (