npm - @hybridlabor-api/bdb-antigravity-skills - Versions diffs - 1.1.8 → 1.1.9 - Mend

@hybridlabor-api/bdb-antigravity-skills 1.1.8 → 1.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1830) hide show

package/Project-overview.html ADDED Viewed

@@ -0,0 +1,855 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BDB DEV - Universal AI Creative OS</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --bg-base: #030305;
+            --bg-surface: rgba(255, 255, 255, 0.02);
+            --bg-surface-hover: rgba(255, 255, 255, 0.04);
+            --border-subtle: rgba(255, 255, 255, 0.06);
+            --border-highlight: rgba(255, 255, 255, 0.15);
+            --brand-primary: #FF2E93;
+            --brand-secondary: #00F0FF;
+            --brand-tertiary: #7000FF;
+            --text-high: #FFFFFF;
+            --text-medium: #A1A1AA;
+            --text-low: #71717A;
+            --radius-md: 12px;
+            --radius-lg: 20px;
+            --radius-xl: 32px;
+            --blur-md: blur(12px);
+            --blur-lg: blur(24px);
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            -webkit-font-smoothing: antialiased;
+        }
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: var(--bg-base);
+            color: var(--text-high);
+            line-height: 1.6;
+            overflow-x: hidden;
+            position: relative;
+        }
+        /* Dynamic Gradients */
+        .ambient-glow {
+            position: fixed;
+            width: 80vw;
+            height: 80vh;
+            border-radius: 50%;
+            background: radial-gradient(circle, var(--brand-tertiary) 0%, transparent 60%);
+            opacity: 0.15;
+            top: -20%;
+            left: -10%;
+            pointer-events: none;
+            z-index: -2;
+            filter: blur(100px);
+        }
+        .ambient-glow-2 {
+            position: fixed;
+            width: 60vw;
+            height: 60vh;
+            border-radius: 50%;
+            background: radial-gradient(circle, var(--brand-secondary) 0%, transparent 60%);
+            opacity: 0.1;
+            bottom: -10%;
+            right: -10%;
+            pointer-events: none;
+            z-index: -2;
+            filter: blur(80px);
+        }
+        /* Grid Pattern */
+        .grid-overlay {
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background-image:
+                linear-gradient(var(--border-subtle) 1px, transparent 1px),
+                linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
+            background-size: 50px 50px;
+            mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
+            -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 90%);
+            z-index: -1;
+            pointer-events: none;
+            opacity: 0.5;
+        }
+        /* Typography */
+        h1, h2, h3, h4 {
+            line-height: 1.2;
+            letter-spacing: -0.02em;
+        }
+        .gradient-text {
+            background: linear-gradient(135deg, var(--text-high) 0%, var(--text-medium) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .gradient-text-brand {
+            background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        /* Layout */
+        .container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 0 40px;
+        }
+        header {
+            padding: 40px 0;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid var(--border-subtle);
+            margin-bottom: 60px;
+        }
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 800;
+            letter-spacing: -1px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .version-badge {
+            background: rgba(255,255,255,0.05);
+            padding: 4px 10px;
+            border-radius: 8px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.8rem;
+            color: var(--brand-secondary);
+            border: 1px solid var(--border-subtle);
+        }
+        /* Sections */
+        section {
+            margin-bottom: 100px;
+        }
+        .section-header {
+            margin-bottom: 40px;
+        }
+        .section-header h2 {
+            font-size: 2.5rem;
+            font-weight: 600;
+            margin-bottom: 16px;
+        }
+        .section-header p {
+            color: var(--text-medium);
+            font-size: 1.1rem;
+            max-width: 600px;
+        }
+        /* Cards */
+        .glass-panel {
+            background: var(--bg-surface);
+            border: 1px solid var(--border-subtle);
+            border-radius: var(--radius-lg);
+            padding: 40px;
+            backdrop-filter: var(--blur-md);
+            -webkit-backdrop-filter: var(--blur-md);
+            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
+            position: relative;
+            overflow: hidden;
+        }
+        .glass-panel::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+            opacity: 0;
+            transition: opacity 0.3s;
+        }
+        .glass-panel:hover {
+            transform: translateY(-4px);
+            border-color: var(--border-highlight);
+        }
+        .glass-panel:hover::before {
+            opacity: 1;
+        }
+        /* Installation Manual */
+        .manual-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+        }
+        .code-block {
+            background: #000;
+            border: 1px solid var(--border-subtle);
+            border-radius: var(--radius-md);
+            padding: 20px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.9rem;
+            color: var(--brand-secondary);
+            overflow-x: auto;
+            margin-top: 16px;
+        }
+        .code-block span.comment { color: var(--text-low); }
+        .code-block span.keyword { color: var(--brand-primary); }
+        /* MCP Grid */
+        .mcp-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 24px;
+        }
+        .mcp-card {
+            padding: 30px;
+            display: flex;
+            flex-direction: column;
+            gap: 16px;
+        }
+        .mcp-icon {
+            width: 48px;
+            height: 48px;
+            border-radius: 12px;
+            background: linear-gradient(135deg, var(--brand-tertiary), var(--brand-primary));
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 24px;
+            box-shadow: 0 8px 32px rgba(112, 0, 255, 0.3);
+        }
+        .mcp-card h3 {
+            font-size: 1.4rem;
+        }
+        .mcp-card p {
+            color: var(--text-medium);
+            font-size: 0.95rem;
+            flex-grow: 1;
+        }
+        .tag-row {
+            display: flex;
+            gap: 8px;
+            flex-wrap: wrap;
+        }
+        .tag {
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            padding: 4px 10px;
+            background: rgba(255,255,255,0.05);
+            border: 1px solid var(--border-subtle);
+            border-radius: 6px;
+            color: var(--text-medium);
+        }
+        /* Use Cases */
+        .usecase-layout {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 40px;
+        }
+        .usecase-item {
+            display: flex;
+            gap: 20px;
+            align-items: flex-start;
+        }
+        .usecase-num {
+            font-size: 3rem;
+            font-weight: 800;
+            color: transparent;
+            -webkit-text-stroke: 1px var(--border-highlight);
+            line-height: 0.8;
+            transition: all 0.3s;
+        }
+        .usecase-item:hover .usecase-num {
+            -webkit-text-stroke: 1px var(--brand-primary);
+            color: rgba(255, 46, 147, 0.1);
+        }
+        .usecase-content h4 {
+            font-size: 1.2rem;
+            margin-bottom: 8px;
+        }
+        .usecase-content p {
+            color: var(--text-medium);
+            font-size: 0.95rem;
+        }
+        /* Interactive Explorer */
+        .explorer-layout {
+            display: grid;
+            grid-template-columns: 260px 1fr;
+            gap: 40px;
+            align-items: start;
+        }
+        .sidebar-nav {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            position: sticky;
+            top: 40px;
+        }
+        .filter-btn {
+            background: transparent;
+            border: 1px solid transparent;
+            color: var(--text-medium);
+            padding: 12px 20px;
+            text-align: left;
+            border-radius: var(--radius-md);
+            font-family: inherit;
+            font-size: 0.95rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .filter-btn:hover {
+            background: var(--bg-surface);
+            color: var(--text-high);
+        }
+        .filter-btn.active {
+            background: rgba(0, 240, 255, 0.1);
+            color: var(--brand-secondary);
+            border-color: rgba(0, 240, 255, 0.2);
+        }
+        .search-bar {
+            width: 100%;
+            background: var(--bg-surface);
+            border: 1px solid var(--border-subtle);
+            padding: 16px 24px;
+            border-radius: var(--radius-md);
+            color: var(--text-high);
+            font-family: inherit;
+            font-size: 1rem;
+            margin-bottom: 30px;
+            outline: none;
+            transition: border-color 0.3s;
+        }
+        .search-bar:focus {
+            border-color: var(--brand-secondary);
+        }
+        .skills-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 20px;
+        }
+        .skill-item {
+            background: var(--bg-surface);
+            border: 1px solid var(--border-subtle);
+            border-radius: var(--radius-md);
+            padding: 24px;
+            transition: all 0.3s;
+            cursor: pointer;
+        }
+        .skill-item:hover {
+            border-color: var(--border-highlight);
+            transform: translateY(-2px);
+        }
+        .skill-cat-label {
+            font-size: 0.7rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--brand-primary);
+            margin-bottom: 8px;
+            font-weight: 600;
+        }
+        .skill-item h4 {
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 1rem;
+            margin-bottom: 12px;
+            word-break: break-word;
+        }
+        .skill-item p {
+            color: var(--text-medium);
+            font-size: 0.85rem;
+            display: -webkit-box;
+            -webkit-line-clamp: 3;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+        }
+        /* Modal */
+        .modal-overlay {
+            position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background: rgba(0,0,0,0.8);
+            backdrop-filter: blur(8px);
+            -webkit-backdrop-filter: blur(8px);
+            z-index: 100;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s;
+        }
+        .modal-overlay.active {
+            opacity: 1;
+            pointer-events: auto;
+        }
+        .modal-content {
+            background: var(--bg-base);
+            border: 1px solid var(--border-highlight);
+            border-radius: var(--radius-lg);
+            width: 90%;
+            max-width: 600px;
+            padding: 40px;
+            transform: scale(0.95) translateY(10px);
+            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+            position: relative;
+        }
+        .modal-overlay.active .modal-content {
+            transform: scale(1) translateY(0);
+        }
+        .modal-close {
+            position: absolute;
+            top: 24px; right: 24px;
+            background: transparent;
+            border: none;
+            color: var(--text-medium);
+            font-size: 1.5rem;
+            cursor: pointer;
+            transition: color 0.2s;
+        }
+        .modal-close:hover { color: var(--text-high); }
+        @media (max-width: 900px) {
+            .manual-grid, .usecase-layout, .explorer-layout {
+                grid-template-columns: 1fr;
+            }
+            .sidebar-nav {
+                flex-direction: row;
+                overflow-x: auto;
+                padding-bottom: 10px;
+                position: static;
+            }
+            .filter-btn {
+                white-space: nowrap;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="ambient-glow"></div>
+    <div class="ambient-glow-2"></div>
+    <div class="grid-overlay"></div>
+    <div class="container">
+        <header>
+            <div class="logo">
+                BDB<span class="gradient-text-brand">OS</span>
+                <div class="version-badge">v1.1.9</div>
+            </div>
+            <div style="display: flex; gap: 24px; font-size: 0.9rem; color: var(--text-medium);">
+                <div><strong>142</strong> Skills</div>
+                <div><strong>9</strong> MCP Servers</div>
+                <div><strong>Universal</strong> Agent Support</div>
+            </div>
+        </header>
+        <!-- Installation Manual -->
+        <section>
+            <div class="section-header">
+                <h2>Installation Manual</h2>
+                <p>Deploy the BDB Creative OS to any AI Agent environment (Antigravity, Claude, Cursor, Windsurf, Roo Code, Cline, Aider, or custom frameworks). The smart installer auto-scans your system or allows fully manual custom path specification.</p>
+            </div>
+            <div class="manual-grid">
+                <div class="glass-panel">
+                    <h3>One-Command Setup</h3>
+                    <p style="color: var(--text-medium); margin-top: 10px;">Run the interactive installer via NPM. It will auto-scan your system for active configurations and prompt you for custom targets or merge modes.</p>
+                    <div class="code-block">
+                        <span class="comment"># Works on macOS, Windows, Linux</span><br>
+                        <span class="keyword">npx</span> @hybridlabor-api/bdb-antigravity-skills
+                    </div>
+                </div>
+                <div class="glass-panel">
+                    <h3>Supported & Auto-Detected Environments</h3>
+                    <ul style="color: var(--text-medium); margin-top: 16px; margin-left: 20px; display: flex; flex-direction: column; gap: 8px;">
+                        <li><strong>Google Antigravity:</strong> Target: <code>~/.gemini/config/</code>.</li>
+                        <li><strong>Claude Desktop & Code:</strong> Automatically wires into <code>claude_desktop_config.json</code>.</li>
+                        <li><strong>Cursor, Windsurf, Roo Code, Cline:</strong> Configures workspace folders or global mcp JSON configurations.</li>
+                        <li><strong>Custom Path Mode:</strong> Provide target paths manually for any developer agents (e.g. ChatGPT Codex, Aider, custom python frameworks).</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+        <!-- MCP Overview -->
+        <section>
+            <div class="section-header">
+                <h2>Model Context Protocol (MCP)</h2>
+                <p>BDB OS includes custom-built, production-ready MCP servers that allow your AI to directly manipulate creative hardware and software.</p>
+            </div>
+            <div class="mcp-grid">
+                <!-- Unreal -->
+                <div class="glass-panel mcp-card">
+                    <div class="mcp-icon">🎮</div>
+                    <h3>Unreal Engine 5</h3>
+                    <p>Native HTTP Web Remote Control integration. Allows the AI to spawn actors, modify material parameters, and structure scenes.</p>
+                    <div class="tag-row">
+                        <span class="tag">Python 3</span>
+                        <span class="tag">Web Remote</span>
+                    </div>
+                </div>
+                <!-- Adobe -->
+                <div class="glass-panel mcp-card">
+                    <div class="mcp-icon">🎨</div>
+                    <h3>Adobe Suite</h3>
+                    <p>Uses a Node.js WebSocket proxy bridging to native UXP plugins for Photoshop and Premiere. Avoids sluggish AppleScript.</p>
+                    <div class="tag-row">
+                        <span class="tag">Node.js</span>
+                        <span class="tag">UXP</span>
+                    </div>
+                </div>
+                <!-- grandMA3 -->
+                <div class="glass-panel mcp-card">
+                    <div class="mcp-icon">💡</div>
+                    <h3>grandMA3</h3>
+                    <p>Lighting console integration via WebAPI and OSC sockets. AI can trigger macros, patch fixtures, and cue lists.</p>
+                    <div class="tag-row">
+                        <span class="tag">OSC</span>
+                        <span class="tag">Lua Bridge</span>
+                    </div>
+                </div>
+                <!-- Resolume -->
+                <div class="glass-panel mcp-card">
+                    <div class="mcp-icon">🎛️</div>
+                    <h3>Resolume Arena</h3>
+                    <p>Direct VJ software manipulation via Arena REST API. AI can trigger clips, clear layers, and adjust composition effects.</p>
+                    <div class="tag-row">
+                        <span class="tag">REST</span>
+                        <span class="tag">VJ</span>
+                    </div>
+                </div>
+                <!-- TouchDesigner -->
+                <div class="glass-panel mcp-card">
+                    <div class="mcp-icon">⛓️</div>
+                    <h3>TouchDesigner</h3>
+                    <p>MindDesigner nodes network manipulation. AI can construct TOP/CHOP chains and backup parameter states.</p>
+                    <div class="tag-row">
+                        <span class="tag">Python</span>
+                        <span class="tag">TD</span>
+                    </div>
+                </div>
+                <!-- Browser -->
+                <div class="glass-panel mcp-card">
+                    <div class="mcp-icon">🌐</div>
+                    <h3>Firecrawl & Chrome</h3>
+                    <p>Advanced web scraping and live Chrome DevTools integration for automated browser testing and interaction.</p>
+                    <div class="tag-row">
+                        <span class="tag">Puppeteer</span>
+                        <span class="tag">Scraping</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Use Cases -->
+        <section>
+            <div class="section-header">
+                <h2>Use Case Examples</h2>
+                <p>How the Skills and MCPs combine to create autonomous creative workflows.</p>
+            </div>
+            <div class="usecase-layout">
+                <div class="usecase-item">
+                    <div class="usecase-num">01</div>
+                    <div class="usecase-content">
+                        <h4>Generative Stage Visuals</h4>
+                        <p>Ask the agent to "Create a rhythmic VJ loop". It will use <strong>Resolume MCP</strong> to clear layers, load clips, and sync BPM, while using the <strong>Brainstorming skill</strong> to design the aesthetic flow.</p>
+                    </div>
+                </div>
+                <div class="usecase-item">
+                    <div class="usecase-num">02</div>
+                    <div class="usecase-content">
+                        <h4>End-to-End Landing Pages</h4>
+                        <p>Tell the agent to "Build a site inspired by Apple". It triggers <strong>Firecrawl</strong> to scrape references, uses <strong>ui-ux-pro-max</strong> to ensure glassmorphic premium design, and writes the Next.js code.</p>
+                    </div>
+                </div>
+                <div class="usecase-item">
+                    <div class="usecase-num">03</div>
+                    <div class="usecase-content">
+                        <h4>Automated Show Lighting</h4>
+                        <p>Command: "Patch 12 moving heads and create a red chase." The agent uses <strong>grandMA3 MCP</strong> to patch the fixtures via OSC and write the sequence into the console automatically.</p>
+                    </div>
+                </div>
+                <div class="usecase-item">
+                    <div class="usecase-num">04</div>
+                    <div class="usecase-content">
+                        <h4>Batch Photoshop Edits</h4>
+                        <p>Command: "Export all layers with a blue tint." The agent communicates through the <strong>Adobe UXP MCP</strong> WebSocket bridge to execute ExtendScript logic directly inside Photoshop.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Skill Explorer -->
+        <section>
+            <div class="section-header">
+                <h2>Interactive Skill Explorer</h2>
+                <p>Browse the 142 highly curated AI instructions injected into your agent's context.</p>
+            </div>
+            <div class="explorer-layout">
+                <div class="sidebar-nav">
+                    <button class="filter-btn active" onclick="filterCategory('all')">All Skills (142)</button>
+                    <button class="filter-btn" onclick="filterCategory('custom')">BDB Orchestrators</button>
+                    <button class="filter-btn" onclick="filterCategory('mcp')">MCP & Scraping</button>
+                    <button class="filter-btn" onclick="filterCategory('frontend')">Frontend & UI/UX</button>
+                    <button class="filter-btn" onclick="filterCategory('backend')">Backend & DB</button>
+                    <button class="filter-btn" onclick="filterCategory('devops')">DevOps & Tooling</button>
+                    <button class="filter-btn" onclick="filterCategory('general')">General Utilities</button>
+                </div>
+                <div>
+                    <input type="text" class="search-bar" placeholder="Search skills..." oninput="searchSkills(this.value)">
+                    <div class="skills-grid" id="skills-container"></div>
+                </div>
+            </div>
+        </section>
+    </div>
+    <!-- Modal -->
+    <div class="modal-overlay" id="skill-modal" onclick="closeModal()">
+        <div class="modal-content" onclick="event.stopPropagation()">
+            <button class="modal-close" onclick="closeModal()">&times;</button>
+            <div class="skill-cat-label" id="modal-cat">CATEGORY</div>
+            <h3 id="modal-title" style="font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; margin-bottom: 16px; color: var(--brand-secondary);">Skill Title</h3>
+            <p id="modal-desc" style="color: var(--text-medium); margin-bottom: 24px;">Description</p>
+            <div style="background: rgba(0,0,0,0.5); padding: 16px; border-radius: 8px; border: 1px solid var(--border-subtle); font-family: 'JetBrains Mono'; font-size: 0.85rem; color: var(--text-low);">
+                Path: <span id="modal-path" style="color: var(--text-high);">...</span>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Inline skills dataset
+        const skillsData = [
+            { name: "bdbrainstorm", desc: "Forces a comprehensive multi-agent brainstorming workflow combining debate, interactive grilling, subagent tasking, and high-end visual design.", cat: "custom", source: "Global Config" },
+            { name: "MCP_Manage", desc: "Command center skill that manages and directs whitelabeled MCP servers like grandMA3, Resolume, Unreal Engine, Rhino, DaVinci, TouchDesigner, and Puppeteer.", cat: "custom", source: "Global Config" },
+            { name: "bdb-updater", desc: "Allows agents to autonomously check NPM for new versions of this OS and update themselves via background schedule.", cat: "custom", source: "Global Config" },
+            { name: "bdb_td_minddesigner", desc: "TouchDesigner MindDesigner MCP - Builds real COMP, TOP, CHOP node networks from natural language prompts.", cat: "mcp", source: "Global Config" },
+            { name: "bdb_td_backup", desc: "TouchDesigner Control MCP - Sets node parameters and queries TouchDesigner project states.", cat: "mcp", source: "Global Config" },
+            { name: "firecrawl", desc: "Searches, scrapes, and interacts with the web via the Firecrawl CLI.", cat: "mcp", source: "Workspace Agents" },
+            { name: "firecrawl-agent", desc: "AI-powered autonomous data extraction that navigates complex sites and returns structured JSON.", cat: "mcp", source: "Workspace Agents" },
+            { name: "firecrawl-build", desc: "Integrate Firecrawl into product code for web scraping, crawling, searching, and interaction.", cat: "mcp", source: "Workspace Agents" },
+            { name: "firecrawl-build-interact", desc: "Integrate Firecrawl /interact into product code for dynamic pages and browser actions after scraping.", cat: "mcp", source: "Workspace Agents" },
+            { name: "firecrawl-build-onboarding", desc: "Get Firecrawl credentials and SDK setup into a project.", cat: "mcp", source: "Workspace Agents" },
+            { name: "firecrawl-build-scrape", desc: "Integrate Firecrawl /scrape into product code for single-page extraction.", cat: "mcp", source: "Workspace Agents" },
+            { name: "firecrawl-build-search", desc: "Integrate Firecrawl /search into product code and agent workflows.", cat: "mcp", source: "Workspace Agents" },
+            { name: "firecrawl-crawl", desc: "Bulk extract content from an entire website or site section.", cat: "mcp", source: "Workspace Agents" },
+            { name: "firecrawl-download", desc: "Download an entire website as local files — markdown, screenshots, or multiple formats per page.", cat: "mcp", source: "Workspace Agents" },
+            { name: "firecrawl-interact", desc: "Control and interact with a live browser session on any scraped page — click buttons, fill forms, navigate flows.", cat: "mcp", source: "Workspace Agents" },
+            { name: "firecrawl-map", desc: "Discover and list all URLs on a website, with optional search filtering.", cat: "mcp", source: "Workspace Agents" },
+            { name: "firecrawl-scrape", desc: "Extract clean markdown from any URL, including JavaScript-rendered SPAs.", cat: "mcp", source: "Workspace Agents" },
+            { name: "firecrawl-search", desc: "Web search with full page content extraction.", cat: "mcp", source: "Workspace Agents" },
+            { name: "ui-ux-pro-max", desc: "Comprehensive design guide for web and mobile applications with strict design taste, calibrated color, typography, spacing discipline, and animations.", cat: "frontend", source: "Global Config" },
+            { name: "design-taste-frontend", desc: "Rules for high-agency frontend interfaces, color theory, spacing, typography and motion rules.", cat: "frontend", source: "Global Config" },
+            { name: "frontend-design", desc: "Enforces senior design practices for layouts and visuals. Focuses on premium aesthetics over generic layout generation.", cat: "frontend", source: "Global Config" },
+            { name: "frontend-dev-guidelines", desc: "Architectural and performance standards for frontend development, state management, and data mutations.", cat: "frontend", source: "Global Config" },
+            { name: "react-best-practices", desc: "Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel.", cat: "frontend", source: "Global Config" },
+            { name: "react-component-performance", desc: "Diagnoses slow React components and suggests targeted performance fixes.", cat: "frontend", source: "Global Config" },
+            { name: "react-patterns", desc: "Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.", cat: "frontend", source: "Global Config" },
+            { name: "shadcn", desc: "Manages shadcn/ui components and projects, providing context, documentation, and usage patterns.", cat: "frontend", source: "Global Config" },
+            { name: "threejs-skills", desc: "Create 3D scenes, interactive experiences, and WebGL visualizations using Three.js.", cat: "frontend", source: "Global Config" },
+            { name: "spline-3d-integration", desc: "Integration instructions for adding interactive 3D scenes from Spline.design to web projects.", cat: "frontend", source: "Global Config" },
+            { name: "zustand-store-ts", desc: "Create Zustand stores following established patterns with proper TypeScript types and middleware.", cat: "frontend", source: "Global Config" },
+            { name: "database-design", desc: "Database design principles and decision-making. Schema design, indexing strategy, ORM selection.", cat: "backend", source: "Global Config" },
+            { name: "drizzle-orm-expert", desc: "Expert in Drizzle ORM for TypeScript — schema design, relational queries, migrations, and serverless integration.", cat: "backend", source: "Global Config" },
+            { name: "prisma-expert", desc: "Advanced usage of Prisma ORM, migrations, schema optimization, and relations across DB backends.", cat: "backend", source: "Global Config" },
+            { name: "neon-postgres", desc: "Neon serverless Postgres configuration, connection pooling, and branch management.", cat: "backend", source: "Global Config" },
+            { name: "using-neon", desc: "Guides for using Neon serverless Postgres features in applications.", cat: "backend", source: "Global Config" },
+            { name: "postgresql", desc: "Design a PostgreSQL-specific schema. Covers performance patterns, constraints, indexing, and advanced features.", cat: "backend", source: "Global Config" },
+            { name: "postgres-best-practices", desc: "Performance optimization, indexing, and schema design tips.", cat: "backend", source: "Global Config" },
+            { name: "vector-database-engineer", desc: "Guides for implementing vector databases (Pinecone, pgvector, Weaviate) and embedding models.", cat: "backend", source: "Global Config" },
+            { name: "rag-implementation", desc: "RAG implementation workflow covering embedding selection, chunking, and retrieval optimization.", cat: "backend", source: "Global Config" },
+            { name: "rag-engineer", desc: "Expert RAG engineering architectures.", cat: "backend", source: "Global Config" },
+            { name: "api-design-principles", desc: "REST and GraphQL API design principles for scalability and maintainability.", cat: "backend", source: "Global Config" },
+            { name: "api-patterns", desc: "Deciding between REST, GraphQL, and tRPC. Pagination, versioning, and format rules.", cat: "backend", source: "Global Config" },
+            { name: "microservices-patterns", desc: "Design patterns for distributed microservice systems, communication, and fault tolerance.", cat: "backend", source: "Global Config" },
+            { name: "cloudflare-workers-expert", desc: "Edge computing architectures using Cloudflare Workers, D1, KV, and Durable Objects.", cat: "backend", source: "Global Config" },
+            { name: "docker-expert", desc: "Containerization strategies, multi-stage builds, production configuration, and security hardening.", cat: "devops", source: "Global Config" },
+            { name: "github-actions-templates", desc: "Production-ready CI/CD workflow patterns for building, testing, and deploying.", cat: "devops", source: "Global Config" },
+            { name: "github-workflow-automation", desc: "Patterns for automating GitHub workflows with AI assistance, inspired by Gemini CLI.", cat: "devops", source: "Global Config" },
+            { name: "git-advanced-workflows", desc: "Advanced git techniques, recovery, rebasing, and clean branch management.", cat: "devops", source: "Global Config" },
+            { name: "git-pr-review", desc: "Generate clean PR descriptions automatically from git histories.", cat: "devops", source: "Global Config" },
+            { name: "github", desc: "Leverage gh CLI for managing issues, PRs, actions, and repository metadata.", cat: "devops", source: "Global Config" },
+            { name: "monorepo-management", desc: "Build and scale efficient monorepos sharing code and tooling across packages.", cat: "devops", source: "Global Config" },
+            { name: "turborepo-caching", desc: "Configure Turborepo local and remote caching for optimized build pipelines.", cat: "devops", source: "Global Config" },
+            { name: "vercel-deployment", desc: "Expert deployments for Next.js and frontend stacks to Vercel.", cat: "devops", source: "Global Config" },
+            { name: "python-pro", desc: "Expert Python 3.12+ patterns, async programming, uv, ruff, pydantic, and FastAPI.", cat: "language", source: "Global Config" },
+            { name: "python-patterns", desc: "Python coding style, framework selection, and architectural decisions.", cat: "language", source: "Global Config" },
+            { name: "python-performance-optimization", desc: "Profiling and optimizing bottlenecks using cProfile and memory diagnostics.", cat: "language", source: "Global Config" },
+            { name: "golang-pro", desc: "Modern Go patterns, interface design, testing, and performance optimization.", cat: "language", source: "Global Config" },
+            { name: "go-concurrency-patterns", desc: "Goroutines, channels, sync primitives, context, and worker pool patterns.", cat: "language", source: "Global Config" },
+            { name: "go-playwright", desc: "Browser automation using Playwright in Go environments.", cat: "language", source: "Global Config" },
+            { name: "agent-manager-skill", desc: "Manage multiple local CLI agents via tmux sessions with cron-friendly scheduling.", cat: "general", source: "Global Config" },
+            { name: "agent-memory-mcp", desc: "Persistent, searchable knowledge management for AI agents.", cat: "general", source: "Global Config" },
+            { name: "agent-orchestrator", desc: "Meta-skill coordinating skills, capability scanning, and multi-skill workflows.", cat: "general", source: "Global Config" },
+            { name: "agent-tool-builder", desc: "Guidelines for creating resilient, token-efficient MCP tool schemas.", cat: "general", source: "Global Config" },
+            { name: "ai-agent-development", desc: "Multi-agent orchestration workflow with CrewAI and LangGraph.", cat: "general", source: "Global Config" },
+            { name: "ai-product", desc: "Designing production-ready AI products with guardrails and evaluation metrics.", cat: "general", source: "Global Config" },
+            { name: "antigravity-guide", desc: "Comprehensive guide for Antigravity CLI, IDE, and configurations.", cat: "general", source: "Global Legacy" },
+            { name: "apify-lead-generation", desc: "Scrape leads from multiple social/business directories using Apify Actors.", cat: "general", source: "Global Config" },
+            { name: "apify-ultimate-scraper", desc: "AI-driven extraction using 55+ Apify Actors automatically selected.", cat: "general", source: "Global Config" },
+            { name: "architect-review", desc: "Software architect reviews for scalability, clean code, and design patterns.", cat: "general", source: "Global Config" },
+            { name: "bash-linux", desc: "Terminal patterns, pipe operations, scripting conventions, and safety flags.", cat: "general", source: "Global Config" },
+            { name: "brainstorming", desc: "Disciplined brainstorming rules to validate and refine vague requirements.", cat: "general", source: "Global Legacy" },
+            { name: "browser-automation", desc: "Web automation patterns using Playwright, anti-detection, and wait selectors.", cat: "general", source: "Global Config" },
+            { name: "clean-code", desc: " Robert C. Martin's Clean Code principles implemented for modern coding standard.", cat: "general", source: "Global Config" },
+            { name: "concise-planning", desc: "Generate brief, atomic implementation plans and checklist artifacts.", cat: "general", source: "Global Config" },
+            { name: "copywriting", desc: "High-conversion marketing copy and email frameworks without fabrication.", cat: "general", source: "Global Config" },
+            { name: "crewai", desc: "Role-based multi-agent development with the CrewAI framework.", cat: "general", source: "Global Config" },
+            { name: "debugger", desc: "Specialist debugging guidelines for fixing failures and runtime crashes.", cat: "general", source: "Global Config" },
+            { name: "deep-research", desc: "Recursive web searching and reporting agent strategy.", cat: "general", source: "Global Config" },
+            { name: "design-spells", desc: "UI design micro-interactions, gradients, animations, and typography spells.", cat: "general", source: "Global Config" },
+            { name: "documentation", desc: "Generate clean API documentations, architecture summaries, and docstrings.", cat: "general", source: "Global Config" },
+            { name: "executing-plans", desc: "Executing step-by-step plans with user checkpoints.", cat: "general", source: "Global Config" },
+            { name: "gemini-api-dev", desc: "Gemini API capabilities, prompt tokens, and multi-modal handling.", cat: "general", source: "Global Config" },
+            { name: "gemini-api-integration", desc: "Integrating Gemini SDK, function calling, structured JSON output, and streaming.", cat: "general", source: "Global Config" },
+            { name: "geo-fundamentals", desc: "Optimization for AI search engines (Generative Engine Optimization).", cat: "general", source: "Global Config" },
+            { name: "google-sheets-automation", desc: "Interact with Google Sheets API directly with OAuth credentials.", cat: "general", source: "Global Config" },
+            { name: "landing-page-generator", desc: "Generates high-converting Next.js layouts using conversion copy frameworks.", cat: "general", source: "Global Config" },
+            { name: "linear-claude-skill", desc: "Manage Linear project spaces, issues, tasks, and teams.", cat: "general", source: "Global Config" },
+            { name: "llm-app-patterns", desc: "Production patterns for LLM chains, evaluation, and prompt templates.", cat: "general", source: "Global Config" },
+            { name: "llm-application-dev-ai-assistant", desc: "Building intelligent chatbots and conversational interfaces.", cat: "general", source: "Global Config" },
+            { name: "llm-prompt-optimizer", desc: "Optimizing prompts to save tokens and improve deterministic results.", cat: "general", source: "Global Config" },
+            { name: "llm-structured-output", desc: "Enforce JSON output schemas on Anthropic, OpenAI, and Gemini models.", cat: "general", source: "Global Config" },
+            { name: "local-llm-expert", desc: "Running local models with Ollama, llama.cpp, and memory optimizations.", cat: "general", source: "Global Config" },
+            { name: "modern-javascript-patterns", desc: "ES6+, functional JS, memory optimization, and modern runtime architecture.", cat: "general", source: "Global Config" },
+            { name: "n8n-code-javascript", desc: "Write Javascript scripts inside n8n Code nodes using $json context.", cat: "general", source: "Global Config" },
+            { name: "n8n-code-python", desc: "Write Python scripts inside n8n Code nodes.", cat: "general", source: "Global Config" },
+            { name: "n8n-expression-syntax", desc: "Validate and troubleshoot double-curly syntax expressions in n8n.", cat: "general", source: "Global Config" },
+            { name: "n8n-mcp-tools-expert", desc: "Accessing and configuring n8n-mcp server tools.", cat: "general", source: "Global Config" },
+            { name: "n8n-workflow-patterns", desc: "Workflow architectures, loops, errors, and conditional branches in n8n.", cat: "general", source: "Global Config" },
+            { name: "nextjs-app-router-patterns", desc: "App router structure, Server Components, and Server Actions guidelines.", cat: "general", source: "Global Config" },
+            { name: "nextjs-best-practices", desc: "Vercel-aligned Next.js performance and routing guidelines.", cat: "general", source: "Global Config" },
+            { name: "notion-automation", desc: "Interact with Notion databases, blocks, and pages via MCP.", cat: "general", source: "Global Config" },
+            { name: "obsidian-markdown", desc: "Writing and manipulating Obsidian-flavored MD (wikilinks, properties).", cat: "general", source: "Global Config" },
+            { name: "openapi-spec-generation", desc: "Maintaining API OpenAPI/Swagger specifications.", cat: "general", source: "Global Config" },
+            { name: "os-scripting", desc: "Writing and debugging Shell scripts, PowerShell, and AppleScript.", cat: "general", source: "Global Config" },
+            { name: "planning-with-files", desc: "Working with persistent markdown plan files in the workspace (Manus-style).", cat: "general", source: "Global Config" },
+            { name: "playwright-skill", desc: "Configuration for browser testing with Playwright.", cat: "general", source: "Global Config" },
+            { name: "posix-shell-pro", desc: "Writing ultra-portable POSIX sh scripts without bashisms.", cat: "general", source: "Global Config" },
+            { name: "product-manager-toolkit", desc: "PRDs, roadmap templates, product discovery, and scoping methods.", cat: "general", source: "Global Config" },
+            { name: "programmatic-seo", desc: "Generating landing pages dynamically based on templates and CSV data.", cat: "general", source: "Global Config" },
+            { name: "prompt-engineer", desc: "Frameworks for prompt design (Chain of Thought, RODES, clear).", cat: "general", source: "Global Config" },
+            { name: "prompt-engineering-patterns", desc: "Advanced prompting tactics for complex multi-turn reasoning.", cat: "general", source: "Global Config" },
+            { name: "readme", desc: "Absurdly thorough project README generation template.", cat: "general", source: "Global Config" },
+            { name: "remotion", desc: "Generate programmatic video renderings in code using Remotion.js.", cat: "general", source: "Global Config" },
+            { name: "schema-markup", desc: "Implement schema.org JSON-LD microdata for rich search results.", cat: "general", source: "Global Config" },
+            { name: "senior-frontend", desc: "General frontend guidelines, bundle sizes, accessibility, and quality.", cat: "general", source: "Global Config" },
+            { name: "senior-fullstack", desc: "Architectural guidelines for full-stack applications.", cat: "general", source: "Global Config" },
+            { name: "seo", desc: "Technical, content, and search ranking audit workflows.", cat: "general", source: "Global Config" },
+            { name: "seo-audit", desc: "Diagnosing SEO crawlability and indexation issues.", cat: "general", source: "Global Config" },
+            { name: "seo-technical", desc: "Robots.txt, structured data, Core Web Vitals, and mobile SEO audits.", cat: "general", source: "Global Config" },
+            { name: "simplify-code", desc: "Safe simplification and refactoring of complex code structures.", cat: "general", source: "Global Config" },
+            { name: "slack-automation", desc: "Slack workspace interactions via API (messaging, search).", cat: "general", source: "Global Config" },
+            { name: "software-architecture", desc: "General architectural patterns, decoupling, and domain logic.", cat: "general", source: "Global Config" },
+            { name: "subagent-driven-development", desc: "Running complex coding implementations using independent subagents.", cat: "general", source: "Global Config" },
+            { name: "systematic-debugging", desc: "Root-cause tracing, test pressure, and logic debugging rules.", cat: "general", source: "Global Config" },
+            { name: "tailwind-patterns", desc: "Tailwind CSS v4 guidelines, CSS configuration, and design tokens.", cat: "general", source: "Global Config" },
+            { name: "tanstack-query-expert", desc: "Server-state management using TanStack Query.", cat: "general", source: "Global Config" },
+            { name: "tdd-workflow", desc: "Red-Green-Refactor test cycle principles.", cat: "general", source: "Global Config" },
+            { name: "test-driven-development", desc: "Write failing tests first before writing implementation code.", cat: "general", source: "Global Config" },
+            { name: "tmux", desc: "Manage windows and sessions in tmux for persistent background tasks.", cat: "general", source: "Global Config" },
+            { name: "typescript-pro", desc: "Strict type safety, generics, decorator patterns, and compiler rules.", cat: "general", source: "Global Config" },
+            { name: "ui-component", desc: "Generate modular visual components matching visual system tokens.", cat: "general", source: "Global Config" },
+            { name: "ui-page", desc: "Layout guidelines for scaffolding mobile-first view pages.", cat: "general", source: "Global Config" },
+            { name: "ui-pattern", desc: "Design systems reusable layouts (grids, list cards, shell components).", cat: "general", source: "Global Config" },
+            { name: "ui-review", desc: "Reviewing code for UI design system adherence and visual alignment.", cat: "general", source: "Global Config" },
+            { name: "ui-tokens", desc: "Configuring typography, color variables, spacing, and dark mode tokens.", cat: "general", source: "Global Config" },
+            { name: "ux-audit", desc: "Nielsen's usability heuristic reviews for mobile and desktop screens.", cat: "general", source: "Global Config" },
+            { name: "ux-feedback", desc: "Add loading indicators, empty states, and feedback messages to pages.", cat: "general", source: "Global Config" },
+            { name: "ux-flow", desc: "Designing visual layouts and progression paths (hub-and-spoke).", cat: "general", source: "Global Config" },
+            { name: "ux-persuasion-engineer", desc: "Engineering UX features for user engagement and retention.", cat: "general", source: "Global Config" },
+            { name: "vercel-ai-sdk-expert", desc: "Streaming UIs and function calling using Vercel AI SDK.", cat: "general", source: "Global Config" },
+            { name: "wcag-audit-patterns", desc: "Accessibility audits complying with WCAG 2.2 guidelines.", cat: "general", source: "Global Config" },
+            { name: "web-artifacts-builder", desc: "Building powerful HTML previews, bundled widgets, and interactive apps.", cat: "general", source: "Global Config" },
+            { name: "web-performance-optimization", desc: "Core Web Vitals, speed indexing, caching, and compression optimization.", cat: "general", source: "Global Config" },
+            { name: "web-scraper", desc: "Multi-strategy web scraping, tables, CSV export, and pagination handling.", cat: "general", source: "Global Config" },
+            { name: "webapp-testing", desc: "Write Playwright tests in Python to test web applications.", cat: "general", source: "Global Config" },
+            { name: "writing-plans", desc: "Requirements scoping and building structured plan.md checksheets.", cat: "general", source: "Global Config" }
+        ];
+        let currentCat = 'all';
+        let currentSearch = '';
+        function renderSkills() {
+            const container = document.getElementById('skills-container');
+            container.innerHTML = '';
+            const filtered = skillsData.filter(s => {
+                const matchCat = currentCat === 'all' ||
+                                (currentCat === 'custom' && s.cat === 'custom') ||
+                                (currentCat === 'mcp' && s.cat === 'mcp') ||
+                                (currentCat === 'frontend' && s.cat === 'frontend') ||
+                                (currentCat === 'backend' && s.cat === 'backend') ||
+                                (currentCat === 'devops' && s.cat === 'devops') ||
+                                (currentCat === 'general' && s.cat === 'general');
+                const matchSearch = s.name.toLowerCase().includes(currentSearch.toLowerCase()) ||
+                                    s.desc.toLowerCase().includes(currentSearch.toLowerCase());
+                return matchCat && matchSearch;
+            });
+            if (filtered.length === 0) {
+                container.innerHTML = `<div style="color: var(--text-medium); padding: 20px;">No skills found.</div>`;
+                return;
+            }
+            filtered.forEach(skill => {
+                const el = document.createElement('div');
+                el.className = 'skill-item';
+                el.onclick = () => openModal(skill);
+                el.innerHTML = `
+                    <div class="skill-cat-label">${skill.cat.toUpperCase()}</div>
+                    <h4>${skill.name}</h4>
+                    <p>${skill.desc}</p>
+                `;
+                container.appendChild(el);
+            });
+        }
+        function filterCategory(cat) {
+            currentCat = cat;
+            document.querySelectorAll('.filter-btn').forEach(btn => {
+                btn.classList.remove('active');
+                if(btn.getAttribute('onclick').includes(`'${cat}'`)) btn.classList.add('active');
+            });
+            renderSkills();
+        }
+        function searchSkills(query) {
+            currentSearch = query;
+            renderSkills();
+        }
+        function openModal(skill) {
+            document.getElementById('modal-cat').innerText = skill.cat.toUpperCase();
+            document.getElementById('modal-title').innerText = skill.name;
+            document.getElementById('modal-desc').innerText = skill.desc;
+            let prefix = '~/.gemini/config/skills/';
+            if(skill.source === 'Workspace Agents') prefix = '.agents/skills/';
+            if(skill.source === 'Global Legacy') prefix = '~/.gemini/skills/';
+            document.getElementById('modal-path').innerText = `${prefix}${skill.name}/`;
+            document.getElementById('skill-modal').classList.add('active');
+        }
+        function closeModal() {
+            document.getElementById('skill-modal').classList.remove('active');
+        }
+        renderSkills();
+    </script>
+</body>
+</html>