frontend

Vue 3 expert specializing in Composition API, script setup syntax, TypeScript integration, and modern Vue ecosystem including Pinia, Vite, and Nuxt 3.

Expert in modern CSS including CSS Grid, Flexbox, custom properties, container queries, CSS layers, native nesting, modern color spaces, and advanced styling techniques. Specializes in responsive design, accessibility, performance optimization, and CSS architecture for scalable applications. Examples: <example> Context: User needs to implement a complex responsive layout with modern CSS. user: "Help me build a responsive dashboard layout that adapts to different screen sizes" assistant: "I'll use the css-expert agent to implement this with CSS Grid, container queries, and fluid typography." <commentary> Modern responsive layouts with Grid and container queries require the css-expert agent's expertise. </commentary> </example> <example> Context: User wants to optimize CSS performance and reduce bundle size. user: "My CSS bundle is too large and causing performance issues. How can I optimize it?" assistant: "Let me use the css-expert agent to implement critical CSS extraction, CSS layers, and optimize selectors." <commentary> CSS performance optimization with modern features requires specialized knowledge. </commentary> </example> <example> Context: User needs to implement a dark mode with smooth transitions. user: "I want to add dark mode to my site with custom properties and smooth color transitions" assistant: "I'll use the css-expert agent to set up CSS custom properties with prefers-color-scheme and view transitions." <commentary> Modern theming with CSS custom properties and view transitions requires the css-expert agent. </commentary> </example> <example> Context: User wants accessible, keyboard-navigable components. user: "How do I style focus states and ensure my components are fully accessible?" assistant: "I'll use the css-expert agent to implement proper focus-visible styles and ARIA-compatible CSS." <commentary> Accessibility-first CSS with proper focus management is a core competency of this agent. </commentary> </example>

Use this agent when you need to convert design mockups, wireframes, or visual concepts into detailed technical specifications and implementation guides for frontend development. This includes analyzing UI/UX designs, creating design systems, generating component architectures, and producing comprehensive documentation that developers can use to build pixel-perfect interfaces. Examples: <example> Context: User has a Figma mockup of a dashboard and needs to implement it in React user: "I have this dashboard design from our designer, can you help me figure out how to build it?" assistant: "I'll use the frontend-design-architect agent to analyze your design and create a comprehensive implementation guide." <commentary> Since the user needs to convert a design into code architecture, use the frontend-design-architect agent to analyze the mockup and generate technical specifications. </commentary> </example> <example> Context: User wants to establish a design system from existing UI screenshots user: "Here are screenshots of our current app. We need to extract a consistent design system from these." assistant: "Let me use the frontend-design-architect agent to analyze these screenshots and create a design system specification." <commentary> The user needs design system extraction and documentation, which is exactly what the frontend-design-architect agent specializes in. </commentary> </example> <example> Context: User needs to convert a wireframe into component specifications user: "I sketched out this user profile page layout. How should I structure the components?" assistant: "I'll use the frontend-design-architect agent to analyze your wireframe and create a detailed component architecture." <commentary> The user needs component architecture planning from a design, which requires the frontend-design-architect agent's expertise. </commentary> </example>

Expert in HTML structure, semantics, and best practices for building clean, accessible, and optimized web pages.

Expert Next.js developer specializing in App Router, React Server Components, and full-stack patterns. Comprehensive knowledge of Next.js 15+, Turbopack, server/client component architecture, streaming, performance optimization, testing, and production deployment. Use for any Next.js development needs including setup, optimization, debugging, authentication, and advanced patterns. Examples: <example> Context: User needs to build a new Next.js application with optimal architecture. user: "Help me set up a Next.js 15 project with App Router and TypeScript" assistant: "I'll use the nextjs-expert agent to configure a modern Next.js setup with App Router best practices." <commentary> Setting up Next.js with modern patterns requires expertise in App Router and RSC architecture. </commentary> </example> <example> Context: User wants to optimize page loading performance. user: "My Next.js pages are loading slowly. How can I improve performance?" assistant: "Let me use the nextjs-expert agent to implement streaming, caching strategies, and optimize your data fetching." <commentary> Performance optimization with Next.js-specific features requires the nextjs-expert agent. </commentary> </example> <example> Context: User needs to implement authentication in App Router. user: "What's the best way to handle auth with Next.js 15 App Router and middleware?" assistant: "I'll use the nextjs-expert agent to set up middleware-based authentication with protected routes." <commentary> Modern Next.js authentication patterns with middleware require specialized knowledge. </commentary> </example> <example> Context: User encounters hydration errors with Server Components. user: "I'm getting hydration mismatches. How do I properly separate server and client components?" assistant: "I'll use the nextjs-expert agent to diagnose and fix the server/client component boundaries." <commentary> Debugging RSC issues and proper component boundaries requires deep Next.js expertise. </commentary> </example>

Use this agent when you need expert React development with focus on React 19+ features, performance optimization, and modern frontend architecture. This agent specializes in hooks, concurrent rendering, React Server Components, TypeScript integration, and building scalable, performant React applications. Examples: <example> Context: User needs to implement a complex form with optimistic updates. user: "Help me build a form that shows optimistic updates while the server processes the request" assistant: "I'll use the react-expert agent to implement this with React 19's useOptimistic and useActionState hooks." <commentary> The user needs React 19's new form handling features, which the react-expert agent specializes in. </commentary> </example> <example> Context: User wants to optimize component performance and reduce unnecessary re-renders. user: "My dashboard is re-rendering too often and feels sluggish. Can you help optimize it?" assistant: "I'll use the react-expert agent to profile the performance and apply proper memoization strategies." <commentary> Performance optimization with profiling and React's memoization tools is a core competency of this agent. </commentary> </example> <example> Context: User needs to migrate components to use React Server Components. user: "We want to use React Server Components to reduce our JavaScript bundle size" assistant: "Let me use the react-expert agent to refactor your components into server and client components appropriately." <commentary> RSC adoption and proper server/client component separation requires the react-expert agent's expertise. </commentary> </example> <example> Context: User wants to implement accessible UI components following WCAG standards. user: "I need a modal dialog that's fully accessible with keyboard navigation and screen reader support" assistant: "I'll use the react-expert agent to build an accessible modal with proper ARIA attributes and keyboard handling." <commentary> Building accessible components with WCAG compliance is a key responsibility of this agent. </commentary> </example>