vibes-plug 2.11.0 → 3.9.0

package/index.js

@@ -1,5 +1,5 @@
 /**
- * Vibes Plug - Universal AI Plugin with 140+ Specialized Skills
+ * Vibes Plug - Universal AI Plugin with 145+ Specialized Skills
  * Platform support: Antigravity (AGY), Claude Code, and Cursor IDE
  */
 

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "vibes-plug",
-  "version": "2.11.0",
-  "description": "Universal AI plugin with 140+ 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.11.0",
-  "description": "Universal AI plugin with 140+ 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.js

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+/**
+ * scripts/check-anti-slop.js
+ * Automated Anti-AI Slop Validator for vibes-plug & user codebases.
+ */
+
+const fs = require('fs');
+const path = require('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|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/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/generate_swarm_gif.py

@@ -121,8 +121,8 @@ for frame_idx in range(NUM_FRAMES):
     draw.text((START_X + 20, 18), 'VIBES PLUG', fill='#38bdf8', font=font_title)
     draw.text((START_X + 135, 21), '— Universal Agentic Swarm Workflow (2026 Edition)', fill='#94a3b8', font=font_subtitle)
 
-    # 140+ Skills Badge (Pill)
-    badge_text = '140+ SKILLS ACTIVE'
+    # 145+ Skills Badge (Pill)
+    badge_text = '145+ SKILLS ACTIVE'
     badge_w, badge_h = 138, 24
     badge_x = START_X + TOTAL_CARDS_W - badge_w
     badge_y = 17

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.