メニュー
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 職業分類に基づく
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.
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.
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.
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-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
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>