DeskClaw/build_process/commit_9_skills_browser.md

Commit 9: Skills Browser

Summary

Enhance the Skills page with skill bundles, category filtering, detail dialogs, and improved user experience for managing AI capabilities.

Changes

React Renderer

src/pages/Skills/index.tsx

Complete rewrite with enhanced features:

New Components:

• SkillDetailDialog - Modal showing skill details, dependencies, and configuration
• BundleCard - Skill bundle display with enable/disable actions

Features:

• Tabbed interface: "All Skills" and "Bundles"
• Category filtering with skill counts
• Search functionality
• Gateway connection status awareness
• Skill bundles with batch enable/disable
• Skill detail dialog with metadata
• Configuration indicator badges
• Toast notifications on skill toggle

UI Improvements:

• Category icons for visual distinction
• Enabled state highlighting (border and background)
• Hover states for cards
• Recommended bundle badges
• Statistics bar with counts

src/components/ui/tabs.tsx (New)

Tabs component based on shadcn/ui and Radix Tabs:

• Tabs - Root container
• TabsList - Tab navigation bar
• TabsTrigger - Individual tab button
• TabsContent - Tab panel content

Data Structures

Skill Bundles

Predefined bundles:

• Productivity Pack - Calendar, reminders, notes, tasks, timer
• Developer Tools - Code assist, git ops, docs lookup
• Information Hub - Web search, news, weather, translate
• Smart Home - Lights, thermostat, security cam, routines

Technical Details

Component Architecture

Skills Page
    |
    +-- TabsList
    |     |
    |     +-- "All Skills" Tab
    |     +-- "Bundles" Tab
    |
    +-- TabsContent: All Skills
    |     |
    |     +-- Search/Filter Bar
    |     +-- Category Buttons
    |     +-- Skills Grid
    |           |
    |           +-- SkillCard (click -> SkillDetailDialog)
    |
    +-- TabsContent: Bundles
    |     |
    |     +-- BundleCard Grid
    |
    +-- Statistics Bar
    |
    +-- SkillDetailDialog (modal)

Category Configuration

Category	Icon	Label
productivity	📋	Productivity
developer	💻	Developer
smart-home	🏠	Smart Home
media	🎬	Media
communication	💬	Communication
security	🔒	Security
information	📰	Information
utility	🔧	Utility
custom	⚡	Custom

Bundle Operations

Enable Bundle:

for (const skill of bundleSkills) {
  if (!skill.enabled) {
    await enableSkill(skill.id);
  }
}

Disable Bundle:

for (const skill of bundleSkills) {
  if (!skill.isCore) {
    await disableSkill(skill.id);
  }
}

State Management

Local State:

• searchQuery - Search input value
• selectedCategory - Active category filter
• selectedSkill - Skill for detail dialog
• activeTab - Current tab ("all" | "bundles")

Store Integration:

• useSkillsStore - Skills data and actions
• useGatewayStore - Connection status

Filtering Logic

const filteredSkills = skills.filter((skill) => {
  const matchesSearch = 
    skill.name.toLowerCase().includes(searchQuery) ||
    skill.description.toLowerCase().includes(searchQuery);
  const matchesCategory = 
    selectedCategory === 'all' || 
    skill.category === selectedCategory;
  return matchesSearch && matchesCategory;
});

UI States

Skill Card:

• Default: Standard border, white background
• Enabled: Primary border (50% opacity), primary background (5% opacity)
• Hover: Primary border (50% opacity)
• Core: Lock icon, switch disabled

Bundle Card:

• Default: Standard styling
• All Enabled: Primary border, primary background
• Recommended: Amber badge with sparkle icon

Version

v0.1.0-alpha (incremental)