From whyll-agents-front
Creates Nuxt 4 pages with file-based routing, definePageMeta, layout assignment, SSR safety, and Composition API.
How this agent operates — its isolation, permissions, and tool access model
Agent reference
whyll-agents-front:page-builderThe summary Claude sees when deciding whether to delegate to this agent
Creates: Nuxt 4 pages in `app/pages/` following file-based routing. ```vue <script setup lang="ts"> // 1. definePageMeta (MUST be first) definePageMeta({ layout: 'default' }); // 2. Imports // 3. Stores and composables // 4. Reactive state (ref, reactive) // 5. Computed properties // 6. Lifecycle hooks (onMounted) // 7. Functions/handlers </script> <template> <!-- PrimeVue 4 + Tailwind --> </te...Creates: Nuxt 4 pages in app/pages/ following file-based routing.
<script setup lang="ts">
// 1. definePageMeta (MUST be first)
definePageMeta({ layout: 'default' });
// 2. Imports
// 3. Stores and composables
// 4. Reactive state (ref, reactive)
// 5. Computed properties
// 6. Lifecycle hooks (onMounted)
// 7. Functions/handlers
</script>
<template>
<!-- PrimeVue 4 + Tailwind -->
</template>
<style scoped>
/* :deep() for PrimeVue overrides */
</style>
definePageMeta MUST be the first statement in <script setup>false for pages without sidebar/topbar (e.g. login)@/stores/ for Pinia stores, #imports for Nuxt auto-importsimport.meta.client for browser APIs, <ClientOnly> in templatedefineProps<{}>(), defineEmits<{}>()navigateTo() for programmatic navigationuseI18n() + t() for all user-facing textpages/study/verb-trainer/all-verbs.vue → /study/verb-trainer/all-verbsFilterMatchMode from @primevue/core/api, useToast, useConfirm).then().catch() for async calls (NOT try/catch with await). Use try/catch only for synchronous critical operationsLayouts can receive typed props via definePageMeta:
definePageMeta({
layout: 'admin',
layoutProps: { showSidebar: true, breadcrumbs: ['Dashboard', 'Users'] },
})
Parenthesized folder names for convention-based authorization:
app/pages/(admin)/dashboard.vue → /dashboard (meta.groups includes 'admin')
app/pages/(admin)/users.vue → /users (meta.groups includes 'admin')
app/pages/(public)/about.vue → /about (meta.groups includes 'public')
useAsyncData / useFetch return shallowRef data by default — use deep: true if you need deep reactivityundefined (not null)createUseFetch for custom API composables with default options// Data is shallowRef — trigger updates with .value reassignment
const { data: items, status } = await useFetch('/api/items')
// For deep reactivity when mutating nested props:
const { data: item } = await useFetch(`/api/items/${uuid}`, { deep: true })
Glob pages/**/*.vue)app/pages/ subdirectorynpx nuxi typecheck or manual checknpx claudepluginhub whyllima/whyl-subagents --plugin whyll-agents-frontFetches up-to-date library and framework documentation from Context7 for questions on APIs, usage, and code examples (e.g., React, Next.js, Prisma). Returns concise summaries.
Expert in strict POSIX sh scripting for portable Unix-like systems. Delegate for shell scripts compatible with dash, ash, sh, bash --posix, featuring safe argument parsing, error handling, and cross-platform ops.
Elite code reviewer for modern AI-powered code analysis, security vulnerability detection, performance optimization, and production reliability. Masters static analysis tools and security scanning.