next-loading-skeleton

Generate loading.tsx skeleton UIs for Next.js App Router pages.

Updated Jan 29, 2026
One-click install
npx skills add https://github.com/cfardev/kanban-hub --skill next-loading-skeleton-cfardev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-loading-skeleton
Source: https://github.com/cfardev/kanban-hub/tree/main/.agents/skills/next-loading-skeleton
Command: npx skills add https://github.com/cfardev/kanban-hub --skill next-loading-skeleton-cfardev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

When building Next.js App Router pages with data loading, slow fetches, or Suspense, generate loading.tsx using shadcn/ui Skeleton placeholders for instant loading UI. Always install shadcn skeleton component first if not present. Use for dashboards, lists, profiles, forms.

Core Features & Use Cases

  • Generate loading.tsx skeletons for App Router pages to provide immediate visual feedback while data loads.
  • Provide standard skeleton patterns for common layouts (texts, cards, avatars, tables) and example usage across dashboards, lists, and profile pages.
  • Script-driven generation: a Python script (scripts/generate-loading.py) creates layout-specific loading.tsx based on a description, enabling rapid scaffolding.

Quick Start

Run the Python generator with a layout description to produce a corresponding loading.tsx, e.g., python scripts/generate-loading.py 'dashboard with 4 stat cards and recent users table'.

Frequently Asked Questions about next-loading-skeleton

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate loading.tsx skeletons for Next.js App Router pages?▼

You can generate loading.tsx skeletons for Next.js pages by running the provided Python script with a text description of your layout. This script outputs shadcn/ui Skeleton placeholders to provide instant visual feedback during slow data fetches.

What does a Suspense loading skeleton do for Next.js dashboards and lists?▼

A Suspense loading skeleton provides immediate visual feedback for Next.js dashboards and lists while data is fetching. It maps standard shadcn/ui placeholder patterns to match your page layouts like tables, cards, and avatars.

Do I need to install shadcn/ui before generating loading skeletons?▼

Yes, you must install the shadcn/ui skeleton component first if it is not already present in your project. The generator relies on these standard UI placeholder patterns to build the loading.tsx files.

Can I use this loading skeleton generator for profile and form layouts?▼

Yes, you can use this generator for profile and form layouts by passing a descriptive text string to the Python script. It supports multiple layout patterns via token-based mapping to scaffold the correct UI.

What is the best way to scaffold loading UI for multiple Next.js App Router pages?▼

The best way to scaffold loading UI is using a script-driven generator that processes layout descriptions into token-based mappings. This rapidly creates standard shadcn/ui loading.tsx files for various App Router pages.