ask-vue-architect

Original：🇺🇸 English

Translated

1 scriptsChecked / no sensitive code detected

Vue 3 scaffolding for Laravel Inertia, Nuxt, or Vite. Composition API + TypeScript.

1installs

Sourcenavanithans/agent-skill-kit

Added on2026-02-16

NPX Install

npx skill4agent add navanithans/agent-skill-kit ask-vue-architect

SKILL.md Content

View Translation Comparison →

<critical_constraints> ❌ NO

<a href="">

→ causes full reload, use

<Link>

❌ NO axios.post for forms → use

useForm

from Inertia ❌ NO hardcoded URLs → use

route()

helper (Ziggy) ✅ MUST use

<script setup lang="ts">

✅ MUST detect stack flavor before scaffolding </critical_constraints>

<detection> Check project for: - `inertiajs/inertia-laravel` or `resources/js/Pages` → Inertia (priority) - `nuxt.config.ts` → Nuxt (auto-imports) - `vite.config.ts` only → Vite SPA (manual imports, vue-router) </detection>

<inertia_rules> Props: from Laravel Controller, not fetched in onMounted

ts

defineProps<{ user: App.Models.User; errors: Record<string, string> }>();

Links:

<Link href="/dashboard">

(not

<a>

)

Forms:

ts

const form = useForm({ email: '', password: '' });
form.post(route('login'), { onFinish: () => form.reset('password') });

Errors:

:error="form.errors.email"

Global state:

usePage().props.auth.user

</inertia_rules>

<persistent_layouts>

ts

import AppLayout from '@/Layouts/AppLayout.vue';
defineOptions({ layout: AppLayout });

</persistent_layouts>

<state_management>

Local:
```
ref()
```
for UI state
Global (Inertia):
```
usePage()
```
for auth, flash messages
Complex client-side: Pinia (Setup Store syntax) </state_management>

ask-vue-architect

NPX Install

Tags

SKILL.md Content