メニュー
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.
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.
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-components |
| description | 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. |
Vue 3 Composition API components with standardized organization and patterns.
components.md - Script setup order, patterns, organization
design-system-primitives.md - Building semantic layout/typography primitives (Display, MonoLabel, SectionMarker, PageSection, PageShell), the tailwind-variants (tv()) factory idiom for component variant APIs, composition rules, when to add a new primitive
components/
├── Common/ # Shared utilities (Copyable, LoadingLine)
├── Detail/ # Entity detail views (PostDetail)
├── Form/ # Reusable form inputs (AuthorSelect)
├── Modals/ # Confirmation/action modals
├── Nav/ # Navigation elements
├── Slideovers/ # Slideout panels (CreatePostSlideover)
├── TabSections/ # Tab content sections
└── Tables/ # Data tables (PostsTable)
<script lang="ts" setup>
// 1. Imports
import createPostActionFactory from '~/features/posts/actions/create-post-action'
// 2. Props & Emits
const props = defineProps<{ author?: Author }>()
const emits = defineEmits<{ close: [success: boolean] }>()
// 3. Composables
const flash = useFlash()
// 4. Injections
const slideover = inject(SlideoverKey)
// 5. Refs
const formRef = useTemplateRef('formRef')
// 6. Toggles
const isOpen = ref(false)
// 7. Reactive props
const formData = ref<CreatePostData>({ title: '', content: '' })
// 8. Computed
const canSubmit = computed(() => formData.value.title && formData.value.content)
// 9. Fetch + queries
const { data: posts, refresh } = getPostsQuery(filters)
// 10. Builders (action/mutation factories)
const createPostAction = createPostActionFactory()
// 11. Watchers
watch(selectedAuthor, (a) => { formData.value.authorId = a?.ulid || '' })
// 12. Methods
const onSubmit = async (data) => { await createPostAction(data) }
// 13. Real-time listeners
privateChannel(Posts).on(PostCreated, refresh)
// 14. Provides
provide(SlideoverKey, { isOpen })
// 15. Lifecycles
onMounted(() => { /* ... */ })
</script>