{"product_id":"master-craft-cms-ui-with-garnish-ai-agent-skill-guide","title":"Master Craft CMS UI with Garnish: AI Agent Skill Guide","description":"\u003ch3\u003eUnlock the Full Potential of Craft CMS with Garnish: AI Agent Skill Guide\u003c\/h3\u003e\n\n\u003cp\u003e\nEnhance your Craft CMS development experience with the \u003cstrong\u003eMaster Craft CMS UI with Garnish: AI Agent Skill Guide\u003c\/strong\u003e. Professionally designed for developers, this skill brings AI coding agents like Claude Code, Cursor, and Codex into the mix, allowing you to create robust and dynamic Craft CMS interfaces using Garnish, the in-built JavaScript UI toolkit.\n\u003c\/p\u003e\n\n\u003ch3\u003eWhat this skill does\u003c\/h3\u003e\n\u003cp\u003e\nThis AI agent skill offers comprehensive mastery over Garnish — Craft CMS's JavaScript library designed specifically for the control panel's UI. Learn to:\n\u003c\/p\u003e\n\u003cul\u003e\n  \u003cli\u003eUtilize the Garnish class system with \u003ccode\u003eGarnish.Base.extend\u003c\/code\u003e for object-oriented JavaScript.\u003c\/li\u003e\n  \u003cli\u003eImplement UI widgets including \u003ccode\u003eModal\u003c\/code\u003e, \u003ccode\u003eHUD\u003c\/code\u003e, \u003ccode\u003eDisclosureMenu\u003c\/code\u003e, and more within your Craft CMS environment.\u003c\/li\u003e\n  \u003cli\u003eHarness drag functionalities using \u003ccode\u003eBaseDrag\u003c\/code\u003e, \u003ccode\u003eDragSort\u003c\/code\u003e, \u003ccode\u003eDragDrop\u003c\/code\u003e, and \u003ccode\u003eDragMove\u003c\/code\u003e.\u003c\/li\u003e\n  \u003cli\u003eLeverage form widgets for improved user interaction, employing tools like \u003ccode\u003eNiceText\u003c\/code\u003e and \u003ccode\u003eCheckboxSelect\u003c\/code\u003e.\u003c\/li\u003e\n  \u003cli\u003eIncorporate utilities such as key constants and ARIA helpers for enhanced accessibility features.\u003c\/li\u003e\n  \u003cli\u003eIntegrate with Craft using \u003ccode\u003eGarnishAsset\u003c\/code\u003e and \u003ccode\u003eCpAsset\u003c\/code\u003e for seamless operation.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eUse cases\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003eDevelopers looking to streamline their Craft CMS UI with automated widget implementations.\u003c\/li\u003e\n  \u003cli\u003eTeams aiming to enhance their project's accessibility compliance through ARIA and keyboard navigation utilities.\u003c\/li\u003e\n  \u003cli\u003eIntegrated systems where modifying and enhancing drag-and-drop interactions within the Craft CMS control panel is crucial.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003ch3\u003eTechnical details\u003c\/h3\u003e\n\u003cul\u003e\n  \u003cli\u003eAgent skills supported: Claude Code, Cursor, Codex.\u003c\/li\u003e\n  \u003cli\u003eTools\/Integrations include: \u003ccode\u003egarnishjs\u003c\/code\u003e, \u003ccode\u003eGarnishAsset\u003c\/code\u003e, \u003ccode\u003eCpAsset\u003c\/code\u003e, \u003ccode\u003eCraft.CP\u003c\/code\u003e, and the Craft CMS integration.\u003c\/li\u003e\n  \u003cli\u003eTriggers on events like \u003ccode\u003eonSortChange\u003c\/code\u003e and \u003ccode\u003eonOptionSelect\u003c\/code\u003e for efficient event handling.\u003c\/li\u003e\n  \u003cli\u003eAccessibility support with utilities for focus management and keyboard navigation, such as \u003ccode\u003etrapFocusWithin\u003c\/code\u003e.\u003c\/li\u003e\n\u003c\/ul\u003e\n\n\u003cp\u003e\nRevolutionize the way you design and manage Craft CMS control panels with the perfect synergy of AI and Garnish. Optimize your development workflow today!\n\u003c\/p\u003e\n\u003c!-- mcpcart:static-blocks:start --\u003e\n\u003chr\u003e\n\u003ch3\u003eSource \u0026amp; Licence\u003c\/h3\u003e\n\u003cp\u003eThis package is built on open-source work published by \u003cstrong\u003emichtio\u003c\/strong\u003e (\u003ca href=\"https:\/\/github.com\/michtio\/craftcms-claude-skills\" rel=\"nofollow noopener\" target=\"_blank\"\u003emichtio\/craftcms-claude-skills\u003c\/a\u003e) and distributed under \u003cstrong\u003eMIT\u003c\/strong\u003e. The original licence text and copyright notice are included in your download.\u003c\/p\u003e\n\u003cp\u003ePersonal and commercial use, modification and redistribution are permitted, provided the original copyright and licence notice are retained.\u003c\/p\u003e\n\u003cp\u003eYour purchase covers curation, licence verification, packaging, documentation and instant delivery. It does not grant exclusive rights to the underlying open-source code, which remains available under its original licence.\u003c\/p\u003e\n\u003ch3\u003eDelivery \u0026amp; Support\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003cstrong\u003eDelivery:\u003c\/strong\u003e instant — a secure download link is emailed to you as soon as payment is confirmed.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eFormat:\u003c\/strong\u003e ZIP archive containing the skill files, documentation and the original licence.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eSupport:\u003c\/strong\u003e \u003ca href=\"mailto:support@mcpcart.com\"\u003esupport@mcpcart.com\u003c\/a\u003e — we aim to reply within 2 business days.\u003c\/li\u003e\n\u003cli\u003e\n\u003cstrong\u003eUpdates:\u003c\/strong\u003e updates are included only where stated on this page.\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003ch3\u003eRefunds\u003c\/h3\u003e\n\u003cp\u003eThis is a digital product delivered immediately after purchase. By completing your order you request immediate delivery and acknowledge that, once the download has been accessed, the statutory right to cancel no longer applies to the extent permitted by law. Refund requests are handled in accordance with our published Refund Policy.\u003c\/p\u003e\n\u003cp style=\"font-size:0.85em;color:#666;\"\u003eClaude, Codex, Gemini and Cursor are trademarks of their respective owners. MCP Cart is an independent marketplace and is not affiliated with, endorsed by, or sponsored by any of them. Compatibility references describe interoperability only.\u003c\/p\u003e\n\u003c!-- mcpcart:static-blocks:end --\u003e","brand":"MCP Cart","offers":[{"title":"Default Title","offer_id":52718325334327,"sku":"MCP-MICHTIO-CRAFTCMS-CLAUDE-SKILLS-CRAFT-GARNISH","price":30.99,"currency_code":"GBP","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0981\/3950\/4951\/files\/michtio-craftcms-claude-skills-craft-garnish.png?v=1784894814","url":"https:\/\/mcpcart.com\/products\/master-craft-cms-ui-with-garnish-ai-agent-skill-guide","provider":"SPF PRO","version":"1.0","type":"link"}