magento-frontend-developer — Claude Code skill: setup guide

---
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.
---

# 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.