rebly-sections 1.3.1 → 1.4.0

package/assets/scripts/ux-bridge.py

@@ -0,0 +1,197 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""UX Bridge - Deep ui-ux-pro-max integration for design system, animations, UX guidelines."""
+
+import sys
+import importlib.util
+from pathlib import Path
+from typing import Optional
+
+_scripts_dir = str(Path(__file__).parent)
+if _scripts_dir not in sys.path:
+    sys.path.append(_scripts_dir)
+
+_UX_CANDIDATES = [
+    Path(__file__).parent.parent.parent.parent / ".claude" / "skills" / "ui-ux-pro-max" / "scripts",
+    Path.home() / ".claude" / "skills" / "ui-ux-pro-max" / "scripts",
+]
+
+# Static animation guidelines — always included, no external dependency
+_ANIMATION_GUIDELINES = (
+    "  <animation_guidelines>\n"
+    "    <timing>\n"
+    "      <rule>Micro-interactions: 50-100ms</rule>\n"
+    "      <rule>Standard hover: 150-300ms</rule>\n"
+    "      <rule>Complex animations: 400-600ms</rule>\n"
+    "    </timing>\n"
+    "    <performance>\n"
+    "      <rule>Always use transform/opacity (GPU-accelerated)</rule>\n"
+    "      <rule>Always include prefers-reduced-motion media query</rule>\n"
+    "      <rule>Use Intersection Observer for scroll-triggered animations</rule>\n"
+    "      <rule>No external JS dependencies — Shopify-native only</rule>\n"
+    "    </performance>\n"
+    "  </animation_guidelines>"
+)
+
+
+def _load_module(path: Path, name: str, extra_sys_path: Optional[str] = None) -> Optional[object]:
+    """Load a Python module from an absolute path via importlib."""
+    if not path.exists():
+        return None
+    try:
+        if extra_sys_path and extra_sys_path not in sys.path:
+            sys.path.insert(0, extra_sys_path)
+        spec = importlib.util.spec_from_file_location(name, path)
+        mod = importlib.util.module_from_spec(spec)
+        spec.loader.exec_module(mod)
+        return mod
+    except Exception:
+        return None
+
+
+def _find_ux_skill() -> Optional[Path]:
+    """Return first valid ui-ux-pro-max scripts directory found."""
+    for candidate in _UX_CANDIDATES:
+        if (candidate / "core.py").exists():
+            return candidate
+    return None
+
+
+def _build_design_system_xml(keywords: str, scripts_path: Path) -> str:
+    """Build <design_system_context> XML via design_system.py or fallback searches."""
+    try:
+        sp = str(scripts_path)
+        ds_mod = _load_module(scripts_path / "design_system.py", "ux_design_system", sp)
+        if ds_mod and hasattr(ds_mod, "DesignSystemGenerator"):
+            gen = ds_mod.DesignSystemGenerator()
+            ds = gen.generate(keywords)
+            style = ds.get("style", {})
+            colors = ds.get("colors", {})
+            typo = ds.get("typography", {})
+            effects = ds.get("key_effects", "")
+            lines = [
+                "<design_system_context>",
+                "**Recommended Design System:**",
+                "",
+                f"**Style:** {style.get('name', '')} — {style.get('keywords', '')}",
+                f"  Effects: {style.get('effects', effects)}",
+                f"  Performance: {style.get('performance', '')} | Accessibility: {style.get('accessibility', '')}",
+                "",
+                "**Colors:**",
+                f"  Primary: {colors.get('primary', '')} | Secondary: {colors.get('secondary', '')} | CTA: {colors.get('cta', '')}",
+                f"  Background: {colors.get('background', '')} | Text: {colors.get('text', '')}",
+                "",
+                f"**Typography:** {typo.get('heading', '')} / {typo.get('body', '')}",
+                f"  Mood: {typo.get('mood', '')}",
+                f"  Google Fonts: {typo.get('google_fonts_url', '')}",
+                "",
+                f"**Key Effects:** {effects}",
+                "</design_system_context>",
+            ]
+            return "\n".join(lines)
+
+        # Fallback: individual domain searches via ux core
+        ux_mod = _load_module(scripts_path / "core.py", "ux_core")
+        if not ux_mod or not hasattr(ux_mod, "search"):
+            return ""
+
+        style_r = ux_mod.search(keywords, domain="style", max_results=2)
+        color_r = ux_mod.search(keywords, domain="color", max_results=1)
+        typo_r = ux_mod.search(keywords, domain="typography", max_results=1)
+
+        style = (style_r.get("results") or [{}])[0]
+        color = (color_r.get("results") or [{}])[0]
+        typo = (typo_r.get("results") or [{}])[0]
+
+        lines = [
+            "<design_system_context>",
+            "**Recommended Design System:**",
+            "",
+            f"**Style:** {style.get('Style Category', '')} — {style.get('Keywords', '')}",
+            f"  Effects: {style.get('Effects & Animation', '')}",
+            f"  Performance: {style.get('Performance', '')} | Accessibility: {style.get('Accessibility', '')}",
+            "",
+            "**Colors:**",
+            f"  Primary: {color.get('Primary (Hex)', '')} | Secondary: {color.get('Secondary (Hex)', '')} | CTA: {color.get('CTA (Hex)', '')}",
+            f"  Background: {color.get('Background (Hex)', '')} | Text: {color.get('Text (Hex)', '')}",
+            "",
+            f"**Typography:** {typo.get('Heading Font', '')} / {typo.get('Body Font', '')}",
+            f"  Mood: {typo.get('Mood/Style Keywords', '')}",
+            f"  Google Fonts: {typo.get('Google Fonts URL', '')}",
+            "",
+            f"**Key Effects:** {style.get('Effects & Animation', '')}",
+            "</design_system_context>",
+        ]
+        return "\n".join(lines)
+    except Exception:
+        return ""
+
+
+def _build_animations_xml(keywords: str, scripts_path: Optional[Path]) -> str:
+    """Build <animation_framework_context> XML from animations.csv if available."""
+    try:
+        lines = ["<animation_framework_context>"]
+        try:  # local animations.csv via rebly core
+            from core import search as local_search, CSV_CONFIG as local_cfg
+            if "animations" in local_cfg:
+                anim_r = local_search(keywords, domain="animations", max_results=5)
+                patterns = anim_r.get("results", [])
+                if patterns:
+                    lines.append("  <animation_patterns>")
+                    for p in patterns:
+                        lines.append(f"    <pattern name=\"{p.get('name', '')}\"")
+                        lines.append(f"      css=\"{p.get('css_keyframes', '')}\"")
+                        lines.append(f"      easing=\"{p.get('easing', '')}\"")
+                        lines.append(f"      duration=\"{p.get('duration', '')}\"/>")
+                    lines.append("  </animation_patterns>")
+        except Exception:
+            pass
+
+        lines.append(_ANIMATION_GUIDELINES)
+        lines.append("</animation_framework_context>")
+        return "\n".join(lines)
+    except Exception:
+        return ""
+
+
+def _build_ux_guidelines_xml(keywords: str, scripts_path: Path) -> str:
+    """Build <ux_guidelines_context> XML from ux-guidelines.csv."""
+    try:
+        ux_mod = _load_module(scripts_path / "core.py", "ux_core")
+        if not ux_mod or not hasattr(ux_mod, "search"):
+            return ""
+
+        result = ux_mod.search(keywords, domain="ux", max_results=3)
+        guidelines = result.get("results", [])
+        if not guidelines:
+            return ""
+
+        lines = ["<ux_guidelines_context>"]
+        for g in guidelines:
+            lines.append(f"  <guideline category=\"{g.get('Category', '')}\" issue=\"{g.get('Issue', '')}\">")
+            do = g.get("Do", "")
+            dont = g.get("Don't", "")
+            if do:
+                lines.append(f"    <do>{do}</do>")
+            if dont:
+                lines.append(f"    <dont>{dont}</dont>")
+            lines.append("  </guideline>")
+        lines.append("</ux_guidelines_context>")
+        return "\n".join(lines)
+    except Exception:
+        return ""
+
+
+def build_ux_context(section_name: str, section_description: str) -> dict:
+    """Query ui-ux-pro-max skill; return dict with design_system, animations, ux_guidelines XML strings."""
+    keywords = f"{section_name} {section_description}".strip()
+    scripts_path = _find_ux_skill()
+    design_system, ux_guidelines = "", ""
+    if scripts_path:
+        design_system = _build_design_system_xml(keywords, scripts_path)
+        ux_guidelines = _build_ux_guidelines_xml(keywords, scripts_path)
+    return {
+        "design_system": design_system,
+        "animations": _build_animations_xml(keywords, scripts_path),
+        "ux_guidelines": ux_guidelines,
+    }

package/assets/templates/generation-prompt.md

@@ -34,7 +34,11 @@ You are an expert Shopify OS2.0 theme developer. Generate production-ready secti
 {{ theme_dna_context }}
 </theme_dna>
 
-{{ ui_ux_recommendations }}
+{{ design_system_context }}
+
+{{ animation_framework_context }}
+
+{{ ux_guidelines_context }}
 
 <task>
 <name>{{ name }}</name>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rebly-sections",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Shopify section AI coding skill installer for Claude Code and Antigravity Kit",
   "author": "Rebly Sections",
   "homepage": "https://github.com/rebly-sections/sections-ai#readme",