Next.js + TypeScript + Shadcn Full-Stack Development

This skill provides expert guidance for building modern, performant Next.js applications using TypeScript, React Server Components, Shadcn UI, Radix UI, and Tailwind CSS.

Instructions

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind.

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

- Type definitions

Naming Conventions

1. Use lowercase with dashes for directories (e.g., `components/auth-wizard`)

2. Favor named exports for components

3. Use descriptive, semantic names that convey purpose

TypeScript Usage

1. Use TypeScript for all code

2. Prefer interfaces over types for object shapes

3. Avoid enums; use maps or const objects instead

4. Use functional components with TypeScript interfaces

5. Leverage type inference where appropriate to reduce verbosity

Syntax and Formatting

1. Use the `function` keyword for pure functions

2. Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements

3. Use declarative JSX that clearly expresses intent

4. Prefer early returns to reduce nesting

UI and Styling

1. Use Shadcn UI, Radix, and Tailwind for components and styling

2. Implement responsive design with Tailwind CSS

3. Use a mobile-first approach for responsive layouts

4. Leverage Tailwind's utility classes for consistent spacing and typography

Performance Optimization

1. Minimize use of `'use client'`, `useEffect`, and `setState`

2. Favor React Server Components (RSC) whenever possible

3. Wrap client components in `Suspense` with meaningful fallback UI

4. Use dynamic loading for non-critical components

5. Optimize images:

- Use WebP format when possible

- Include size data (width/height)

- Implement lazy loading for below-the-fold images

6. Optimize Web Vitals (LCP, CLS, FID)

Key Conventions

1. Use `nuqs` for URL search parameter state management

2. Limit `'use client'` directive:

- Favor server components and Next.js SSR

- Use only for Web API access in small components

- Avoid for data fetching or state management

3. Follow Next.js documentation for:

- Data Fetching patterns

- Rendering strategies (SSR, SSG, ISR)

- Routing conventions (App Router)

Project-Specific Instructions

When working on a specific project, always check for and follow any `INSTRUCTIONS.md` file in the project root for project-specific conventions, architecture decisions, and implementation details.

Example Usage

When creating a new feature:

1. Start with Server Components by default

2. Extract client-only functionality to minimal `'use client'` components

3. Use Shadcn UI components for consistent design

4. Implement proper TypeScript interfaces for all data shapes

5. Follow the file structure conventions above

6. Optimize for performance from the start

Constraints