ima-claude 2.18.0 → 2.25.0

package/plugins/ima-claude/skills/js-fp-wordpress/SKILL.md

@@ -5,175 +5,96 @@ description: "FP patterns for JavaScript in WordPress/Bootstrap context - ecosys
 
 # JavaScript FP - WordPress/Bootstrap
 
-Functional programming patterns for JavaScript in WordPress environments where jQuery is already loaded and Bootstrap is the UI framework.
+**"In WordPress, jQuery IS native. Use what's simple and matches the ecosystem."**
 
-## When to Use This Skill
+jQuery is always available (WordPress core dependency, 0 additional bytes). The js-fp "Native patterns > FP utilities" rule targets custom `pipe()`/`curry()` abstractions — not established ecosystem libraries like jQuery. Builds on `../js-fp/SKILL.md`.
 
-- Building WordPress plugin/theme JavaScript
-- Need guidance on jQuery vs Vanilla JS decisions
-- Implementing pure business logic in browser JavaScript
-- Working with Gravity Forms, ACF, or other jQuery-dependent plugins
-- Creating form handlers, AJAX operations, or DOM interactions
+## Decision Matrix
 
-## Core Philosophy
+| Context | Recommendation |
+|---------|---------------|
+| New isolated component | Vanilla JS |
+| AJAX operations | jQuery `$.ajax` |
+| Integrating with WP plugins | jQuery |
+| Animation | CSS transitions |
+| Pure business logic | Vanilla JS (no DOM, fully testable) |
+| DOM event delegation | Either |
 
-**"Use what's simple and native to the ecosystem. In WordPress, jQuery IS native."**
+## jQuery Is Already Loaded — Arguments That Don't Apply
 
-**Key Insight**: The js-fp principle "Native patterns > FP utilities" targets AI-generated abstractions like custom `pipe()` and `curry()` functions - it does NOT mean "avoid established ecosystem libraries like jQuery."
-
-**Foundation**: This skill builds on `js-fp` core principles. Reference `../js-fp/SKILL.md` for purity, composition, dependency injection, and testing patterns.
-
-## TL;DR Decision Matrix
-
-| Context | Recommendation | Rationale |
-|---------|---------------|-----------|
-| **New isolated component** | Vanilla JS | No jQuery event coupling needed |
-| **AJAX operations** | jQuery `$.ajax` | Cleaner than `fetch` + error handling |
-| **DOM event delegation** | Either | Both work well |
-| **Integrating with WP plugins** | jQuery | Match ecosystem patterns |
-| **Animation** | CSS transitions | Neither jQuery nor vanilla JS |
-| **Pure business logic** | Vanilla JS | No DOM, fully testable |
-
-## Critical Context: WordPress Reality Check
-
-**jQuery IS guaranteed available** in WordPress because:
-1. WordPress core depends on jQuery
-2. Bootstrap 5 JavaScript works with or without jQuery
-3. Gravity Forms, ACF, and most plugins use jQuery
-4. The overhead argument is **irrelevant** - it's already loaded (0 additional bytes)
-
-### Arguments That DON'T Apply Here
-
-| Common Argument | Why It Doesn't Apply |
-|-----------------|---------------------|
-| "jQuery adds bundle size" | Already loaded - 0 additional bytes |
+| Argument | Why It Fails Here |
+|----------|------------------|
+| "jQuery adds bundle size" | Already loaded — 0 additional bytes |
 | "jQuery is a dependency" | Already a core WordPress dependency |
-| "Modern browsers don't need jQuery" | True, but jQuery is still there |
 | "jQuery is slower" | Negligible for DOM operations |
 
 ## Practical Guidelines
 
-### 1. Don't Rewrite Working jQuery Code
+### Don't Rewrite Working jQuery
 
-**YAGNI applies**. If existing code works, leave it:
+YAGNI applies. Working jQuery code stays:
 
 ```javascript
-// KEEP: Working jQuery AJAX handler
 (function($) {
     'use strict';
 
     $('.ima-form').on('submit', function(e) {
         e.preventDefault();
-        var $form = $(this);
-
         $.ajax({
             url: imaAjax.url,
             type: 'POST',
-            data: $form.serialize(),
+            data: $(this).serialize(),
             success: function(response) {
-                $form.find('.ima-response').html(response.message);
+                $(this).find('.ima-response').html(response.message);
             }
         });
     });
 
 })(jQuery);
-
-// DON'T: Rewrite to vanilla "just because" - No benefit, adds risk
 ```
 
-### 2. New Code: Choose Based on Context
+### Choose Based on Context
 
 ```javascript
-// jQuery: When integrating with WordPress plugins
+// jQuery: WordPress plugin integration (must use jQuery for GF events)
 (function($) {
     'use strict';
-
-    // Gravity Forms event - MUST use jQuery
     $(document).on('gform_post_render', function(event, formId) {
         initImaFields($('#gform_' + formId));
     });
-
 })(jQuery);
 
-// Vanilla JS: Isolated component with no WP plugin interaction
+// Vanilla JS: Isolated component, no WP plugin interaction
 (function() {
     'use strict';
-
-    class RepeaterController {
-        constructor(element) {
-            this.container = element;
-            this.template = element.querySelector('[data-repeater-template]');
-            this.init();
-        }
-
-        init() {
-            this.container.addEventListener('click', this.handleClick.bind(this));
-        }
-
-        // Pure method - no DOM side effects
-        generateRowId() {
-            return 'row_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
-        }
-    }
-
     document.querySelectorAll('[data-repeater-container]').forEach(function(el) {
         new RepeaterController(el);
     });
-
 })();
 ```
 
-### 3. Prefer Consistency Within Files
-
-```javascript
-// AVOID: Mixing jQuery and vanilla in same file
-(function($) {
-    document.querySelectorAll('.foo').forEach(function(el) {  // Vanilla
-        $(el).on('click', handler);  // jQuery - inconsistent!
-    });
-})(jQuery);
-
-// GOOD: Consistent jQuery throughout
-(function($) {
-    'use strict';
-    $('.foo').each(function() {
-        $(this).on('click', handler);
-    });
-})(jQuery);
+### Consistent Within Files
 
-// GOOD: Consistent vanilla throughout
-(function() {
-    'use strict';
-    document.querySelectorAll('.foo').forEach(function(el) {
-        el.addEventListener('click', handler);
-    });
-})();
-```
+Pick one approach per file. No mixing jQuery and vanilla selectors in the same scope.
 
 ## Pure Business Logic Pattern
 
-**Rule**: Extract pure JavaScript functions from DOM-dependent code.
+Extract pure functions from DOM-dependent code.
 
 ```javascript
 (function($) {
     'use strict';
 
-    // Pure business logic (testable without DOM)
+    // PURE: Testable without DOM
     function calculatePricing(quantity, unitPrice, discountPercent) {
         var subtotal = Math.max(0, quantity) * Math.max(0, unitPrice);
-        var discountAmount = subtotal * (Math.min(100, Math.max(0, discountPercent)) / 100);
-        return {
-            subtotal: subtotal,
-            discountAmount: discountAmount,
-            total: subtotal - discountAmount
-        };
+        var discount = subtotal * (Math.min(100, Math.max(0, discountPercent)) / 100);
+        return { subtotal, discountAmount: discount, total: subtotal - discount };
     }
 
-    function formatCurrency(amount) {
-        return '$' + amount.toFixed(2);
-    }
+    function formatCurrency(amount) { return '$' + amount.toFixed(2); }
 
-    // DOM wrapper (side effects isolated here)
+    // IMPURE: DOM wrapper — side effects isolated here
     function PriceCalculator($container) {
         this.$container = $container;
         this.$container.on('change', 'input', this.update.bind(this));
@@ -185,117 +106,51 @@ Functional programming patterns for JavaScript in WordPress environments where j
             unitPrice: parseFloat(this.$container.find('#unit-price').val()) || 0,
             discount: parseFloat(this.$container.find('#discount').val()) || 0
         };
-        var pricing = calculatePricing(values.quantity, values.unitPrice, values.discount);
-        this.$container.find('#total').text(formatCurrency(pricing.total));
+        this.$container.find('#total').text(formatCurrency(
+            calculatePricing(values.quantity, values.unitPrice, values.discount).total
+        ));
     };
 
-    // Export for testing
     if (typeof module !== 'undefined' && module.exports) {
-        module.exports = { calculatePricing: calculatePricing, formatCurrency: formatCurrency };
+        module.exports = { calculatePricing, formatCurrency };
     }
 
 })(jQuery);
 ```
 
-## Anti-Patterns (AVOID)
-
-### Rewriting Working jQuery for No Benefit
-
-```javascript
-// DON'T: Same functionality, more code, no benefit
-// Before (working): $('.btn').on('click', handler);
-// After (unnecessary):
-document.querySelectorAll('.btn').forEach(function(btn) {
-    btn.addEventListener('click', handler);
-});
-```
+## Anti-Patterns
 
-### Fighting the WordPress Ecosystem
+- Rewriting working jQuery to vanilla for no benefit
+- Using `document.addEventListener('gform_post_render', ...)` — GF fires on jQuery only
+- Custom `pipe`/`compose` utilities — use direct function calls instead
 
-```javascript
-// DON'T: Ignore GF jQuery events (this won't work!)
-document.addEventListener('gform_post_render', function() {});
+## File Organization
 
-// DO: Use jQuery for GF integration
-$(document).on('gform_post_render', function(event, formId) {});
 ```
-
-### Custom FP Utilities
-
-```javascript
-// NEVER: Create custom FP utilities
-const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x)
-
-// INSTEAD: Direct function calls
-function processFormData(data) {
-    var sanitized = sanitizeData(data);
-    var validated = validateData(sanitized);
-    return formatData(validated);
-}
+plugin-name/assets/js/
+├── plugin-base.js         # jQuery — AJAX, GF integration
+├── plugin-admin.js        # jQuery — Admin UI
+├── plugin-repeater.js     # Vanilla — Isolated component
+└── pure/
+    ├── formatting.js      # Pure functions (testable)
+    └── calculations.js    # Pure functions (testable)
 ```
 
 ## Quality Gates
 
-Before implementing JavaScript in WordPress:
-
-1. **Ecosystem check**: Does this need to interact with jQuery-based plugins (GF, ACF)?
-2. **Existing code**: Is there working code that just needs enhancement?
-3. **Pure logic**: Is business logic separated from DOM operations?
-4. **Consistency**: Is the file using one approach consistently?
-5. **Testability**: Can pure functions be tested without DOM?
-6. **YAGNI**: Are we adding complexity without clear benefit?
+1. Needs jQuery-plugin interaction (GF, ACF)? → Use jQuery
+2. Existing working code? → Enhance, don't rewrite
+3. Business logic separated from DOM operations?
+4. File uses one approach consistently?
+5. Pure functions testable without DOM?
+6. Adding complexity without clear benefit? → YAGNI
 
 ## Reference Files
 
-Load these as needed for detailed patterns:
-
-### AJAX Patterns
-**File**: [references/ajax-patterns.md](references/ajax-patterns.md)
-**When**: Need AJAX implementation patterns
-**Contains**: jQuery $.ajax, vanilla fetch, error handling, retry patterns
-
-### Event Patterns
-**File**: [references/event-patterns.md](references/event-patterns.md)
-**When**: Need event delegation or DOMContentLoaded patterns
-**Contains**: jQuery delegation, vanilla delegation, document ready patterns
-
-### WordPress Integration
-**File**: [references/wp-integration.md](references/wp-integration.md)
-**When**: Integrating with Gravity Forms, ACF, or WordPress admin
-**Contains**: GF hooks, ACF hooks, admin JS, pure logic extraction, testing
-
-### PHP Integration
-**File**: `../php-fp-wordpress/SKILL.md`
-**When**: Need server-side integration patterns
-**Contains**: WordPress AJAX handlers, security practices, PHP/JS coordination
-
-### Core FP Principles
-**File**: `../js-fp/SKILL.md`
-**When**: Need foundational FP patterns
-**Contains**: Purity, composition, dependency injection, immutability, testing
-
-## File Organization
-
-```
-plugin-name/
-└── assets/
-    └── js/
-        ├── plugin-base.js         # jQuery - AJAX, GF integration
-        ├── plugin-admin.js        # jQuery - Admin UI interactions
-        ├── plugin-repeater.js     # Vanilla - Isolated component
-        └── pure/
-            ├── formatting.js      # Pure functions (testable)
-            └── calculations.js    # Pure functions (testable)
-```
-
-## Success Metrics
-
-- **Ecosystem Fit**: JavaScript integrates smoothly with WordPress/plugins
-- **Consistency**: Files use one approach throughout
-- **Testability**: Pure business logic has unit tests
-- **Maintainability**: Clear separation of concerns
-- **Pragmatism**: Working code not rewritten without benefit
-
-## Philosophy
-
-*"In WordPress, jQuery IS native. Use what's simple and matches the ecosystem. Separate pure business logic for testability, but don't fight the platform. Working code > ideological purity."*
+| File | Load When |
+|------|-----------|
+| `references/ajax-patterns.md` | jQuery $.ajax, vanilla fetch, error handling, retry |
+| `references/event-patterns.md` | Event delegation, DOMContentLoaded, document ready |
+| `references/wp-integration.md` | GF hooks, ACF hooks, admin JS, pure logic extraction |
+| `../php-fp-wordpress/SKILL.md` | Server-side: AJAX handlers, security, PHP/JS coordination |
+| `../js-fp/SKILL.md` | Core FP: purity, composition, DI, testing |

package/plugins/ima-claude/skills/livecanvas/SKILL.md

@@ -12,10 +12,9 @@ description: >-
 
 # LiveCanvas
 
-Visual page builder for WordPress. Pure HTML/Bootstrap — no proprietary markup, no vendor lock-in.
-Content lives in the WordPress database (`wp_posts`), not PHP template files.
+Visual page builder for WordPress. Pure HTML/Bootstrap — no proprietary markup. Content lives in `wp_posts`, not PHP template files.
 
-**Cross-reference**: Use `ima-bootstrap` skill for Bootstrap 5.3 utilities, grid, components, and IMA brand integration. LiveCanvas uses your theme's Bootstrap — everything in `ima-bootstrap` applies directly.
+Use `ima-bootstrap` skill for Bootstrap 5.3 utilities, grid, and IMA brand integration — applies directly here.
 
 ## Mental Model
 
@@ -23,22 +22,20 @@ Content lives in the WordPress database (`wp_posts`), not PHP template files.
 LiveCanvas Page = HTML + Bootstrap classes + <tangible> blocks for dynamic data
 ```
 
-- **Static content**: Write Bootstrap HTML directly (cards, grids, heroes, etc.)
-- **Dynamic content**: Wrap Loops & Logic tags in `<tangible>` blocks
-- **Logic/conditions**: L&L replaces PHP — think Handlebars/Twig, not `<?php ?>`
-- **No custom CSS framework**: LiveCanvas adds zero CSS. Your theme's Bootstrap is the only framework.
+- Static content: Bootstrap HTML directly
+- Dynamic content: Loops & Logic tags in `<tangible>` blocks
+- Logic/conditions: L&L replaces PHP (think Handlebars/Twig)
+- No custom CSS framework: theme's Bootstrap is the only framework
 
 ## Page Structure
 
-Every LiveCanvas page follows this hierarchy:
-
 ```html
 <main>
   <section>                          <!-- Full-width, not nestable -->
-    <div class="container">          <!-- or container-fluid -->
+    <div class="container">
       <div class="row">
         <div class="col-lg-6">
-          <div class="lc-block">     <!-- Smallest editable unit -->
+          <div class="lc-block">
             <h2 editable="inline">Heading</h2>
           </div>
         </div>
@@ -53,15 +50,13 @@ Every LiveCanvas page follows this hierarchy:
 </main>
 ```
 
-**Rules**:
-- `<section>` elements are always direct children of `<main>`, edge-to-edge
-- Standard Bootstrap grid inside: `.container` > `.row` > `.col-*`
-- `lc-block` divs are the smallest building blocks
-- `editable="inline"` for single-line text, `editable="rich"` for rich text
+- `<section>` always direct children of `<main>`, edge-to-edge
+- Standard grid: `.container` > `.row` > `.col-*`
+- `editable="inline"` for single-line, `editable="rich"` for rich text
 
 ## Dynamic Content with Loops & Logic
 
-Wrap L&L markup in `<tangible>` tags. Add `class="live-refresh"` for real-time preview in the editor.
+Wrap L&L markup in `<tangible>`. Add `class="live-refresh"` for editor preview.
 
 ```html
 <tangible class="live-refresh">
@@ -82,7 +77,7 @@ Wrap L&L markup in `<tangible>` tags. Add `class="live-refresh"` for real-time p
 | Tag | Purpose | Example |
 |-----|---------|---------|
 | `<Loop>` | Query & iterate | `<Loop type="post" count="5">` |
-| `<Field>` | Output a value | `<Field title />` |
+| `<Field>` | Output value | `<Field title />` |
 | `<If>` / `<Else />` | Conditions | `<If field="image" exists>` |
 | `<Set>` / `<Get>` | Variables | `<Set name="total">0</Set>` |
 | `<Date>` | Date formatting | `<Date format="F j, Y" />` |
@@ -90,7 +85,7 @@ Wrap L&L markup in `<tangible>` tags. Add `class="live-refresh"` for real-time p
 | `<Math>` | Arithmetic | `<Math>price * 1.1</Math>` |
 | `<Template>` | Reuse saved template | `<Template name="card" />` |
 
-**Tags inside attributes** — use `{}` instead of `<>`:
+Tags inside attributes — use `{}` instead of `<>`:
 ```html
 <a href="{Field url}"><Field title /></a>
 <img src="{Field image_url}" alt="{Field title}" />
@@ -163,15 +158,11 @@ Wrap L&L markup in `<tangible>` tags. Add `class="live-refresh"` for real-time p
 
 ## Reusable Sections
 
-Save any section to a library. Recall on other pages:
-```
-[lc_html_section id="123"]
-```
-Edits propagate everywhere the section is used.
+Save section to library. Recall elsewhere: `[lc_html_section id="123"]` — edits propagate everywhere.
 
 ## LiveCanvas Shortcodes (Legacy)
 
-Still supported alongside L&L. Use for simple field output without `<tangible>` wrapper:
+Prefer L&L for new work. Shortcodes maintained for backward compatibility.
 
 | Shortcode | Purpose |
 |-----------|---------|
@@ -186,13 +177,11 @@ Still supported alongside L&L. Use for simple field output without `<tangible>`
 | `[lc_if]` | Conditional |
 | `[lc_get_posts]` | Post query loop |
 
-**Prefer L&L for new work** — shortcodes are maintained for backward compatibility.
-
 ## When to Use What
 
 | Need | Use |
 |------|-----|
-| Static layout, typography, spacing | Bootstrap classes directly (see `ima-bootstrap`) |
+| Static layout, typography, spacing | Bootstrap classes (see `ima-bootstrap`) |
 | Dynamic post loops, conditions | L&L `<tangible>` blocks |
 | Simple single-field output | L&L `<Field>` or legacy shortcode |
 | ACF field display | L&L ACF tags |
@@ -202,8 +191,6 @@ Still supported alongside L&L. Use for simple field output without `<tangible>`
 
 ## Reference Files
 
-Load these as needed for deeper information:
-
-- **[Loops & Logic Reference](references/loops-and-logic.md)** — Complete L&L syntax: all tags, Loop query parameters, Field types, If conditions, ACF integration, variables, Date/Format/Math, List/Map, WooCommerce
-- **[LiveCanvas Features](references/livecanvas-features.md)** — Editor workflow, all shortcodes with parameters, WooCommerce shortcodes, Forms API, reusable sections, keyboard shortcuts, template assignment
+- **[Loops & Logic Reference](references/loops-and-logic.md)** — Complete L&L syntax: all tags, Loop query params, Field types, If conditions, ACF integration, variables, Date/Format/Math, List/Map, WooCommerce
+- **[LiveCanvas Features](references/livecanvas-features.md)** — Editor workflow, shortcodes with params, WooCommerce shortcodes, Forms API, reusable sections, keyboard shortcuts, template assignment
 - **[PicoStrap Integration](references/picostrap.md)** — Theme architecture, SCSS pipeline, NinjaBootstrap utilities, child theme setup, dark mode, customizer options