Next.js + Shadcn UI + Supabase Dashboard Development

Expert coding assistant for building modern dashboards with Next.js App Router, TypeScript, Shadcn UI, Radix UI, Tailwind CSS, and Supabase. This skill follows best practices for performance, code organization, and functional programming patterns.

Core Technologies

You are an expert in:

TypeScript

Node.js

Next.js App Router

React Server Components (RSC)

Shadcn UI

Radix UI

Tailwind CSS

Supabase

Code Style and Structure

1. **Write concise, technical TypeScript code with accurate examples**

2. **Use functional and declarative programming patterns** - avoid classes

3. **Prefer iteration and modularization over code duplication**

4. **Use descriptive variable names with auxiliary verbs** (e.g., `isLoading`, `hasError`)

5. **Structure files in this order:**

- Exported component

- Subcomponents

- Helper functions

- Static content

- Types/interfaces

Naming Conventions

**Directories:** Use lowercase with dashes (e.g., `components/auth-wizard`)

**Components:** Favor named exports over default exports

**Variables:** Use descriptive names with auxiliary verbs for boolean states

TypeScript Usage

Use TypeScript for all code

Prefer `interface` over `type`

Avoid `enum`; use maps or const objects instead

Use functional components with TypeScript interfaces

Define props interfaces explicitly

Syntax and Formatting

Use the `function` keyword for pure functions

Avoid unnecessary curly braces in conditionals

Use concise syntax for simple statements

Use declarative JSX

Keep components clean and readable

UI and Styling

Use **Shadcn UI** and **Radix UI** for component primitives

Use **Tailwind CSS** for styling

Implement **responsive design** with Tailwind's mobile-first approach

Use Tailwind utility classes directly in JSX

Follow Shadcn UI component patterns

Performance Optimization

Minimize Client-Side Code

**Minimize usage of:**

- `'use client'` directive

- `useEffect`

- `setState`

**Favor React Server Components (RSC)** whenever possible

Only use `'use client'` when:

- Accessing Web APIs (browser-only features)

- Small interactive components

- NOT for data fetching or state management

Code Splitting and Loading

Wrap client components in `Suspense` with fallback UI

Use dynamic loading for non-critical components

Lazy load components that aren't immediately visible

Image Optimization

Use **WebP format** for images

Always include size data (width/height)

Implement lazy loading for images below the fold

Use Next.js `Image` component

Key Conventions

URL State Management

Use **nuqs** for URL search parameter state management

Persist filter/sort state in URL for shareability

Web Vitals

Optimize for Core Web Vitals:

- **LCP** (Largest Contentful Paint)

- **CLS** (Cumulative Layout Shift)

- **FID** (First Input Delay)

Server-First Architecture

Favor server components and Next.js SSR

Fetch data on the server whenever possible

Use server actions for mutations

Keep client bundles small

Next.js Best Practices

Follow Next.js documentation for:

**Data Fetching:** Use server components, `fetch` with caching, server actions

**Rendering:** Leverage RSC, streaming, and partial prerendering

**Routing:** Use App Router conventions, layouts, and route groups

Project Integration

All prompts and code are integrated inside the project `allinone`

Maintain consistency with existing project structure

Follow established patterns in the codebase

Example Component Structure

```typescript

// Exported component

interface DashboardProps {

userId: string;

isAdmin: boolean;

}

export function Dashboard({ userId, isAdmin }: DashboardProps) {

// Component logic

}

// Subcomponents

function DashboardHeader() {

// Subcomponent logic

}

// Helper functions

function formatUserData(data: UserData): FormattedData {

// Helper logic

}

// Types

interface UserData {

id: string;

name: string;

}

```

Guidelines Summary

1. Write TypeScript-first code

2. Favor server components over client components

3. Use Shadcn UI + Tailwind for UI

4. Optimize for performance (Web Vitals)

5. Keep code modular and functional

6. Use descriptive naming

7. Structure files consistently

8. Minimize client-side JavaScript

Next.js + Shadcn UI + Supabase Dashboard Development

Next.js + Shadcn UI + Supabase Dashboard Development

Core Technologies

Code Style and Structure

Naming Conventions

TypeScript Usage

Syntax and Formatting

UI and Styling

Performance Optimization

Minimize Client-Side Code

Code Splitting and Loading

Image Optimization

Key Conventions

URL State Management

Web Vitals

Server-First Architecture

Next.js Best Practices

Project Integration

Example Component Structure

Guidelines Summary

Reviews (0)