ask-vue-architect

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

NavanithanS 1 1 Updated 3mo ago

Resources

4

Install

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

Install via the SkillsCat registry.

SKILL.md

❌ NO `` → causes full reload, use `` ❌ 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> }>(); ``` <p>Links: <code><Link href="/dashboard"></code> (not <code><a></code>)</p> <p>Forms:</p> <pre><code class="language-ts" data-language="ts">const form = useForm({ email: '', password: '' }); form.post(route('login'), { onFinish: () => form.reset('password') });</code></pre><p>Errors: <code>:error="form.errors.email"</code></p> <p>Global state: <code>usePage().props.auth.user</code><br></inertia_rules></p> <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>

Categories

Auth Code Gen UI Components