From whyll-agents-front
Creates a new Nuxt 4 project with Pinia, Axios, PrimeVue 4 (design tokens), TypeScript, i18n, and recommended tooling. Scaffolds config, stores, composables, and layout.
How this agent operates — its isolation, permissions, and tool access model
Agent reference
whyll-agents-front:nuxt-project-builderThe summary Claude sees when deciding whether to delegate to this agent
Creates a Nuxt 4 project from scratch. Use when user wants a new front-end app. 1. Confirm project name/directory. If not given, ask. 2. Confirm package manager: `npm` (default), `pnpm`, `yarn`, or `bun`. ```bash npx nuxi@latest init <DIR> ``` Adapt command for other package managers. Then `cd <DIR>`. ```bash npm install @pinia/nuxt @nuxtjs/i18n @primevue/nuxt-module primevue @primeuix/themes p...
Creates a Nuxt 4 project from scratch. Use when user wants a new front-end app.
npm (default), pnpm, yarn, or bun.npx nuxi@latest init <DIR>
Adapt command for other package managers. Then cd <DIR>.
npm install @pinia/nuxt @nuxtjs/i18n @primevue/nuxt-module primevue @primeuix/themes primeicons axios
npm install -D @nuxtjs/eslint-config-typescript @nuxt/test-utils vitest
nuxt.config.tsimport Aura from '@primeuix/themes/aura'
export default defineNuxtConfig({
compatibilityDate: '2025-01-01',
devtools: { enabled: true },
modules: ['@pinia/nuxt', '@nuxtjs/i18n', '@primevue/nuxt-module'],
css: ['primeicons/primeicons.css'],
primevue: {
autoImport: true,
options: {
ripple: true,
theme: {
preset: Aura,
options: {
prefix: 'p',
darkModeSelector: '.p-dark',
cssLayer: {
name: 'primevue',
order: 'tailwind-base, primevue, tailwind-utilities',
},
},
},
},
},
i18n: {
locales: [
{ code: 'pt', iso: 'pt-BR', file: 'pt.json', name: 'Português' },
{ code: 'en', iso: 'en-US', file: 'en.json', name: 'English' },
{ code: 'es', iso: 'es-ES', file: 'es.json', name: 'Español' },
],
defaultLocale: 'pt',
langDir: 'locales',
strategy: 'no_prefix',
},
runtimeConfig: {
apiBaseUrl: process.env.API_BASE_URL,
apiToken: process.env.API_TOKEN,
public: { appName: process.env.APP_NAME },
},
typescript: { strict: true },
})
Nuxt 4 uses app/ as the default srcDir:
project-root/
app/
assets/
components/{domain}/
composables/
layouts/
middleware/
pages/
plugins/
stores/
types/
utils/
app.vue
app.config.ts
shared/
utils/ ← auto-imported in app + server
types/ ← auto-imported in app + server
server/
api/
middleware/
utils/
locales/ ← i18n locale files
public/
nuxt.config.ts
Key aliases:
~ / @ → app/#shared → shared/#server → server/ (server context only)Create these minimal files to validate the stack:
app/plugins/axios.ts — Axios instance (see api-service-builder agent for full pattern)locales/pt.json, locales/en.json, locales/es.json — minimal { "welcome": "..." }app/stores/app.ts — minimal Pinia store (see store-builder agent for pattern)app/layouts/default.vue — <NuxtPage /> inside layout wrapperapp/app.vue — <NuxtLayout><NuxtPage /></NuxtLayout>app/pages/index.vue — {{ $t('welcome') }}Run npm run dev and confirm app starts without errors.
To customize the default preset:
import { definePreset } from '@primeuix/themes'
import Aura from '@primeuix/themes/aura'
const MyPreset = definePreset(Aura, {
semantic: {
primary: {
50: '{indigo.50}',
// ... 100 through 950
},
colorScheme: {
light: { primary: { color: '{primary.500}' } },
dark: { primary: { color: '{primary.400}' } },
},
},
})
Available presets: Aura (default), Lara, Material, Nora.
Dark mode toggle:
document.documentElement.classList.toggle('p-dark')
useAsyncData/useFetch return shallowRef data (use deep: true if needed)undefined (not null)createUseFetch / createUseAsyncData for custom composables with defaultsnoUncheckedIndexedAccess: true by defaultshared/ directory auto-imported in both app and serverstatusCode → status, statusMessage → statusText in error handling@primeuix/themes)nuxt.config.ts with modules, PrimeVue 4 design tokens, i18n, runtimeConfigapp/ directory structure with shared/ for cross-context codenpm run dev runs successfullyFetches 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.
npx claudepluginhub whyllima/whyl-subagents --plugin whyll-agents-front