vibes-plug 1.0.0

package/skills/fullstack-expert/scripts/architecture_analyzer.py

@@ -0,0 +1,326 @@
+#!/usr/bin/env python3
+"""
+Fullstack Architecture Analyzer
+Analyzes fullstack project structure, detects anti-patterns, and validates architecture health.
+"""
+
+import os
+import sys
+import json
+import argparse
+from pathlib import Path
+from typing import Dict, List, Optional
+
+
+class ArchitectureAnalyzer:
+    """Analyzes fullstack project architecture for anti-patterns and best practices."""
+
+    # Common fullstack project indicators
+    FRONTEND_MARKERS = {
+        'package.json', 'next.config.js', 'next.config.ts', 'next.config.mjs',
+        'vite.config.ts', 'vite.config.js', 'nuxt.config.ts', 'svelte.config.js',
+        'astro.config.mjs',
+    }
+    BACKEND_MARKERS = {
+        'requirements.txt', 'pyproject.toml', 'go.mod', 'Cargo.toml',
+        'pom.xml', 'build.gradle', 'Gemfile',
+    }
+    INFRA_MARKERS = {
+        'Dockerfile', 'docker-compose.yml', 'docker-compose.yaml',
+        'terraform.tf', 'main.tf', 'pulumi.yaml', 'serverless.yml',
+        'k8s/', 'kubernetes/', 'helm/',
+    }
+    CONFIG_MARKERS = {
+        '.env', '.env.example', '.env.local',
+        'tsconfig.json', 'eslint.config.js', '.eslintrc.js',
+    }
+
+    def __init__(self, target_path: str, verbose: bool = False):
+        self.target_path = Path(target_path)
+        self.verbose = verbose
+        self.results: Dict = {
+            'status': 'pending',
+            'target': str(self.target_path),
+            'stack': {},
+            'findings': [],
+            'score': 100,
+        }
+
+    def run(self) -> Dict:
+        """Execute the full architecture analysis."""
+        print(f"🏗️  Running Architecture Analyzer...")
+        print(f"📁 Target: {self.target_path}")
+
+        try:
+            self.validate_target()
+            self.detect_stack()
+            self.check_project_structure()
+            self.check_security_basics()
+            self.check_database_patterns()
+            self.check_testing_setup()
+            self.check_ci_cd()
+            self.check_docker_setup()
+            self.generate_report()
+
+            self.results['status'] = 'success'
+            print("✅ Analysis completed!")
+            return self.results
+
+        except Exception as e:
+            print(f"❌ Error: {e}")
+            sys.exit(1)
+
+    def validate_target(self):
+        """Validate the target path exists."""
+        if not self.target_path.exists():
+            raise ValueError(f"Target path does not exist: {self.target_path}")
+        if self.verbose:
+            print(f"✓ Target validated: {self.target_path}")
+
+    def detect_stack(self):
+        """Detect the technology stack used in the project."""
+        stack = {'frontend': [], 'backend': [], 'infrastructure': [], 'database': []}
+
+        # Check for frontend frameworks
+        if (self.target_path / 'next.config.js').exists() or \
+           (self.target_path / 'next.config.ts').exists() or \
+           (self.target_path / 'next.config.mjs').exists():
+            stack['frontend'].append('Next.js')
+
+        if (self.target_path / 'vite.config.ts').exists() or \
+           (self.target_path / 'vite.config.js').exists():
+            stack['frontend'].append('Vite')
+
+        if (self.target_path / 'nuxt.config.ts').exists():
+            stack['frontend'].append('Nuxt')
+
+        # Check for backend languages
+        if (self.target_path / 'go.mod').exists():
+            stack['backend'].append('Go')
+        if (self.target_path / 'Cargo.toml').exists():
+            stack['backend'].append('Rust')
+        if (self.target_path / 'pyproject.toml').exists() or \
+           (self.target_path / 'requirements.txt').exists():
+            stack['backend'].append('Python')
+
+        # Check package.json for more details
+        pkg_json = self.target_path / 'package.json'
+        if pkg_json.exists():
+            try:
+                with open(pkg_json) as f:
+                    pkg = json.load(f)
+                deps = {**pkg.get('dependencies', {}), **pkg.get('devDependencies', {})}
+
+                if 'drizzle-orm' in deps:
+                    stack['database'].append('Drizzle ORM')
+                if 'prisma' in deps or '@prisma/client' in deps:
+                    stack['database'].append('Prisma')
+                if 'hono' in deps:
+                    stack['backend'].append('Hono')
+                if 'fastify' in deps:
+                    stack['backend'].append('Fastify')
+                if 'express' in deps:
+                    stack['backend'].append('Express')
+            except (json.JSONDecodeError, IOError):
+                pass
+
+        # Check for infrastructure
+        if (self.target_path / 'Dockerfile').exists():
+            stack['infrastructure'].append('Docker')
+        if (self.target_path / 'docker-compose.yml').exists() or \
+           (self.target_path / 'docker-compose.yaml').exists():
+            stack['infrastructure'].append('Docker Compose')
+        if (self.target_path / 'main.tf').exists():
+            stack['infrastructure'].append('Terraform')
+
+        self.results['stack'] = stack
+        if self.verbose:
+            print(f"✓ Stack detected: {stack}")
+
+    def check_project_structure(self):
+        """Check for proper project structure and organization."""
+        # Check for src/ or app/ directory
+        has_src = (self.target_path / 'src').is_dir()
+        has_app = (self.target_path / 'app').is_dir()
+        has_lib = (self.target_path / 'lib').is_dir()
+
+        if not has_src and not has_app:
+            self._add_finding('warning', 'Missing organized source directory (src/ or app/)')
+
+        # Check for proper separation of concerns
+        if has_src:
+            src = self.target_path / 'src'
+            subdirs = [d.name for d in src.iterdir() if d.is_dir()]
+            expected = {'routes', 'handlers', 'services', 'middleware', 'lib', 'utils', 'db', 'models'}
+            found = set(subdirs) & expected
+            if len(found) < 2:
+                self._add_finding('info', f'Consider organizing src/ with subdirectories: {expected - found}')
+
+    def check_security_basics(self):
+        """Check for basic security configurations."""
+        # Check for .env in .gitignore
+        gitignore = self.target_path / '.gitignore'
+        if gitignore.exists():
+            content = gitignore.read_text()
+            if '.env' not in content:
+                self._add_finding('critical', '.env is not in .gitignore — secrets may be committed!')
+                self.results['score'] -= 20
+        else:
+            self._add_finding('warning', 'No .gitignore found')
+            self.results['score'] -= 10
+
+        # Check for hardcoded secrets in common config files
+        env_file = self.target_path / '.env'
+        if env_file.exists():
+            self._add_finding('info', '.env file found — ensure it is not committed to version control')
+
+        # Check for .env.example
+        env_example = self.target_path / '.env.example'
+        if not env_example.exists():
+            self._add_finding('warning', 'No .env.example found — document required environment variables')
+
+    def check_database_patterns(self):
+        """Check for database best practices."""
+        # Check for migration files
+        migration_dirs = ['migrations', 'prisma/migrations', 'drizzle', 'alembic']
+        has_migrations = any((self.target_path / d).is_dir() for d in migration_dirs)
+
+        if not has_migrations and self.results['stack'].get('database'):
+            self._add_finding('warning', 'No database migration directory found — use managed migrations')
+            self.results['score'] -= 10
+
+    def check_testing_setup(self):
+        """Check for testing configuration."""
+        test_configs = [
+            'vitest.config.ts', 'vitest.config.js',
+            'jest.config.ts', 'jest.config.js',
+            'playwright.config.ts', 'pytest.ini', 'conftest.py',
+        ]
+        has_tests = any((self.target_path / c).exists() for c in test_configs)
+
+        test_dirs = ['__tests__', 'tests', 'test', 'e2e', 'spec']
+        has_test_dir = any((self.target_path / d).is_dir() for d in test_dirs)
+
+        if not has_tests and not has_test_dir:
+            self._add_finding('warning', 'No testing setup detected — add unit and integration tests')
+            self.results['score'] -= 15
+
+    def check_ci_cd(self):
+        """Check for CI/CD pipeline configuration."""
+        ci_paths = [
+            '.github/workflows',
+            '.gitlab-ci.yml',
+            '.circleci',
+            'Jenkinsfile',
+            '.drone.yml',
+        ]
+        has_ci = any(
+            (self.target_path / p).exists() or (self.target_path / p).is_dir()
+            for p in ci_paths
+        )
+
+        if not has_ci:
+            self._add_finding('info', 'No CI/CD pipeline detected — consider adding automated checks')
+
+    def check_docker_setup(self):
+        """Check Docker configuration best practices."""
+        dockerfile = self.target_path / 'Dockerfile'
+        if dockerfile.exists():
+            content = dockerfile.read_text()
+            if 'FROM' in content:
+                # Check for multi-stage build
+                from_count = content.count('FROM ')
+                if from_count < 2:
+                    self._add_finding('info', 'Consider using multi-stage Docker builds for smaller images')
+
+                # Check for non-root user
+                if 'USER ' not in content and 'useradd' not in content and 'adduser' not in content:
+                    self._add_finding('warning', 'Dockerfile runs as root — add a non-root USER')
+                    self.results['score'] -= 5
+
+                # Check for HEALTHCHECK
+                if 'HEALTHCHECK' not in content:
+                    self._add_finding('info', 'Consider adding HEALTHCHECK to Dockerfile')
+
+    def _add_finding(self, severity: str, message: str):
+        """Add a finding to the results."""
+        self.results['findings'].append({
+            'severity': severity,
+            'message': message,
+        })
+        if self.verbose:
+            icon = {'critical': '🔴', 'warning': '🟡', 'info': '🔵'}.get(severity, '⚪')
+            print(f"  {icon} [{severity.upper()}] {message}")
+
+    def generate_report(self):
+        """Generate and display the analysis report."""
+        findings = self.results['findings']
+        critical = len([f for f in findings if f['severity'] == 'critical'])
+        warnings = len([f for f in findings if f['severity'] == 'warning'])
+        info = len([f for f in findings if f['severity'] == 'info'])
+
+        score = max(0, self.results['score'])
+        self.results['score'] = score
+
+        print(f"\n{'='*60}")
+        print("🏗️  ARCHITECTURE ANALYSIS REPORT")
+        print(f"{'='*60}")
+        print(f"Target:   {self.results['target']}")
+        print(f"Score:    {score}/100")
+        print(f"Findings: {critical} critical, {warnings} warnings, {info} info")
+        print(f"\nStack Detected:")
+        for layer, techs in self.results['stack'].items():
+            if techs:
+                print(f"  {layer}: {', '.join(techs)}")
+        print(f"\nFindings:")
+        for f in findings:
+            icon = {'critical': '🔴', 'warning': '🟡', 'info': '🔵'}.get(f['severity'], '⚪')
+            print(f"  {icon} [{f['severity'].upper()}] {f['message']}")
+        print(f"{'='*60}\n")
+
+
+def main():
+    """Main entry point."""
+    parser = argparse.ArgumentParser(
+        description="Fullstack Architecture Analyzer — detects anti-patterns and validates best practices"
+    )
+    parser.add_argument(
+        'target',
+        help='Target project path to analyze'
+    )
+    parser.add_argument(
+        '--verbose', '-v',
+        action='store_true',
+        help='Enable verbose output'
+    )
+    parser.add_argument(
+        '--json',
+        action='store_true',
+        help='Output results as JSON'
+    )
+    parser.add_argument(
+        '--output', '-o',
+        help='Output file path'
+    )
+
+    args = parser.parse_args()
+
+    analyzer = ArchitectureAnalyzer(
+        args.target,
+        verbose=args.verbose
+    )
+
+    results = analyzer.run()
+
+    if args.json:
+        output = json.dumps(results, indent=2)
+        if args.output:
+            with open(args.output, 'w') as f:
+                f.write(output)
+            print(f"Results written to {args.output}")
+        else:
+            print(output)
+
+
+if __name__ == '__main__':
+    main()

package/skills/gemini-agent-booster/SKILL.md

@@ -0,0 +1,135 @@
+---
+name: gemini-agent-booster
+description: "Master optimization protocol for Gemini Agent (Antigravity) to unlock native 1M+ long-context reasoning, multimodal vision UI audits, visual subagent feedback, and high-speed problem solving / Protokol optimasi utama untuk Gemini Agent (Antigravity) untuk mengaktifkan pemikiran long-context 1M+, audit UI visual multimodal, dan pemecahan masalah kecepatan tinggi."
+author: "Roedy Rustam"
+---
+
+# Gemini Agent Booster (2026 Edition — Gemini 2.5 Pro/Flash)
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+Master optimization protocol for the Gemini Agent (Antigravity) to leverage native Gemini 2.5 Pro/Flash capabilities — including 1M+ token context window, multimodal vision analysis, deep research mode, thinking chains, and high-speed code generation.
+
+### Trigger Conditions
+- Analyzing very large codebases, logs, or documents that require 1M+ token context.
+- Performing multimodal UI audits (analyzing screenshots of running applications).
+- Running deep research tasks requiring web search + reasoning synthesis.
+- Generating large, complex code artifacts in a single pass.
+- Delegating complex multi-step tasks to browser subagents.
+
+### Gemini 2.5 Pro/Flash Capabilities (2026)
+
+| Capability | Gemini 2.5 Pro | Gemini 2.5 Flash |
+|---|---|---|
+| Context Window | 1M tokens | 1M tokens |
+| Thinking / Reasoning | ✅ Extended thinking | ✅ Flash thinking |
+| Multimodal (Image/Video) | ✅ | ✅ |
+| Code Generation | Best-in-class | Very fast |
+| Web Search (Grounding) | ✅ | ✅ |
+| Deep Research | ✅ (up to 30 min) | ✅ |
+| Audio | ✅ | ✅ |
+| Speed | Slower | 5-10x faster |
+| Cost | Higher | Lower |
+
+### 1M+ Token Long-Context Strategies
+
+When working with very large inputs (codebases, documents, logs):
+1. **Pass full file trees** — use `list_dir` to get the complete file tree, then pass relevant files to maximize context.
+2. **Read whole files, not snippets** — with 1M context, read entire source files rather than grepping for fragments.
+3. **Cross-file analysis** — trace data flows, imports, and interfaces across multiple files simultaneously.
+4. **Log analysis** — pass entire server logs (up to hundreds of thousands of lines) for pattern detection.
+5. **Codebase onboarding** — ingest an entire unfamiliar repo in one pass for deep architectural understanding.
+
+### Multimodal Vision — UI Audit Protocol
+Use the `browser_subagent` + `generate_image` tools for visual feedback:
+1. **Screenshot the running app** via browser subagent.
+2. **Analyze the screenshot** for layout issues, accessibility problems, design inconsistencies, Core Web Vitals opportunities.
+3. **Generate a target design** using `generate_image` for visual comparison.
+4. **Iterate code** based on visual delta between current and target design.
+
+### Thinking Mode — Extended Reasoning
+For complex problems, use Gemini's extended thinking:
+- Architecture decisions with multiple tradeoffs.
+- Debugging hard-to-reproduce race conditions.
+- Designing multi-step agentic workflows.
+- Cryptographic or security-sensitive implementations.
+- **Protocol**: State the problem clearly → let thinking run → review reasoning chain → validate conclusion.
+
+### Deep Research Mode
+Gemini 2.5 Pro's deep research can spend up to 30 minutes actively searching, reading, and synthesizing from hundreds of sources. Use for:
+- Market research before building a new feature.
+- Security vulnerability research.
+- Competitive analysis of existing tools.
+- Collecting the latest API documentation for a framework.
+
+### Speed Optimization — Flash for Iteration
+Use **Gemini 2.5 Flash** for:
+- Quick code generation, small file edits.
+- Rapid back-and-forth iteration (linting, formatting, small bug fixes).
+- High-volume batch processing.
+
+Use **Gemini 2.5 Pro** for:
+- Complex architecture decisions.
+- Long-context full-codebase analysis.
+- Security audits requiring deep reasoning.
+- Generating comprehensive documentation.
+
+### Agent Parallelism
+Gemini Agent natively supports parallel tool calls — run independent operations simultaneously:
+- Read multiple files at once.
+- Run multiple searches in parallel.
+- Spawn multiple browser subagents for concurrent tasks.
+- Write multiple files simultaneously.
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Protokol optimasi utama untuk Gemini Agent (Antigravity) memanfaatkan kemampuan native Gemini 2.5 Pro/Flash — termasuk context window 1M+ token, analisis visi multimodal, mode penelitian mendalam, rantai pemikiran, dan generasi kode berkecepatan tinggi.
+
+### Kondisi Pemicu
+- Menganalisis codebase, log, atau dokumen yang sangat besar yang memerlukan konteks 1M+ token.
+- Melakukan audit UI multimodal (menganalisis screenshot aplikasi yang berjalan).
+- Menjalankan tugas penelitian mendalam yang memerlukan pencarian web + sintesis penalaran.
+- Menghasilkan artefak kode yang besar dan kompleks dalam satu lintasan.
+- Mendelegasikan tugas multi-langkah kompleks ke browser subagent.
+
+### Kemampuan Gemini 2.5 Pro/Flash (2026)
+
+| Kemampuan | Gemini 2.5 Pro | Gemini 2.5 Flash |
+|---|---|---|
+| Context Window | 1M token | 1M token |
+| Pemikiran / Penalaran | ✅ Extended thinking | ✅ Flash thinking |
+| Multimodal (Gambar/Video) | ✅ | ✅ |
+| Generasi Kode | Terbaik di kelasnya | Sangat cepat |
+| Pencarian Web (Grounding) | ✅ | ✅ |
+| Penelitian Mendalam | ✅ (hingga 30 mnt) | ✅ |
+| Kecepatan | Lebih lambat | 5-10x lebih cepat |
+| Biaya | Lebih tinggi | Lebih rendah |
+
+### Strategi Long-Context 1M+ Token
+Manfaatkan jendela konteks besar dengan membaca seluruh file (bukan hanya fragment), melewatkan seluruh pohon file proyek, menganalisis aliran data lintas file secara bersamaan, dan menganalisis log server lengkap untuk deteksi pola.
+
+### Visi Multimodal — Protokol Audit UI
+Gunakan `browser_subagent` untuk mengambil screenshot aplikasi yang berjalan, analisis secara visual untuk masalah tata letak atau aksesibilitas, buat desain target dengan `generate_image`, lalu iterasi kode berdasarkan delta visual.
+
+### Mode Pemikiran — Extended Reasoning
+Untuk masalah kompleks (keputusan arsitektur, debugging race condition, alur kerja agentik), aktifkan mode pemikiran diperpanjang Gemini untuk rantai penalaran yang lebih dalam sebelum menghasilkan solusi.
+
+### Mode Penelitian Mendalam
+Gemini 2.5 Pro dapat menghabiskan hingga 30 menit secara aktif mencari, membaca, dan mensintesis dari ratusan sumber. Ideal untuk riset pasar, kerentanan keamanan, analisis kompetitif, atau pengumpulan dokumentasi API terbaru.
+
+### Flash untuk Iterasi, Pro untuk Kedalaman
+- **Flash**: Edit cepat, iterasi bolak-balik, pemrosesan batch.
+- **Pro**: Keputusan arsitektur, analisis codebase penuh, audit keamanan, dokumentasi komprehensif.
+
+### Paralelisme Agen
+Gemini Agent mendukung pemanggilan tool paralel secara native — jalankan operasi independen secara bersamaan untuk memaksimalkan throughput.

package/skills/global-a11y-i18n-expert/SKILL.md

@@ -0,0 +1,81 @@
+---
+name: global-a11y-i18n-expert
+description: "Expert guide for Web Accessibility (WCAG a11y) and Internationalization (i18n) / Panduan ahli untuk Aksesibilitas Web dan Internasionalisasi."
+author: "Roedy Rustam"
+---
+
+# Global Accessibility (a11y) & i18n Expert
+
+[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
+
+---
+
+<a name="english"></a>
+## English
+
+### Description
+This skill focuses on making enterprise web applications universally accessible and globally adaptable. It covers Web Content Accessibility Guidelines (WCAG) compliance and Internationalization (i18n) patterns for multi-language, multi-timezone software.
+
+### Trigger Conditions
+- Selling software to government, education, or large enterprise sectors (where WCAG AA compliance is legally required).
+- Implementing multi-language support (i18n).
+- Designing UIs that must support RTL (Right-to-Left) languages like Arabic or Hebrew.
+- Fixing "tab trap" or screen reader issues.
+- Handling complex timezone/date calculations across global users.
+
+### Core Architecture Guidelines
+
+#### 1. Web Accessibility (a11y)
+Do not treat accessibility as an afterthought. It is a core engineering requirement.
+- **Semantic HTML**: Always prefer native HTML elements (`<button>`, `<nav>`, `<dialog>`) over building custom ones with `<div>`. Native elements come with free accessibility baked in by the browser.
+- **ARIA Attributes**: If you must build custom UI, use WAI-ARIA roles (`role="tablist"`, `aria-expanded="true"`) to tell screen readers what the component is doing.
+- **Keyboard Navigation**: The entire app MUST be usable without a mouse. Ensure interactive elements are focusable (`tabindex="0"`) and visual focus outlines are distinct (do not use `outline: none` without providing an alternative styling).
+- **Color Contrast**: Ensure text has a minimum contrast ratio of 4.5:1 against its background (WCAG AA standard).
+
+#### 2. Internationalization (i18n)
+Handling multiple languages requires structural foresight.
+- **Locale Routing**: Use URL structures like `/en/pricing` or `/id/pricing`.
+- **String Externalization**: Never hardcode UI text. Use translation files (`en.json`, `id.json`) and a library like `next-intl` or `react-i18next`.
+- **RTL Support**: Use CSS logical properties (e.g., `margin-inline-start` instead of `margin-left`) so your UI automatically flips when rendering RTL languages.
+
+#### 3. Timezones and Dates
+Time is incredibly difficult to manage globally.
+- **Storage**: ALWAYS store dates in the database as UTC (`TIMESTAMPTZ` in PostgreSQL). Never store local time.
+- **Transport**: Send dates across APIs in ISO 8601 format (e.g., `2024-03-15T12:00:00Z`).
+- **Display**: Convert UTC to the user's local timezone only at the UI layer just before rendering (using native `Intl.DateTimeFormat` or libraries like `date-fns-tz`).
+
+---
+
+<a name="bahasa-indonesia"></a>
+## Bahasa Indonesia
+
+### Deskripsi
+Skill ini berfokus pada pembuatan aplikasi web skala *enterprise* yang dapat diakses secara universal dan diadaptasi secara global. Panduan ini mencakup kepatuhan pedoman Aksesibilitas Web (WCAG) serta pola Internasionalisasi (i18n) untuk perangkat lunak multi-bahasa dan multi-zona-waktu.
+
+### Kondisi Pemicu
+- Menjual perangkat lunak ke sektor pemerintah, pendidikan, atau perusahaan besar (di mana kepatuhan WCAG AA diwajibkan secara hukum).
+- Menerapkan dukungan multi-bahasa (i18n).
+- Merancang UI yang harus mendukung bahasa yang dibaca dari Kanan ke Kiri (RTL) seperti Arab atau Ibrani.
+- Memperbaiki masalah navigasi *keyboard* (*tab trap*) atau dukungan *screen reader* (pembaca layar).
+- Menangani kalkulasi tanggal dan zona waktu yang kompleks untuk pengguna global.
+
+### Panduan Arsitektur Inti
+
+#### 1. Aksesibilitas Web (a11y)
+Jangan anggap aksesibilitas sebagai fitur tambahan. Ini adalah syarat mutlak *engineering*.
+- **HTML Semantik**: Selalu utamakan elemen HTML bawaan (`<button>`, `<nav>`, `<dialog>`) daripada membuat elemen kustom menggunakan `<div>`. Elemen bawaan sudah memiliki fitur aksesibilitas yang ditangani langsung oleh browser.
+- **Atribut ARIA**: Jika Anda terpaksa membuat komponen UI kustom, gunakan peran WAI-ARIA (`role="tablist"`, `aria-expanded="true"`) untuk memberi tahu *screen reader* apa fungsi komponen tersebut.
+- **Navigasi Keyboard**: Seluruh aplikasi HARUS bisa digunakan tanpa *mouse*. Pastikan elemen interaktif bisa difokuskan (`tabindex="0"`) dan garis tepi fokus (*focus ring*) terlihat jelas (jangan gunakan `outline: none` tanpa memberikan gaya alternatif).
+- **Kontras Warna**: Pastikan teks memiliki rasio kontras minimal 4.5:1 terhadap warna latar belakangnya (standar WCAG AA).
+
+#### 2. Internasionalisasi (i18n)
+Menangani berbagai bahasa memerlukan perencanaan struktural.
+- **Routing Lokal (Locale Routing)**: Gunakan struktur URL seperti `/en/pricing` atau `/id/pricing`.
+- **Eksternalisasi Teks**: Jangan pernah menulis teks UI langsung (*hardcode*) di dalam kode. Gunakan berkas terjemahan (`en.json`, `id.json`) dan pustaka seperti `next-intl` atau `react-i18next`.
+- **Dukungan RTL**: Gunakan properti logika CSS (*CSS logical properties*, mis. `margin-inline-start` alih-alih `margin-left`) agar tata letak UI Anda secara otomatis berbalik saat merender bahasa RTL.
+
+#### 3. Zona Waktu dan Tanggal
+Mengelola waktu secara global sangatlah rumit.
+- **Penyimpanan**: SELALU simpan tanggal di dalam database dalam format UTC (`TIMESTAMPTZ` pada PostgreSQL). Jangan pernah menyimpan waktu lokal komputer.
+- **Transportasi**: Kirimkan tanggal melalui API dalam format ISO 8601 (mis., `2024-03-15T12:00:00Z`).
+- **Tampilan UI**: Konversikan waktu UTC ke zona waktu lokal pengguna *hanya di lapisan UI* sesaat sebelum dirender (menggunakan `Intl.DateTimeFormat` bawaan browser atau pustaka seperti `date-fns-tz`).