diff --git a/frontend-web/package.json b/frontend-web/package.json
index 368e9fa6..aedd761c 100644
--- a/frontend-web/package.json
+++ b/frontend-web/package.json
@@ -59,6 +59,7 @@
     "cmdk": "^1.1.1",
     "codemirror": "^6.0.2",
     "date-fns": "^4.1.0",
+    "dayjs": "^1.11.20",
     "docx": "^9.5.1",
     "dotenv": "^17.2.3",
     "embla-carousel-react": "^8.6.0",
diff --git a/frontend-web/src/components/workspace/settings/skill-settings-page.tsx b/frontend-web/src/components/workspace/settings/skill-settings-page.tsx
index 2e20e074..19a12de2 100644
--- a/frontend-web/src/components/workspace/settings/skill-settings-page.tsx
+++ b/frontend-web/src/components/workspace/settings/skill-settings-page.tsx
@@ -27,6 +27,13 @@ import { toast } from "sonner";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import {
   Dialog,
   DialogContent,
@@ -43,6 +50,7 @@ import {
   EmptyMedia,
   EmptyTitle,
 } from "@/components/ui/empty";
+
 import {
   Item,
   ItemActions,
@@ -50,6 +58,7 @@ import {
   ItemContent,
   ItemDescription,
 } from "@/components/ui/item";
+
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { SkillDetailDialog } from "@/components/workspace/skills/skill-detail-dialog";
 import { TagChipList } from "@/components/workspace/tags/tag-chip";
@@ -319,6 +328,8 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
       {!isLoading && !error && filteredSkills.length === 0 && (
         <EmptySkill onCreateSkill={handleCreateSkill} />
       )}
+      
+      {/* —— 原纵向列表布局（保留备查）——
       {!isLoading && !error &&
         filteredSkills.length > 0 &&
         pagedSkills.map((skill) => (
@@ -328,7 +339,21 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
             currentUserId={currentUserId}
             isAdmin={isAdmin}
           />
-        ))}
+        ))} */}
+     {/* card */}
+      {!isLoading && !error && filteredSkills.length > 0 && (
+        <div className="grid grid-cols-1 items-stretch gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+          {pagedSkills.map((skill) => (
+            <SkillRow
+              key={skill.name}
+              skill={skill}
+              currentUserId={currentUserId}
+              isAdmin={isAdmin}
+              className="h-full"
+            />
+          ))}
+        </div>
+      )}
       {!isLoading && !error && totalPages > 1 && (
         <div className="flex items-center justify-end gap-2 pt-1">
           <Button
@@ -381,10 +406,12 @@ export function SkillRow({
   skill,
   currentUserId,
   isAdmin,
+  className,
 }: {
   skill: Skill;
   currentUserId: string | null;
   isAdmin: boolean;
+  className?: string;
 }) {
   const { t } = useI18n();
   const setPublished = useSetSkillPublished();
@@ -442,6 +469,8 @@ export function SkillRow({
 
   return (
     <>
+      
+      {/* —— 原 Item 列表行布局（保留备查）——
       <Item className="w-full dark:border-[#213D5E] dark:bg-[#02244C] dark:text-white" variant="outline">
         <ItemContent
           className="cursor-pointer"
@@ -599,7 +628,197 @@ export function SkillRow({
             </Button>
           )}
         </ItemActions>
-      </Item>
+      </Item> */}
+     
+      <Card
+        className={cn(
+          "group flex h-full min-w-0 cursor-pointer flex-col transition-shadow hover:shadow-md dark:!border-[#213D5E] dark:bg-[#02244C] dark:text-white",
+          className,
+        )}
+        onClick={() => setDetailOpen(true)}
+      >
+        <CardHeader className="min-w-0 flex flex-col gap-0">
+          <div className="flex min-w-0 items-center gap-2">
+            <div className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
+              <SparklesIcon className="h-5 w-5" />
+            </div>
+            <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2 overflow-hidden">
+              <CardTitle
+                className="min-w-0 flex-1 overflow-hidden text-base text-ellipsis whitespace-nowrap"
+                title={desensitize(skill.name)}
+              >
+                {desensitize(skill.name)}
+              </CardTitle>
+              <Badge variant="secondary" className="shrink-0 text-xs">
+                {isBuiltin
+                  ? t.settings.skills.badgeBuiltin
+                  : skill.category}
+              </Badge>
+            </div>
+          </div>
+
+          <div className="mt-4 mb-1.5 flex min-h-5 flex-wrap items-center gap-1">
+            {isOwned && (
+              <Badge
+                variant="default"
+                className="bg-emerald-500/15 text-emerald-700 hover:bg-emerald-500/15 dark:text-emerald-300 text-xs"
+              >
+                {t.settings.skills.badgeMine}
+              </Badge>
+            )}
+            {isFromOthers && (
+              <Badge
+                variant="outline"
+                className="border-blue-500/30 text-blue-700 dark:text-blue-300 text-xs"
+                title={
+                  skill.owner_user_id
+                    ? t.settings.skills.badgeFromOthersTitle.replace(
+                        "{user_id}",
+                        skill.owner_user_id,
+                      )
+                    : undefined
+                }
+              >
+                {t.settings.skills.badgeFromOthers}
+              </Badge>
+            )}
+            {isOwned && skill.published && (
+              <Badge
+                variant="outline"
+                className="border-sky-500/30 text-sky-700 dark:text-sky-300 text-xs"
+                title={t.settings.skills.badgePublishedTitle}
+              >
+                <GlobeIcon className="size-3" />
+                {t.settings.skills.badgePublished}
+              </Badge>
+            )}
+            {isCustom && !isBuiltin && skill.source === "agent" && (
+              <Badge
+                variant="outline"
+                className="border-cyan-500/30 text-cyan-700 dark:text-cyan-300 text-xs"
+                title={t.settings.skills.badgeSourceAgentTitle}
+              >
+                {t.settings.skills.badgeSourceAgent}
+              </Badge>
+            )}
+            {isCustom && !isBuiltin && skill.source === "upload" && (
+              <Badge
+                variant="outline"
+                className="border-zinc-400/40 text-zinc-600 dark:text-zinc-400 text-xs"
+                title={t.settings.skills.badgeSourceUploadTitle}
+              >
+                {t.settings.skills.badgeSourceUpload}
+              </Badge>
+            )}
+            {skill.pinned && (
+              <Badge
+                variant="outline"
+                className="border-purple-500/30 text-purple-700 dark:text-purple-300 text-xs"
+                title={t.settings.skills.badgePinnedTitle}
+              >
+                {t.settings.skills.badgePinned}
+              </Badge>
+            )}
+          </div>
+          <div className="mt-1.5 min-h-10 mb-3">
+            {skill.description ? (
+              <CardDescription className="line-clamp-2 text-sm">
+                {desensitize(skill.description)}
+              </CardDescription>
+            ) : null}
+          </div>
+          <div className="text-muted-foreground mt-0.5 min-h-4 text-xs leading-tight">
+            {skill.use_count !== undefined && skill.use_count > 0
+              ? t.settings.skills.useCountInline.replace(
+                  "{count}",
+                  String(skill.use_count),
+                )
+              : t.settings.skills.useCountInlineZero}
+          </div>
+          <div
+            className={cn(
+              "min-w-0 max-w-full overflow-hidden pb-0",
+              (skill.tags?.length ?? 0) > 0 ? "pt-2.5" : "min-h-4",
+            )}
+          >
+            {(skill.tags?.length ?? 0) > 0 && (
+              <TagChipList tags={skill.tags!} className="w-full" />
+            )}
+          </div>
+        </CardHeader>
+
+        {(isAdmin || canManage || canTogglePublish) && (
+          <CardFooter
+            className="cursor-default py-0 pt-1.5"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <div className="flex w-full flex-wrap items-center justify-end gap-1">
+              {isAdmin && (
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="h-8 w-8 shrink-0"
+                  onClick={() => setTagPickerOpen(true)}
+                  title={t.adminTags.manageTags}
+                >
+                  <TagsIcon className="h-3.5 w-3.5" />
+                </Button>
+              )}
+              {canManage && (
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="h-8 w-8 shrink-0"
+                  disabled={setPinned.isPending}
+                  onClick={() => void handleTogglePinned()}
+                  title={
+                    skill.pinned
+                      ? t.settings.skills.unpinAction
+                      : t.settings.skills.pinAction
+                  }
+                >
+                  {skill.pinned ? (
+                    <PinOffIcon className="h-3.5 w-3.5" />
+                  ) : (
+                    <PinIcon className="h-3.5 w-3.5" />
+                  )}
+                </Button>
+              )}
+              {canTogglePublish && (
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="h-8 w-8 shrink-0"
+                  disabled={setPublished.isPending}
+                  onClick={() => void handleTogglePublished(!skill.published)}
+                  title={
+                    skill.published
+                      ? t.settings.skills.unpublishAction
+                      : t.settings.skills.publishAction
+                  }
+                >
+                  {skill.published ? (
+                    <LockIcon className="h-3.5 w-3.5" />
+                  ) : (
+                    <GlobeIcon className="h-3.5 w-3.5" />
+                  )}
+                </Button>
+              )}
+              {canManage && (
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="text-destructive hover:text-destructive h-8 w-8 shrink-0"
+                  onClick={() => setConfirmDeleteOpen(true)}
+                  title={t.settings.skills.deleteAction}
+                >
+                  <Trash2Icon className="h-3.5 w-3.5" />
+                </Button>
+              )}
+            </div>
+          </CardFooter>
+        )}
+      </Card>
       <Dialog open={confirmDeleteOpen} onOpenChange={setConfirmDeleteOpen}>
         <DialogContent>
           <DialogHeader>
diff --git a/frontend-web/src/components/workspace/tags/tag-chip.tsx b/frontend-web/src/components/workspace/tags/tag-chip.tsx
index 17edf948..635e46a6 100644
--- a/frontend-web/src/components/workspace/tags/tag-chip.tsx
+++ b/frontend-web/src/components/workspace/tags/tag-chip.tsx
@@ -17,20 +17,22 @@ export function TagChip({
   className?: string;
 }) {
   const color = resolveTagColor(tag.color);
+  const label = desensitize(tag.name);
   return (
     <span
       className={cn(
-        "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium",
+        "inline-flex max-w-full min-w-0 items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium",
         color.chip,
         className,
       )}
+      title={label}
     >
-      {desensitize(tag.name)}
+      <span className="min-w-0 truncate">{label}</span>
       {onRemove && (
         <button
           type="button"
           onClick={onRemove}
-          className="hover:opacity-70"
+          className="shrink-0 hover:opacity-70"
           aria-label={`remove ${tag.name}`}
         >
           <XIcon className="size-3" />
@@ -50,7 +52,7 @@ export function TagChipList({
 }) {
   if (!tags || tags.length === 0) return null;
   return (
-    <div className={cn("flex flex-wrap gap-1", className)}>
+    <div className={cn("flex min-w-0 max-w-full flex-wrap gap-1", className)}>
       {tags.map((tag) => (
         <TagChip key={tag.name} tag={tag} />
       ))}