@rune-kit/rune 2.2.4 → 2.3.0

package/README.md

@@ -26,7 +26,7 @@ Mesh:      A ↔ B ↔ C             (B fails = A reaches C via D→E)
            D ↔ E ↔ F
 ```
 
-## What's New (v2.2.2)
+## What's New (v2.3.0)
 
 - **UI/UX Pro Max Integration** — 161 palettes, 84 styles, 73 font pairings, 161 reasoning rules from [UI/UX Pro Max](https://github.com/nextlevelbuilder/ui-ux-pro-max-skill) (MIT, 42.8k★) meshed into `design` skill + `@rune/ui` pack
 - **11 Core Skill Enrichments** — deviation rules, repair operators, evidence quality gate, decision classification, debug knowledge base, CSO discipline, YAGNI pushback, formal pause/resume

package/compiler/adapters/openclaw.js

@@ -100,6 +100,69 @@ export default {
     };
   },
 
+  /**
+   * Generate README.md for ClawHub listing page
+   *
+   * @param {object[]} skills - parsed skill objects
+   * @param {object} pluginJson - Rune's .claude-plugin/plugin.json
+   * @returns {string} markdown content
+   */
+  generateReadme(skills, pluginJson) {
+    const version = pluginJson.version || '0.0.0';
+    const l1 = skills.filter((s) => s.layer === 'L1').map((s) => s.name);
+    const l2 = skills.filter((s) => s.layer === 'L2').map((s) => s.name);
+    const l3 = skills.filter((s) => s.layer === 'L3').map((s) => s.name);
+
+    return `# Rune
+
+> Less skills. Deeper connections.
+
+**${skills.length}-skill mesh** for AI coding assistants — 5-layer architecture, 200+ connections, 14 extension packs.
+
+## Install
+
+\`\`\`
+clawhub install rune-kit
+\`\`\`
+
+Or via npm:
+
+\`\`\`
+npx @rune-kit/rune init
+\`\`\`
+
+## What is Rune?
+
+Rune is a **mesh** — skills call each other bidirectionally, forming resilient workflows. If one skill fails, the mesh routes around it.
+
+Use \`rune:cook\` for any code task, \`rune:team\` for parallel work, \`rune:launch\` for deploy, \`rune:rescue\` for legacy code.
+
+## Architecture
+
+| Layer | Role | Skills |
+|-------|------|--------|
+| L0 | Router | skill-router |
+| L1 | Orchestrators | ${l1.join(', ')} |
+| L2 | Workflow Hubs | ${l2.join(', ')} |
+| L3 | Utilities | ${l3.join(', ')} |
+| L4 | Extensions | 14 domain packs |
+
+## Extension Packs (L4)
+
+ui · backend · devops · mobile · security · trading · saas · ecommerce · ai-ml · gamedev · content · analytics · chrome-ext · zalo
+
+## Links
+
+- **Source**: [github.com/rune-kit/rune](https://github.com/rune-kit/rune)
+- **Docs**: [rune-kit.github.io/rune](https://rune-kit.github.io/rune)
+- **Guides**: [rune-kit.github.io/rune/guides](https://rune-kit.github.io/rune/guides)
+
+## License
+
+MIT — v${version}
+`;
+  },
+
   /**
    * Generate src/index.ts entry point with register(api) pattern
    *

package/compiler/emitter.js

@@ -256,6 +256,16 @@ export async function buildAll({ runeRoot, outputRoot, adapter, disabledSkills =
     const entryPoint = adapter.generateEntryPoint(parsedSkills, routerContent);
     await writeFile(path.join(srcDir, 'index.ts'), entryPoint, 'utf-8');
     stats.files.push('src/index.ts');
+
+    // Write README.md + SKILL.md for ClawHub listing page
+    if (adapter.generateReadme) {
+      const readme = adapter.generateReadme(parsedSkills, pluginJson);
+      await writeFile(path.join(openclawRoot, 'README.md'), readme, 'utf-8');
+      stats.files.push('README.md');
+      // SKILL.md required by clawhub publish
+      await writeFile(path.join(openclawRoot, 'SKILL.md'), readme, 'utf-8');
+      stats.files.push('SKILL.md');
+    }
   }
 
   return stats;

package/docs/EXTENSION-TEMPLATE.md

@@ -77,6 +77,9 @@ Brief description.
 Calls → [L3 utility]: [when/why]
 Called By ← [L2 hub]: [when/why]
 Called By ← [L1 orchestrator]: [when auto-detected]
+Feeds Into → [skill]: [what artifact] → [how consumed]
+Fed By ← [skill]: [what artifact] ← [what this pack needs]
+Feedback Loop ↻ [skill-a] ↔ [skill-b]: [what gets refined bidirectionally]
 ```
 
 ## Tech Stack Support (if applicable)
@@ -97,11 +100,26 @@ Called By ← [L1 orchestrator]: [when auto-detected]
 |---|---|---|
 | [domain-specific failure] | HIGH/MEDIUM | [how to avoid] |
 
+## Self-Validation
+
+Per-skill quality checks that run before reporting "done". Domain-specific — not covered by centralized completion-gate.
+
+```
+SELF-VALIDATION (per skill):
+skill-1:
+  - [ ] [domain-specific quality check]
+  - [ ] [output format compliance]
+skill-2:
+  - [ ] [domain-specific quality check]
+  - [ ] [completeness check]
+```
+
 ## Done When
 
 - [Verifiable condition 1]
 - [Verifiable condition 2]
 - [Structured output emitted]
+- Self-Validation: all per-skill checks passed
 
 ## Cost Profile
 

package/docs/SKILL-TEMPLATE.md

@@ -28,6 +28,22 @@ One paragraph describing the skill's role in the Rune ecosystem.
 
 - `skill-name` (L1|L2): condition when called
 
+## Data Flow
+
+Data relationships capture how skill outputs become inputs for other skills — without direct invocation. Unlike Calls/Called By (control flow), data flow tracks artifacts that persist and get consumed asynchronously.
+
+### Feeds Into →
+
+- `skill-name` (L2): [what artifact] → [how it's consumed]
+
+### Fed By ←
+
+- `skill-name` (L2): [what artifact] ← [what this skill needs from it]
+
+### Feedback Loops ↻
+
+- `skill-a` ↔ `skill-b`: [what gets refined bidirectionally and why]
+
 ## Workflow
 
 Step-by-step execution flow.
@@ -38,6 +54,17 @@ Step-by-step execution flow.
 Structured output that calling skills can consume.
 ```
 
+## Returns
+
+Explicit output contract so calling skills know exactly what to expect.
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `field_name` | type | What this field contains and when it's populated |
+| `status` | enum | e.g., `DONE` / `DONE_WITH_CONCERNS` / `BLOCKED` |
+
+Why: Without explicit return schemas, calling skills guess at output structure. This causes silent failures when output format changes. Every L1/L2 skill MUST have a Returns section.
+
 ## Constraints
 
 3-7 MUST/MUST NOT rules specific to this skill.
@@ -61,12 +88,31 @@ Known failure modes for this skill. Check these before declaring done.
 |---|---|---|
 | [what goes wrong] | CRITICAL/HIGH/MEDIUM/LOW | [how to avoid it] |
 
+## Self-Validation
+
+Domain-specific quality checks that run BEFORE this skill reports "done". These are embedded in the skill itself — not centralized like completion-gate. Each check is specific to what THIS skill produces.
+
+```
+SELF-VALIDATION (run before emitting output):
+- [ ] [check 1 — what to verify about this skill's output]
+- [ ] [check 2 — domain-specific quality criterion]
+- [ ] [check 3 — format/completeness check]
+IF ANY check fails → fix before reporting done. Do NOT defer to completion-gate.
+```
+
+Why: Completion-gate validates claims generically. Self-Validation catches domain-specific quality issues that only THIS skill understands (e.g., test skill checks assertion count, plan skill checks dependency ordering, review skill checks all files were read).
+
 ## Done When
 
 - [condition 1 — specific, verifiable]
 - [condition 2]
 - [condition 3 — structured report emitted]
+- Self-Validation checklist: all checks passed
 
 ## Cost Profile
 
 Estimated token usage per invocation.
+
+**Scope guardrail**: [Terminal boundary statement — what this skill must NOT do even if asked. Examples: "Do not write code — only produce plans.", "Do not modify files outside the target module.", "Do not execute fixes — only diagnose and hand off to fix."]
+
+Why: Without terminal guardrails, agents drift into adjacent responsibilities. A review skill starts fixing code, a plan skill starts implementing, a debug skill starts deploying. The guardrail is the last line in the skill file — a final reminder of scope boundaries before the agent acts.

package/docs/guides/index.html

@@ -379,18 +379,38 @@
       cursor: pointer; display: flex; align-items: center; justify-content: center;
       font-size: 16px; transition: all var(--transition); flex-shrink: 0;
     }
-    .theme-toggle:hover { border-color: var(--accent); color: var(--text-primary); }
+    .theme-toggle:hover, .lang-toggle:hover { border-color: var(--accent); color: var(--text-primary); }
+    .lang-toggle {
+      background: none; border: 1px solid var(--border); color: var(--text-secondary);
+      width: 34px; height: 34px; border-radius: var(--radius-sm);
+      cursor: pointer; display: flex; align-items: center; justify-content: center;
+      font-size: 16px; transition: all var(--transition); flex-shrink: 0;
+    }
+    /* Google Translate — hide ALL injected elements */
     .goog-te-banner-frame { display: none !important; }
-    body { top: 0 !important; }
-    .goog-te-gadget > span { display: none !important; }
-    .goog-te-gadget { font-size: 0; line-height: 0; }
-    .goog-te-combo {
-      background: var(--bg-card); color: var(--text-secondary);
-      border: 1px solid var(--border); border-radius: var(--radius-sm);
-      padding: 5px 8px; font-family: var(--font-body); font-size: 12px;
-      cursor: pointer; outline: none;
+    body { top: 0 !important; position: static !important; }
+    .skiptranslate { display: none !important; height: 0 !important; overflow: hidden !important; }
+    .goog-te-spinner-pos, .goog-te-balloon-frame, #goog-gt-tt, .goog-te-ftab-frame { display: none !important; }
+    .goog-text-highlight { background: none !important; box-shadow: none !important; }
+    font[style] > font { vertical-align: unset !important; }
+    #_gt_dummy { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; }
+    /* Language dropdown */
+    .lang-dropdown { position: relative; }
+    .lang-menu {
+      position: absolute; top: calc(100% + 6px); right: 0; z-index: 100;
+      background: var(--bg-card); border: 1px solid var(--border);
+      border-radius: var(--radius-md); padding: 4px; min-width: 140px;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.15);
+      display: flex; flex-direction: column;
+    }
+    .lang-menu[hidden] { display: none; }
+    .lang-menu button {
+      background: none; border: none; color: var(--text-secondary);
+      padding: 7px 12px; font-family: var(--font-body); font-size: 13px;
+      text-align: left; cursor: pointer; border-radius: var(--radius-sm);
+      transition: all var(--transition);
     }
-    .goog-te-combo:hover { border-color: var(--accent); }
+    .lang-menu button:hover { background: var(--bg-elevated); color: var(--text-primary); }
 
     /* ─── RESPONSIVE ─── */
     @media (max-width: 900px) {
@@ -431,9 +451,28 @@
         <a href="../">Home</a>
         <a href="./" class="active">Guides</a>
         <a href="../#pricing">Pricing</a>
-        <div class="nav-controls">
+        <div class="nav-controls notranslate" translate="no">
           <button class="theme-toggle" id="theme-toggle" aria-label="Toggle light/dark mode" title="Toggle theme">&#9790;</button>
-          <div id="google_translate_element"></div>
+          <div class="lang-dropdown" id="lang-dropdown">
+            <button class="lang-toggle" id="lang-btn" aria-label="Translate page" title="Translate page">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10A15.3 15.3 0 0 1 12 2z"/></svg>
+            </button>
+            <div class="lang-menu notranslate" id="lang-menu" translate="no" hidden>
+              <button data-lang="">English</button>
+              <button data-lang="vi">Tiếng Việt</button>
+              <button data-lang="ja">日本語</button>
+              <button data-lang="ko">한국어</button>
+              <button data-lang="zh-CN">中文(简)</button>
+              <button data-lang="zh-TW">中文(繁)</button>
+              <button data-lang="fr">Français</button>
+              <button data-lang="de">Deutsch</button>
+              <button data-lang="es">Español</button>
+              <button data-lang="pt">Português</button>
+              <button data-lang="ru">Русский</button>
+              <button data-lang="th">ไทย</button>
+              <button data-lang="id">Bahasa</button>
+            </div>
+          </div>
         </div>
         <a href="https://github.com/rune-kit/rune" class="btn btn-ghost btn-sm" target="_blank" rel="noopener">GitHub</a>
       </div>
@@ -1370,18 +1409,42 @@
     })();
   </script>
 
-  <!-- Google Translate (free, no API key) -->
+  <!-- Language Switcher (Google Translate via cookie) -->
   <script>
-    function googleTranslateElementInit() {
-      new google.translate.TranslateElement({
-        pageLanguage: 'en',
-        includedLanguages: 'vi,ja,ko,zh-CN,zh-TW,fr,de,es,pt,ru,ar,hi,th,id',
-        layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
-        autoDisplay: false
-      }, 'google_translate_element');
-    }
+    (() => {
+      const btn = document.getElementById('lang-btn');
+      const menu = document.getElementById('lang-menu');
+      const wrap = document.getElementById('lang-dropdown');
+
+      btn.addEventListener('click', () => {
+        const open = !menu.hidden;
+        menu.hidden = open;
+        btn.setAttribute('aria-expanded', String(!open));
+      });
+
+      document.addEventListener('click', (e) => {
+        if (!wrap.contains(e.target)) menu.hidden = true;
+      });
+
+      menu.addEventListener('click', (e) => {
+        const lang = e.target.dataset.lang;
+        if (lang === undefined) return;
+        menu.hidden = true;
+        if (!lang) {
+          document.cookie = 'googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/';
+          document.cookie = 'googtrans=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.' + location.hostname;
+          location.reload();
+          return;
+        }
+        document.cookie = 'googtrans=/en/' + lang + '; path=/';
+        document.cookie = 'googtrans=/en/' + lang + '; path=/; domain=.' + location.hostname;
+        location.reload();
+      });
+    })();
   </script>
   <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+  <script>function googleTranslateElementInit() { new google.translate.TranslateElement({ pageLanguage: 'en', autoDisplay: false }, '_gt_dummy'); }</script>
+  <div id="_gt_dummy" style="display:none"></div>
 
 </body>
 </html>