Does this skill generate the required API routes?

Yes, it generates a complete file structure including Next.js API routes (GET, POST, PUT, and status toggles) that interface with your backend.

What frontend libraries are required for the generated code?

The generated tables rely on @tanstack/react-table for logic, nuqs for URL state, and optionally swr for data fetching.

Can I use this for real-time or frequently updating data?

Yes, the skill includes 'Strategy B' which uses SWR (Stale-While-Revalidate) specifically for dashboards and multi-user environments.

Does the generated table support optimistic updates?

No, the skill prioritizes data integrity by following a server-response-based update pattern, ensuring the UI always reflects the actual database state.

Next.js Data Table Generator

Name: Next.js Data Table Generator
Author: adelabdelgawad

byadelabdelgawad

0•

Design Tools

Generates production-ready Next.js data table pages with SSR, URL-based state management, and full-stack CRUD capabilities.

The Next.js Data Table Generator is a specialized skill for building robust, high-performance data management interfaces. It automates the creation of a standardized architecture including SSR-enabled pages, TanStack Table components, and corresponding API routes. The skill supports two distinct data fetching strategies—Simple Fetching for standard CRUD and SWR Fetching for real-time dashboards—while utilizing nuqs for synchronized URL-based filtering and pagination. It is ideal for developers looking to rapidly deploy consistent admin panels and entity list views without sacrificing type safety or architectural integrity.

Key Features

01Standardized CRUD architecture with API route generation

02URL-based state management with nuqs integration

03Dual data fetching strategies (Simple State or SWR)

040 GitHub stars

05SSR initial data loading for optimized performance

06Type-safe TanStack Table columns and row actions

Use Cases

01Creating high-performance list views with advanced filtering

02Implementing live-monitoring tables with automated SWR revalidation

03Building administrative CRUD dashboards for database entities

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add adelabdelgawad/fullstack-agents data-table

For use in Claude.ai and ChatGPT

Download Skill