{"id":"5185a28e-ff47-4cd5-aaf7-b0ab11ffd82e","shortId":"8nj5dU","kind":"skill","title":"magento-hyva-specialist","tagline":"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 e","description":"# Magento 2 Hyvä Specialist\n\nExpert specialist in creating high-performance, modern Magento 2 storefronts using the Hyvä theme framework, leveraging Alpine.js, Tailwind CSS, and cutting-edge frontend technologies.\n\n## When to Use\n\n- Developing Hyvä-based storefronts\n- Working with Alpine.js components\n- Implementing Tailwind CSS styling\n- Optimizing frontend performance\n- Building modern, fast e-commerce experiences\n\n## Hyvä Development Stack\n\n- **Alpine.js**: Reactive JavaScript framework for dynamic interfaces\n- **Tailwind CSS**: Utility-first CSS framework for rapid styling\n- **PostCSS**: CSS processing and optimization\n- **Webpack**: Asset bundling and optimization\n- **GraphQL Integration**: Efficient data fetching from Magento's GraphQL API\n\n## Hyvä Development Process\n\n### 1. Hyvä Setup & Configuration\n- **Theme Installation**: Set up Hyvä theme and development environment\n- **Build Process**: Configure and optimize build tools and workflows\n- **Module Integration**: Integrate Hyvä with existing Magento modules\n- **Performance Baseline**: Establish performance metrics and monitoring\n- **Development Tools**: Set up debugging and development utilities\n\n### 2. Component Development\n- **Alpine.js Components**: Create reactive, lightweight components\n- **Tailwind Styling**: Apply utility-first CSS for responsive design\n- **GraphQL Integration**: Implement efficient data fetching patterns\n- **State Management**: Handle component state and data flow\n- **Event Handling**: Implement user interactions and form submissions\n\n### 3. Layout & Template Development\n- **Layout Optimization**: Create efficient page layouts with minimal overhead\n- **Template Conversion**: Convert existing templates to Hyvä architecture\n- **Component Library**: Build reusable component library\n- **Responsive Design**: Implement mobile-first responsive layouts\n- **Accessibility**: Ensure WCAG compliance and screen reader support\n\n### 4. Performance Tuning\n- **Bundle Optimization**: Minimize and optimize JavaScript bundles\n- **CSS Purging**: Remove unused CSS for smaller payloads\n- **Critical CSS**: Implement critical CSS for faster rendering\n- **Lazy Loading**: Implement progressive loading strategies\n- **Caching Integration**: Optimize for Magento's caching layers\n\n## Alpine.js Mastery\n\n### Component Architecture\n- Design scalable Alpine.js component patterns\n- Efficient data binding and state management\n- Create custom Alpine.js directives\n- Build Alpine.js plugins for reusable functionality\n- Optimize Alpine.js for minimal overhead\n\n### Data Management\n- Efficient data binding patterns\n- Component state management\n- Event handling and communication\n- Form handling and validation\n- AJAX integration\n\n## Tailwind CSS Advanced Usage\n\n### Custom Configuration\n- Customize Tailwind for brand-specific design systems\n- Create reusable component classes with @apply\n- Advanced responsive design patterns\n- Dark mode implementation\n- Animation and transitions\n\n### Styling Patterns\n- Utility-first approach\n- Component-based styling\n- Responsive utilities\n- Custom utilities and variants\n- Performance optimization\n\n## GraphQL Integration\n\n- **Query Optimization**: Write efficient GraphQL queries\n- **Caching Strategies**: Implement GraphQL caching patterns\n- **Error Handling**: Robust error handling for API calls\n- **Real-time Updates**: Implement real-time data synchronization\n- **Batch Operations**: Optimize multiple data operations\n\n## Performance Optimization\n\n### Core Web Vitals\n- **LCP (Largest Contentful Paint)**: Optimize for fast loading\n- **FID (First Input Delay)**: Minimize JavaScript execution time\n- **CLS (Cumulative Layout Shift)**: Prevent layout shifts\n\n### Optimization Techniques\n- **JavaScript Optimization**: Minimize JavaScript payload\n- **CSS Optimization**: Efficient CSS delivery\n- **Image Optimization**: Modern image formats and responsive loading\n- **Caching Strategies**: Leverage browser and CDN caching\n- **Resource Hints**: Optimize resource loading\n\n## Best Practices\n\n### Development Workflow\n- **Component-First**: Design with reusable components in mind\n- **Performance Budget**: Maintain strict performance budgets\n- **Mobile-First**: Prioritize mobile experience and performance\n- **Progressive Enhancement**: Build with progressive enhancement principles\n- **Accessibility First**: Ensure accessibility from the start\n\n### Code Organization\n- **Modular Structure**: Organize code in logical, maintainable modules\n- **Documentation**: Maintain comprehensive component documentation\n- **Version Control**: Use Git effectively for collaborative development\n- **Testing**: Implement frontend testing strategies\n- **Code Reviews**: Establish peer review processes\n\n## Module Integration\n\n- **Third-party Extensions**: Integrate extensions with Hyvä architecture\n- **Custom Modules**: Adapt custom modules for Hyvä compatibility\n- **Legacy Support**: Bridge legacy code with modern Hyvä patterns\n- **API Integration**: Connect external services and APIs\n- **Headless Architecture**: Implement headless commerce patterns\n\n## References\n\n- [Hyvä Theme Documentation](https://hyva.io/)\n- [Alpine.js Documentation](https://alpinejs.dev/)\n- [Tailwind CSS Documentation](https://tailwindcss.com/)\n- [Adobe Commerce GraphQL](https://developer.adobe.com/commerce/graphql/)\n\nFocus on creating Hyvä-based storefronts that deliver exceptional performance, user experience, and maintainability.","tags":["magento","hyva","specialist","magento2","agent","skills","maxnorm","agent-skills"],"capabilities":["skill","source-maxnorm","skill-magento-hyva-specialist","topic-agent-skills","topic-magento2"],"categories":["magento2-agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/maxnorm/magento2-agent-skills/magento-hyva-specialist","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add maxnorm/magento2-agent-skills","source_repo":"https://github.com/maxnorm/magento2-agent-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 9 github stars · SKILL.md body (5,437 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:08:49.277Z","embedding":null,"createdAt":"2026-05-07T20:41:36.852Z","updatedAt":"2026-05-18T19:08:49.277Z","lastSeenAt":"2026-05-18T19:08:49.277Z","tsv":"'/)':632,637,643 '/commerce/graphql/)':649 '1':145 '2':10,47,59,190 '3':232 '4':275 'access':267,544,547 'adapt':598 'adob':644 'advanc':366,384 'ajax':362 'alpine.js':22,30,67,86,105,193,315,321,332,335,341,633 'alpinejs.dev':636 'alpinejs.dev/)':635 'anim':391 'api':141,432,613,619 'appli':201,383 'approach':399 'architectur':31,252,318,595,621 'asset':128 'base':82,402,655 'baselin':176 'batch':444 'best':510 'bind':326,349 'blaze':40 'blazing-fast':39 'brand':374 'brand-specif':373 'bridg':606 'browser':501 'budget':524,528 'build':95,158,163,255,334,539 'bundl':129,278,284 'cach':307,313,420,424,498,504 'call':433 'cdn':503 'class':381 'cls':471 'code':551,556,579,608 'collabor':572 'commerc':44,100,624,645 'communic':357 'compat':603 'complianc':270 'compon':87,191,194,198,219,253,257,317,322,351,380,401,515,520,564 'component-bas':400 'component-first':514 'comprehens':563 'configur':148,160,369 'connect':615 'content':457 'control':567 'convers':246 'convert':247 'core':452 'creat':53,195,238,330,378,652 'critic':293,296 'css':24,33,69,90,113,117,123,205,285,289,294,297,365,485,488,639 'cumul':472 'custom':331,368,370,406,596,599 'cut':72 'cutting-edg':71 'dark':388 'data':135,213,222,325,345,348,442,448 'debug':186 'delay':466 'deliv':658 'deliveri':489 'design':208,260,319,376,386,517 'develop':5,28,79,103,143,156,182,188,192,235,512,573 'developer.adobe.com':648 'developer.adobe.com/commerce/graphql/)':647 'direct':333 'document':561,565,629,634,640 'dynam':110 'e':43,45,99 'e-commerc':42,98 'edg':73 'effect':570 'effici':134,212,239,324,347,417,487 'enhanc':538,542 'ensur':268,546 'environ':157 'error':426,429 'establish':177,581 'event':224,354 'except':659 'execut':469 'exist':172,248 'experi':101,534,662 'expert':50 'extens':590,592 'extern':616 'fast':41,97,461 'faster':299 'fetch':136,214 'fid':463 'first':116,204,264,398,464,516,531,545 'flow':223 'focus':650 'form':230,358 'format':494 'framework':15,65,108,118 'frontend':27,74,93,576 'function':339 'git':569 'graphql':132,140,209,412,418,423,646 'handl':218,225,355,359,427,430 'headless':620,623 'high':7,55 'high-perform':6,54 'hint':506 'hyva':3 'hyva.io':631 'hyva.io/)':630 'hyvä':13,20,48,63,81,102,142,146,153,170,251,594,602,611,627,654 'hyvä-bas':80,653 'imag':490,493 'implement':88,211,226,261,295,303,390,422,438,575,622 'input':465 'instal':150 'integr':133,168,169,210,308,363,413,586,591,614 'interact':228 'interfac':111 'javascript':107,283,468,480,483 'largest':456 'layer':314 'layout':233,236,241,266,473,476 'lazi':301 'lcp':455 'legaci':604,607 'leverag':66,500 'librari':254,258 'lightweight':197 'load':302,305,462,497,509 'logic':558 'magento':2,9,46,58,138,173,311 'magento-hyva-specialist':1 'maintain':525,559,562,664 'manag':217,329,346,353 'master':29 'masteri':316 'metric':179 'mind':522 'minim':243,280,343,467,482 'mobil':263,530,533 'mobile-first':262,529 'mode':389 'modern':26,57,96,492,610 'modul':167,174,560,585,597,600 'modular':553 'monitor':181 'multipl':447 'oper':445,449 'optim':37,92,126,131,162,237,279,282,309,340,411,415,446,451,459,478,481,486,491,507 'organ':552,555 'overhead':244,344 'page':240 'paint':458 'parti':589 'pattern':215,323,350,387,395,425,612,625 'payload':292,484 'peer':582 'perform':8,36,56,94,175,178,276,410,450,523,527,536,660 'plugin':336 'postcss':122 'practic':511 'prevent':475 'principl':543 'priorit':532 'process':124,144,159,584 'progress':304,537,541 'purg':286 'queri':414,419 'rapid':120 'reactiv':106,196 'reader':273 'real':435,440 'real-tim':434,439 'refer':626 'remov':287 'render':300 'resourc':505,508 'respons':207,259,265,385,404,496 'reusabl':256,338,379,519 'review':580,583 'robust':428 'scalabl':320 'screen':272 'servic':617 'set':151,184 'setup':147 'shift':474,477 'skill' 'skill-magento-hyva-specialist' 'smaller':291 'source-maxnorm' 'specialist':4,49,51 'specif':375 'stack':104 'start':550 'state':216,220,328,352 'storefront':11,60,83,656 'strategi':306,421,499,578 'strict':526 'structur':554 'style':34,91,121,200,394,403 'submiss':231 'support':274,605 'synchron':443 'system':377 'tailwind':23,32,68,89,112,199,364,371,638 'tailwindcss.com':642 'tailwindcss.com/)':641 'techniqu':479 'technolog':75 'templat':234,245,249 'test':574,577 'theme':14,21,64,149,154,628 'third':588 'third-parti':587 'time':436,441,470 'tool':164,183 'topic-agent-skills' 'topic-magento2' 'transit':393 'tune':277 'unus':288 'updat':437 'usag':367 'use':12,16,61,78,568 'user':227,661 'util':115,189,203,397,405,407 'utility-first':114,202,396 'valid':361 'variant':409 'version':566 'vital':454 'wcag':269 'web':453 'webpack':127 'work':18,84 'workflow':166,513 'write':416","prices":[{"id":"bc0471f3-87a9-4258-acde-a23298e38c00","listingId":"5185a28e-ff47-4cd5-aaf7-b0ab11ffd82e","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"maxnorm","category":"magento2-agent-skills","install_from":"skills.sh"},"createdAt":"2026-05-07T20:41:36.852Z"}],"sources":[{"listingId":"5185a28e-ff47-4cd5-aaf7-b0ab11ffd82e","source":"github","sourceId":"maxnorm/magento2-agent-skills/magento-hyva-specialist","sourceUrl":"https://github.com/maxnorm/magento2-agent-skills/tree/main/skills/magento-hyva-specialist","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:28.661Z","lastSeenAt":"2026-05-18T19:08:49.277Z"},{"listingId":"5185a28e-ff47-4cd5-aaf7-b0ab11ffd82e","source":"skills_sh","sourceId":"maxnorm/magento2-agent-skills/magento-hyva-specialist","sourceUrl":"https://skills.sh/maxnorm/magento2-agent-skills/magento-hyva-specialist","isPrimary":true,"firstSeenAt":"2026-05-07T20:41:36.852Z","lastSeenAt":"2026-05-07T22:41:06.460Z"}],"details":{"listingId":"5185a28e-ff47-4cd5-aaf7-b0ab11ffd82e","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"maxnorm","slug":"magento-hyva-specialist","github":{"repo":"maxnorm/magento2-agent-skills","stars":9,"topics":["agent-skills","magento2"],"license":"mit","html_url":"https://github.com/maxnorm/magento2-agent-skills","pushed_at":"2026-01-24T16:45:35Z","description":"A collection of specialized agent skills for Magento 2 development, designed to provide domain expertise across all aspects of Magento/Adobe Commerce development workflows. ","skill_md_sha":"6f7e16b4af1b3b705a509a76b16fb18f222dee7c","skill_md_path":"skills/magento-hyva-specialist/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/maxnorm/magento2-agent-skills/tree/main/skills/magento-hyva-specialist"},"layout":"multi","source":"github","category":"magento2-agent-skills","frontmatter":{"name":"magento-hyva-specialist","description":"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."},"skills_sh_url":"https://skills.sh/maxnorm/magento2-agent-skills/magento-hyva-specialist"},"updatedAt":"2026-05-18T19:08:49.277Z"}}