{"id":"f8181741-d9e3-4060-96f4-c5c0c8e60e25","shortId":"W7TQ9N","kind":"skill","title":"magento-alpine-specialist","tagline":"Develops reactive components using Alpine.js for modern Magento 2 frontends. Use when working with Alpine.js, Hyvä themes, or building reactive UI components. Masters reactive programming, declarative syntax, and lightweight JavaScript solutions.","description":"# Magento 2 Alpine.js Specialist\n\nExpert specialist in creating modern, reactive user interfaces for Magento 2 applications using Alpine.js's declarative approach.\n\n## When to Use\n\n- Building Alpine.js components\n- Working with Hyvä themes\n- Creating reactive UI components\n- Implementing lightweight JavaScript solutions\n- Building interactive frontend features\n\n## Alpine.js Mastery\n\n### Reactive Programming\n- **Reactive Data**: Expert in Alpine.js reactive data and state management\n- **Declarative Syntax**: Master Alpine.js directives and declarative programming\n- **Component Architecture**: Build modular, reusable Alpine.js components\n- **Data Binding**: Two-way data binding and reactive updates\n- **Event Handling**: Advanced event handling and user interaction patterns\n\n### Component Development\n```html\n<div x-data=\"{ open: false, items: [] }\">\n    <button @click=\"open = !open\">Toggle</button>\n    <div x-show=\"open\" x-transition>\n        Content here\n    </div>\n</div>\n```\n\n### Magento Integration\n- **Theme Integration**: Seamless integration with Magento themes\n- **Hyvä Compatibility**: Expert integration with Hyvä theme framework\n- **API Integration**: Connection with Magento REST and GraphQL APIs\n- **Cache Compatibility**: Cache-friendly Alpine.js implementations\n- **SEO Optimization**: SEO-friendly reactive component development\n\n## Best Practices\n\n- **Lightweight**: Keep components lightweight and performant\n- **Reactive State**: Use reactive state management effectively\n- **Event Handling**: Implement proper event handling\n- **Performance**: Optimize for performance\n- **Accessibility**: Ensure accessibility compliance\n\n## References\n\n- [Alpine.js Documentation](https://alpinejs.dev/)\n- [Hyvä Theme](https://hyva.io/)\n\nFocus on creating lightweight, reactive components that enhance user experience.","tags":["magento","alpine","specialist","magento2","agent","skills","maxnorm","agent-skills"],"capabilities":["skill","source-maxnorm","skill-magento-alpine-specialist","topic-agent-skills","topic-magento2"],"categories":["magento2-agent-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/maxnorm/magento2-agent-skills/magento-alpine-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 (1,834 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:48.176Z","embedding":null,"createdAt":"2026-05-07T20:44:42.408Z","updatedAt":"2026-05-18T19:08:48.176Z","lastSeenAt":"2026-05-18T19:08:48.176Z","tsv":"'/)':212,217 '2':13,37,50 'access':203,205 'advanc':120 'alpin':3 'alpine.js':9,19,38,53,61,79,87,96,106,168,208 'alpinejs.dev':211 'alpinejs.dev/)':210 'api':154,162 'applic':51 'approach':56 'architectur':102 'best':178 'bind':109,114 'build':23,60,75,103 'button':130 'cach':163,166 'cache-friend':165 'click':131 'compat':147,164 'complianc':206 'compon':7,26,62,70,101,107,127,176,182,223 'connect':156 'content':135 'creat':43,67,220 'data':84,89,108,113 'declar':30,55,93,99 'develop':5,128,177 'direct':97 'document':209 'effect':192 'enhanc':225 'ensur':204 'event':118,121,193,197 'experi':227 'expert':40,85,148 'featur':78 'focus':218 'framework':153 'friend':167,174 'frontend':14,77 'graphql':161 'handl':119,122,194,198 'html':129 'hyva.io':216 'hyva.io/)':215 'hyvä':20,65,146,151,213 'implement':71,169,195 'integr':138,140,142,149,155 'interact':76,125 'interfac':47 'javascript':34,73 'keep':181 'lightweight':33,72,180,183,221 'magento':2,12,36,49,137,144,158 'magento-alpine-specialist':1 'manag':92,191 'master':27,95 'masteri':80 'modern':11,44 'modular':104 'open':132,133 'optim':171,200 'pattern':126 'perform':185,199,202 'practic':179 'program':29,82,100 'proper':196 'reactiv':6,24,28,45,68,81,83,88,116,175,186,189,222 'refer':207 'rest':159 'reusabl':105 'seamless':141 'seo':170,173 'seo-friend':172 'skill' 'skill-magento-alpine-specialist' 'solut':35,74 'source-maxnorm' 'specialist':4,39,41 'state':91,187,190 'syntax':31,94 'theme':21,66,139,145,152,214 'toggl':134 'topic-agent-skills' 'topic-magento2' 'two':111 'two-way':110 'ui':25,69 'updat':117 'use':8,15,52,59,188 'user':46,124,226 'way':112 'work':17,63","prices":[{"id":"d5e77d51-ee44-4904-bd92-f6f42dd5c536","listingId":"f8181741-d9e3-4060-96f4-c5c0c8e60e25","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:44:42.408Z"}],"sources":[{"listingId":"f8181741-d9e3-4060-96f4-c5c0c8e60e25","source":"github","sourceId":"maxnorm/magento2-agent-skills/magento-alpine-specialist","sourceUrl":"https://github.com/maxnorm/magento2-agent-skills/tree/main/skills/magento-alpine-specialist","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:27.519Z","lastSeenAt":"2026-05-18T19:08:48.176Z"},{"listingId":"f8181741-d9e3-4060-96f4-c5c0c8e60e25","source":"skills_sh","sourceId":"maxnorm/magento2-agent-skills/magento-alpine-specialist","sourceUrl":"https://skills.sh/maxnorm/magento2-agent-skills/magento-alpine-specialist","isPrimary":true,"firstSeenAt":"2026-05-07T20:44:42.408Z","lastSeenAt":"2026-05-07T22:42:56.272Z"}],"details":{"listingId":"f8181741-d9e3-4060-96f4-c5c0c8e60e25","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"maxnorm","slug":"magento-alpine-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":"cb693858c2152958840f6fdbfd19cd784fbf0b07","skill_md_path":"skills/magento-alpine-specialist/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/maxnorm/magento2-agent-skills/tree/main/skills/magento-alpine-specialist"},"layout":"multi","source":"github","category":"magento2-agent-skills","frontmatter":{"name":"magento-alpine-specialist","description":"Develops reactive components using Alpine.js for modern Magento 2 frontends. Use when working with Alpine.js, Hyvä themes, or building reactive UI components. Masters reactive programming, declarative syntax, and lightweight JavaScript solutions."},"skills_sh_url":"https://skills.sh/maxnorm/magento2-agent-skills/magento-alpine-specialist"},"updatedAt":"2026-05-18T19:08:48.176Z"}}