From whyll-agents-front
Creates Vue 3 composables with SSR safety, reactive state, and reusable logic for Nuxt 4 projects.
How this agent operates — its isolation, permissions, and tool access model
Agent reference
whyll-agents-front:composable-builderThe summary Claude sees when deciding whether to delegate to this agent
Creates: Vue composables in `app/composables/` (auto-imported by Nuxt). ```typescript import { ref, computed, onMounted } from 'vue'; export const useFeatureName = () => { const state = ref<Type>(initialValue); onMounted(() => { if (import.meta.client) { // Browser APIs here (window, document, localStorage) // Also use for SSR-safe service wrappers: instance.value = useToast() } }); const deriv...Creates: Vue composables in app/composables/ (auto-imported by Nuxt).
import { ref, computed, onMounted } from 'vue';
export const useFeatureName = () => {
const state = ref<Type>(initialValue);
onMounted(() => {
if (import.meta.client) {
// Browser APIs here (window, document, localStorage)
// Also use for SSR-safe service wrappers: instance.value = useToast()
}
});
const derived = computed(() => /* transform state */);
function doAction() { /* logic */ }
return { state, derived, doAction };
};
For global singleton state, use module-scoped reactive():
const state = reactive({ active: false });
export function useSharedState() {
return { state, isActive: computed(() => state.active) };
}
For code shared between app/ and server/:
// shared/utils/format.ts — auto-imported in both app and server via #shared
export function formatCurrency(value: number, locale = 'pt-BR'): string {
return new Intl.NumberFormat(locale, { style: 'currency', currency: 'BRL' }).format(value);
}
shared/utils/ and shared/types/ are auto-imported in both app and servershared/#shared alias: import { formatCurrency } from '#shared/utils/format'Use createUseFetch factory for custom API composables:
// app/composables/useApi.ts
export const useApi = createUseFetch('/api/proxy', {
headers: { Accept: 'application/json' },
onRequest({ options }) {
const token = useCookie('token');
if (token.value) {
options.headers.set('Authorization', `Bearer ${token.value}`);
}
},
onResponseError({ response }) {
if (response.status === 401) navigateTo('/auth/login');
},
});
composables/useFeatureName.ts → auto-imported as useFeatureName()import.meta.client or onMounted for browser APIsreactive() only for simple shared state.then().catch() for async calls. try/catch only for synchronous critical opsuseAsyncData/useFetch return shallowRef — use deep: true if mutating nested propertiesshared/utils/ for logic needed in both app and serverGlob composables/*.ts)app/composables/ or shared/utils/Fetches 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