web-development

Frontend development agent for building user interfaces, implementing components, handling state management, and optimizing client-side performance. Use when the task is about UI implementation, responsive design, or frontend architecture.

Full-stack development agent for end-to-end feature implementation spanning frontend, API, database, and auth layers. Use when a task crosses more than one layer of the stack or when building a complete feature from scratch. <example> Context: User needs a complete feature that touches frontend, API, and database user: "Build a user registration flow with email verification" assistant: "I'll use the fullstack-developer agent to implement the registration form, API endpoint, database schema, and email verification logic as a cohesive feature." <commentary> Registration spans UI, validation, API, database writes, and email — a textbook full-stack task. </commentary> </example> <example> Context: User is adding a new data-driven page with backend support user: "Add an admin dashboard that shows user activity stats" assistant: "I'll use the fullstack-developer agent to build the stats aggregation query, API route, and dashboard UI together so the contracts stay aligned." <commentary> Building the API and its consumer together prevents contract mismatches. </commentary> </example> <example> Context: User needs to integrate a third-party service across the stack user: "Add Stripe subscription billing to our app" assistant: "I'll use the fullstack-developer agent to wire up Stripe webhooks, database subscription state, and the billing UI in one pass." <commentary> Payment integration touches webhooks, database state, and UI — all layers need to agree. </commentary> </example>

Next.js development agent for building and maintaining Next.js applications. Use when the task involves Next.js routing, rendering strategies, server components, server actions, or Next.js-specific configuration. <example> Context: User is starting a new Next.js project or adding routes user: "Set up the route structure for our multi-tenant SaaS app" assistant: "I'll use the nextjs-developer agent to design the App Router layout with route groups, dynamic segments, and parallel routes for the tenant-scoped pages." <commentary> Route architecture decisions in Next.js have cascading effects on layouts, loading states, and data fetching — get them right early. </commentary> </example> <example> Context: User needs to choose or fix a rendering strategy user: "Our product pages are slow — should we use SSG or ISR?" assistant: "I'll use the nextjs-developer agent to evaluate the data freshness requirements and recommend the right rendering strategy for your product catalog." <commentary> Rendering strategy is a Next.js-specific decision that affects performance, caching, and infrastructure cost. </commentary> </example> <example> Context: User is working with server components or server actions user: "Convert this client-side form to use server actions" assistant: "I'll use the nextjs-developer agent to refactor the form to use server actions with proper validation, error handling, and optimistic updates." <commentary> Server actions have specific patterns for validation, revalidation, and error handling that differ from client-side approaches. </commentary> </example>

React development agent for component architecture, hooks, state management, and performance optimization. Use when the task is React-specific — component design, hook composition, rendering performance, or React ecosystem library integration. <example> Context: User needs to design or refactor a component hierarchy user: "Our settings page is a 600-line component — help me break it up" assistant: "I'll use the react-specialist agent to decompose the settings page into focused components with clear data flow and proper state boundaries." <commentary> Component decomposition is a React-specific skill — knowing where to draw boundaries, what state to lift, and what to co-locate. </commentary> </example> <example> Context: User is dealing with rendering performance issues user: "The table re-renders every time I type in the search box" assistant: "I'll use the react-specialist agent to identify the re-render cause and apply the right memoization strategy." <commentary> React re-render debugging requires understanding of React's reconciliation, memo boundaries, and state placement. </commentary> </example> <example> Context: User needs to choose or integrate a state management approach user: "Should we use Zustand or React Query for our data layer?" assistant: "I'll use the react-specialist agent to evaluate your data patterns — Zustand for client state, React Query for server state, or both if the lines are clear." <commentary> State management choice depends on whether the data is client-owned or server-owned — React-specific ecosystem decision. </commentary> </example>

Use this agent when creating user interfaces, designing components, building design systems, planning user flows, or improving visual and interaction quality. Handles both visual design and UX process — from user journey mapping to component specifications. <example> Context: Starting a new app or feature design user: "We need to design the onboarding flow for new users" assistant: "I'll use the ui-designer agent to map the user journey, create wireframes, and design the component specifications." <commentary> Onboarding flows require user journey mapping, progressive disclosure decisions, and conversion optimization. </commentary> </example> <example> Context: Improving existing interfaces user: "Users are dropping off at the checkout page" assistant: "I'll use the ui-designer agent to analyze the checkout UX, identify friction points, and redesign the flow." <commentary> UX improvement requires understanding user behavior data and applying design heuristics to reduce friction. </commentary> </example> <example> Context: Creating consistent design systems user: "Our app feels inconsistent across different screens" assistant: "I'll use the ui-designer agent to create a cohesive design system with tokens, components, and usage guidelines." <commentary> Design systems ensure consistency and speed up future development. </commentary> </example>

Vue development agent for component architecture, reactivity, composables, and the Vue ecosystem. Use when the task is Vue-specific — Composition API patterns, Pinia store design, Vue Router configuration, or Nuxt integration. <example> Context: User is building or refactoring Vue components user: "Migrate our Options API components to Composition API" assistant: "I'll use the vue-expert agent to convert the components to Composition API with proper composable extraction and reactivity patterns." <commentary> Options-to-Composition migration requires understanding Vue's reactivity model and knowing when to extract composables. </commentary> </example> <example> Context: User needs state management guidance user: "Our Vuex store is getting unwieldy — should we switch to Pinia?" assistant: "I'll use the vue-expert agent to plan the Pinia migration with proper store decomposition and TypeScript typing." <commentary> Pinia migration from Vuex involves rethinking store structure — Pinia favors many small stores over one large one. </commentary> </example> <example> Context: User is working with Nuxt or SSR user: "Set up Nuxt 3 with server-side rendering for our marketing site" assistant: "I'll use the vue-expert agent to configure Nuxt 3 with the right rendering strategy, auto-imports, and SEO metadata for your marketing pages." <commentary> Nuxt 3 configuration decisions — rendering mode, auto-imports, Nitro server routes — are Vue-ecosystem-specific. </commentary> </example>