diff --git a/.github/workflows/skill-quality-review.yml b/.github/workflows/skill-quality-review.yml index 040a5e6b..add6f295 100644 --- a/.github/workflows/skill-quality-review.yml +++ b/.github/workflows/skill-quality-review.yml @@ -200,7 +200,7 @@ jobs: for skill_dir in $(echo "$SKILLS" | python3 -c "import sys,json; [print(s) for s in json.load(sys.stdin)]"); do # Structure validation - STRUCT=$(python3 engineering/skill-tester/scripts/skill_validator.py "$skill_dir" --json 2>&1 | python3 -c " + STRUCT=$(python3 engineering/skills/skill-tester/scripts/skill_validator.py "$skill_dir" --json 2>&1 | python3 -c " import sys, json try: d = json.load(sys.stdin) @@ -227,7 +227,7 @@ jobs: fi # Security audit - SEC=$(python3 engineering/skill-security-auditor/scripts/skill_security_auditor.py "$skill_dir" --strict --json 2>&1 | python3 -c " + SEC=$(python3 engineering/skills/skill-security-auditor/scripts/skill_security_auditor.py "$skill_dir" --strict --json 2>&1 | python3 -c " import sys, json try: d = json.load(sys.stdin) diff --git a/.github/workflows/skill-security-audit.yml b/.github/workflows/skill-security-audit.yml index e4af3526..7c13c26d 100644 --- a/.github/workflows/skill-security-audit.yml +++ b/.github/workflows/skill-security-audit.yml @@ -107,7 +107,7 @@ jobs: - name: Run security auditor on changed skills id: audit run: | - AUDITOR="engineering/skill-security-auditor/scripts/skill_security_auditor.py" + AUDITOR="engineering/skills/skill-security-auditor/scripts/skill_security_auditor.py" SKILLS='${{ needs.detect-changes.outputs.skills }}' REPORT_FILE=$(mktemp) OVERALL_EXIT=0 diff --git a/engineering-team/unified-ui-dashboard/SKILL.md b/engineering-team/unified-ui-dashboard/SKILL.md index 5a0cc6db..ad877c99 100644 --- a/engineering-team/unified-ui-dashboard/SKILL.md +++ b/engineering-team/unified-ui-dashboard/SKILL.md @@ -1,6 +1,6 @@ --- name: unified-ui-dashboard -description: "Launch the Unified Tool Dashboard — a single interactive UI showing all connected MCP tools with Google Antigravity physics. Use when: 'show me my tools', 'unified dashboard', 'tool hub', 'open dashboard', 'what tools do I have', 'antigravity UI', 'list all my tools'. Generates a self-contained HTML file the user opens in their browser. Trigger with /unified-ui." +description: "Launch HaMm3r's Unified Tool Hub — a single interactive HTML dashboard showing all 11 connected MCP tool categories with Google Antigravity physics. Use when: 'show me my tools', 'unified dashboard', 'tool hub', 'open dashboard', 'what tools do I have', 'antigravity UI', 'list all my MCP tools', '/unified-ui'. Writes a self-contained dashboard.html to disk that the user opens in their browser." license: MIT metadata: version: 1.0.0 @@ -9,91 +9,166 @@ metadata: updated: 2026-05-18 --- -# Unified Tool Dashboard +# HaMm3r's Unified Tool Hub -You are a UI delivery expert. When this skill is invoked, generate and deliver the interactive Unified Tool Dashboard to the user. +A self-contained browser dashboard that surfaces all 11 connected MCP tool categories in one place. Includes a Google Antigravity physics engine — press a button and every tool card floats, bounces, and reacts to your cursor. + +**This skill is for visual browsing of connected tools.** It is NOT for executing tools (use the tools directly), NOT for configuration (use settings), and NOT for workflow automation (use the relevant domain skill). + +--- + +## Table of Contents + +- [What This Skill Does](#what-this-skill-does) +- [Quick Start](#quick-start) +- [Delivery Modes](#delivery-modes) +- [Antigravity Physics Engine](#antigravity-physics-engine) +- [Tool Categories Reference](#tool-categories-reference) +- [Search and Navigation](#search-and-navigation) +- [Proactive Triggers](#proactive-triggers) +- [Anti-Patterns](#anti-patterns) +- [Related Skills](#related-skills) + +--- ## What This Skill Does -Delivers a self-contained `dashboard.html` file that renders a beautiful dark-mode tool hub showing all connected MCP integrations, with a Google Antigravity physics mode built in. +Delivers `assets/dashboard.html` — a fully self-contained, dark-mode HTML file with no external dependencies. When opened in a browser it shows: + +- **11 tool category cards** with icons, subtitles, and status indicators +- **Capability pills** on each card showing the top actions available +- **Click-to-expand modal** listing every capability for that tool with descriptions +- **Real-time search** filtering across tool names, subtitles, and all capability descriptions +- **Google Antigravity mode** — physics engine that launches cards into floating, bouncing, mouse-repelled orbits +- **Keyboard shortcuts**: `Ctrl+G` (toggle gravity), `/` (focus search), `Esc` (close modal / exit gravity) --- -## Before Starting +## Quick Start -If the user invokes `/unified-ui`, immediately: -1. Write `dashboard.html` to the current working directory using the contents of `assets/dashboard.html` -2. Tell the user to open it in their browser -3. Summarize the 11 tool categories available +When the user invokes `/unified-ui` or asks to see their tools: + +1. Write `assets/dashboard.html` to `./dashboard.html` in the working directory +2. Tell the user: _"Open `dashboard.html` in your browser. Use `/` to search tools, click any card for details, and press `Ctrl+G` for Antigravity mode."_ +3. Offer a one-line summary of the 11 tool categories available --- -## Tool Categories Covered +## Delivery Modes + +### Mode 1: Write to disk (Claude Code with file access) + +```bash +# Claude Code writes the HTML asset to the current working directory +cp assets/dashboard.html ./dashboard.html +# Or via the Write tool — copy contents of assets/dashboard.html → ./dashboard.html +``` + +Tell user: +> Open `dashboard.html` in your browser to access HaMm3r's Unified Tool Hub. + +### Mode 2: Display inline (chat / web context) + +Output the full contents of `assets/dashboard.html` as a fenced HTML code block so the user can copy-paste it into a local file and open it directly: + +```` +```html + +``` +```` + +### Mode 3: Summary only (quick reference) + +If the user only wants to know what tools are available without opening a dashboard, provide the tool table from the [Tool Categories Reference](#tool-categories-reference) section directly in chat. + +--- + +## Antigravity Physics Engine + +The dashboard ships a JavaScript physics engine inspired by Google's gravity Easter egg. + +| Control | Action | +|---------|--------| +| `⬆ Antigravity` button | Toggle physics mode on/off | +| `Ctrl+G` | Keyboard shortcut to toggle | +| Mouse cursor | Creates repulsion force within 220px radius | +| Click + drag | Grab a card and throw it | +| `Esc` | Exit gravity mode, restore grid layout | + +**Physics parameters:** +- Upward gravity: `G = 0.07` (cards drift upward) +- Velocity damping: `DAMP = 0.996` (cards slow down gradually) +- Boundary bounce: `BNC = 0.45` (cards rebound off viewport edges) +- Mouse repulsion radius: `220px` +- Particle system: 80 glowing seed particles stream upward during gravity mode + +Cards return to their original grid positions when Antigravity is turned off. + +--- + +## Tool Categories Reference | Tool | Key Capabilities | |------|------------------| -| Gmail | search_threads, create_draft, label_message, get_thread | -| Google Drive | list_recent_files, search_files, create_file, download_file_content | -| Google Calendar | list_events, create_event, suggest_time, respond_to_event | -| Zoom | recordings_list, search_meetings, get_meeting_assets, get_file_content | -| GitHub | list_pull_requests, list_issues, search_code, push_files, create_branch | -| Shopify | get_product, list_orders, run_analytics_query, create_product | -| Adobe Creative | image_remove_background, image_crop_and_resize, image_fill_area, image_vectorize | -| Canva | generate_design, search_designs, export_design, list_brand_kits | -| DocuSign | getEnvelopes, createEnvelope, getTemplates, triggerWorkflow | -| Hugging Face | hub_repo_search, paper_search, space_search, hf_doc_search | -| Ideabrowser | browse_ideas, list_trends, get_market_insight_detail, list_projects | +| **Gmail** | search_threads, create_draft, label_message, get_thread, unlabel_thread | +| **Google Drive** | list_recent_files, search_files, create_file, download_file_content, get_file_metadata | +| **Google Calendar** | list_events, create_event, suggest_time, respond_to_event, update_event | +| **Zoom** | recordings_list, search_meetings, get_meeting_assets, get_file_content, search_zoom | +| **GitHub** | list_pull_requests, list_issues, search_code, push_files, create_branch, create_pull_request | +| **Shopify** | get_product, list_orders, run_analytics_query, create_product, search_products | +| **Adobe Creative Cloud** | image_remove_background, image_crop_and_resize, image_fill_area, image_vectorize, image_generate | +| **Canva** | generate_design, search_designs, export_design, list_brand_kits, get_design | +| **DocuSign** | getEnvelopes, createEnvelope, getTemplates, triggerWorkflow, listRecipients | +| **Hugging Face** | hub_repo_search, paper_search, space_search, hf_doc_search, hf_whoami | +| **Ideabrowser** | browse_ideas, list_trends, get_market_insight_detail, list_projects, get_founder_profile | + +Total: 11 tool categories, 80+ capabilities surfaced. --- -## How to Deliver +## Search and Navigation -### Mode 1: Write to disk (Claude Code context) -When running in Claude Code with file write access: -``` -Write the contents of assets/dashboard.html to ./dashboard.html -Tell user: "Open dashboard.html in your browser to access the Unified Tool Hub." -``` +The search bar at the top of the dashboard filters all 11 cards in real time. It searches across: -### Mode 2: Display inline (chat context) -Output the full HTML as a fenced code block so the user can copy-paste it into a local file. +- Tool category name (e.g., "GitHub") +- Tool subtitle (e.g., "Code & Collaboration") +- Action names (e.g., "create_branch") +- Capability descriptions (e.g., "push files to a repository") ---- - -## Antigravity Mode - -The dashboard includes a **Google Antigravity physics engine** built in JavaScript: -- Press **`⬆️ Antigravity`** button (or `Ctrl+G`) to launch cards into floating upward physics -- Cards drift upward with realistic velocity, damping, and boundary wrapping -- Mouse proximity creates a **repulsion force** — move your cursor to push cards around -- Drag any card to throw it across the screen -- Colorful particles stream upward during antigravity mode -- Press **`Esc`** or the button again to restore normal layout +**Usage:** Click the search bar or press `/` anywhere on the page to focus it. The matching cards stay visible; non-matching cards fade. Press `Esc` to clear the filter. --- ## Proactive Triggers -Surface these without being asked: +Surface the dashboard without being asked in these situations: -- **User asks "what can you do?"** → Offer to open the dashboard for a visual overview -- **User is lost between tools** → Suggest opening the dashboard to browse capabilities -- **First session start** → Mention the `/unified-ui` command as a way to see all tools -- **User asks about a specific tool** → After answering, note they can see all tools in the dashboard +| Trigger | Response | +|---------|----------| +| User asks "what can you do?" or "what tools do you have?" | Offer to open the dashboard for a visual overview of all 11 categories | +| User is switching between many different tools in one session | Suggest opening the dashboard to browse what's available before deciding | +| First session after onboarding | Mention `/unified-ui` as a way to see all connected tools at a glance | +| User asks about a specific tool's capabilities | Answer, then note they can see all tools together in the dashboard | +| User seems confused about which tool to use | Proactively open the dashboard and guide them to the right category | --- -## Output Artifacts +## Anti-Patterns -| When you ask for... | You get... | -|---------------------|------------| -| `/unified-ui` | `dashboard.html` written to disk + open instructions | -| "show my tools" | Summary table of all 11 categories + offer to open dashboard | -| "antigravity demo" | Description of the physics mode + `dashboard.html` delivery | +**Do NOT use this skill to:** + +1. **Execute tool calls** — The dashboard is read-only. To actually send a Gmail draft, use the Gmail MCP tools directly. +2. **Configure MCP connections** — The dashboard shows what's already connected. Setup belongs in your MCP configuration. +3. **Replace domain-specific skills** — For deep GitHub automation, use the GitHub skill. This skill is only for browsing. +4. **Serve as the only tool reference** — Capabilities in the dashboard are summarized. For full parameter details, consult the specific MCP tool's documentation. +5. **Auto-open on every session** — Only open the dashboard when the user asks or clearly needs an overview. Don't add it as a default startup action. --- ## Related Skills -- **google-workspace**: For deep Google Workspace CLI automation. NOT for browsing tools visually. -- **session-start-hook**: For auto-setup on session start. NOT for interactive dashboards. +| Skill | Use When | +|-------|----------| +| `google-workspace` | Deep Google Workspace CLI automation (Drive, Gmail, Calendar scripting) — NOT visual browsing | +| `session-start-hook` | Auto-setup actions on session start — NOT for interactive dashboards | +| `mcp-server-builder` | Building new MCP servers to add more tools — NOT for viewing existing ones |