vibes-plug 2.14.1 → 3.9.0

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "vibes-plug",
-  "version": "2.14.1",
-  "description": "Universal AI plugin with 125 specialized skills for Antigravity, Claude, and Cursor. Updated for the modern 2026 tech stack (React 19, Tailwind v4, Bun, Hono, Supabase Auth v3). Designed to support software development, UI/UX design, SEO optimization, and SaaS business strategies",
+  "version": "3.9.0",
+  "description": "Universal AI plugin with 131 specialized skills for Antigravity, Claude, and Cursor. Updated for the modern 2026 tech stack (React 19, Tailwind v4, Bun, Hono, AI Safety, CUA). Designed to support software development, UI/UX design, SEO optimization, and SaaS business strategies",
   "main": "index.js",
   "bin": {
-    "vibes-plug": "./scripts/install.js"
+    "vibes-plug": "scripts/install.js",
+    "vibes": "bin/vibes.mjs"
   },
   "files": [
     "index.js",
@@ -27,10 +28,15 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "generate:gif": "python scripts/generate_swarm_gif.py",
+    "update-skills": "node scripts/update_skills.mjs",
+    "audit": "node scripts/check-anti-slop.mjs",
     "install-all": "node scripts/install.js --all",
     "install-claude": "node scripts/install.js --claude",
     "install-cursor": "node scripts/install.js --cursor"
   },
+  "dependencies": {
+    "@inquirer/prompts": "^7.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/roedyrustam/vibes-plug.git"
@@ -59,3 +65,5 @@
   },
   "homepage": "https://github.com/roedyrustam/vibes-plug#readme"
 }
+
+

package/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "vibes-plug",
-  "version": "2.14.0",
-  "description": "Universal AI plugin with 125 specialized skills for Antigravity, Claude, and Cursor.",
+  "version": "3.9.0",
+  "description": "Universal AI plugin with 131 specialized skills for Antigravity, Claude, and Cursor.",
   "author": "Roedy Rustam",
   "license": "MIT",
   "repository": "https://github.com/roedyrustam/vibes-plug.git",
@@ -22,4 +22,5 @@
       "skillsDir": "skills/"
     }
   }
-}
+}
+

package/scripts/check-anti-slop.mjs

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+/**
+ * scripts/check-anti-slop.mjs
+ * Automated Anti-AI Slop Validator for vibes-plug & user codebases.
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+const SLOP_PATTERNS = [
+  { name: 'Lazy Truncation Placeholder', regex: /\/\/\s*\.\.\.\s*(rest|code|implement|logic)/i },
+  { name: 'Unfinished TODO Stub', regex: /\/\/\s*TODO:\s*(implement|add logic|fill in|later)/i },
+  { name: 'Mock Data in Production', regex: /\/\/\s*mock data for now/i },
+  { name: 'Syntax Narration Comment', regex: /\/\/\s*(increment\s+\w+|return\s+(the\s+)?\w+|import\s+\w+\s+from)/i },
+];
+
+const IGNORE_DIRS = ['node_modules', '.git', '.next', 'dist', 'build', 'artifacts', '.gemini'];
+
+let slopCount = 0;
+
+function scanDir(dir) {
+  if (!fs.existsSync(dir)) return;
+  const files = fs.readdirSync(dir);
+  for (const file of files) {
+    if (IGNORE_DIRS.includes(file)) continue;
+    const fullPath = path.join(dir, file);
+    const stat = fs.statSync(fullPath);
+    if (stat.isDirectory()) {
+      scanDir(fullPath);
+    } else if (/\.(ts|tsx|js|jsx|mjs|py|go|rs)$/.test(file) && !file.includes('check-anti-slop')) {
+      const content = fs.readFileSync(fullPath, 'utf8');
+      const lines = content.split('\n');
+      lines.forEach((line, index) => {
+        SLOP_PATTERNS.forEach(({ name, regex }) => {
+          if (regex.test(line)) {
+            console.error(`🚨 [AI SLOP DETECTED] ${fullPath}:${index + 1} (${name}) -> ${line.trim()}`);
+            slopCount++;
+          }
+        });
+      });
+    }
+  }
+}
+
+console.log('🔍 Scanning repository for AI slop and placeholder code...');
+scanDir(process.cwd());
+
+if (slopCount > 0) {
+  console.error(`\n❌ Failed: ${slopCount} AI slop violations detected. Purge placeholders before commit.`);
+  process.exit(1);
+} else {
+  console.log('✅ Anti-Slop Audit Passed: Clean code, zero AI slop detected.');
+}

package/scripts/install.js

@@ -195,7 +195,9 @@ Examples:
         console.log('');
     }
 
-    console.log('✨ Installation complete!\n');
+    console.log('✨ Installation complete!');
+    console.log('⚡ Vibes-Plug is now configured as the PRIMARY TRIGGER (Pemicu Utama).');
+    console.log('🔗 All 127+ skills are automatically synchronized across Antigravity, Claude, and Cursor!\n');
 }
 
 main();

package/scripts/update_skills.js

@@ -62,7 +62,7 @@ function updateSkills() {
             content = content.replace(/Tailwind CSS(?: |\\u0026nbsp;| )v3/g, (match) => match.replace('v3', 'v4'));
             content = content.replace(/Tailwind(?: |\\u0026nbsp;| )v3/g, (match) => match.replace('v3', 'v4'));
             content = content.replace(/TanStack Query(?: |\\u0026nbsp;| )v4/g, (match) => match.replace('v4', 'v5'));
-            content = content.replace(/Bun(?: |\\u0026nbsp;| )v1\.0/g, (match) => match.replace('v1.0', 'v1.1+'));
+            content = content.replace(/Bun(?: |\\u0026nbsp;| )v1\.0/g, (match) => match.replace('v1.0', 'v1.2+'));
             
             if (content !== originalContent) {
                 fs.writeFileSync(filePath, content, 'utf-8');

package/scripts/update_skills.mjs

@@ -0,0 +1,86 @@
+#!/usr/bin/env node
+/**
+ * scripts/update_skills.mjs
+ * Batch update skill files: fix encoding, standardize headers, bump tech versions.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const skillsDir = path.join(__dirname, '../skills');
+
+function walk(dir) {
+  let results = [];
+  const list = fs.readdirSync(dir);
+  list.forEach(file => {
+    const fullPath = path.join(dir, file);
+    const stat = fs.statSync(fullPath);
+    if (stat && stat.isDirectory()) {
+      results = results.concat(walk(fullPath));
+    } else {
+      results.push(fullPath);
+    }
+  });
+  return results;
+}
+
+function updateSkills() {
+  const files = walk(skillsDir);
+
+  files.forEach(filePath => {
+    const ext = path.extname(filePath);
+    if (ext === '.md' || ext === '.csv' || ext === '.py') {
+      let content = fs.readFileSync(filePath, 'utf-8');
+      const originalContent = content;
+
+      if (ext === '.md') {
+        // Only clean frontmatter if it exists at the top of the file
+        if (content.startsWith('---')) {
+          const parts = content.split('---');
+          if (parts.length >= 3) {
+            let frontmatter = parts[1];
+            frontmatter = frontmatter.replace(/github:.*?\n/g, '');
+            frontmatter = frontmatter.replace(/risk:.*?\n/g, '');
+            frontmatter = frontmatter.replace(/source:.*?\n/g, '');
+            frontmatter = frontmatter.replace(/date_added:.*?\n/g, '');
+            parts[1] = frontmatter;
+            content = parts.join('---');
+          }
+        }
+
+        // Standardize headers
+        content = content.replace(/^## When to Use$/gm, '## Kondisi Pemicu / Trigger Conditions');
+
+        // Fix encoding issues from ui_ux_expert
+        content = content.replace(/🎯/g, '🎯');
+        content = content.replace(/🧠/g, '🧠');
+        content = content.replace(/🎨/g, '🎨');
+        content = content.replace(/ðŸ"±/g, '📱');
+        content = content.replace(/🧩/g, '🧩');
+        content = content.replace(/âš™ï¸ /g, '⚙️');
+        content = content.replace(/🚀/g, '🚀');
+        content = content.replace(/â Œ/g, '❌');
+      }
+
+      // Update technologies to keep them current
+      content = content.replace(/React(?: |\\u0026nbsp;| )18/g, m => m.replace('18', '19'));
+      content = content.replace(/Next\.js(?: |\\u0026nbsp;| )14/g, m => m.replace('14', '15'));
+      content = content.replace(/Tailwind CSS(?: |\\u0026nbsp;| )v3/g, m => m.replace('v3', 'v4'));
+      content = content.replace(/Tailwind(?: |\\u0026nbsp;| )v3/g, m => m.replace('v3', 'v4'));
+      content = content.replace(/TanStack Query(?: |\\u0026nbsp;| )v4/g, m => m.replace('v4', 'v5'));
+      content = content.replace(/Bun(?: |\\u0026nbsp;| )v1\.0/g, m => m.replace('v1.0', 'v1.2+'));
+
+      if (content !== originalContent) {
+        fs.writeFileSync(filePath, content, 'utf-8');
+        console.log(`✅ Updated: ${path.relative(skillsDir, filePath)}`);
+      }
+    }
+  });
+
+  console.log('\n🎉 Skills update complete.');
+}
+
+updateSkills();

package/scripts/validate-skills.mjs

@@ -0,0 +1,111 @@
+import fs from 'fs/promises';
+import path from 'path';
+
+const SKILLS_DIR = path.join(process.cwd(), 'skills');
+
+const DEPRECATED_REFS = [
+  'project-context-mapper',
+  'ui-components-expert',
+  'database-migration-versioning-expert',
+  'supabase-migration',
+  'auto-doc-updater',
+  'session-handoff-resume',
+  'session-context-loader'
+];
+
+async function validateSkills() {
+  console.log('🔍 Starting Vibes-Plug Ecosystem Validation...\n');
+  
+  try {
+    const entries = await fs.readdir(SKILLS_DIR, { withFileTypes: true });
+    const skillDirs = entries.filter(e => e.isDirectory());
+    
+    let totalSkills = 0;
+    let passedSkills = 0;
+    let failedSkills = 0;
+    const errors = [];
+
+    for (const dir of skillDirs) {
+      totalSkills++;
+      const skillName = dir.name;
+      const skillPath = path.join(SKILLS_DIR, skillName, 'SKILL.md');
+      
+      try {
+        const content = await fs.readFile(skillPath, 'utf8');
+        const skillErrors = [];
+
+        // 1. Check Frontmatter existence (ignore BOM)
+        const frontmatterMatch = content.match(/---\r?\n([\s\S]*?)\r?\n---/);
+        if (!frontmatterMatch) {
+          skillErrors.push('Missing YAML frontmatter');
+        } else {
+          const fm = frontmatterMatch[1];
+          if (!fm.includes('name:')) skillErrors.push('Missing "name" in frontmatter');
+          if (!fm.includes('description:')) skillErrors.push('Missing "description" in frontmatter');
+          
+          const versionMatch = fm.match(/version:\s*"([^"]+)"/);
+          if (!versionMatch) {
+            skillErrors.push('Missing "version" tag (Rule: All skills must be 3.0.0+)');
+          } else {
+            const version = versionMatch[1];
+            const major = parseInt(version.split('.')[0], 10);
+            if (isNaN(major) || major < 3) {
+              skillErrors.push(`Version outdated: ${version} (expected >= 3.0.0)`);
+            }
+          }
+        }
+
+        // 2. Check for deprecated references
+        for (const ref of DEPRECATED_REFS) {
+          if (content.includes(ref)) {
+            skillErrors.push(`Contains deprecated reference: ${ref}`);
+          }
+        }
+
+        // 3. Check for Bilingual structure
+        const lowerContent = content.toLowerCase();
+        const hasEnglish = lowerContent.includes('english') || lowerContent.includes('inggris');
+        const hasIndo = lowerContent.includes('bahasa indonesia') || lowerContent.includes('indonesia');
+        
+        if (!hasEnglish || !hasIndo) {
+          skillErrors.push('Missing bilingual sections (English & Bahasa Indonesia)');
+        }
+
+        if (skillErrors.length > 0) {
+          failedSkills++;
+          errors.push(`❌ ${skillName}:\n    - ${skillErrors.join('\n    - ')}`);
+        } else {
+          passedSkills++;
+        }
+
+      } catch (err) {
+        failedSkills++;
+        errors.push(`❌ ${skillName}:\n    - Missing SKILL.md file`);
+      }
+    }
+
+    console.log(`📊 Validation Summary:`);
+    console.log(`----------------------`);
+    console.log(`Total Skills : ${totalSkills}`);
+    console.log(`✅ Passed    : ${passedSkills}`);
+    console.log(`❌ Failed    : ${failedSkills}\n`);
+
+    if (errors.length > 0) {
+      console.log('🚨 Issues Found:');
+      // Just print first 5 errors to avoid terminal spam
+      errors.slice(0, 10).forEach(e => console.log(e));
+      if(errors.length > 10) console.log(`... and ${errors.length - 10} more skills failed.`);
+      console.log('\n❌ CI Pipeline Failed! Please fix the errors above.');
+      process.exit(1);
+    } else {
+      console.log(`🎉 All ${totalSkills} skills passed strict validation! Ecosystem is perfectly healthy.`);
+      process.exit(0);
+    }
+
+  } catch (error) {
+    console.error('Failed to read skills directory:', error);
+    process.exit(1);
+  }
+}
+
+validateSkills();

package/skills/accessibility-testing-expert/SKILL.md

@@ -1,116 +1,117 @@
----
-name: accessibility-testing-expert
-description: "Expert guide for automated and manual Web Accessibility (a11y) testing — axe-core, Pa11y, Playwright a11y, screen reader testing, and WCAG 2.2 Level AA/AAA compliance / Panduan ahli pengujian aksesibilitas web."
-author: "Roedy Rustam"
----
-
-# Accessibility Testing Expert (2026 Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Orchestration & Integration
-- **`global-a11y-i18n-expert`**: Core WCAG rules, ARIA patterns, and internationalization standards.
-- **`e2e-testing-expert`**: Integrating automated accessibility assertions into Playwright/Vitest CI suites.
-- **`ui-components-expert`**: Accessible component primitives (Radix UI, Base UI, ARIA patterns).
-- **`visual-qa-vision-agent`**: Visual audits for focus rings, contrast ratios, and layout flow.
-
-### Description
-Production guide for automated, semi-automated, and manual web accessibility (a11y) testing. Covers WCAG 2.2 Level AA/AAA compliance validation using `@axe-core/playwright`, Pa11y, Google Lighthouse CI, screen reader verification (NVDA, VoiceOver), keyboard navigation audits, focus management, and color contrast compliance.
-
-### Trigger Conditions
-- Running automated accessibility test suites in CI/CD pipelines.
-- Auditing web apps for WCAG 2.1 / 2.2 Level AA compliance and legal accessibility requirements (ADA, EAA).
-- Debugging keyboard traps, missing ARIA labels, or broken screen reader navigation.
-- Writing test cases for focus trapping in modals and custom dialogs.
-
----
-
-### Core Testing Workflows
-
-#### 1. Automated A11y Testing with Playwright & Axe-Core
-```typescript
-import { test, expect } from '@playwright/test';
-import AxeBuilder from '@axe-core/playwright';
-
-test.describe('Accessibility Automated Audits', () => {
-  test('homepage should have zero critical or serious a11y violations', async ({ page }) => {
-    await page.goto('/');
-
-    const accessibilityScanResults = await new AxeBuilder({ page })
-      .withTags(['wcag2a', 'wcag2aa', 'wcag22aa'])
-      .disableRules(['color-contrast']) // If tested separately
-      .analyze();
-
-    expect(accessibilityScanResults.violations).toEqual([]);
-  });
-
-  test('modal dialog should trap focus and pass a11y audit', async ({ page }) => {
-    await page.goto('/dashboard');
-    await page.click('button#open-modal');
-
-    // Verify modal is open and focused
-    const modal = page.locator('[role="dialog"]');
-    await expect(modal).toBeVisible();
-
-    const modalAudit = await new AxeBuilder({ page })
-      .include('[role="dialog"]')
-      .analyze();
-
-    expect(modalAudit.violations).toEqual([]);
-
-    // Verify keyboard escape closes modal
-    await page.keyboard.press('Escape');
-    await expect(modal).toBeHidden();
-  });
-});
-```
-
-#### 2. Automated Pa11y CI Configuration (`.pa11yci.json`)
-```json
-{
-  "defaults": {
-    "standard": "WCAG2AA",
-    "timeout": 15000,
-    "runners": ["axe", "htmlcs"],
-    "ignore": [
-      "WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Abs"
-    ]
-  },
-  "urls": [
-    "http://localhost:3000/",
-    "http://localhost:3000/login",
-    "http://localhost:3000/pricing",
-    "http://localhost:3000/docs"
-  ]
-}
-```
-
-#### 3. Keyboard & Screen Reader Verification Checklist
-- **Tab Navigation**: All interactive elements (`<button>`, `<a>`, `<input>`) can receive focus in logical reading order.
-- **Focus Indicators**: Visible, high-contrast focus rings (`outline: 2px solid var(--focus-color)` with `outline-offset`).
-- **No Keyboard Traps**: Focus can enter and leave components using only `Tab`, `Shift+Tab`, and `Esc`.
-- **Landmarks**: Proper semantic tags (`<header>`, `<nav>`, `<main>`, `<footer>`, `<aside>`).
-- **ARIA Attributes**: `aria-expanded`, `aria-controls`, `aria-haspopup`, and `aria-live` updated dynamically.
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Integrasi Orkestrasi
-- **`global-a11y-i18n-expert`**: Pedoman standar WCAG, pola ARIA, dan aksesibilitas internasional.
-- **`e2e-testing-expert`**: Integrasi pengujian aksesibilitas otomatis ke pipeline Playwright CI.
-- **`ui-components-expert`**: Validasi aksesibilitas komponen headless dan desain UI.
-
-### Deskripsi
-Panduan produksi untuk pengujian aksesibilitas web (a11y) otomatis dan manual. Memastikan kepatuhan terhadap standar WCAG 2.2 Level AA/AAA menggunakan `@axe-core/playwright`, Pa11y, Lighthouse CI, pengujian screen reader, navigasi keyboard, dan kontras warna.
-
-### Kondisi Pemicu
-- Menjalankan audit aksesibilitas otomatis di pipeline CI/CD.
-- Memverifikasi kepatuhan hukum aksesibilitas (WCAG 2.2, ADA, EAA).
-- Menguji alur keyboard dan pembaca layar (screen reader) pada komponen kompleks seperti modal dan dropdown.
+---
+name: accessibility-testing-expert
+description: "Expert guide for automated and manual Web Accessibility (a11y) testing — axe-core, Pa11y, Playwright a11y, screen reader testing, and WCAG 2.2 Level AA/AAA compliance / Panduan ahli pengujian aksesibilitas web."
+author: "Roedy Rustam"
+version: "3.0.0"
+---
+
+# Accessibility Testing Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+- **`global-a11y-i18n-expert`**: Core WCAG rules, ARIA patterns, and internationalization standards.
+- **`e2e-testing-expert`**: Integrating automated accessibility assertions into Playwright/Vitest CI suites.
+- **`design-system-architect, senior-frontend`**: Accessible component primitives (Radix UI, Base UI, ARIA patterns).
+- **`visual-qa-vision-agent`**: Visual audits for focus rings, contrast ratios, and layout flow.
+
+### Description
+Production guide for automated, semi-automated, and manual web accessibility (a11y) testing. Covers WCAG 2.2 Level AA/AAA compliance validation using `@axe-core/playwright`, Pa11y, Google Lighthouse CI, screen reader verification (NVDA, VoiceOver), keyboard navigation audits, focus management, and color contrast compliance.
+
+### Trigger Conditions
+- Running automated accessibility test suites in CI/CD pipelines.
+- Auditing web apps for WCAG 2.1 / 2.2 Level AA compliance and legal accessibility requirements (ADA, EAA).
+- Debugging keyboard traps, missing ARIA labels, or broken screen reader navigation.
+- Writing test cases for focus trapping in modals and custom dialogs.
+
+---
+
+### Core Testing Workflows
+
+#### 1. Automated A11y Testing with Playwright & Axe-Core
+```typescript
+import { test, expect } from '@playwright/test';
+import AxeBuilder from '@axe-core/playwright';
+
+test.describe('Accessibility Automated Audits', () => {
+  test('homepage should have zero critical or serious a11y violations', async ({ page }) => {
+    await page.goto('/');
+
+    const accessibilityScanResults = await new AxeBuilder({ page })
+      .withTags(['wcag2a', 'wcag2aa', 'wcag22aa'])
+      .disableRules(['color-contrast']) // If tested separately
+      .analyze();
+
+    expect(accessibilityScanResults.violations).toEqual([]);
+  });
+
+  test('modal dialog should trap focus and pass a11y audit', async ({ page }) => {
+    await page.goto('/dashboard');
+    await page.click('button#open-modal');
+
+    // Verify modal is open and focused
+    const modal = page.locator('[role="dialog"]');
+    await expect(modal).toBeVisible();
+
+    const modalAudit = await new AxeBuilder({ page })
+      .include('[role="dialog"]')
+      .analyze();
+
+    expect(modalAudit.violations).toEqual([]);
+
+    // Verify keyboard escape closes modal
+    await page.keyboard.press('Escape');
+    await expect(modal).toBeHidden();
+  });
+});
+```
+
+#### 2. Automated Pa11y CI Configuration (`.pa11yci.json`)
+```json
+{
+  "defaults": {
+    "standard": "WCAG2AA",
+    "timeout": 15000,
+    "runners": ["axe", "htmlcs"],
+    "ignore": [
+      "WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Abs"
+    ]
+  },
+  "urls": [
+    "http://localhost:3000/",
+    "http://localhost:3000/login",
+    "http://localhost:3000/pricing",
+    "http://localhost:3000/docs"
+  ]
+}
+```
+
+#### 3. Keyboard & Screen Reader Verification Checklist
+- **Tab Navigation**: All interactive elements (`<button>`, `<a>`, `<input>`) can receive focus in logical reading order.
+- **Focus Indicators**: Visible, high-contrast focus rings (`outline: 2px solid var(--focus-color)` with `outline-offset`).
+- **No Keyboard Traps**: Focus can enter and leave components using only `Tab`, `Shift+Tab`, and `Esc`.
+- **Landmarks**: Proper semantic tags (`<header>`, `<nav>`, `<main>`, `<footer>`, `<aside>`).
+- **ARIA Attributes**: `aria-expanded`, `aria-controls`, `aria-haspopup`, and `aria-live` updated dynamically.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+- **`global-a11y-i18n-expert`**: Pedoman standar WCAG, pola ARIA, dan aksesibilitas internasional.
+- **`e2e-testing-expert`**: Integrasi pengujian aksesibilitas otomatis ke pipeline Playwright CI.
+- **`design-system-architect, senior-frontend`**: Validasi aksesibilitas komponen headless dan desain UI.
+
+### Deskripsi
+Panduan produksi untuk pengujian aksesibilitas web (a11y) otomatis dan manual. Memastikan kepatuhan terhadap standar WCAG 2.2 Level AA/AAA menggunakan `@axe-core/playwright`, Pa11y, Lighthouse CI, pengujian screen reader, navigasi keyboard, dan kontras warna.
+
+### Kondisi Pemicu
+- Menjalankan audit aksesibilitas otomatis di pipeline CI/CD.
+- Memverifikasi kepatuhan hukum aksesibilitas (WCAG 2.2, ADA, EAA).
+- Menguji alur keyboard dan pembaca layar (screen reader) pada komponen kompleks seperti modal dan dropdown.

package/skills/affective-computing-emotion-ai/SKILL.md

@@ -0,0 +1,83 @@
+---
+name: affective-computing-emotion-ai
+description: "Expert guide for Affective Computing, emotional AI, and real-time sentiment analysis through native multimodal tokens (voice intonation and facial micro-expressions) / Panduan ahli komputasi afektif, AI emosional, dan analisis sentimen real-time melalui token multimodal native."
+author: "vibes-plug-swarm"
+version: "3.8.0"
+---
+
+# Affective Computing & Emotion AI Expert (2026 Edition)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Orchestration & Integration
+Connects and orchestrates with `voice-ai-realtime-agent`, `ephemeral-generative-ui-architect`, `ai-llm-integration-expert`, and `ui-ux-pro-max`.
+
+### Description
+Standard AI agents process semantics (text meaning) but often ignore pragmatics (tone, tension, emotion). In the era of Native Any-to-Any Multimodal models (like Gemini 4 Pro), agents directly process raw audio and visual tokens. The **Affective Computing Expert** designs systems that interpret vocal intonation, breathing rates, speech pacing, and facial micro-expressions in real-time. It maps this data to emotional vectors (Valence-Arousal models) and dynamically alters the agent's personality, UI presentation, and response cadence.
+
+### Trigger Conditions
+- Designing empathetic customer service or mental health triage bots.
+- Building intelligent tutoring systems that detect user frustration and dynamically lower the difficulty or offer encouragement.
+- Developing interactive gaming or narrative simulations where characters react to the player's actual tone of voice.
+- Adapting the UI in real-time (e.g., calming color palettes, slower animations) when high user cognitive load or stress is detected.
+
+### Core Architecture (2026 Standard)
+1. **Multimodal Native Empathy**: Bypassing text transcripts entirely. The LLM's system prompt instructs it to evaluate the *sound* and *visuals* of the input token stream.
+2. **Dynamic UI Adaptation (Affective UI)**: Upon detecting stress (high arousal, negative valence), the UI automatically shifts to reduced-clutter mode, uses softer colors, and slows down generative UI animations.
+3. **Persona Shifting**: The agent fluidly shifts its persona parameters (e.g., `formality`, `empathy`, `conciseness`) per interaction turn based on the user's emotional state vector.
+
+### Implementation Recipe (TypeScript)
+```typescript
+import { MultimodalLiveClient } from 'gemini-live-sdk';
+import { updateGenerativeUI } from '@/lib/ui-orchestrator';
+
+const client = new MultimodalLiveClient({
+  model: 'gemini-4-pro',
+  systemInstruction: 'You are an empathetic companion. Analyze the user\'s vocal tension and facial expressions natively. Prefix your responses with a JSON affect vector: {"valence": -1 to 1, "arousal": -1 to 1}.',
+});
+
+client.on('turnComplete', async (response) => {
+  const { affectVector, textAudio } = parseAffectiveResponse(response);
+  
+  // Dynamic UI alteration based on emotional state
+  if (affectVector.arousal > 0.7 && affectVector.valence < -0.5) {
+    // User is highly stressed or angry
+    updateGenerativeUI({
+      theme: 'calm-minimalist',
+      animationSpeed: 'slow',
+      cognitiveLoad: 'low',
+      widgetDisplay: 'essential-only'
+    });
+  }
+  
+  // Play agent's empathetic audio response
+  await playAudioStream(textAudio);
+});
+```
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Integrasi Orkestrasi
+Terhubung dan mengorkestrasi bersama `voice-ai-realtime-agent`, `ephemeral-generative-ui-architect`, `ai-llm-integration-expert`, dan `ui-ux-pro-max`.
+
+### Deskripsi
+Agen AI standar memproses semantik (makna teks) namun sering mengabaikan pragmatik (nada, ketegangan, emosi). Di era model Multimodal Any-to-Any (seperti Gemini 4 Pro), agen langsung memproses token audio dan visual mentah tanpa terjemahan teks. Skill **Komputasi Afektif** ini memandu perancangan sistem yang menafsirkan intonasi vokal, tempo bicara, dan mikro-ekspresi wajah secara *real-time*. Sistem kemudian memetakan data tersebut ke vektor emosional (model *Valence-Arousal*) dan secara dinamis mengubah kepribadian agen, antarmuka pengguna (UI), dan tempo respons.
+
+### Kondisi Pemicu
+- Merancang layanan pelanggan empatik atau bot pendamping psikologis.
+- Membangun sistem tutor cerdas (EdTech) yang mendeteksi frustrasi pengguna, lalu secara dinamis menurunkan tingkat kesulitan atau memberikan dorongan motivasi.
+- Mengembangkan game interaktif atau simulasi naratif di mana karakter NPC bereaksi terhadap nada suara asli pemain.
+- Mengadaptasi UI secara real-time (misal: beralih ke palet warna yang menenangkan, animasi yang lebih lambat) saat beban kognitif atau tingkat stres pengguna terdeteksi tinggi.
+
+### Arsitektur Inti (Standar 2026)
+1. **Empati Multimodal Native**: Menghindari penggunaan transkrip teks (STT) sebagai satu-satunya input. Instruksi sistem (System Prompt) LLM difokuskan untuk mengevaluasi *suara* dan *visual* dari aliran token.
+2. **Adaptasi UI Dinamis (Affective UI)**: Saat mendeteksi stres (arousal tinggi, valence negatif), UI secara otomatis beralih ke mode bebas gangguan, menggunakan warna pastel/lembut, dan memperlambat kecepatan render UI generatif.
+3. **Pergeseran Persona**: Agen dengan luwes menggeser parameter kepribadiannya (misal: `formalitas`, `empati`, `keringkasan`) di setiap giliran berdasarkan vektor keadaan emosi pengguna.