skills.rest
michtio
michtioCOMMUNITY
Explore all skills by this author →
GitHub

craft-garnish

Provides a UI toolkit for building Craft CMS control panel interfaces.

66|6|Updated Apr 7, 2026
Search Tags:#javascript#widgets#garnish#craft cms#cp ui
One-click install
npx skills add https://github.com/michtio/craftcms-claude-skills --skill craft-garnish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: craft-garnish
Source: https://github.com/michtio/craftcms-claude-skills/tree/main/skills/craft-garnish
Command: npx skills add https://github.com/michtio/craftcms-claude-skills --skill craft-garnish

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Garnish provides a complete, standards-compliant JavaScript UI toolkit for Craft CMS' control panel, enabling CP widgets, modals, and drag interactions to work consistently across plugins.

Core Features & Use Cases

  • Garnish.Base class system with event handling and clean destruction.
  • UI widgets: Modal, HUD, DisclosureMenu, MenuBtn, CustomSelect, Select, etc.
  • Drag system: BaseDrag, DragSort, DragDrop, DragMove; accessible keyboard navigation.
  • Craft integration: GarnishAsset, Craft.* class pattern, webpack externals.

Quick Start

Install Garnish in your Craft CP project and begin prototyping CP UI components like modals, HUDs, and drag interactions.

Frequently Asked Questions about craft-garnish

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build custom modals and HUDs in a Craft CMS plugin?▼

Use the Garnish UI toolkit to build custom modals, HUDs, and menus in Craft CMS plugins. It provides a Garnish.Base class system with event handling, clean destruction, and proper asset loading for consistent control panel UI components.

What's the best way to add drag and drop interactions to Craft CMS control panel widgets?▼

The best way to add drag and drop to Craft CMS control panel widgets is the Garnish drag system. It includes BaseDrag, DragSort, DragDrop, and DragMove with accessible keyboard navigation for consistent CP interactions.

Can I use Garnish UI components without the Craft.* class pattern?▼

Garnish UI components integrate tightly with the Craft.* class pattern and GarnishAsset pipeline. The toolkit is designed specifically for Craft CMS control panel contexts, relying on webpack externals and proper asset loading for CP workflows.

Does Garnish support ARIA compliance and focus trapping for accessible Craft CMS modals?▼

Yes, Garnish supports ARIA compliance and focus trapping for accessible Craft CMS modals. The toolkit ensures proper UI layer management, focus trapping, and standards-compliant behavior across modals, HUDs, menus, and disclosure components.

Why do my Craft CMS plugin's custom select widgets break outside the control panel?▼

Garnish custom select widgets are built specifically for Craft CMS control panel contexts. Using them outside CP workflows breaks because the toolkit depends on GarnishAsset loading, Craft.* class patterns, and webpack externals tied to the control panel environment.

Related Skills

Explore More Software Engineering Skills→
michtiomichtio
66

ddev

Automate local DDEV environment setup and management for Craft CMS projects.

Community
Advanced
syncfusionsyncfusion
4

syncfusion-blazor-blockeditor

Configure the Syncfusion Blazor Block Editor for modular document construction.

Official
Advanced
pixbspixbs
1

payload

Guide Payload CMS development with TypeScript for collections, fields, and access control.

Community
Advanced
toly1994328toly1994328
12

widget-refactor

Guide Flutter widget refactoring with structured extraction and compile-time validation.

Community
Advanced