feat(01-02): create PageShell, StatCard, SummaryStrip, and DashboardSkeleton components

- PageShell: reusable page header with title, description, and action slot
- StatCard: KPI card with formatted value, semantic color, and optional variance badge
- SummaryStrip: responsive 3-card grid composing StatCards for income/expenses/balance
- DashboardSkeleton: pulse-animated loading placeholder mirroring real dashboard layout

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/dashboard/DashboardSkeleton.tsx

@@ -0,0 +1,49 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { Card, CardContent, CardHeader } from "@/components/ui/card"
+
+function SkeletonStatCard() {
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <Skeleton className="h-4 w-24" />
+      </CardHeader>
+      <CardContent>
+        <Skeleton className="h-8 w-32" />
+        <Skeleton className="mt-1 h-3 w-20" />
+      </CardContent>
+    </Card>
+  )
+}
+
+export function DashboardSkeleton() {
+  return (
+    <div className="flex flex-col gap-6">
+      {/* Summary cards skeleton */}
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <SkeletonStatCard />
+        <SkeletonStatCard />
+        <SkeletonStatCard />
+      </div>
+
+      {/* Chart area skeleton */}
+      <div className="grid gap-6 lg:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-5 w-40" />
+          </CardHeader>
+          <CardContent>
+            <Skeleton className="h-[240px] w-full rounded-md" />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <Skeleton className="h-5 w-40" />
+          </CardHeader>
+          <CardContent>
+            <Skeleton className="h-[240px] w-full rounded-md" />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}