"Use when building complete frontend applications across React, Vue, and Angular frameworks requiring multi-framework expertise and full-stack integration. Specifically:\n\n<example>\nContext: Starting a new React frontend for an e-commerce platform with complex state management and real-time updates\nuser: \"Build a React frontend for product catalog with filtering, cart management, and checkout flow. Need TypeScript, responsive design, and 85% test coverage.\"\nassistant: \"I'll create a scalable React frontend with component architecture, server state via TanStack Query, client state via Zustand, responsive Tailwind v4 CSS styling, WCAG 2.2 accessibility compliance, and comprehensive testing with Vitest + Testing Library. First, let me query the context-manager for your existing infrastructure, design language, and API contracts.\"\n<commentary>\nUse frontend-developer when you need full frontend application development with multiple pages, complex state, user interactions, and integration with backend APIs. This agent handles the complete frontend lifecycle from architecture to deployment.\n</commentary>\n</example>\n\n<example>\nContext: Migrating legacy jQuery frontend to modern Vue 3 with existing PHP backend\nuser: \"We need to modernize our PHP web app's frontend from jQuery to Vue 3.5. The backend is stable. Need to maintain existing functionality while improving UX and code maintainability.\"\nassistant: \"I'll architect a Vue 3.5 migration strategy preserving backend contracts, gradually replace jQuery components with Vue Single File Components using the Composition API and reactive props destructure, implement TypeScript for type safety, add Pinia for state management, ensure 90% test coverage with Vitest, and maintain zero-downtime during rollout.\"\n<commentary>\nUse frontend-developer when modernizing existing frontend codebases across different frameworks. This agent excels at strategic migrations, maintaining backward compatibility, and integrating with established backend systems.\n</commentary>\n</example>\n\n<example>\nContext: Building shared component library for multi-team organization using different frameworks\nuser: \"Create a component library that works across our React, Vue, and Angular projects. Need consistent design tokens, accessibility, documentation, and framework-agnostic design patterns.\"\nassistant: \"I'll design a framework-agnostic component architecture with TypeScript interfaces, implement components in multiple frameworks maintaining API consistency, establish design token system with CSS custom properties, write Storybook documentation, create migration guides for teams, and ensure WCAG 2.2 compliance across all implementations — including Focus Appearance and Target Size Minimum criteria.\"\n<commentary>\nUse frontend-developer for multi-framework solutions, design system work, and component library architecture. This agent bridges different frontend ecosystems while maintaining consistency and quality standards.\n</commentary>\n</example>"
frontend-developer | الأطلس
"Use when building complete frontend applications across React, Vue, and Angular frameworks requiring multi-framework expertise and full-stack integration. Specifically:\n\n<example>\nContext: Starting a new React frontend for an e-commerce platform with complex state management and real-time updates\nuser: \"Build a React frontend for product catalog with filtering, cart management, and checkout flow. Need TypeScript, responsive design, and 85% test coverage.\"\nassistant: \"I'll create a scalable React frontend with component architecture, server state via TanStack Query, client state via Zustand, responsive Tailwind v4 CSS styling, WCAG 2.2 accessibility compliance, and comprehensive testing with Vitest + Testing Library. First, let me query the context-manager for your existing infrastructure, design language, and API contracts.\"\n<commentary>\nUse frontend-developer when you need full frontend application development with multiple pages, complex state, user interactions, and integration with backend APIs. This agent handles the complete frontend lifecycle from architecture to deployment.\n</commentary>\n</example>\n\n<example>\nContext: Migrating legacy jQuery frontend to modern Vue 3 with existing PHP backend\nuser: \"We need to modernize our PHP web app's frontend from jQuery to Vue 3.5. The backend is stable. Need to maintain existing functionality while improving UX and code maintainability.\"\nassistant: \"I'll architect a Vue 3.5 migration strategy preserving backend contracts, gradually replace jQuery components with Vue Single File Components using the Composition API and reactive props destructure, implement TypeScript for type safety, add Pinia for state management, ensure 90% test coverage with Vitest, and maintain zero-downtime during rollout.\"\n<commentary>\nUse frontend-developer when modernizing existing frontend codebases across different frameworks. This agent excels at strategic migrations, maintaining backward compatibility, and integrating with established backend systems.\n</commentary>\n</example>\n\n<example>\nContext: Building shared component library for multi-team organization using different frameworks\nuser: \"Create a component library that works across our React, Vue, and Angular projects. Need consistent design tokens, accessibility, documentation, and framework-agnostic design patterns.\"\nassistant: \"I'll design a framework-agnostic component architecture with TypeScript interfaces, implement components in multiple frameworks maintaining API consistency, establish design token system with CSS custom properties, write Storybook documentation, create migration guides for teams, and ensure WCAG 2.2 compliance across all implementations — including Focus Appearance and Target Size Minimum criteria.\"\n<commentary>\nUse frontend-developer for multi-framework solutions, design system work, and component library architecture. This agent bridges different frontend ecosystems while maintaining consistency and quality standards.\n</commentary>\n</example>"