Skip to main content
The Better Skills web dashboard is an authenticated Next.js application that provides a visual interface for browsing, managing, and organizing your skills, resources, and vault memberships.

​
Purpose and Capabilities

The web dashboard serves as the primary graphical interface for Better Skills, offering:
  • Visual skill graph navigation with interactive force-directed layouts
  • Skill and resource management with full CRUD operations
  • Vault administration for enterprise and personal workspaces
  • Real-time search with fuzzy matching across skills and resources
  • Command palette for quick navigation (Cmd+K)
  • Responsive design optimized for desktop and mobile devices
The web dashboard runs on http://localhost:3001 during development. Use bun run dev:web from the repository root to start the development server.

​
Authentication

The dashboard uses Better Auth for secure authentication with support for:
  • Google OAuth - Sign in with your Google account
  • GitHub OAuth - Sign in with your GitHub account
  • Session management - Persistent authentication across sessions
  • Protected routes - Automatic redirect to login for unauthenticated users
All authenticated routes require a valid session. New users are guided through an onboarding flow before accessing the vault dashboard. The application follows a hierarchical navigation pattern: 
/ (landing page)
├── /login - Authentication page
├── /vault - Main dashboard
│   └── /skills/[id] - Skill detail view
│       └── /resources/[...path] - Resource detail view
├── /settings - Account and vault settings
└── /welcome - Onboarding wizard for new users

​
Top Navigation Bar

The persistent navbar (52px height) provides:
  • BETTER-SKILLS branding - Links to dashboard or landing page based on auth state
  • Search button (Cmd+K) - Opens the command palette
  • User menu - Access to settings, theme toggle, and sign out

​
Command Palette

Press Cmd+K (or Ctrl+K on Windows/Linux) to open the command palette:
  • Command mode - Search for actions like “Settings”, “Sign out”, or “Switch theme”
  • Vault mode - Search skills and resources across all your vaults
  • Keyboard navigation - Arrow keys, Enter to select, Tab to switch modes
  • Fuzzy search - Type / in command mode to switch to vault search
Press Cmd+/ to open the command palette directly in vault search mode.

​
Key Features

​
Dashboard View

The main /vault route displays:
  • Skill graph visualization (desktop: background layer, mobile: tabbed)
  • Skills list panel with search and filtering
  • Vault legend showing active vaults with color indicators
  • Responsive layout - Split view on desktop, tabbed on mobile

​
Skill Detail Pages

Each skill has a dedicated page at /vault/skills/[id] featuring:
  • Markdown rendering with syntax highlighting and custom components
  • Resource sidebar listing attached files and links
  • Local graph view showing skill connections and mentions
  • Tabbed interface for viewing multiple resources simultaneously
  • Skill metadata including vault, source, and update timestamps

​
Settings Panel

The /settings route provides:
  • Account management - View profile, sign out, delete account
  • Vault settings - Enable/disable vaults, manage enterprise memberships
  • Enterprise admin - Invite members, manage roles, update vault colors
  • Appearance controls - Light, dark, or system theme selection
  • Pending invitations - Accept or decline vault invitations

​
Development

​
Running Locally

bun run dev:web
The development server starts at http://localhost:3001 with:
  • Hot module replacement
  • Fast refresh for React components
  • Type checking in watch mode

​
Environment Variables

Required configuration: 
NEXT_PUBLIC_SERVER_URL=http://localhost:3000
Never hardcode server URLs in components. Always use NEXT_PUBLIC_SERVER_URL from the environment configuration.

​
Code Structure

The web app follows Next.js App Router conventions:
  • src/app/ - Route definitions and page components
  • src/components/ - Reusable UI components
  • src/lib/ - Utilities, API clients, and auth helpers
  • src/hooks/ - Custom React hooks
  • packages/api/ - Shared tRPC router definitions

​
Next Steps

Managing Skills

Learn how to browse, search, create, and edit skills in the web UI

Vault Management

Configure vaults, manage memberships, and invite collaborators

Graph Visualization

Explore the interactive skill graph and navigate resource relationships

Build docs developers (and LLMs) love

Get started for freeTalk to us