skills.rest
gesmith0606
gesmith0606COMMUNITY
Explore all skills by this author →
GitHub

kiranism-shadcn-dashboard

Automate Next.js shadcn dashboard features with src/features and React Query patterns.

Updated Aug 15, 2025
Search Tags:#zod#dashboard#forms#nextjs#shadcn#react-query#ui-patterns
One-click install
npx skills add https://github.com/gesmith0606/nfl_data_engineering --skill kiranism-shadcn-dashboard
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kiranism-shadcn-dashboard
Source: https://github.com/gesmith0606/nfl_data_engineering/tree/main/web/frontend/.agents/skills/kiranism-shadcn-dashboard
Command: npx skills add https://github.com/gesmith0606/nfl_data_engineering --skill kiranism-shadcn-dashboard

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This guide codifies the exact patterns and conventions for building and extending a Next.js 16 + shadcn/ui admin dashboard so engineers can add pages, feature modules, tables, forms, themes, and RBAC-enabled navigation without breaking project conventions or creating integration bugs.

Core Features & Use Cases

  • Page & Routing Patterns: Standardized locations and patterns for new pages under src/app/dashboard with server-side prefetch, HydrationBoundary, and Suspense-friendly client components.
  • Feature Module Structure: Co-located api (types → service → queries → mutations), Zod schemas, components, and mock-api data to implement listing, detail, create, and edit flows.
  • Tables & Forms: Data tables using useSuspenseQuery, DataTable patterns, and cell actions; forms built with TanStack Form + Zod including page and sheet variants.
  • Theming, Icons & Navigation: Theme CSS, theme registration, icon registry rules, and nav-config/RBAC conventions for Clerk orgs, permissions, and plan gating.
  • Query & Mutation Best Practices: queryOptions/mutationOptions abstractions, getQueryClient() usage, prefetch/dehydrate patterns, and mutation composition for robust caching.
  • Developer DX: Mock API templates, chart/analytics parallel-route patterns, code conventions, and skeleton/loading/error patterns for predictable integration.

Quick Start

Create an orders dashboard feature with a mock API, api/service/queries/mutations, Zod schema, listing table, row actions, and a create/edit sheet following the repository conventions.

Frequently Asked Questions about kiranism-shadcn-dashboard

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

FAQPage Schema
How do I structure a new feature module in a Next.js shadcn dashboard?▼

Structure new Next.js shadcn dashboard feature modules by co-locating API layers, Zod schemas, components, and mock-API data within src/features to standardize listing, detail, and edit flows.

What's the best way to implement data tables and forms using shadcn and TanStack?▼

Implement shadcn data tables using useSuspenseQuery and DataTable patterns, and build forms with TanStack Form combined with Zod schemas for robust validation.

How does server-side prefetching work with React Query in a Next.js dashboard?▼

Server-side prefetching in a Next.js dashboard uses getQueryClient() with queryOptions to fetch data, dehydrate the state, and wrap components in a HydrationBoundary for seamless client hydration.

Can I use shadcn/ui components to add RBAC-enabled navigation for admin panels?▼

Yes, you can implement RBAC-enabled navigation for admin panels by configuring nav-config rules that integrate Clerk organizations, specific permissions, and plan gating.

Do I need to use mock-api services when building shadcn dashboard pages?▼

Yes, using mock-api services is a required convention for building shadcn dashboard pages to ensure predictable integration and provide template data for listing and detail flows.

How do I manage mutations and caching with React Query in Next.js shadcn templates?▼

Manage caching and mutations in Next.js shadcn templates by using mutationOptions abstractions and composing mutation patterns to maintain robust client-side state.

Related Skills

Explore More Software Engineering Skills→
Timothy191Timothy191

kiranism-shadcn-dashboard

Build Next.js dashboards with shadcn/ui components and RBAC setup.

Community
Advanced
wasintohwasintoh
90

backend-engineer

Connect UI to live data by migrating mock API calls to Supabase queries.

Community
Intermediate
hashintelhashintel
35

tanstack-start

Scaffold TanStack Start routing, API routes, and AI integrations for React apps.

Official
Intermediate
zenbuappszenbuapps

refine-v4

Scaffold CRUD React apps with Refine providers and Ant Design UI.

Official
Advanced