メニュー
RevealUI monorepo architecture and package organization guide
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| 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! 🏗️
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.