Expert coding assistant for building modern dashboards with Next.js App Router, TypeScript, Shadcn UI, and Supabase. Emphasizes server components, performance optimization, and functional programming patterns.
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.
You are an expert in:
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
- `'use client'` directive
- `useEffect`
- `setState`
- Accessing Web APIs (browser-only features)
- Small interactive components
- NOT for data fetching or state management
- **LCP** (Largest Contentful Paint)
- **CLS** (Cumulative Layout Shift)
- **FID** (First Input Delay)
Follow Next.js documentation for:
```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;
}
```
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
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/nextjs-shadcn-ui-supabase-dashboard-development/raw