project-architecture
Overview of the project's tech stack, directory structure, and architectural patterns.
When & Why to Use This Skill
This Claude skill provides a comprehensive overview of a project's technical architecture, tech stack, and directory structure. It streamlines developer onboarding and system navigation by detailing the integration of Next.js, Docusaurus, and database layers, ensuring a clear understanding of architectural patterns and development workflows for improved maintainability and SEO-friendly documentation.
Use Cases
- Developer Onboarding: Quickly familiarize new team members with the project's tech stack, file organization, and key architectural patterns to reduce ramp-up time.
- Codebase Navigation: Efficiently locate specific modules such as authentication logic, database schemas, or UI components within a complex hybrid directory structure.
- Architectural Review: Evaluate the integration between different frameworks (e.g., Next.js and Docusaurus) and ensure consistency in design patterns across the application.
- Environment Setup & Maintenance: Provide clear instructions for running development servers and managing multi-app environments, ensuring a smooth local development experience.
| name | Project Architecture |
|---|---|
| description | Overview of the project's tech stack, directory structure, and architectural patterns. |
Project Architecture & Tech Stack
Tech Stack
- Framework: Next.js 15 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS v4, CSS Modules (for specific components)
- Docs/Content: Docusaurus (in
textbook/directory) - Auth: Better Auth (
better-auth) - Database: PostgreSQL (NeonDB)
- ORM: Drizzle ORM
- UI Components: Lucide React icons, Custom components
Directory Structure
/app: Next.js App Router pages and layouts./components: Reusable UI components./auth: Authentication related components (forms, etc.).
/lib: Utility functions and shared logic.auth-client.ts: Better Auth client configuration.auth.ts: Better Auth server configuration.
/db: Database schema and connection logic./drizzle: Migrations./textbook: Docusaurus instance for documentation/content./src: Docusaurus source files.
Key Patterns
- Hybrid App: Combines a Next.js web app (marketing, auth, dashboard) with a Docusaurus documentation site.
- Auth Integration: Shared authentication state between Next.js and Docusaurus via cookies/sessions (handled by
AuthBar). - Styling: Global Tailwind styles in
app/globals.css. Docusaurus has its own theme intextbook/src/css/custom.css.
Development
- Run root app:
npm run dev:root - Run docs app:
npm run dev:docs - Run both:
npm run dev