Stats
Actions
Tags
From whyll-agents-front
Creates Vue 3 SFC components with Composition API, typed props/emits, PrimeVue 4, Tailwind, and SSR safety.
How this agent operates — its isolation, permissions, and tool access model
Agent reference
whyll-agents-front:component-builderThe summary Claude sees when deciding whether to delegate to this agent
Creates: Vue 3 SFC components in `app/components/` organized by feature/domain. ``` 1. <script setup lang="ts"> 2. <template> 3. <style scoped> ``` ```typescript // 1. Imports (stores, composables, types) // 2. Props and Emits (typed generics) // 3. Stores and composables // 4. Local reactive state (ref, reactive) // 5. Computed properties // 6. Lifecycle hooks // 7. Functions/handlers ``` - **...
Creates: Vue 3 SFC components in app/components/ organized by feature/domain.
1. <script setup lang="ts">
2. <template>
3. <style scoped>
// 1. Imports (stores, composables, types)
// 2. Props and Emits (typed generics)
// 3. Stores and composables
// 4. Local reactive state (ref, reactive)
// 5. Computed properties
// 6. Lifecycle hooks
// 7. Functions/handlers
*Widget.vue, *Panel.vue, *Table.vue, *Card.vue, *Form.vuecomponents/dashboard/, components/verb/, components/layout/components/verb/VerbListTable.vue → <VerbListTable />@primevue/nuxt-module. Only import utilities: FilterMatchMode from @primevue/core/api, useToast from primevue/usetoast, useConfirmdefineProps<{ verb: Verb | null }>()defineEmits<{ close: []; practice: [mode: 'step' | 'flashcard'] }>()import type { Verb } from '@/types/verb'import.meta.client guard, <ClientOnly> wrapper.then().catch() for async calls. try/catch only for synchronous critical ops:deep() for PrimeVue overrides in <style scoped>Use the new names (old names are deprecated):
| Old (PrimeVue 3) | New (PrimeVue 4) |
|---|---|
<Calendar> | <DatePicker> |
<Dropdown> | <Select> |
<InputSwitch> | <ToggleSwitch> |
<OverlayPanel> | <Popover> |
<Sidebar> | <Drawer> |
<Chips> | <InputChips> |
<TabView> + <TabPanel> | <Tabs> + <TabList> + <Tab> + <TabPanels> + <TabPanel> |
<Accordion> + <AccordionTab> | <Accordion> + <AccordionPanel> + <AccordionHeader> + <AccordionContent> |
.p-fluid class)<!-- Option A: fluid prop on individual components -->
<InputText fluid />
<Select fluid :options="items" />
<!-- Option B: Fluid wrapper -->
<Fluid>
<InputText />
<Select :options="items" />
</Fluid>
<Tabs value="0">
<TabList>
<Tab value="0">{{ t('tabs.general') }}</Tab>
<Tab value="1">{{ t('tabs.settings') }}</Tab>
</TabList>
<TabPanels>
<TabPanel value="0">General content</TabPanel>
<TabPanel value="1">Settings content</TabPanel>
</TabPanels>
</Tabs>
dt prop)<Button :dt="{ root: { borderRadius: '2rem' } }" :label="t('action.save')" />
<Form :resolver="zodResolver" @submit="onSubmit">
<FormField name="email" v-slot="{ invalid, error }">
<InputText name="email" :invalid="invalid" fluid />
<Message v-if="error" severity="error" size="small">{{ error }}</Message>
</FormField>
</Form>
Glob components/{domain}/*.vue)app/types/app/components/{domain}/npx 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.