Get the FREE Ultimate OpenClaw Setup Guide →

magento-hyva-specialist

Scanned
npx machina-cli add skill maxnorm/magento2-agent-skills/magento-hyva-specialist --openclaw
Files (1)
SKILL.md
5.7 KB

Magento 2 Hyvä Specialist

Expert specialist in creating high-performance, modern Magento 2 storefronts using the Hyvä theme framework, leveraging Alpine.js, Tailwind CSS, and cutting-edge frontend technologies.

When to Use

  • Developing Hyvä-based storefronts
  • Working with Alpine.js components
  • Implementing Tailwind CSS styling
  • Optimizing frontend performance
  • Building modern, fast e-commerce experiences

Hyvä Development Stack

  • Alpine.js: Reactive JavaScript framework for dynamic interfaces
  • Tailwind CSS: Utility-first CSS framework for rapid styling
  • PostCSS: CSS processing and optimization
  • Webpack: Asset bundling and optimization
  • GraphQL Integration: Efficient data fetching from Magento's GraphQL API

Hyvä Development Process

1. Hyvä Setup & Configuration

  • Theme Installation: Set up Hyvä theme and development environment
  • Build Process: Configure and optimize build tools and workflows
  • Module Integration: Integrate Hyvä with existing Magento modules
  • Performance Baseline: Establish performance metrics and monitoring
  • Development Tools: Set up debugging and development utilities

2. Component Development

  • Alpine.js Components: Create reactive, lightweight components
  • Tailwind Styling: Apply utility-first CSS for responsive design
  • GraphQL Integration: Implement efficient data fetching patterns
  • State Management: Handle component state and data flow
  • Event Handling: Implement user interactions and form submissions

3. Layout & Template Development

  • Layout Optimization: Create efficient page layouts with minimal overhead
  • Template Conversion: Convert existing templates to Hyvä architecture
  • Component Library: Build reusable component library
  • Responsive Design: Implement mobile-first responsive layouts
  • Accessibility: Ensure WCAG compliance and screen reader support

4. Performance Tuning

  • Bundle Optimization: Minimize and optimize JavaScript bundles
  • CSS Purging: Remove unused CSS for smaller payloads
  • Critical CSS: Implement critical CSS for faster rendering
  • Lazy Loading: Implement progressive loading strategies
  • Caching Integration: Optimize for Magento's caching layers

Alpine.js Mastery

Component Architecture

  • Design scalable Alpine.js component patterns
  • Efficient data binding and state management
  • Create custom Alpine.js directives
  • Build Alpine.js plugins for reusable functionality
  • Optimize Alpine.js for minimal overhead

Data Management

  • Efficient data binding patterns
  • Component state management
  • Event handling and communication
  • Form handling and validation
  • AJAX integration

Tailwind CSS Advanced Usage

Custom Configuration

  • Customize Tailwind for brand-specific design systems
  • Create reusable component classes with @apply
  • Advanced responsive design patterns
  • Dark mode implementation
  • Animation and transitions

Styling Patterns

  • Utility-first approach
  • Component-based styling
  • Responsive utilities
  • Custom utilities and variants
  • Performance optimization

GraphQL Integration

  • Query Optimization: Write efficient GraphQL queries
  • Caching Strategies: Implement GraphQL caching patterns
  • Error Handling: Robust error handling for API calls
  • Real-time Updates: Implement real-time data synchronization
  • Batch Operations: Optimize multiple data operations

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

  • JavaScript Optimization: Minimize JavaScript payload
  • CSS Optimization: Efficient CSS delivery
  • Image Optimization: Modern image formats and responsive loading
  • Caching Strategies: Leverage browser and CDN caching
  • Resource Hints: Optimize resource loading

Best Practices

Development Workflow

  • Component-First: Design with reusable components in mind
  • Performance Budget: Maintain strict performance budgets
  • Mobile-First: Prioritize mobile experience and performance
  • Progressive Enhancement: Build with progressive enhancement principles
  • Accessibility First: Ensure accessibility from the start

Code Organization

  • Modular Structure: Organize code in logical, maintainable modules
  • Documentation: Maintain comprehensive component documentation
  • Version Control: Use Git effectively for collaborative development
  • Testing: Implement frontend testing strategies
  • Code Reviews: Establish peer review processes

Module Integration

  • Third-party Extensions: Integrate extensions with Hyvä architecture
  • Custom Modules: Adapt custom modules for Hyvä compatibility
  • Legacy Support: Bridge legacy code with modern Hyvä patterns
  • API Integration: Connect external services and APIs
  • Headless Architecture: Implement headless commerce patterns

References

Focus on creating Hyvä-based storefronts that deliver exceptional performance, user experience, and maintainability.

Source

git clone https://github.com/maxnorm/magento2-agent-skills/blob/main/skills/magento-hyva-specialist/SKILL.mdView on GitHub

Overview

A specialist who builds high-performance Magento 2 storefronts using the Hyvä theme, Alpine.js, and Tailwind CSS. They focus on modern frontend development, efficient data fetching via GraphQL, and cutting-edge build optimizations to deliver blazing-fast e-commerce experiences. This role emphasizes performance, accessibility, and scalable component architecture.

How This Skill Works

The role leverages the Hyvä development stack (Alpine.js, Tailwind CSS, PostCSS, Webpack) to create reactive components and streamlined styling. It uses GraphQL for efficient data queries, with careful state management and event handling to minimize runtime overhead and optimize rendering, while integrating with Magento's caching and build processes.

When to Use It

  • Developing Hyvä-based storefronts
  • Working with Alpine.js components
  • Implementing Tailwind CSS styling
  • Optimizing frontend performance
  • Building modern, fast e-commerce experiences

Quick Start

  1. Step 1: Install the Hyvä theme, configure GraphQL access, and set up development tools
  2. Step 2: Create a reactive Alpine.js component and style it with Tailwind CSS for a reusable UI block
  3. Step 3: Build the project, purge unused CSS, enable critical CSS, and measure Core Web Vitals to iterate

Best Practices

  • Set up Hyvä theme and development environment with performance baselines and monitoring
  • Design reusable Alpine.js components with clear data flow and minimal overhead
  • Apply Tailwind CSS using a component-based approach and @apply for consistency
  • Implement efficient GraphQL queries with robust error handling and caching strategies
  • Focus on performance tuning: bundle optimization, CSS purging, critical CSS, and lazy loading

Example Use Cases

  • Hyvä storefront implementation for a Magento 2 site using Alpine.js components
  • Reusable Alpine.js component library for a product gallery and cart interactions
  • Tailwind-based responsive templates with mobile-first layouts and accessible controls
  • GraphQL data fetching optimized with caching, batching, and real-time updates
  • Performance-tuned storefront featuring bundle optimization and lazy loading

Frequently Asked Questions

Add this skill to your agents
Sponsor this space

Reach thousands of developers ↗