PR

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.zip

Installs 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.
185 chars✓ has a “when” trigger
Beginner

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

You give it
A query about LobeHub's codebase structure or architecture
You get back
Location of relevant files, directories, or architectural components

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 — run ls against 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

CategoryTechnology
FrameworkNext.js 16 + React 19
RoutingSPA inside Next.js with react-router-dom
LanguageTypeScript
UI Components@lobehub/ui, antd
CSS-in-JSantd-style
Iconslucide-react, @ant-design/icons
i18nreact-i18next
Statezustand
URL Paramsnuqs
Data FetchingSWR
React HooksaHooks
Date/Timedayjs
Utilitieses-toolkit
APITRPC (type-safe)
DatabaseNeon PostgreSQL + Drizzle ORM
TestingVitest

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

LayerLocation
UI Componentssrc/components, src/features
SPA Pagessrc/routes/
React Routersrc/spa/router/
Global Providerssrc/layout
Zustand Storessrc/store
Client Servicessrc/services/
REST APIsrc/app/(backend)/webapi
tRPC Routersapps/server/src/routers/{async|lambda|mobile|tools}
Server Servicesapps/server/src/services (can access DB)
Server Modulesapps/server/src/modules (no DB access)
Feature Flagsapps/server/src/featureFlags
Global Configapps/server/src/globalConfig
DB Schemapackages/database/src/schemas
DB Modelpackages/database/src/models
DB Repositorypackages/database/src/repositories
Third-partysrc/libs (analytics, oidc, etc.)
Builtin Toolspackages/builtin-tool-*, packages/builtin-tools
Open-source stubsrc/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} and packages/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 under src/app/(backend)/cron/.
  • File-resolution order in cloud: @/store/x → cloud src/store/x first, then lobehub/packages/store/src/x, then lobehub/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.

SkillInstallsUpdatedSafetyDifficulty
project-overview (this skill)152moNo flagsBeginner
nextjs-best-practices316moNo flagsIntermediate
nx-generate16moReviewBeginner
javascript-typescript-typescript-scaffold33moReviewBeginner

Try saying

Example prompts that trigger this skill in your AI assistant.

drizzle

lobehub

Drizzle ORM schema and database guide. Use when working with database schemas (src/database/schemas/*), defining tables, creating migrations, or database model code. Triggers on Drizzle schema definition, database migrations, or ORM usage questions.

238873

zustand

lobehub

Zustand state management guide. Use when working with store code (src/store/**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.

113434

react

lobehub

React component development guide. Use when working with React components (.tsx files), creating UI, using @lobehub/ui components, implementing routing, or building frontend features. Triggers on React component creation, modification, layout implementation, or navigation tasks.

3480

typescript

lobehub

TypeScript code style and optimization guidelines. Use when writing TypeScript code (.ts, .tsx, .mts files), reviewing code quality, or implementing type-safe patterns. Triggers on TypeScript development, type safety questions, or code style discussions.

2877

linear

lobehub

Linear issue management guide. Use when working with Linear issues, creating issues, updating status, or adding comments. Triggers on Linear issue references (LOBE-xxx), issue tracking, or project management tasks. Requires Linear MCP tools to be available.

10117

desktop

lobehub

Electron desktop development guide. Use when implementing desktop features, IPC handlers, controllers, preload scripts, window management, menu configuration, or Electron-specific functionality. Triggers on desktop app development, Electron IPC, or desktop local tools implementation.

941

You might also like

nextjs-best-practices

davila7

Next.js App Router principles. Server Components, data fetching, routing patterns.

3164

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.

111

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

31

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.

13

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".

02

frontend-structure

Kwondongkyun

Next.js App Router 프로젝트 구조 설정 시 사용. app(페이지), components(UI), features(도메인), lib(유틸), hooks 폴더 구조.

00

Search skills

Search the agent skills registry