vibes-plug 2.5.0 → 2.11.0

package/skills/senior-fullstack/scripts/fullstack_scaffolder.py

@@ -1,114 +0,0 @@
-#!/usr/bin/env python3
-"""
-Fullstack Scaffolder
-Automated tool for senior fullstack tasks
-"""
-
-import os
-import sys
-import json
-import argparse
-from pathlib import Path
-from typing import Dict, List, Optional
-
-class FullstackScaffolder:
-    """Main class for fullstack scaffolder functionality"""
-    
-    def __init__(self, target_path: str, verbose: bool = False):
-        self.target_path = Path(target_path)
-        self.verbose = verbose
-        self.results = {}
-    
-    def run(self) -> Dict:
-        """Execute the main functionality"""
-        print(f"🚀 Running {self.__class__.__name__}...")
-        print(f"📁 Target: {self.target_path}")
-        
-        try:
-            self.validate_target()
-            self.analyze()
-            self.generate_report()
-            
-            print("✅ Completed successfully!")
-            return self.results
-            
-        except Exception as e:
-            print(f"❌ Error: {e}")
-            sys.exit(1)
-    
-    def validate_target(self):
-        """Validate the target path exists and is accessible"""
-        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 analyze(self):
-        """Perform the main analysis or operation"""
-        if self.verbose:
-            print("📊 Analyzing...")
-        
-        # Main logic here
-        self.results['status'] = 'success'
-        self.results['target'] = str(self.target_path)
-        self.results['findings'] = []
-        
-        # Add analysis results
-        if self.verbose:
-            print(f"✓ Analysis complete: {len(self.results.get('findings', []))} findings")
-    
-    def generate_report(self):
-        """Generate and display the report"""
-        print("\n" + "="*50)
-        print("REPORT")
-        print("="*50)
-        print(f"Target: {self.results.get('target')}")
-        print(f"Status: {self.results.get('status')}")
-        print(f"Findings: {len(self.results.get('findings', []))}")
-        print("="*50 + "\n")
-
-def main():
-    """Main entry point"""
-    parser = argparse.ArgumentParser(
-        description="Fullstack Scaffolder"
-    )
-    parser.add_argument(
-        'target',
-        help='Target path to analyze or process'
-    )
-    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()
-    
-    tool = FullstackScaffolder(
-        args.target,
-        verbose=args.verbose
-    )
-    
-    results = tool.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/senior-fullstack/scripts/project_scaffolder.py

@@ -1,114 +0,0 @@
-#!/usr/bin/env python3
-"""
-Project Scaffolder
-Automated tool for senior fullstack tasks
-"""
-
-import os
-import sys
-import json
-import argparse
-from pathlib import Path
-from typing import Dict, List, Optional
-
-class ProjectScaffolder:
-    """Main class for project scaffolder functionality"""
-    
-    def __init__(self, target_path: str, verbose: bool = False):
-        self.target_path = Path(target_path)
-        self.verbose = verbose
-        self.results = {}
-    
-    def run(self) -> Dict:
-        """Execute the main functionality"""
-        print(f"🚀 Running {self.__class__.__name__}...")
-        print(f"📁 Target: {self.target_path}")
-        
-        try:
-            self.validate_target()
-            self.analyze()
-            self.generate_report()
-            
-            print("✅ Completed successfully!")
-            return self.results
-            
-        except Exception as e:
-            print(f"❌ Error: {e}")
-            sys.exit(1)
-    
-    def validate_target(self):
-        """Validate the target path exists and is accessible"""
-        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 analyze(self):
-        """Perform the main analysis or operation"""
-        if self.verbose:
-            print("📊 Analyzing...")
-        
-        # Main logic here
-        self.results['status'] = 'success'
-        self.results['target'] = str(self.target_path)
-        self.results['findings'] = []
-        
-        # Add analysis results
-        if self.verbose:
-            print(f"✓ Analysis complete: {len(self.results.get('findings', []))} findings")
-    
-    def generate_report(self):
-        """Generate and display the report"""
-        print("\n" + "="*50)
-        print("REPORT")
-        print("="*50)
-        print(f"Target: {self.results.get('target')}")
-        print(f"Status: {self.results.get('status')}")
-        print(f"Findings: {len(self.results.get('findings', []))}")
-        print("="*50 + "\n")
-
-def main():
-    """Main entry point"""
-    parser = argparse.ArgumentParser(
-        description="Project Scaffolder"
-    )
-    parser.add_argument(
-        'target',
-        help='Target path to analyze or process'
-    )
-    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()
-    
-    tool = ProjectScaffolder(
-        args.target,
-        verbose=args.verbose
-    )
-    
-    results = tool.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/seo-aeo-landing-page-writer/SKILL.md

@@ -1,97 +0,0 @@
----
-name: seo-aeo-landing-page-writer
-description: "Writes complete, structured landing pages optimized for SEO ranking, AEO citation, and visitor conversion / Penulis landing page terstruktur untuk peringkat SEO, sitasi AEO, dan konversi."
-author: "Roedy Rustam"
----
-
-# SEO-AEO Landing Page Writer
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Overview
-Generates a full, publish-ready landing page following a defined section order with SEO heading structure, AEO extraction blocks, FAQ section, comparison table, social proof, and conversion-focused CTAs. Every section serves a specific purpose in a narrative arc that moves the visitor from awareness to action.
-
-### Trigger Conditions
-Use this skill when:
-- Building a landing page for a new product or service.
-- An existing landing page needs a full SEO and AEO rewrite.
-- You need a page that can be cited by AI engines like Perplexity or ChatGPT.
-- You want conversion copy that leads with pain before pitching the product.
-
-### How It Works (Step-by-Step)
-1. **Map Inputs**: Extract product name, audience, primary keyword, pain points, features, benefits, USPs, social proof, and CTAs.
-2. **Write AEO Extraction Sentence**: Write one 25–40 word sentence that answers "What is [product]?" — standalone, no jargon, placed in a blockquote immediately after the H1. This is the sentence AI engines extract.
-3. **Follow the Narrative Arc**: Write sections in this exact order:
-   - Hero — H1 + AEO sentence + CTA
-   - Problem — Audience pain, no product mention yet
-   - Solution — Introduce product as the answer
-   - Features as Benefits — Table format
-   - Social Proof — Testimonials, logos, stats
-   - Mid-page CTA
-   - How It Works — Numbered steps
-   - Comparison — Table with honest competitor comparison
-   - FAQ — Minimum 6 entries, each under 50 words
-   - Trust Signals
-   - Final CTA
-
-### Best Practices & Pitfalls
-- **Empathy First**: Write the problem section before mentioning the product — empathy first.
-- **AEO Block**: Place the AEO extraction sentence in a blockquote immediately after H1.
-- **FAQ Limits**: Every FAQ answer must be under 50 words and self-contained.
-- **Tone**: Do not use "revolutionary", "game-changing", or "best-in-class".
-- **CTA**: Do not use "Submit" or "Click Here" as CTA button text.
-
-### Layout & UI Aesthetic (Monday.com Inspired)
-- Design the landing page with a modern, spacious aesthetic (see `monday-design-aesthetic` skill).
-- Use generous vertical padding (80-120px) between narrative sections.
-- Display features as benefits using large, rounded cards (12-16px radius) with subtle drop shadows.
-- Keep the background clean white or light gray, using a vibrant brand color for CTA buttons.
-
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Ringkasan
-Menghasilkan landing page lengkap yang siap dipublikasikan dengan struktur heading SEO, blok ekstraksi AEO, bagian FAQ, tabel perbandingan, bukti sosial (social proof), dan CTA yang berfokus pada konversi. Setiap bagian dirancang untuk memandu pengunjung dari pemahaman masalah menuju tindakan (pembelian/registrasi).
-
-### Kondisi Pemicu
-Gunakan skill ini ketika:
-- Membangun landing page untuk produk atau layanan baru.
-- Menulis ulang landing page yang ada untuk optimasi SEO dan AEO.
-- Memerlukan halaman yang dapat dengan mudah dikutip oleh mesin pencari AI (seperti Perplexity atau ChatGPT).
-- Membuat salinan konversi (conversion copy) yang menyoroti masalah pengguna sebelum memperkenalkan solusi.
-
-### Cara Kerja (Langkah demi Langkah)
-1. **Pemetaan Input**: Ekstrak nama produk, target audiens, kata kunci utama, keluhan utama pengguna, fitur, manfaat, USP, bukti sosial, dan CTA.
-2. **Tulis Kalimat Ekstraksi AEO**: Buat satu kalimat ringkas berisi 25–40 kata yang menjawab "Apa itu [produk]?" tanpa jargon, dan letakkan di dalam blockquote tepat setelah tag H1. Kalimat ini yang akan diekstraksi oleh mesin pencari AI.
-3. **Ikuti Alur Narasi**: Tulis bagian dalam urutan persis seperti berikut:
-   - Hero — H1 + Kalimat AEO + CTA
-   - Problem — Keluhan utama audiens (tanpa menyebutkan produk terlebih dahulu)
-   - Solution — Memperkenalkan produk sebagai jawaban masalah
-   - Features as Benefits — Tabel fitur dan manfaat
-   - Social Proof — Testimoni, logo klien, statistik
-   - Mid-page CTA — CTA tengah halaman
-   - How It Works — Langkah bernomor
-   - Comparison — Tabel perbandingan jujur dengan kompetitor
-   - FAQ — Minimal 6 entri, masing-masing di bawah 50 kata
-   - Trust Signals — Sinyal kepercayaan (garansi, enkripsi, dll.)
-   - Final CTA — CTA penutup
-
-### Praktik Terbaik & Hal yang Harus Dihindari
-- **Empati Utama**: Tulis bagian masalah terlebih dahulu sebelum menyebutkan produk untuk membangun empati.
-- **Batasan FAQ**: Setiap jawaban FAQ harus di bawah 50 kata, mandiri, dan mudah dipahami tanpa konteks eksternal.
-- **Bahasa Jujur**: Hindari kata-kata berlebihan seperti "revolutionary", "game-changing", or "best-in-class".
-- **CTA Spesifik**: Jangan gunakan teks tombol standar seperti "Submit" atau "Click Here". Gunakan teks berorientasi tindakan (misal: "Mulai Uji Coba Gratis").
-
-### Tata Letak & Estetika UI (Inspirasi Monday.com)
-- Desain landing page dengan estetika modern dan lapang (lihat skill `monday-design-aesthetic`).
-- Gunakan padding vertikal yang lega (80-120px) di antara setiap bagian narasi.
-- Tampilkan fitur sebagai manfaat (features as benefits) menggunakan kartu bersudut melengkung besar (radius 12-16px) dengan efek bayangan halus.
-- Jaga latar belakang tetap putih bersih atau abu-abu terang, menggunakan warna merek yang cerah untuk tombol CTA.

package/skills/seo-geo/SKILL.md

@@ -1,188 +0,0 @@
----
-name: seo-geo
-description: "Generative Engine Optimization (GEO) for AI Overviews, ChatGPT, and Perplexity / Optimasi Mesin Pencari Generatif (GEO) untuk AI Overviews, ChatGPT, dan Perplexity."
-author: "Roedy Rustam"
----
-
-# SEO-GEO Expert (2026 — AI Mode Edition)
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-Generative Engine Optimization (GEO) for the 2026 AI-powered search landscape — Google AI Mode (successor to AI Overviews), ChatGPT Search, Perplexity Pages, Claude.ai web search, and Grok search. Optimizes content to be cited, quoted, and recommended by AI search engines.
-
-### Trigger Conditions
-- Optimizing content to appear in Google AI Mode responses.
-- Getting cited in ChatGPT Search, Perplexity, Claude web, or Grok results.
-- Adding `/llms.txt` and structured data for AI indexing.
-- Measuring GEO performance (citation rate, AI snippet appearances).
-- Optimizing for "Answer Engine" queries (who, what, how, why questions).
-
-### The 2026 AI Search Landscape
-
-| AI Engine | Source | Citable Content | Key Signal |
-|---|---|---|---|
-| **Google AI Mode** | Google index + Gemini | Yes — with source links | E-E-A-T, structured data |
-| **ChatGPT Search** | Bing index + GPT-4o | Yes — with citations | Bing ranking, freshness |
-| **Perplexity** | Real-time web crawl | Yes — prominent citations | Authority, specificity |
-| **Perplexity Pages** | User-generated long-form | Yes — auto-cited | Depth, comprehensiveness |
-| **Claude Web** | Real-time search | Yes — with URLs | Clarity, structure |
-| **Grok** | X/Twitter + web | Yes | Real-time trending |
-
-### GEO Optimization Framework
-
-#### 1. E-E-A-T Signals (Experience, Expertise, Authoritativeness, Trust)
-Google AI Mode heavily weights E-E-A-T:
-- **Author credentials**: Add `<script type="application/ld+json">` `Person` schema with credentials.
-- **Publication dates**: Always include `datePublished` and `dateModified`.
-- **Primary sources**: Cite original research, government data, and peer-reviewed studies.
-- **About page**: Clear author bios with LinkedIn/professional links.
-
-#### 2. `/llms.txt` — AI Indexing Protocol
-Add an `/llms.txt` file at your domain root — the 2026 standard for telling AI crawlers what to index:
-```
-# /llms.txt
-# AI-friendly site map for LLM indexers
-
-## Product
-- [Features](/features): Complete feature list with pricing
-- [API Docs](/docs/api): REST API reference (JSON schemas included)
-- [Changelog](/changelog): Recent updates and releases
-
-## Content
-- [Blog](/blog): Technical articles on [topic]
-- [Tutorials](/tutorials): Step-by-step guides
-
-## Company
-- [About](/about): Team, mission, and founding story
-- [Pricing](/pricing): Current plan structure
-```
-
-#### 3. Structured Data for AI Comprehension
-```html
-<!-- FAQ Schema — AI engines love Q&A format -->
-<script type="application/ld+json">
-{
-  "@context": "https://schema.org",
-  "@type": "FAQPage",
-  "mainEntity": [{
-    "@type": "Question",
-    "name": "What is [Product]?",
-    "acceptedAnswer": {
-      "@type": "Answer",
-      "text": "Concise, factual answer in 2-3 sentences that AI can quote directly."
-    }
-  }]
-}
-</script>
-
-<!-- HowTo Schema — for instructional content -->
-<script type="application/ld+json">
-{
-  "@context": "https://schema.org",
-  "@type": "HowTo",
-  "name": "How to [Task]",
-  "step": [
-    { "@type": "HowToStep", "name": "Step 1", "text": "..." },
-    { "@type": "HowToStep", "name": "Step 2", "text": "..." }
-  ]
-}
-</script>
-```
-
-#### 4. Content Formatting for AI Citation
-AI engines prefer content that is:
-- **Scannable**: Short paragraphs, headers for each concept, bullet lists.
-- **Definitive**: Declarative statements ("X is Y") over hedging ("X might be Y").
-- **Self-contained**: Each section can stand alone as a quotable snippet.
-- **Cited**: Reference authoritative sources with links.
-- **Fresh**: Updated within the last 6 months — AI engines penalize stale content.
-
-#### 5. Perplexity Pages Optimization
-Perplexity Pages are AI-generated long-form content that cites sources. To be cited in Pages:
-- Cover a topic comprehensively (> 1500 words).
-- Use clear section headers (H2/H3 for each subtopic).
-- Include statistics, data, and specific numbers.
-- Have a clear "Summary" or "TL;DR" section at the top.
-
-#### 6. ChatGPT Search Optimization
-ChatGPT Search is powered by Bing — standard Bing SEO applies, plus:
-- Ensure Bing Webmaster Tools verified and sitemap submitted.
-- OpenGraph tags properly set (`og:title`, `og:description`, `og:image`).
-- Content freshness signals (update dates, news sitemaps).
-
-#### 7. GEO Performance Measurement
-```python
-# Automated GEO tracking
-import httpx
-
-async def check_ai_citation(brand: str, queries: list[str]):
-    for query in queries:
-        # Check Perplexity
-        perp_result = await query_perplexity(query)
-        cited = brand.lower() in perp_result.lower()
-        
-        # Log citation rate per query
-        await log_metric("geo_citation", {
-            "engine": "perplexity",
-            "query": query,
-            "cited": cited,
-        })
-```
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Generative Engine Optimization (GEO) untuk lanskap pencarian bertenaga AI tahun 2026 — Google AI Mode (penerus AI Overviews), ChatGPT Search, Perplexity Pages, pencarian web Claude.ai, dan pencarian Grok. Mengoptimalkan konten agar dikutip, disebut, dan direkomendasikan oleh mesin pencari AI.
-
-### Kondisi Pemicu
-- Mengoptimalkan konten agar muncul dalam respons Google AI Mode.
-- Mendapatkan kutipan di ChatGPT Search, Perplexity, Claude web, atau hasil Grok.
-- Menambahkan `/llms.txt` dan data terstruktur untuk pengindeksan AI.
-- Mengukur performa GEO (tingkat kutipan, kemunculan AI snippet).
-- Mengoptimalkan untuk kueri "Answer Engine" (pertanyaan siapa, apa, bagaimana, mengapa).
-
-### Lanskap Pencarian AI 2026
-
-| Mesin AI | Sumber | Konten yang Dapat Dikutip | Sinyal Kunci |
-|---|---|---|---|
-| **Google AI Mode** | Indeks Google + Gemini | Ya — dengan tautan sumber | E-E-A-T, data terstruktur |
-| **ChatGPT Search** | Indeks Bing + GPT-4o | Ya — dengan kutipan | Peringkat Bing, kesegaran |
-| **Perplexity** | Crawl web real-time | Ya — kutipan menonjol | Otoritas, spesifisitas |
-| **Perplexity Pages** | Konten panjang yang dibuat AI | Ya — dikutip otomatis | Kedalaman, komprehensivitas |
-| **Claude Web** | Pencarian real-time | Ya — dengan URL | Kejelasan, struktur |
-
-### Kerangka Optimasi GEO
-
-#### 1. Sinyal E-E-A-T
-Google AI Mode sangat mempertimbangkan E-E-A-T: kredensial penulis (schema `Person`), tanggal publikasi, kutipan dari sumber primer, dan halaman About yang jelas.
-
-#### 2. `/llms.txt` — Protokol Pengindeksan AI
-Tambahkan file `/llms.txt` di root domain Anda — standar 2026 untuk memberi tahu crawler AI apa yang harus diindeks. Mirip `robots.txt` tetapi untuk LLM.
-
-#### 3. Data Terstruktur untuk Pemahaman AI
-Gunakan schema `FAQPage` untuk konten Q&A dan `HowTo` untuk konten instruksional — format yang paling disukai mesin AI untuk dikutip.
-
-#### 4. Format Konten untuk Kutipan AI
-- Paragraf pendek, header untuk setiap konsep, daftar poin.
-- Pernyataan definitif ("X adalah Y") bukan hedging ("X mungkin Y").
-- Setiap seksi dapat berdiri sendiri sebagai snippet yang dapat dikutip.
-- Sertakan statistik, data, dan angka spesifik.
-- Diperbarui dalam 6 bulan terakhir.
-
-#### 5. Optimasi Perplexity Pages
-Tulis konten yang komprehensif (> 1500 kata), gunakan header seksi yang jelas, sertakan statistik dan angka spesifik, dan sertakan ringkasan "TL;DR" di bagian atas.
-
-#### 6. Optimasi ChatGPT Search
-ChatGPT Search didukung oleh Bing — SEO Bing standar berlaku. Verifikasi di Bing Webmaster Tools, submit sitemap, dan pastikan tag OpenGraph diatur dengan benar.
-
-#### 7. Pengukuran Performa GEO
-Lacak tingkat kutipan merek Anda per mesin AI per query secara otomatis untuk memantau visibilitas AI dari waktu ke waktu.

package/skills/ui_ux_expert/SKILL.md

@@ -1,125 +0,0 @@
----
-name: ui-ux-expert
-description: "UI/UX Designer & Frontend Specialist / UI/UX Designer & Spesialis Frontend."
-author: "Roedy Rustam"
----
-
-# UI/UX Expert
-
-[English](#english) | [Bahasa Indonesia](#bahasa-indonesia)
-
----
-
-<a name="english"></a>
-## English
-
-### Description
-This skill establishes Antigravity as a **UI/UX Designer & Frontend Specialist** focusing on building responsive web applications for Desktop and Tablet (landscape 1080x720 px). Prioritizes clean, user-friendly, consistent, responsive, and adaptive layouts.
-
-### Trigger Conditions
-Active when the user requests help with:
-- UI/UX Design.
-- Layouts and grid systems.
-- Designing responsive web components.
-- Frontend development (HTML/CSS/JS).
-- Creating wireframes or mockups.
-
-### UI (User Interface) Skills
-- **Layout & Grid**: Use CSS Grid/Flexbox, max container width of 1080px, and consistent spacing (8px system).
-- **Typography**: Maximum 2–3 fonts with clear hierarchy (H1: 24–32px, H2: 18–24px, Body: 14–16px).
-- **Color System**: Define Primary, Secondary, and Neutral colors with proper WCAG contrast accessibility.
-- **Reusable Components**: Design modular buttons, cards, navbars, form inputs, and modals.
-
-### UX (User Experience) Skills
-- **Responsiveness Strategy**: Focus breakpoints on Desktop (≥1080px) and Tablet Landscape (768px – 1080px).
-- **Navigation**: Easy-to-reach sidebar/topbar navigation, ensuring user journeys require no more than 3 clicks to their destination.
-- **Usability & Interaction**: Prioritize simplicity and clarity. Implement responsive hover states and clear interaction feedback (loading states, success/error messages).
-- **Cognitive Load Reduction**: Implement Progressive Disclosure. Do not overwhelm the user with all settings/buttons at once. Hide advanced features behind "Advanced" accordions or dropdowns.
-
-### Modern SaaS Design Guidelines (Next-Gen Aesthetic)
-- **Visual Aesthetic**: Move beyond flat design. Implement Premium styles like **Glassmorphism** (translucent backgrounds with `backdrop-blur-md`), dynamic Aurora gradients, or Bento Grid layouts. Backgrounds should feel spatial and alive.
-- **Typography**: Geometric sans-serif fonts with high contrast (extra-bold 48-60px for hero, medium 16-18px for body in muted gray `#676879`).
-- **Components**: Rounded corners for buttons (~8px) and large radius for cards (~12-16px) with subtle drop shadows (`shadow-sm` to `shadow-xl` for elevation).
-- **Layout Flow**: Centered content with a max-width of 1200-1400px and very generous vertical section padding (80-120px) to create a premium feel.
-
-### Modern & Professional Dashboard Design Guidelines
-- **Dashboard Layout**: 
-  - **Sidebar**: Collapsible navigation bar (240px–280px width open, 64px–80px collapsed). Use semantic `<aside>`, sticky positioning, clear division between top (logo/brand), middle (navigation links), and bottom (user settings/logout).
-  - **Header (Topbar)**: Sticky header with breadcrumbs, search, notification icon, and profile menu.
-  - **Main Content**: Structured layout utilizing CSS Grid or Flexbox, max-width wrapper, and consistent padding (e.g., 24px/p-6).
-- **Metric Cards (KPIs)**:
-  - Place primary metric summaries at the top (usually 3–4 columns grid).
-  - Structure: Label (subtle gray), Value (large, bold/semibold, e.g., 24px–32px), Trend Indicator (green positive percentage with arrow up, red negative percentage with arrow down, or gray neutral), and an optional descriptive icon.
-- **Charts & Data Visualization**:
-  - Keep charts clean: minimal grid lines, legible labels, custom responsive tooltips, and clear legends.
-  - Use colors from the primary/secondary theme. Avoid overloading with too many colors (max 5 variables in a pie/bar chart).
-- **Data Tables & Lists**:
-  - Implement structured, highly legible tables with sticky headers for scrolling.
-  - Support essential table controls: search, sorting, filtering, row selection, pagination, and bulk actions.
-- **Visual Aesthetics & Spacing**:
-  - Background: Off-white/slate-50 (`#F8FAFC`) in light mode, dark-zinc/slate-950 (`#09090B` or `#020617`) in dark mode.
-  - Cards: Pure white (`#FFFFFF`) or dark slate-900 (`#1E293B`) cards with subtle borders (`1px border-slate-100/200`) and soft shadows (`shadow-sm` or `shadow-md`).
-  - Font: Clean, legible Sans-serif typography (e.g., Inter, Outfit, Plus Jakarta Sans).
-
----
-
-<a name="bahasa-indonesia"></a>
-## Bahasa Indonesia
-
-### Deskripsi
-Skill ini menjadikan Antigravity sebagai **UI/UX Designer & Frontend Specialist** yang berfokus pada pembuatan web aplikasi responsif untuk Desktop dan Tablet (landscape 1080x720 px). Mengutamakan desain yang bersih, mudah digunakan, konsisten, responsif, dan adaptif.
-
-### Kondisi Pemicu
-Aktif ketika pengguna meminta bantuan terkait:
-- Desain UI/UX.
-- Layout dan grid system.
-- Pembuatan komponen web responsif.
-- Frontend development (HTML/CSS/JS).
-- Pembuatan wireframe atau mockup.
-
-### Kemampuan UI (User Interface)
-- **Layout & Grid**: Gunakan CSS Grid/Flexbox, container width maksimal 1080px, dan spacing konsisten (8px system).
-- **Tipografi**: Maksimal 2–3 font dengan hierarki ukuran yang jelas (H1: 24–32px, H2: 18–24px, Body: 14–16px).
-- **Sistem Warna**: Tentukan warna Primary, Secondary, dan Neutral dengan kontras aksesibilitas WCAG yang memadai.
-- **Komponen Reusable**: Buat button, card, navbar, form input, dan modal yang modular dan dapat digunakan kembali.
-
-### Kemampuan UX (User Experience)
-- **Strategi Responsif**: Breakpoint fokus pada Desktop (≥1080px) dan Tablet Landscape (768px – 1080px).
-- **Navigasi**: Navigasi sidebar/topbar yang mudah dijangkau, dengan alur tidak lebih dari 3 klik ke tujuan.
-- **Usability & Interaction**: Utamakan kesederhanaan dan kejelasan, buat hover state yang responsif, dan sediakan feedback interaksi seperti loading state dan status sukses/error.
-
-### Panduan Desain SaaS Modern (Estetika Next-Gen)
-- **Estetika Visual**: Tinggalkan desain *flat* yang membosankan. Gunakan gaya Premium seperti **Glassmorphism** (latar tembus pandang dengan `backdrop-blur-md`), gradasi dinamis Aurora, atau tata letak Bento Grid. Latar belakang harus terasa spasial dan hidup.
-- **Tipografi**: Font sans-serif geometris dengan kontras tinggi (sangat tebal 48-60px untuk hero, sedang 16-18px abu-abu redup `#676879` untuk teks isi).
-- **Komponen**: Sudut melengkung untuk tombol (~8px) dan radius besar untuk kartu (~12-16px) dengan efek bayangan halus yang memperlihatkan elevasi.
-- **Alur Tata Letak**: Konten terpusat dengan lebar maksimal 1200-1400px serta padding vertikal antar bagian yang sangat lega (80-120px) untuk kesan premium.
-
-### Panduan Desain Dashboard Modern & Profesional
-- **Tata Letak Dashboard (Layout)**:
-  - **Sidebar**: Bar navigasi samping yang dapat dilipat/collapsible (lebar 240px–280px saat terbuka, 64px–80px saat tertutup). Gunakan elemen semantik `<aside>`, sticky positioning, dan pembagian area yang jelas (atas: logo, tengah: navigasi, bawah: profil/setting).
-  - **Header (Topbar)**: Header sticky yang memuat breadcrumbs, kolom pencarian, ikon notifikasi, dan menu profil.
-  - **Main Content**: Area konten utama menggunakan CSS Grid/Flexbox dengan padding konsisten (misal: 24px/p-6).
-- **Kartu Metrik (KPI Cards)**:
-  - Letakkan ringkasan metrik utama di bagian paling atas (biasanya grid 3–4 kolom).
-  - Struktur: Label metrik (abu-abu halus), Nilai utama (besar dan tebal, misal: 24px–32px), Indikator Tren (persentase positif warna hijau dengan panah ke atas, persentase negatif warna merah dengan panah ke bawah), dan ikon penjelas.
-- **Visualisasi Data & Grafik (Charts)**:
-  - Desain grafik yang bersih: kurangi grid lines yang tidak perlu, label yang mudah dibaca, tooltip interaktif, dan legenda yang jelas.
-  - Gunakan warna aksen sesuai dengan tema palet dashboard. Hindari terlalu banyak warna (maksimal 5 warna dalam satu grafik).
-- **Tabel Data & List**:
-  - Tampilkan data dalam tabel dengan header yang *sticky* saat di-scroll dan legibilitas tinggi.
-  - Sediakan kontrol dasar: pencarian, pengurutan (sorting), penyaringan (filtering), seleksi baris, paginasi, dan aksi massal (bulk actions).
-- **Estetika Visual & Spacing**:
-  - Latar Belakang (Background): Off-white/slate-50 (`#F8FAFC`) pada mode terang, dark-zinc/slate-950 (`#09090B` atau `#020617`) pada mode gelap.
-  - Kartu (Cards): Berwarna putih bersih (`#FFFFFF`) atau dark slate-900 (`#1E293B`) dengan border halus (`1px border-slate-100/200`) serta drop shadow lembut (`shadow-sm` atau `shadow-md`).
-  - Tipografi: Gunakan font Sans-serif yang sangat terbaca (seperti Inter, Outfit, Plus Jakarta Sans).
-
-
----
-### 🎨 Automatic Visual Assets Generation Mandate (CRITICAL)
-**MANDATORY**: Whenever you are building a new application, scaffolding a project, or finalizing the initial UI/UX, you MUST automatically use the `generate_image` tool to create a custom logo that perfectly matches the application's core concept and aesthetic. 
-This generated image MUST be explicitly used as:
-1. The primary application logo (e.g., in the header/navbar).
-2. The website favicon (`favicon.ico` or equivalent).
-3. The Open Graph (OG) image for SEO metadata (`og:image`).
-
-Do not use placeholders for these assets. Generate and integrate them automatically.