Add projects

frontend/src/components/ui/Skeleton/Skeleton.module.scss

@@ -0,0 +1,31 @@
+@use '../../../styles/mixins' as *;
+@use '../../../styles/variables' as *;
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--bg-tertiary) 0%,
+    var(--bg-hover) 50%,
+    var(--bg-tertiary) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: var(--radius-md);
+  display: block;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeleton {
+    animation: none;
+    background: var(--bg-tertiary);
+  }
+}

frontend/src/components/ui/Skeleton/Skeleton.tsx

@@ -0,0 +1,19 @@
+import type { CSSProperties, HTMLAttributes } from 'react';
+import styles from './Skeleton.module.scss';
+
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  width?: number | string;
+  height?: number | string;
+  rounded?: number | string;
+}
+
+export function Skeleton({ width, height, rounded, className, style, ...rest }: SkeletonProps) {
+  const merged: CSSProperties = {
+    ...style,
+    width: width ?? style?.width,
+    height: height ?? style?.height,
+    borderRadius: rounded ?? style?.borderRadius,
+  };
+  const cls = [styles.skeleton, className].filter(Boolean).join(' ');
+  return <div className={cls} style={merged} aria-hidden="true" {...rest} />;
+}

frontend/src/components/ui/Skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton } from './Skeleton';