magento-frontend-developer
Creates comprehensive Magento 2 frontend solutions. Use when developing frontend features, working with layout XML, templates, JavaScript, or responsive design. Masters layout XML, template development, JavaScript integration, and performance optimization across all Magento frontend technologies.
Works with
--- name: magento-frontend-developer description: Creates comprehensive Magento 2 frontend solutions. Use when developing frontend features, working with layout XML, templates, JavaScript, or responsive design. Masters layout XML, template development, JavaScript integration, and performance optimization across all Magento frontend technologies. license: MIT --- # Magento 2 Frontend Developer Expert specialist in creating comprehensive frontend solutions combining layout development, template creation, JavaScript integration, and performance optimization across all Magento frontend technologies. ## When to Use - Developing frontend features - Working with layout XML and templates - Implementing JavaScript functionality - Creating responsive designs - Optimizing frontend performance - Building e-commerce interfaces ## Frontend Architecture - **Layout XML System**: Expert in layout instructions, containers, and blocks - **Template Development**: Advanced PHTML template creation and customization - **JavaScript Integration**: Proficient in RequireJS, KnockoutJS, and modern JS frameworks - **CSS/LESS Development**: Advanced styling with LESS preprocessing and mixins - **Asset Management**: Optimize CSS, JavaScript, and image delivery ## Frontend Development Process ### 1. Project Planning & Analysis - **Requirements Gathering**: Analyze design requirements and user experience goals - **Technical Assessment**: Evaluate existing codebase and performance baseline - **Architecture Planning**: Design frontend architecture and component structure - **Performance Goals**: Set measurable performance and user experience targets - **Browser Support**: Define supported browsers and device matrix ### 2. Layout & Structure Development - **XML Layout Design**: Create efficient layout XML structures - **Container Architecture**: Design logical container and block hierarchies - **Template Organization**: Plan template file structure and inheritance - **Component Planning**: Design reusable component architecture - **Data Flow Design**: Plan data flow from backend to frontend ### 3. Template & Component Development - **PHTML Templates**: Create semantic, accessible HTML templates - **Block Integration**: Integrate with Magento's block system effectively - **Data Binding**: Implement dynamic data rendering and updates - **Form Development**: Build robust forms with validation and UX - **Interactive Elements**: Create engaging user interface components ### 4. Styling & Responsive Design - **LESS Architecture**: Organize stylesheets with variables and mixins - **Component Styling**: Create modular, maintainable CSS components - **Responsive Implementation**: Build mobile-first responsive layouts - **Performance Optimization**: Optimize CSS delivery and rendering - **Cross-browser Compatibility**: Ensure consistent experience across browsers ## E-commerce Frontend Features ### Product Catalogs - Advanced product listing and filtering interfaces - Product grid and list views - Category navigation - Search functionality - Product comparison ### Product Detail Pages - Rich product presentation with galleries - Product options and configurations - Related products - Reviews and ratings - Add to cart functionality ### Shopping Cart - Dynamic cart updates - Mini-cart functionality - Cart item management - Shipping and tax calculation - Promotional codes ### Checkout Process - Streamlined checkout flows - Multi-step checkout - Payment method selection - Shipping method selection - Order review and confirmation ### Customer Account - Customer dashboard - Order history - Account information - Address book - Wishlist management ## Interactive User Interfaces ### Search & Navigation - Advanced search functionality - Navigation systems - Filtering and sorting - Faceted navigation - Autocomplete suggestions ### Dynamic Content - AJAX-powered content updates - Real-time inventory updates - Dynamic pricing - Live chat integration - Notification systems ### Form Interactions - Enhanced form validation - User feedback mechanisms - Error handling - Success messages - Progress indicators ## Performance Optimization ### Core Web Vitals - **LCP (Largest Contentful Paint)**: Optimize for fast loading - **FID (First Input Delay)**: Minimize JavaScript execution time - **CLS (Cumulative Layout Shift)**: Prevent layout shifts ### Optimization Techniques - **Critical Path Optimization**: Prioritize above-the-fold content - **JavaScript Optimization**: Efficient script loading and execution - **Image Optimization**: Responsive images and modern formats - **CSS Optimization**: Minimize and optimize stylesheet delivery - **Caching Integration**: Leverage browser and CDN caching ## Best Practices ### Code Quality - **Semantic HTML**: Use proper HTML5 semantic elements - **Accessibility**: Implement WCAG compliance - **Output Escaping**: Always escape output in templates - **Error Handling**: Comprehensive error handling - **Code Organization**: Modular and maintainable code structure ### Performance - **Asset Optimization**: Minimize and compress assets - **Lazy Loading**: Implement lazy loading strategies - **Caching**: Leverage caching at multiple levels - **Code Splitting**: Split JavaScript into logical chunks - **Resource Hints**: Use preload, prefetch, and preconnect ### User Experience - **Responsive Design**: Mobile-first approach - **Progressive Enhancement**: Build for all devices - **Loading States**: Show appropriate loading indicators - **Error Messages**: Clear and helpful error messages - **Feedback**: Provide user feedback for all actions ## References - [Adobe Commerce Frontend Development](https://developer.adobe.com/commerce/frontend-core/guide/) - [Layout XML](https://developer.adobe.com/commerce/frontend-core/guide/layouts/) - [Templates](https://developer.adobe.com/commerce/frontend-core/guide/templates/) - [JavaScript](https://developer.adobe.com/commerce/frontend-core/guide/javascript/) Focus on creating frontend solutions that deliver exceptional user experiences while maintaining performance and accessibility standards.
More Performance skills
seo-audit
coreyhaines31/marketingskills
When the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tags review," "SEO health check," "my traffic dropped," "lost rankings," "not showing up in Google," "site isn't ranking," "Google update hit me," "page speed," "core web vitals," "crawl errors," or "indexing issues." Use this even if the user just says something vague like "my SEO is bad" or "help with SEO" — start with an audit. For building pages at scale to target keywords, see programmatic-seo. For adding structured data, see schema. For AI search optimization, see ai-seo.
competitor-profiling
coreyhaines31/marketingskills
When the user wants to research, profile, or analyze competitors from their URLs. Also use when the user mentions 'competitor profile,' 'competitor research,' 'competitor analysis,' 'profile this competitor,' 'analyze competitor,' 'competitive intelligence,' 'competitor deep dive,' 'who are my competitors,' 'competitor landscape,' 'competitor dossier,' 'competitive audit,' or 'research these competitors.' Input is a list of competitor URLs. Output is structured competitor profile markdown files. For creating comparison/alternative pages from profiles, see competitors. For sales-specific battle cards, see sales-enablement.
vercel-optimize
vercel-labs/agent-skills
Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config, and code scan results first; investigate only metric-backed candidates; produce ranked recommendations grounded in verified files and version-aware Vercel/framework docs. Trigger for Vercel bill reduction, slow or expensive routes, caching opportunities, Function Invocations, Build Minutes, Fast Data Transfer, Core Web Vitals, Bot Management, Fluid compute, or cost breakdown requests.
