메뉴
RevealUI monorepo architecture and package organization guide
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
RevealUI coding conventions for any code task — writing, editing, reviewing, creating, fixing, refactoring, changing, adding, or updating TypeScript, React, CSS, or config files. Covers TypeScript strict mode, ES Modules, Biome formatting, Tailwind v4 syntax, conventional commits, monorepo workspace protocol, feature gating, parameterization, and unused declaration policy.
RevealUI database conventions for any task involving database, schema, query, migration, Drizzle ORM, Neon, PostgreSQL, pgvector, vectors, embeddings, or data modeling. Covers the single Neon-primary database and its pgvector tables.
Systematic debugging workflow for RevealUI. Use when encountering any bug, test failure, unexpected behavior, error, or broken functionality. Prevents shotgun debugging.
RevealUI deployment guide — Vercel configuration, GitHub Actions deploy workflow, secret management, domain aliasing, and troubleshooting. Invoke when working on deploy.yml, vercel.json, deployment secrets, domain configuration, or debugging deploy failures.
Code review checklist for RevealUI. Use when reviewing code, completing a feature, checking quality, or before committing. Invoke explicitly with $revealui-review.
RevealUI safety guardrails for any code task — editing, writing, creating, fixing, refactoring, changing, adding, updating, or removing files. Protects credentials, enforces import boundaries, ensures code quality, and verifies work before completion.
| title | RevealUI Architecture Guide |
| visibility | internal |
| status | verified |
| audience | agent |
| name | revealui-architecture-guide |
| description | RevealUI monorepo architecture and package organization guide |
| version | 0.1.0 |
| author | RevealUI Team |
| tags | ["architecture","monorepo","packages"] |
| compatibility | ["claude-code","universal"] |
| allowedTools | ["Read","Glob","Grep"] |
Understanding RevealUI's monorepo structure and architectural decisions.
RevealUI uses pnpm workspaces for monorepo management with Turborepo for build orchestration.
RevealUI/
├── apps/ # Applications (4)
│ ├── server/ # REST API (Hono, port 3004)
│ ├── admin/ # Admin dashboard (Next.js 16, port 4000)
│ ├── docs/ # Documentation site (Vite/React)
│ └── marketing/ # Marketing site (Vite/React)
├── packages/ # Shared packages
│ ├── ai/ # AI/LLM integration
│ ├── auth/ # Authentication
│ ├── config/ # Configuration management
│ ├── contracts/ # API contracts
│ ├── core/ # Core (admin engine)
│ ├── db/ # Database schemas (Drizzle)
│ ├── dev/ # Development tooling
│ ├── security/ # Security utilities
│ └── presentation/ # Native UI components (Tailwind v4, zero ext UI deps)
├── scripts/ # Build & maintenance scripts
└── docs/ # Documentation
@revealui/core - RevealUI admin core
@revealui/db - Database layer
@revealui/auth - Authentication & Authorization
@revealui/ai (Pro) - AI Integration
@revealui/security - Security utilities
@revealui/config - Configuration
@revealui/contracts - Type contracts
@revealui/presentation - UI Components
@revealui/dev - Development tooling
apps/admin
├─→ @revealui/core
│ ├─→ @revealui/db
│ ├─→ @revealui/auth
│ └─→ @revealui/config
├─→ @revealui/presentation
└─→ @revealui/ai
{
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**", ".next/**"]
},
"test": {
"dependsOn": ["build"],
"cache": false
},
"lint": {},
"typecheck": {
"dependsOn": ["^build"]
}
}
}
# Build everything
pnpm build
# Build specific package
pnpm --filter @revealui/core build
# Watch mode for development
pnpm dev
# Run tests
pnpm test
# Type check all packages
pnpm typecheck
# 1. Create package directory
mkdir -p packages/my-package/src
# 2. Create package.json
{
"name": "@revealui/my-package",
"version": "0.1.0",
"type": "module",
"exports": {
".": {
"import": "./dist/index.js",
"types": "./dist/index.d.ts"
}
},
"scripts": {
"build": "tsc",
"dev": "tsc --watch",
"test": "vitest run"
}
}
# 3. Create tsconfig.json
{
"extends": "@revealui/dev/ts/base.json",
"compilerOptions": {
"outDir": "dist",
"rootDir": "src"
},
"include": ["src"]
}
# 4. Create src/index.ts
export * from './my-feature'
# 5. Update root pnpm-workspace.yaml (if needed)
// ✅ GOOD: Import from package
import { getRevealUI } from '@revealui/core'
import type { User } from '@revealui/contracts'
// ❌ BAD: Relative imports across packages
import { getRevealUI } from '../../../core/src/instance'
// packages/contracts/src/user.ts
export interface User {
id: string
email: string
role: 'admin' | 'user'
}
// Used everywhere
import type { User } from '@revealui/contracts'
// packages/config/src/index.ts
export const config = {
database: {
url: process.env.DATABASE_URL,
},
auth: {
secret: process.env.REVEALUI_SECRET,
},
}
// Used in packages
import { config } from '@revealui/config'
packages/my-package/
├── src/
│ ├── index.ts # Public API
│ ├── core/ # Core functionality
│ ├── utils/ # Utilities
│ └── __tests__/ # Tests
├── dist/ # Build output (gitignored)
├── package.json
├── tsconfig.json
├── vitest.config.ts
└── README.md
apps/admin/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── (frontend)/ # Public pages
│ │ ├── (backend)/ # Admin pages
│ │ └── api/ # API routes
│ ├── lib/ # admin configuration
│ │ ├── collections/ # RevealUI collections
│ │ ├── globals/ # RevealUI globals
│ │ ├── blocks/ # Content blocks
│ │ └── components/ # React components
│ └── __tests__/ # Tests
├── public/ # Static assets
└── next.config.mjs
# Add to specific package
pnpm --filter @revealui/core add package-name
# Add to root (dev tools)
pnpm add -D -w package-name
pnpm build to verifyUnderstanding this architecture enables effective RevealUI development! 🏗️