메뉴
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.
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.
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.
Form handling with XForm component and useFormBuilder. Use when creating forms, handling validation errors, managing form state, or building form-based slideovers and modals.
| name | nuxt-pages |
| description | 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. |
File-based routing with common page patterns and navigation.
pages.md - Page patterns, meta, layouts, navigation
rendering-strategies.md - Per-route rendering via routeRules: prerender for marketing, ssr: false for SPA flows, redirects, layout switching, multi-step page flows that survive refresh + back/forward nav
layouts.md - Flat layouts in app/layouts/, per-page switching via definePageMeta, slot-based composition, layouts using composables (e.g. apply-flow progress)
seo.md - useSeoMeta, @nuxtjs/seo module suite, sitemap config, OG images via nuxt-og-image, structured data via nuxt-schema-org, robots.txt, prerender + SEO interactions
images.md - @nuxt/image for responsive srcset, <NuxtImg> vs <NuxtPicture>, LCP image hints (preload + fetchpriority), sizes attribute, provider config on Cloudflare
pages/
├── index.vue # Dashboard/redirect
├── profile.vue # User profile
├── auth/
│ └── login.vue # Login page
├── posts/
│ ├── index.vue # List view
│ └── [ulid].vue # Detail view
└── users/
├── index.vue
└── [ulid].vue
<script lang="ts" setup>
import getPostsQueryFactory, { type GetPostsFilters } from '~/features/posts/queries/get-posts-query'
import { ListPosts, CreatePost } from '~/constants/permissions'
definePageMeta({ permissions: ListPosts })
const { setAppHeader } = useAppHeader()
setAppHeader({ title: 'Posts', icon: 'lucide:file-text' })
const { filters } = useReactiveFilters<GetPostsFilters>({
status: undefined,
page: 1,
size: 25,
})
const getPostsQuery = getPostsQueryFactory()
const { data: posts, isLoading, pagination } = getPostsQuery(filters)
</script>
<template>
<div>
<UInput v-model="filters.search" placeholder="Search..." />
<PostsTable :posts="posts?.data || []" :loading="isLoading" />
<XPagination v-if="pagination" v-model:page="filters.page" :pagination="pagination" />
</div>
</template>
<script lang="ts" setup>
import getPostQueryFactory from '~/features/posts/queries/get-post-query'
definePageMeta({ permissions: 'posts.show' })
const route = useRoute()
const ulid = computed(() => route.params.ulid as string)
const getPostQuery = getPostQueryFactory()
const { data: post, isLoading } = getPostQuery(ulid)
</script>
<template>
<UTabs v-if="!isLoading && post" :items="tabs">
<template #details><PostDetail :post="post.data" /></template>
</UTabs>
</template>