feat: 初始化 Toolso.AI 开源 AI 工具导航站项目

🎯 项目概述
- 一个开源的 AI 工具导航站，帮助用户发现和探索优秀的 AI 工具
- 基于 Next.js 16 + React 19 构建的现代化全栈应用

✨ 核心功能
- AI 工具目录：分类展示、搜索筛选、工具详情页
- 工具提交：用户可提交新工具，社区驱动
- 管理后台：工具审核、用户管理、角色权限控制
- 博客系统：MDX 驱动，AI 资讯和教程
- 国际化支持：中文/英文双语 (next-intl)
- 用户认证：Better Auth + Google OAuth
- 深色/浅色主题切换

🛠 技术栈
- 前端：Next.js 16 (App Router) + React 19 + TypeScript
- 样式：Tailwind CSS + Framer Motion 动画
- UI 组件：自定义组件库 + Radix UI
- 表单验证：React Hook Form + Zod
- 数据库：PostgreSQL + Drizzle ORM
- 认证：Better Auth (邮箱密码 + Google OAuth)
- 邮件：Resend (验证邮件 + Newsletter)
- 存储：Cloudflare R2 / AWS S3 兼容

📁 项目结构
- src/app/[locale]/(auth) - 认证页面
- src/app/[locale]/(marketing) - 营销页面 (首页、博客、工具目录)
- src/app/[locale]/(protected) - 受保护页面 (仪表板、个人资料)
- src/app/[locale]/(admin) - 管理后台
- src/features - 功能模块
- src/lib - 核心业务逻辑
- messages - 国际化翻译文件

🗄 数据库
- 包含 user, session, account, verification, passwordResetToken 等核心表
- 支持 Drizzle ORM 迁移管理

📝 文档
- 完整的 CLAUDE.md 项目指南
- 环境变量配置示例 (.env.example)
- MIT 开源许可证

src/components/skeletons/first.tsx

@@ -0,0 +1,113 @@
+"use client";
+import React from "react";
+import { motion } from "framer-motion";
+import Image from "next/image";
+import { BlurImage } from "../blur-image";
+
+export const SkeletonOne = () => {
+  return (
+    <div className="relative flex p-8 gap-10 h-full">
+      <div className=" w-full md:w-[90%] p-5  mx-auto bg-card shadow-2xl group h-full">
+        <div className="flex flex-1 w-full h-full flex-col space-y-2 opacity-20 dark:opacity-60 ">
+          <UserMessage>
+            I want to generate an image of two people, fighting outside a bar.
+            They fight to the core. Once they&apos;re done, they sit down and
+            drink beer.
+          </UserMessage>
+          <AIMessage>
+            Certainly, I&apos;m generating this picture for you in a while. BTW
+            are you talking about THAT movie?
+          </AIMessage>
+          <UserMessage>
+            I don&apos;t know what you&apos;re talking about.
+          </UserMessage>
+          <AIMessage>Are you sure?</AIMessage>
+          <UserMessage>
+            Yes, I&apos;m sure. But if you&apos;re generating that scene, make
+            sure the fighters have clown shoes and rubber chickens instead of
+            fists!
+          </UserMessage>
+          <AIMessage>Affirmative, here&apos;s your image.</AIMessage>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4 absolute inset-0">
+        <div className="p-2 border border-border bg-muted rounded-[32px]  r h-[250px] w-[250px] md:h-[300px] md:w-[300px] mx-auto  flex-shrink-0  z-20 group-hover:scale-[1.02] transition duration-200">
+          <div className="p-2 bg-card border border-border rounded-[24px] flex-shrink-0">
+            <BlurImage
+              src="/skeleton-one.png"
+              alt="header"
+              width={800}
+              height={800}
+              className="rounded-[20px] w-full h-full object-cover object-bottom aspect-square flex-shrink-0 grayscale"
+            />
+          </div>
+        </div>
+        <div className="p-2 border border-border bg-muted rounded-[32px]  r h-[250px] w-[250px] md:h-[300px] md:w-[300px] mx-auto  flex-shrink-0  z-20 group-hover:scale-[1.02] transition duration-200">
+          <div className="p-2 bg-card border border-border rounded-[24px] flex-shrink-0">
+            <BlurImage
+              src="/tyler.jpeg"
+              alt="header"
+              width={800}
+              height={800}
+              className="rounded-[20px] w-full h-full object-cover object-bottom aspect-square flex-shrink-0 grayscale"
+            />
+          </div>
+        </div>
+      </div>
+      <div className="absolute bottom-0 z-40 inset-x-0 h-60 bg-gradient-to-t from-background via-background to-transparent w-full pointer-events-none" />
+      <div className="absolute top-0 z-40 inset-x-0 h-60 bg-gradient-to-b from-background via-transparent to-transparent w-full pointer-events-none" />
+    </div>
+  );
+};
+
+const UserMessage = ({ children }: { children: React.ReactNode }) => {
+  const variants = {
+    initial: {
+      x: 0,
+    },
+    animate: {
+      x: 5,
+      transition: {
+        duration: 0.2,
+      },
+    },
+  };
+  return (
+    <motion.div
+      variants={variants}
+      className="flex flex-row rounded-2xl  p-2  items-start space-x-2 bg-card"
+    >
+      <Image
+        src="/avatar.jpeg"
+        alt="avatar"
+        height="100"
+        width="100"
+        className="rounded-full h-4 w-4 md:h-10 md:w-10"
+      />
+      <p className="text-[10px] sm:text-sm text-muted-foreground">{children}</p>
+    </motion.div>
+  );
+};
+
+const AIMessage = ({ children }: { children: React.ReactNode }) => {
+  const variantsSecond = {
+    initial: {
+      x: 0,
+    },
+    animate: {
+      x: 10,
+      transition: {
+        duration: 0.2,
+      },
+    },
+  };
+  return (
+    <motion.div
+      variants={variantsSecond}
+      className="flex flex-row rounded-2xl   p-2 items-center justify-start space-x-2  bg-card "
+    >
+      <div className="h-4 w-4 md:h-10 md:w-10 rounded-full bg-gradient-to-r from-pink-500 to-violet-500 flex-shrink-0" />
+      <p className="text-[10px] sm:text-sm text-muted-foreground">{children}</p>
+    </motion.div>
+  );
+};