next-loading-skeleton

⚡ Next.js 読み込みスケルトン

読み込みの遅いページを、快適なユーザー体験に変えます。

このスキルは、shadcn/ui の Skeleton コンポーネントを使用して、Next.js App Router の美しい読み込み状態を自動生成します。何も表示されない画面に別れを告げ、ユーザーの関心を保つ、即時の視覚的フィードバックを実現しましょう。

---

🎯 使用するタイミング

以下の内容に言及すると自動的に有効になります：

• データ取得を伴う Next.js App Router ページの作成
• キーワード：「loading」、「skeleton」、「placeholder」、「Suspense」
• ダッシュボード、テーブル、リスト、プロフィールページの構築
• API 呼び出しやデータベースクエリに時間がかかるページ
• 即時の視覚的フィードバックが必要なレイアウト

次のような用途に最適です：

• 📊 複数のデータウィジェットを含むダッシュボード
• 📋 サーバーサイドページネーションを備えたデータテーブル
• 👤 ユーザー情報を含むプロフィールページ
• 📝 バリデーションと API 呼び出しを備えたフォーム
• 🛍️ 商品データを含むE コマースページ

---

🚀 クイックセットアップ

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>
  )
}

---

🛠️ 高度な機能

スクリプトベースの生成（トークン節約）

複雑なレイアウトでは、Python スクリプトを使ってトークンを節約できます：

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!

---