growilabs/app-architecture
apps/app/.claude/skills/app-architecture/SKILL.md
GROWI main application (apps/app) architecture, directory structure, and design patterns. Auto-invoked when working in apps/app.
$ install --global
skillsauthnpx skillsauth add growilabs/growi app-architectureInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 20, 2026, 10:03 AM54.6s1 file scanned
SKILL.md
- name:
- app-architecture
- description:
- GROWI main application (apps/app) architecture, directory structure, and design patterns. Auto-invoked when working in apps/app.
- user-invocable:
- false
App Architecture (apps/app)
The main GROWI application is a full-stack Next.js application with Express.js backend and MongoDB database.
For technology stack details, see the global tech-stack skill.
Directory Structure
apps/app/src/
├── pages/ # Next.js Pages Router (*.page.tsx)
├── features/ # Feature modules (recommended for new code)
│ └── {feature-name}/
│ ├── index.ts # Public exports
│ ├── interfaces/ # TypeScript types
│ ├── server/ # models/, routes/, services/
│ └── client/ # components/, states/, hooks/
├── server/ # Express server (legacy)
│ ├── models/ # Mongoose models
│ ├── routes/apiv3/ # RESTful API v3
│ └── services/ # Business logic
├── components/ # React components (legacy)
├── states/ # Jotai atoms
└── stores-universal/ # SWR hooks
Feature-Based Architecture
Organize code by business feature rather than by technical layer:
❌ Layer-based (old): ✅ Feature-based (new):
├── models/User.ts ├── features/user/
├── routes/user.ts │ ├── server/models/User.ts
├── components/UserList.tsx │ ├── server/routes/user.ts
│ └── client/components/UserList.tsx
Creating a New Feature
- Create
features/{feature-name}/ - Define interfaces in
interfaces/ - Implement server logic in
server/(models, routes, services) - Implement client logic in
client/(components, hooks, states) - Export public API through
index.ts
Entry Points
- Server:
server/app.ts- Express + Next.js initialization - Client:
pages/_app.page.tsx- Jotai + SWR providers - Wiki Pages:
pages/[[...path]]/index.page.tsx- Catch-all route (SSR)
API Design (RESTful API v3)
Routes in server/routes/apiv3/ with OpenAPI specs:
/**
* @openapi
* /api/v3/pages/{id}:
* get:
* summary: Get page by ID
*/
router.get('/pages/:id', async (req, res) => {
const page = await PageService.findById(req.params.id);
res.json(page);
});
State Management
- Jotai: UI state (modals, forms) in
states/ - SWR: Server data (pages, users) in
stores-universal/
For detailed patterns, see app-specific-patterns skill.
Design Principles
- Feature Isolation: New features self-contained in
features/ - Server-Client Separation: Prevent server code bundled into client
- API-First: Define OpenAPI specs before implementation
- Type-Driven: Define interfaces before implementation
- Progressive Migration: Gradually move legacy code to
features/
Legacy Migration
Legacy directories (components/, server/models/, client/) should be gradually migrated to features/:
- New features →
features/ - Bug fixes → Can stay in legacy
- Refactoring → Move to
features/
Summary
- New features:
features/{feature-name}/structure - Server-client separation: Keep separate
- API-first: OpenAPI specs for API v3
- State: Jotai (UI) + SWR (server data)
- Progressive migration: No rush for stable legacy code
Related Skills
growilabs/build-optimization
tools
VerifiedTrustedCommunity
GROWI apps/app Turbopack configuration, module optimization, and build measurement tooling. Auto-invoked when working in apps/app.
1,443SKILL.mdUpdated Apr 5, 2026
growilabs/vendor-styles-components
development
VerifiedTrustedCommunity
Vendor CSS precompilation system for Turbopack compatibility. How to add third-party CSS to components without violating Pages Router global CSS restriction. Auto-invoked when working in apps/app.
1,441SKILL.mdUpdated Apr 5, 2026
growilabs/page-save-origin-semantics
testing
VerifiedTrustedCommunity
Auto-invoked when modifying origin-based conflict detection, revision validation logic, or isUpdatable() method. Explains the two-stage origin check mechanism for conflict detection and its separation from diff detection.
1,441SKILL.mdUpdated Apr 5, 2026
growilabs/fix-broken-next-symlinks
testing
VerifiedTrustedCommunity
Fix broken symlinks in .next/node_modules/ — diagnose, decide allowlist vs dependencies, and verify
1,441SKILL.mdUpdated Apr 5, 2026