feat: add skeleton docs

apps/www/src/content/docs/docs/components/skeleton.mdx

@@ -0,0 +1,46 @@
+---
+title: Skeleton
+description: Use to show a placeholder while content is loading.
+component: true
+---
+
+import { Tabs, TabItem } from "@astrojs/starlight/components";
+import { Steps } from "@astrojs/starlight/components";
+
+<ComponentPreview name="skeleton-demo" />
+
+## Installation
+
+<Tabs>
+    <TabItem label="CLI">
+        ```bash frame="code"
+        npx shadcn-ng@latest add skeleton
+        ```
+    </TabItem>
+
+    <TabItem label="Manual">
+        <Steps>
+            1. Copy and paste the following code into your project.
+                <ComponentSource name="skeleton" />
+
+            2. Update the import paths to match your project setup.
+        </Steps>
+    </TabItem>
+
+</Tabs>
+
+## Usage
+
+```ts
+import { UbSkeletonDirective } from "@/components/ui/sekeleton.directive";
+```
+
+```angular-html
+<div ubSkeleton class="w-[100px] h-[20px] rounded-full"></div>
+```
+
+## Examples
+
+### Card
+
+<ComponentPreview name="skeleton-card" />

apps/www/src/registry/default/example/skeleton-card.ts

@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+
+import { UbSkeletonDirective } from "@/registry/default/ui/skeleton.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbSkeletonDirective],
+  template: ` <div class="flex flex-col space-y-3">
+    <div ubSkeleton class="h-[125px] w-[250px] rounded-xl"></div>
+    <div class="space-y-2">
+      <div ubSkeleton class="h-4 w-[250px]"></div>
+      <div ubSkeleton class="h-4 w-[200px]"></div>
+    </div>
+  </div>`,
+})
+export class SekeletonCardComponent {}
+
+export default SekeletonCardComponent;

apps/www/src/registry/default/example/skeleton-demo.ts

@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+
+import { UbSkeletonDirective } from "@/registry/default/ui/skeleton.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbSkeletonDirective],
+  template: ` <div class="flex items-center space-x-4">
+    <div ubSkeleton class="h-12 w-12 rounded-full"></div>
+    <div class="space-y-2">
+      <div ubSkeleton class="h-4 w-[250px]"></div>
+      <div ubSkeleton class="h-4 w-[200px]"></div>
+    </div>
+  </div>`,
+})
+export class SekeletonDemoComponent {}
+
+export default SekeletonDemoComponent;

apps/www/src/registry/new-york/example/skeleton-card.ts

@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+
+import { UbSkeletonDirective } from "@/registry/new-york/ui/skeleton.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbSkeletonDirective],
+  template: ` <div class="flex flex-col space-y-3">
+    <div ubSkeleton class="h-[125px] w-[250px] rounded-xl"></div>
+    <div class="space-y-2">
+      <div ubSkeleton class="h-4 w-[250px]"></div>
+      <div ubSkeleton class="h-4 w-[200px]"></div>
+    </div>
+  </div>`,
+})
+export class SekeletonCardComponent {}
+
+export default SekeletonCardComponent;

apps/www/src/registry/new-york/example/skeleton-demo.ts

@@ -0,0 +1,18 @@
+import { Component } from "@angular/core";
+
+import { UbSkeletonDirective } from "@/registry/new-york/ui/skeleton.directive";
+
+@Component({
+  standalone: true,
+  imports: [UbSkeletonDirective],
+  template: ` <div class="flex items-center space-x-4">
+    <div ubSkeleton class="h-12 w-12 rounded-full"></div>
+    <div class="space-y-2">
+      <div ubSkeleton class="h-4 w-[250px]"></div>
+      <div ubSkeleton class="h-4 w-[200px]"></div>
+    </div>
+  </div>`,
+})
+export class SekeletonDemoComponent {}
+
+export default SekeletonDemoComponent;