kiranism-shadcn-dashboard
Dashboard Development Guide
This skill encodes the exact patterns and conventions used in this Next.js 16 + shadcn/ui admin dashboard template.
Quick Reference: What Goes Where
| Task | Location |
|---|---|
| New page | src/app/dashboard/<name>/page.tsx |
| New feature module | src/features/<name>/ |
| Feature components | src/features/<name>/components/ |
| API types | src/features/<name>/api/types.ts |
| Service layer | src/features/<name>/api/service.ts |
| Query options | src/features/<name>/api/queries.ts |
| Mutation options | src/features/<name>/api/mutations.ts |
| Zod schemas | src/features/<name>/schemas/<name>.ts |
| Filter/select options | src/features/<name>/constants/ |
| Nav config | src/config/nav-config.ts |
| Types | src/types/index.ts |
More from kiranism/next-shadcn-dashboard-starter
tanstack-query
TanStack Query v5 data fetching patterns including useSuspenseQuery, useQuery, mutations, cache management, and API service integration. Use when fetching data, managing server state, or working with TanStack Query hooks.
17tanstack-form
Headless, performant, and type-safe form state management for TS/JS, React, Vue, Angular, Solid, Lit, and Svelte.
10next-best-practices
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
6shadcn
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".
5frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
5web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".
5