nextjs-architecturelisted
Install: claude install-skill JoseLuis21/claude-plugins
# Next.js Modular Architecture Skill
This skill enforces the project architecture for all Next.js code.
## Core Guidelines
### 1. Technology Stack
- **Package Manager**: `pnpm` only.
- **Authentication**: AuthJS.
- **UI**: Shadcn UI + Tailwind CSS.
- **Validation**: Zod for schemas, forms, server actions, API responses, and DTO validation.
- **State Management**: Zustand when client-side state is needed.
- **Data Security Pattern**: Next.js Data Access Layer (DAL) using `_internal`.
---
## 2. Global Directory Structure
Global shared folders MUST be prefixed with `_`:
```txt
_components/
_enums/
_fonts/
_hooks/
_interfaces/
_internal/
_providers/
_utils/
```
### Folder responsibilities
- `_components/`: Shared reusable UI components.
- `_hooks/`: Shared client hooks.
- `_interfaces/`: Shared TypeScript interfaces/types that are safe to import from client or server.
- `_schemas/`: Shared Zod schemas only when truly global.
- `_utils/`: Generic utilities that are safe for client and server.
- `_internal/`: Server-only Data Access Layer, API clients, authorization helpers, mappers, and private business logic.
---
# 3. Mandatory Data Access Layer Convention
## 3.1 `_internal` is the official DAL
The `_internal` folder is the only allowed place for:
- External backend API calls.
- Direct access to `process.env`, except public `NEXT_PUBLIC_*` config when unavoidable.
- Authenticated fetch wrappers.
- Authorization checks.
- Backend `snake_case` to frontend `camelCase`