메뉴
Foundational architecture for Nuxt 4 + Vue 3 + shadcn-nuxt applications. Use when starting new projects, understanding project structure, or making architectural decisions about directory organization, technology choices, and pattern selection.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Opinionated architecture decisions, patterns, and project structure for AdonisJS v6 API kit applications. Use when the user asks about architecture decisions, project structure, pattern selection, separation of concerns, service layers, repository patterns, domain-driven design, or mentions how to organize, which pattern to use, best practices, or architecture. Also trigger when the user is creating controllers, services, repositories, actions, DTOs, validators, events, listeners, state machines, or any domain logic classes in an AdonisJS v6 project. Also trigger for observability, telemetry, tracing, metrics, OpenTelemetry, OTEL, Prometheus, prom-client, distributed tracing, spans, instrumentation, monitoring, or setting up a /metrics endpoint. Even if the user doesn't explicitly say "architecture," use this skill whenever structural or organizational decisions are being made in an AdonisJS v6 codebase.
Authentication with Keycloak and permission-based authorization. Use when implementing login/logout, protecting pages with permissions, checking permissions in components, or understanding the auth flow.
Vue component patterns with Composition API and script setup. Use when creating components, understanding script setup order convention, organizing component directories, or implementing component patterns like slideovers, modals, and tables.
Creating custom Vue composables with proper patterns. Use when building reusable stateful logic, shared state management, or encapsulating feature-specific behavior.
Nuxt and app configuration files. Use when configuring nuxt.config.ts, app.config.ts, environment variables, runtime config, or understanding how configuration flows through the application.
Error handling with error classes, handlers, and interceptors. Use when handling API errors, displaying validation errors, configuring error handlers, or implementing error interceptors.
| name | nuxt-architecture |
| description | Foundational architecture for Nuxt 4 + Vue 3 + shadcn-nuxt applications. Use when starting new projects, understanding project structure, or making architectural decisions about directory organization, technology choices, and pattern selection. |
Domain-driven, type-safe, composable-first architecture prioritizing separation of concerns.
philosophy.md - Foundational principles, separation of concerns, when to use each pattern
structure.md - Directory layout, naming conventions, file organization
| Layer | Technology |
|---|---|
| Framework | Nuxt 4 (SPA mode, SSR disabled) |
| UI | Vue 3 Composition API |
| Components | shadcn-nuxt + Tailwind CSS 4 |
| State | Composables with ref/useState |
| HTTP | Base layer repositories + request interceptors |
| Auth | Keycloak (keycloak-js) |
app/
├── components/ # Vue components by type (Tables/, Forms/, Modals/)
├── composables/ # Custom Vue composables
├── constants/ # channels.ts, events.ts, permissions.ts
├── enums/ # TypeScript enums with behavior
├── features/ # Domain modules (queries/, mutations/, actions/)
├── models/ # Domain model classes
├── pages/ # File-based routing
├── repositories/ # Data access layer
├── types/ # TypeScript definitions
└── values/ # Value objects
Component → Action → Mutation → Repository → API
↓
Query (reactive data fetching)
Actions orchestrate business logic. Mutations handle pure API calls. Queries provide reactive data. Repositories abstract API access.