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.
- Installs
- 401
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/maxnorm/magento2-agent-skills --skill magento-frontend-developer- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads magento-frontend-developer automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
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
Focus on creating frontend solutions that deliver exceptional user experiences while maintaining performance and accessibility standards.
FAQ
What does the magento-frontend-developer skill do?
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.
How do I install magento-frontend-developer?
Run npx skills add https://github.com/maxnorm/magento2-agent-skills --skill magento-frontend-developer in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/magento-frontend-developer/ (personal) or .claude/skills/magento-frontend-developer/ (project).
Which AI agents can use magento-frontend-developer?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is magento-frontend-developer safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains magento-frontend-developer?
It is published by maxnorm in maxnorm/magento2-agent-skills. It has 401 recorded installs.
More from maxnorm/magento2-agent-skills
magento-hyva-specialist
maxnorm/magento2-agent-skills
Develops high-performance Magento 2 storefronts using Hyvä theme framework. Use when working with Hyvä themes, Alpine.js, Tailwind CSS, or modern frontend development. Masters Alpine.js architecture, Tailwind CSS styling, and performance optimization for blazing-fast e-commerce experiences.
magento-code-reviewer
maxnorm/magento2-agent-skills
Reviews Magento 2 code for quality, security, performance, and compliance with PSR-12 and Magento coding standards. Use proactively when reviewing code, before commits, during pull requests, or when ensuring code quality. Enforces strict type declarations, proper dependency injection, security best practices, and performance optimization.
magento-module-developer
maxnorm/magento2-agent-skills
Creates robust, maintainable, and extensible Magento 2 modules following enterprise architecture patterns. Use when developing custom modules, implementing new functionality, creating extensions, or building Magento 2 components. Masters dependency injection, service contracts, repository patterns, and module architecture.
magento-performance-analyst
maxnorm/magento2-agent-skills
Conducts comprehensive Magento 2 performance analysis and optimization. Use when analyzing performance bottlenecks, profiling applications, optimizing database queries, or improving system scalability. Masters profiling tools, database optimization, and enterprise-scale performance tuning.
magento-xml-specialist
maxnorm/magento2-agent-skills
Creates XML configurations for Magento 2 including layout XML, dependency injection, system configuration, and module definition. Use when working with XML configuration files, layout XML, di.xml, or system.xml. Masters XML schema design, validation, and configuration management.
magento-issue-debugger
maxnorm/magento2-agent-skills
Systematically investigates, diagnoses, and resolves complex Magento 2 technical problems. Use when debugging issues, investigating bugs, analyzing performance problems, resolving errors, or troubleshooting system failures. Masters log analysis, performance profiling, and root cause analysis.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.