feat: add skeleton loading component

components/Skeleton/README.md

@@ -0,0 +1,26 @@
+# Skeleton Component
+
+The **Skeleton** component provides a visual placeholder while content is loading.  
+It uses a smooth shimmer animation and customizable dimensions.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|----------|-------------|
+| `width` | `string` | `100%` | Sets the width of the skeleton block |
+| `height` | `string` | `20px` | Sets the height of the skeleton block |
+| `borderRadius` | `string` | `8px` | Rounds the corners of the skeleton |
+
+## Example
+
+```jsx
+import Skeleton from "./Skeleton";
+
+export default function Example() {
+  return (
+    <>
+      <Skeleton width="200px" height="20px" />
+      <Skeleton width="100%" height="40px" borderRadius="12px" />
+    </>
+  );
+}

components/Skeleton/Skeleton.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+const Skeleton = ({ width = "100%", height = "20px", borderRadius = "8px" }) => {
+  const style = {
+    width,
+    height,
+    borderRadius,
+    background: "linear-gradient(90deg, #e2e8f0 25%, #f8fafc 50%, #e2e8f0 75%)",
+    backgroundSize: "200% 100%",
+    animation: "skeleton-loading 1.5s infinite ease-in-out",
+  };
+
+  return (
+    <>
+      <style>
+        {`
+          @keyframes skeleton-loading {
+            0% { background-position: 200% 0; }
+            100% { background-position: -200% 0; }
+          }
+        `}
+      </style>
+      <div style={style}></div>
+    </>
+  );
+};
+
+export default Skeleton;

components/Skeleton/metadata.json

@@ -0,0 +1,11 @@
+{
+  "name": "Skeleton",
+  "description": "A loading placeholder component with shimmer animation.",
+  "props": {
+    "width": "string (default: 100%)",
+    "height": "string (default: 20px)",
+    "borderRadius": "string (default: 8px)"
+  },
+  "category": "Feedback",
+  "framework": "React"
+}