Skip to main content
The web dashboard provides a comprehensive interface for managing your skill library with fuzzy search, skill cards, and detailed editing capabilities.

Browsing Skills

Skills List Panel

The main vault dashboard displays your skills in a scrollable list with:
  • Numbered entries - Sequential index for quick reference
  • Skill name - Primary identifier in monospace font
  • Description - Truncated preview text
  • Vault indicators - Color badges for enterprise vaults
  • Real-time updates - Automatically refreshes when skills change
The skills list is accessible from:
  • Desktop: Right sidebar panel (280-320px width) on the vault dashboard
  • Mobile: “Vaults” tab in the tabbed interface
The skills list shows up to 50 skills at once. Use the search bar to filter for specific skills from larger collections.

Skill Cards

Each skill in the list is presented as a clickable card showing:
// Skill card structure
{
  index: number           // Position in filtered results
  name: string            // Skill name
  description: string     // Short description
  vault: {
    type: "personal" | "enterprise" | "system_default"
    color: string | null  // Enterprise vault color
    isEnabled: boolean    // Vault active status
  }
}
Visual states:
  • Normal: Default text color, hover reveals secondary background
  • Disabled vault: Muted text color if the parent vault is disabled
  • Enterprise: Colored square badge indicating vault color
  • Hover: Primary color highlight with background transition
The skills list includes a built-in search bar with fuzzy matching:
  1. Click into the search input at the top of the skills panel
  2. Type any part of a skill name or description
  3. Results filter in real-time as you type
  4. Clear the input to see all skills again
Search is case-insensitive and matches against both skill names and descriptions.

Search Implementation

The search uses server-side filtering via tRPC:
// Search query structure
trpc.skills.listByOwner({
  limit: 50,
  search: searchTerm || undefined
})
Search features:
  • Debounced input - Reduces API calls while typing
  • Fuzzy matching - Finds partial matches in names and descriptions
  • Vault filtering - Searches across all enabled vaults
  • Empty state - Shows “No skills matching “query"" when no results found

Viewing Skill Details

Opening a Skill

Click any skill card to navigate to its detail page at /vault/skills/{skillId}. The skill detail view provides:
  • Full markdown content - Rendered with syntax highlighting
  • Resource sidebar - List of attached files and references
  • Local graph - Visual representation of skill connections
  • Metadata header - Vault, source, timestamps, and resource count

Skill Detail Sections

Desktop layout (≥1280px):
┌─────────────────────────────────────────────┐
│  [Header with skill name and metadata]      │
├────────────┬────────────────────────────────┤
│            │ [Tab Bar]                      │
│  Sidebar   ├────────────────────────────────┤
│  - Graph   │                                │
│  - Resources│  Main Content Area            │
│            │  (Markdown or Resource)        │
└────────────┴────────────────────────────────┘
Mobile layout:
  • Section controls - Toggle between Content / Resources / Graph
  • Tab bar (when multiple tabs open)
  • Full-width content panel

Resource Tabs

The skill detail page supports multiple tabs:
  • Skill tab - Main skill markdown (always present)
  • Resource tabs - Opened by clicking resources in the sidebar
  • Close button - Remove tabs individually (except skill tab)
  • Switching - Click tabs or use keyboard navigation
On desktop, you can open multiple resource tabs side-by-side. On mobile, tabs stack and can be switched using the tab bar.

Creating New Skills

The web dashboard currently provides read-only viewing of skills. To create new skills, use the Better Skills CLI.
Skills are created through:
  • CLI commands - better-skills create interactive wizard
  • File sync - Place markdown files in vault directories
  • API endpoints - Direct tRPC calls (advanced)
Once created, skills immediately appear in the web dashboard.

Editing Skills

Current Capabilities

The web UI provides:
  • Viewing skill markdown - Full rendering with custom components
  • Browsing resources - Navigate attached files and links
  • Graph exploration - Visualize skill relationships

Editing via CLI

To edit skill content:
# Open skill in your default editor
better-skills edit <skill-name>

# Edit skill metadata
better-skills update <skill-name>
Changes sync automatically to the web dashboard.
Future releases will add inline editing capabilities to the web UI.

Skill Metadata

The skill detail header displays:

Header Information

  • Skill name - Large title with monospace font
  • Description - Subtitle text in muted color
  • Vault badge - Shows parent vault name and type (personal/enterprise)
  • Source indicator - Git repository or file path if available
  • Last updated - Timestamp of most recent modification
  • Resource count - Number of attached files/links
  • Read-only badge - Displayed if vault is read-only

Vault Indicators

Personal vaults:
  • Gray outline badge
  • No color indicator
Enterprise vaults:
  • Colored square badge matching vault color
  • Vault name and slug
  • “Enterprise” type label
System default:
  • “Default” type label
  • No color customization

Deleting Skills

Skill deletion is only available through the CLI to prevent accidental data loss.
To delete a skill:
better-skills delete <skill-name>
You’ll be prompted to confirm before the skill is permanently removed.

Command Palette Integration

Quickly navigate to skills using the command palette:
  1. Press Cmd+K (or Ctrl+K)
  2. Press / to switch to vault search mode
  3. Type your search query
  4. Use arrow keys to select a skill
  5. Press Enter to navigate
Vault search features:
  • Fuzzy matching - Finds skills by partial name or description
  • Recent skills - Shows top 5 skills when search is empty
  • Resource search - Also finds individual resource files
  • Keyboard shortcuts - Full keyboard navigation support

Vault Management

Learn about managing vaults, memberships, and collaborators

Graph Visualization

Explore the interactive skill graph and resource connections

Build docs developers (and LLMs) love