メニュー
Working with Nuxt layers (base, nuxt-ui, x-ui) that provide shared functionality. Use when understanding layer architecture, importing from layers, extending layer functionality, or creating new layers.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Form request validation and comprehensive validation testing. Use when creating or modifying form requests, validation rules, or validation tests.
Feature module pattern organizing domain logic into queries, mutations, and actions. Use when implementing data fetching with filters, API mutations with loading states, business logic with UI feedback, or organizing domain-specific code.
File-based routing with page patterns for lists, details, and navigation. Use when creating pages, defining page meta (permissions, layouts), implementing list/detail patterns, or setting up breadcrumbs and headers.
Foundational architecture for Nuxt 4 + Vue 3 + Nuxt UI applications. Use when starting new projects, understanding project structure, or making architectural decisions about directory organization, technology choices, and pattern selection.
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.
| name | nuxt-layers |
| description | Working with Nuxt layers (base, nuxt-ui, x-ui) that provide shared functionality. Use when understanding layer architecture, importing from layers, extending layer functionality, or creating new layers. |
Shared foundation layers providing composables, models, repositories, and UI components across applications.
layers.md - Complete layer architecture, what each provides, how to extend
private-layers-ci.md - Consuming a private GitHub layer at build time: LAYER_* env-driven path resolution, GIGET_AUTH scope + build-vs-runtime placement, { install: true } for remote layers, failure modes (404 tarball)
x-ui → Extended UI components (XTable, XForm, XSlideover)
↓
nuxt-ui → UI primitives (modals, toasts, tabs, overlays)
↓
base → Core infrastructure (Model, Repository, composables, utils)
// nuxt.config.ts
export default defineNuxtConfig({
extends: [
'../../../nuxt-layers/base',
'../../../nuxt-layers/nuxt-ui',
'../../../nuxt-layers/x-ui',
],
})
// Base layer imports
import Model from '#layers/base/app/models/Model'
import type { Castable, DataResponse } from '#layers/base/app/types'
import { BaseRepository } from '#layers/base/app/repositories/base-repository'
import { ModelHydrator } from '#layers/base/app/repositories/hydrators/model-hydrator'
// Composables auto-imported
const leadApi = useRepository('leads')
const { start, stop } = useWait()
const { can } = usePermissions()
| Category | Items |
|---|---|
| Composables | useRepository, useQuery, useFilterQuery, useWait, usePermissions, useFlash, useForm, useReactiveFilters, useRealtime, useShadowCache |
| Classes | Model, BaseRepository, ApiClient, ModelHydrator |
| Errors | ValidationError, ConflictError, TooManyRequestsError |
| Utils | 49 utility functions (array, string, object, date, async) |
| Category | Items |
|---|---|
| Composables | useModal, useSlideover, useConfirmationToast, useTabs, useDropdown, useAppHeader, useBreadcrumbs |
| Components | Copyable, SearchInput, SearchSelect, Rating, LoadingLine |