feat: add PresetCardSkeleton component with shimmer animation

src/features/project/CaptionSettingsStep/PresetCardSkeleton.module.scss

@@ -0,0 +1,74 @@
+.skeletonCard {
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--bg-default);
+  border: 1px solid var(--border-subtle);
+  display: flex;
+  flex-direction: column;
+}
+
+.skeletonPreview {
+  aspect-ratio: 16 / 9;
+  background: var(--bg-surface);
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(203, 166, 247, 0.08) 50%,
+      transparent 100%
+    );
+    animation: shimmer 1.5s infinite;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.skeletonFooter {
+  padding: 14px 16px;
+  background: linear-gradient(to top, var(--bg-surface), var(--bg-default));
+  border-top: 1px solid var(--border-subtle);
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.skeletonLine {
+  height: 14px;
+  background: var(--bg-hover);
+  border-radius: 4px;
+  width: 60%;
+  position: relative;
+  overflow: hidden;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      rgba(203, 166, 247, 0.06) 50%,
+      transparent 100%
+    );
+    animation: shimmer 1.5s infinite;
+  }
+}
+
+.skeletonLineShort {
+  composes: skeletonLine;
+  width: 40%;
+  height: 10px;
+}

src/features/project/CaptionSettingsStep/PresetCardSkeleton.tsx

@@ -0,0 +1,25 @@
+import type { FunctionComponent } from "react"
+import type { JSX } from "react"
+
+import styles from "./PresetCardSkeleton.module.scss"
+
+interface IPresetCardSkeletonProps {
+  aspectRatio?: number
+}
+
+export const PresetCardSkeleton: FunctionComponent<IPresetCardSkeletonProps> = ({
+  aspectRatio = 16 / 9,
+}): JSX.Element => {
+  return (
+    <div className={styles.skeletonCard}>
+      <div
+        className={styles.skeletonPreview}
+        style={{ aspectRatio }}
+      />
+      <div className={styles.skeletonFooter}>
+        <div className={styles.skeletonLine} />
+        <div className={styles.skeletonLineShort} />
+      </div>
+    </div>
+  )
+}

src/features/project/CaptionSettingsStep/index.ts

@@ -1 +1,2 @@
 export { CaptionSettingsStep } from "./CaptionSettingsStep"
+export { PresetCardSkeleton } from "./PresetCardSkeleton"