project-overview
A curated map of the LobeHub monorepo architecture. Helps navigate project layers, business stubs, and core technology stacks.
Install
mkdir -p .claude/skills/project-overview && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/580" && unzip -o skill.zip -d .claude/skills/project-overview && rm skill.zipInstalls to .claude/skills/project-overview
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
LobeHub open-source monorepo architecture map. Use when locating code layers, understanding apps/packages/src layout, business stubs, project structure, or onboarding to the repository.Key capabilities
- →Identify key directories and their contents
- →Locate specific code layers like UI components or services
- →Understand the monorepo's flat layout
- →Reference the complete technology stack
- →Trace the data flow from UI to database
- →Distinguish open-source stubs from cloud implementations
How it works
The skill provides a curated map of the LobeHub monorepo, detailing its flat layout, key directories for apps and packages, and the complete technology stack. It also outlines the data flow and explains the relationship between the open-source and private cloud repositories.
Inputs & outputs
When to use project-overview
- →Locate specific code layers within the monorepo
- →Understand project directory structure
- →Reference the core technology stack
- →Identify entry points for mobile or desktop apps
About this skill
LobeHub Project Overview
The directory listings below are a curated map of key locations, not an exhaustive tree.
packages/,src/store/, route groups etc. grow over time — runlsagainst the real directory for the current set.
Project Description
Open-source, modern-design AI Agent Workspace: LobeHub (previously LobeChat).
This repo is the open-source root (github.com/lobehub/lobehub, package @lobehub/lobehub).
Supported platforms:
- Web desktop/mobile
- Desktop (Electron) —
apps/desktop - Mobile app (React Native) — separate repo, already launched (not in this monorepo)
Logo emoji: 🤯
Complete Tech Stack
| Category | Technology |
|---|---|
| Framework | Next.js 16 + React 19 |
| Routing | SPA inside Next.js with react-router-dom |
| Language | TypeScript |
| UI Components | @lobehub/ui, antd |
| CSS-in-JS | antd-style |
| Icons | lucide-react, @ant-design/icons |
| i18n | react-i18next |
| State | zustand |
| URL Params | nuqs |
| Data Fetching | SWR |
| React Hooks | aHooks |
| Date/Time | dayjs |
| Utilities | es-toolkit |
| API | TRPC (type-safe) |
| Database | Neon PostgreSQL + Drizzle ORM |
| Testing | Vitest |
Exact versions live in the root
package.json— check there, not here.
Monorepo Layout
Flat layout — apps/, packages/, and src/ all sit at the repo root. No
git submodules.
(repo root)
├── apps/
│ ├── cli/ # LobeHub CLI
│ ├── desktop/ # Electron desktop app
│ ├── device-gateway/ # Device gateway service
│ └── server/ # Next.js-backed server: featureFlags, globalConfig, modules, routers, services, utils, workflows (`@/server/*` alias)
├── docs/ # changelog, development, self-hosting, usage
├── locales/ # en-US, zh-CN, ...
├── packages/ # ~80 @lobechat/* workspace packages — `ls` for the full set. Key ones:
│ ├── agent-runtime/ # Agent runtime core
│ ├── agent-signal/ # Agent Signal pipeline
│ ├── agent-tracing/ # Tracing / snapshots
│ ├── builtin-tool-*/ # Per-tool packages (calculator, web-browsing, claude-code, ...)
│ ├── builtin-tools/ # Central registries that compose builtin-tool-*
│ ├── context-engine/
│ ├── database/ # src/{models,schemas,repositories}
│ ├── model-bank/ # Model definitions & provider cards
│ ├── model-runtime/ # src/{core,providers}
│ ├── locales/ # i18n source of truth: packages/locales/src/default/
│ ├── env/ # env schemas (@/envs/* → packages/env/src/*)
│ ├── app-config/
│ ├── business/ # Open-source stubs (config, const, model-bank, model-runtime) — overridden by cloud
│ ├── types/
│ └── utils/
└── src/
├── app/
│ ├── (backend)/ # api, f, market, middleware, oidc, trpc, webapi
│ ├── spa/ # SPA HTML template service
│ └── spa-auth/ # Auth HTML shell (SSR)
├── routes/ # SPA page segments (thin — delegate to features/)
│ └── (main)/ (mobile)/ (desktop)/ (popup)/ auth/ onboarding/ share/
├── spa/ # SPA entries + router config
│ ├── entry.{web,mobile,desktop,popup}.tsx
│ └── router/
├── business/ # Open-source stubs (client/server) — cloud repo provides real impls
├── features/ # Domain business components
├── store/ # ~30 zustand stores — `ls` for the full set
├── server/ # standalone-Hono server pieces only: agent-hono, workflows-hono (main backend lives in `apps/server`)
└── ... # components, hooks, layout, libs, services, types, utils
Architecture Map
| Layer | Location |
|---|---|
| UI Components | src/components, src/features |
| SPA Pages | src/routes/ |
| React Router | src/spa/router/ |
| Global Providers | src/layout |
| Zustand Stores | src/store |
| Client Services | src/services/ |
| REST API | src/app/(backend)/webapi |
| tRPC Routers | apps/server/src/routers/{async|lambda|mobile|tools} |
| Server Services | apps/server/src/services (can access DB) |
| Server Modules | apps/server/src/modules (no DB access) |
| Feature Flags | apps/server/src/featureFlags |
| Global Config | apps/server/src/globalConfig |
| DB Schema | packages/database/src/schemas |
| DB Model | packages/database/src/models |
| DB Repository | packages/database/src/repositories |
| Third-party | src/libs (analytics, oidc, etc.) |
| Builtin Tools | packages/builtin-tool-*, packages/builtin-tools |
| Open-source stub | src/business/*, packages/business/* (this repo) |
Data Flow
React UI → Store Actions → Client Service → TRPC Lambda → Server Services → DB Model → PostgreSQL
Note: Relationship to the Cloud Repo
This open-source repo is consumed by a separate, private cloud (SaaS) repo
as a git submodule mounted at lobehub/. The cloud repo provides:
src/business/{client,server}andpackages/business/*implementations that override the stubs shipped here.- Cloud-only routes (e.g.
(cloud)/,embed/), cloud-only stores (e.g.subscription/), cloud-only TRPC routers (billing, budget, risk control, …), and Vercel cron routes undersrc/app/(backend)/cron/. - File-resolution order in cloud:
@/store/x→ cloudsrc/store/xfirst, thenlobehub/packages/store/src/x, thenlobehub/src/store/x. Cloud override wins.
When working in this repo alone, ignore the cloud layer — the stubs in
src/business/ and packages/business/ are the source of truth here.
When not to use it
- →When needing an exhaustive directory tree
- →When looking for exact package versions (check root package.json)
- →When the cloud repo overrides open-source stubs
Limitations
- →Directory listings are a curated map, not exhaustive
- →Exact versions are in root package.json, not in this overview
- →Cloud override wins for file resolution order
How it compares
This skill offers a structured overview of a specific monorepo's architecture and technology stack, providing a guided tour that differs from manually exploring an unfamiliar codebase.
Compared to similar skills
project-overview side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| project-overview (this skill) | 15 | 2mo | No flags | Beginner |
| nextjs-best-practices | 31 | 6mo | No flags | Intermediate |
| nx-generate | 1 | 6mo | Review | Beginner |
| javascript-typescript-typescript-scaffold | 3 | 3mo | Review | Beginner |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by lobehub
View all by lobehub →You might also like
nextjs-best-practices
davila7
Next.js App Router principles. Server Components, data fetching, routing patterns.
nx-generate
nrwl
Generate code using nx generators. USE WHEN scaffolding code or transforming existing code - for example creating libraries or applications, or anything else that is boilerplate code or automates repetitive tasks. ALWAYS use this first when generating code with Nx instead of calling MCP tools or running nx generate immediately.
javascript-typescript-typescript-scaffold
sickn33
You are a TypeScript project architecture expert specializing in scaffolding production-ready Node.js and frontend applications. Generate complete project structures with modern tooling (pnpm, Vite, N
server-components
davepoon
This skill should be used when the user asks about "Server Components", "Client Components", "'use client' directive", "when to use server vs client", "RSC patterns", "component composition", "data fetching in components", or needs guidance on React Server Components architecture in Next.js.
supabase-architecture-variants
jeremylongshore
Execute choose and implement Supabase validated architecture blueprints for different scales. Use when designing new Supabase integrations, choosing between monolith/service/microservice architectures, or planning migration paths for Supabase applications. Trigger with phrases like "supabase architecture", "supabase blueprint", "how to structure supabase", "supabase project layout", "supabase microservice".
frontend-structure
Kwondongkyun
Next.js App Router 프로젝트 구조 설정 시 사용. app(페이지), components(UI), features(도메인), lib(유틸), hooks 폴더 구조.