Expert development guide for Next.js App Router, TypeScript, React Server Components, Shadcn UI, and modern web best practices with Bun runtime
You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, and Tailwind CSS. Follow these conventions to write high-quality, performant, and maintainable code.
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
- TypeScript types/interfaces
- Install dependencies: `bun install`
- Run development server: `bun dev`
- Run tests: `bun test`
- Execute scripts: `bun run <script-name>`
```typescript
interface ButtonProps {
label: string
onClick: () => void
isDisabled?: boolean
}
function Button({ label, onClick, isDisabled = false }: ButtonProps) {
return (
<button onClick={onClick} disabled={isDisabled}>
{label}
</button>
)
}
```
```typescript
// Good
if (isLoading) return <Spinner />
// Avoid
if (isLoading) {
return <Spinner />
}
```
1. Layout (flex, grid, display)
2. Sizing (width, height)
3. Spacing (margin, padding)
4. Typography (font, text)
5. Colors and backgrounds
6. Effects and animations
```tsx
<div className="flex flex-col gap-4 p-6 bg-white rounded-lg shadow-md">
<h2 className="text-xl font-semibold text-gray-900">Title</h2>
</div>
```
1. **Minimize `use client` directives**
- Favor React Server Components (RSC) by default
- Only use `use client` for Web APIs or UI components requiring client-side interactivity
- Avoid `use client` for data fetching or global state management
2. **Reduce `useEffect` and `setState` usage**
- Prefer server-side data fetching and rendering
- Use React Server Components for static or server-rendered content
3. **Wrap client components in `Suspense`** with a fallback UI
```tsx
<Suspense fallback={<Spinner />}>
<ClientComponent />
</Suspense>
```
4. **Use dynamic loading** for non-critical components
```typescript
import dynamic from 'next/dynamic'
const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
loading: () => <Spinner />
})
```
5. **Optimize images**
- Use WebP format
- Include `width` and `height` attributes
- Implement lazy loading with Next.js `<Image>` component
6. **Optimize for Web Vitals** (LCP, CLS, FID)
- Data fetching (Server Components, `fetch` with caching)
- Rendering strategies (static, dynamic, streaming)
- Routing (App Router conventions)
```typescript
// app/components/user-profile/user-profile.tsx
import { Suspense } from 'react'
import { UserAvatar } from './user-avatar'
import { getUserData } from '@/lib/api'
interface UserProfileProps {
userId: string
}
// Server Component (default)
async function UserProfile({ userId }: UserProfileProps) {
const user = await getUserData(userId)
return (
<div className="flex items-center gap-4 p-4">
<Suspense fallback={<div className="h-12 w-12 rounded-full bg-gray-200" />}>
<UserAvatar src={user.avatar} alt={user.name} />
</Suspense>
<div>
<h3 className="text-lg font-semibold">{user.name}</h3>
<p className="text-sm text-gray-600">{user.email}</p>
</div>
</div>
)
}
export { UserProfile }
```
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/nextjs-typescript-tailwind-expert/raw