next-loading-skeleton

⚡ Next.js 加载骨架屏

将加载缓慢的页面转变为令人愉悦的用户体验。

此技能会使用 shadcn/ui Skeleton 组件，自动为 Next.js App Router 生成精美的加载状态。告别空白屏幕，迎接即时视觉反馈，让用户始终保持参与。

---

🎯 适用场景

提到以下内容时会自动激活：

• 创建带有数据获取功能的 Next.js App Router 页面
• 关键词：“加载”、“骨架屏”、“占位符”、“Suspense”
• 构建仪表板、表格、列表或个人资料页面
• 包含较慢的 API 调用或数据库查询的页面
• 任何需要即时视觉反馈的布局

适用于：

• 📊 带有多个数据组件的仪表板
• 📋 带有服务端分页的数据表格
• 👤 包含用户信息的个人资料页面
• 📝 带有校验和 API 调用的表单
• 🛍️ 包含产品数据的电商页面

---

🚀 快速设置

1. 安装所需依赖项

必需——Skeleton 组件：

npx shadcn@latest add skeleton

推荐——获得完整体验：

npx shadcn@latest add card table avatar badge button

2. 就这么简单！🎉

创建带有数据获取功能的页面时，此技能会自动生成加载状态。

---

🏗️ 标准模式

文件结构

app/
├── dashboard/
│   ├── page.tsx      # Your main page
│   └── loading.tsx    # Auto-generated loading state

核心原则

• ✅ 与实际布局一致 - 骨架屏应匹配实际页面结构
• ✅ 平滑动画 - 使用 animate-pulse 带来自然的效果
• ✅ 逼真的变化 - 使用不同的宽度和高度，增强真实感
• ✅ 聚焦核心内容 - 突出主要内容，忽略次要细节

---

🎨 骨架屏模式库

基本元素

// Text line
<Skeleton className="h-4 w-[250px] rounded-full" />

// Card container
<Skeleton className="h-[125px] w-full rounded-lg" />

// Circle (avatar/image)
<Skeleton className="h-10 w-10 rounded-full" />

// Button
<Skeleton className="h-10 w-[100px] rounded-md" />

复杂布局

// Table row
<div className="flex gap-4">
  <Skeleton className="h-4 w-[100px]" />
  <Skeleton className="h-4 w-[200px]" />
  <Skeleton className="h-4 w-[150px]" />
  <Skeleton className="h-4 w-[100px]" />
</div>

// Card with header and content
<div className="space-y-3">
  <Skeleton className="h-6 w-[150px]" />
  <Skeleton className="h-4 w-full" />
  <Skeleton className="h-4 w-[200px]" />
</div>

---

📋 即用示例

📊 仪表板布局

import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="space-y-6 animate-pulse">
      {/* Stats Cards */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Skeleton key={i} className="h-[125px] w-full rounded-lg" />
        ))}
      </div>
      
      {/* Recent Activity */}
      <div className="space-y-3">
        <Skeleton className="h-6 w-[200px]" />
        {Array.from({ length: 5 }).map((_, i) => (
          <Skeleton key={i} className="h-16 w-full rounded-lg" />
        ))}
      </div>
    </div  )
}

👤 用户个人资料

import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="space-y-6 animate-pulse">
      {/* Profile Header */}
      <div className="flex items-center gap-4">
        <Skeleton className="h-20 w-20 rounded-full" />
        <div className="space-y-2">
          <Skeleton className="h-6 w-[200px]" />
          <Skeleton className="h-4 w-[150px]" />
          <Skeleton className="h-4 w-[250px]" />
        </div>
      </div>
      
      {/* Content Grid */}
      <div className="grid gap-6 md:grid-cols-2">
        <Skeleton className="h-[200px] w-full rounded-lg" />
        <Skeleton className="h-[200px] w-full rounded-lg" />
      </div>
    </div>
  )
}

📋 带搜索功能的数据表格

import { Skeleton } from "@/components/ui/skeleton"

export default function Loading() {
  return (
    <div className="space-y-4 animate-pulse">
      {/* Search and Actions */}
      <div className="flex gap-4">
        <Skeleton className="h-10 w-[300px]" />
        <Skeleton className="h-10 w-[100px]" />
        <Skeleton className="h-10 w-[120px]" />
      </div>
      
      {/* Table Rows */}
      <div className="space-y-2">
        {Array.from({ length: 8 }).map((_, i) => (
          <div key={i} className="flex gap-4 items-center">
            <Skeleton className="h-8 w-8 rounded-full" />
            <Skeleton className="h-4 w-[100px]" />
            <Skeleton className="h-4 w-[200px]" />
            <Skeleton className="h-4 w-[150px]" />
            <Skeleton className="h-8 w-[80px] rounded-md" />
          </div>
        ))}
      </div>
    </div>
  )
}

---

🛠️ 高级功能

基于脚本生成（节省 Token）

对于复杂布局，可使用 Python 脚本节省 Token：

python scripts/generate-loading.py "dashboard with 4 stat cards and recent users table"

响应式设计

骨架屏会自动适配响应式网格：

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
  {/* Skeletons will match your responsive breakpoints */}
</div>

性能提示

• ✅ 轻量 - 仅使用 CSS 动画，不会增加 JavaScript 开销
• ✅ GPU 加速 - 使用 transform 实现流畅的 60fps 动画
• ✅ 无障碍 - 屏幕阅读器会播报加载状态
• ✅ 对 SEO 友好 - 搜索引擎能够识别加载状态

---

🎯 最佳实践

建议 ✅

• 匹配实际内容 - 骨架屏应与实际布局一致
• 保持间距一致 - 遵循你的设计系统
• 添加微交互 - 使用细微的脉冲动画
• 考虑移动设备 - 为所有设备设计响应式骨架屏

避免 ❌

• 过度复杂 - 保持骨架屏简洁清晰
• 忽略层级 - 保持视觉重要性
• 忽视无障碍 - 添加加载状态播报
• 跳过测试 - 使用真实的数据加载时长进行测试

---

🚀 安装

# Install via marketplace
npx skills add akashp1712/skills --skill next-loading-skeleton

# Install shadcn/ui skeleton (required)
npx shadcn@latest add skeleton

# Start creating pages - the skill activates automatically!

---