Claude Code Plugins

Community-maintained marketplace

Feedback

Overview of the project's tech stack, directory structure, and architectural patterns.

Install Skill

1Download skill
2Enable skills in Claude

Open claude.ai/settings/capabilities and find the "Skills" section

3Upload to Claude

Click "Upload skill" and select the downloaded ZIP file

Note: Please verify skill by going through its instructions before using it.

SKILL.md

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 in textbook/src/css/custom.css.

Development

  • Run root app: npm run dev:root
  • Run docs app: npm run dev:docs
  • Run both: npm run dev