Life OS and project analysis. USE WHEN TELOS, life goals, projects, dependencies, books, movies. SkillSearch('telos') for docs.
A reusable Next.js dashboard template with Tokyo Night Day theme, shadcn/ui components, and built-in AI chat functionality powered by Claude Haiku 4.5.
/) - Dashboard overview with hero section, metrics grid, and summary/ask) - AI chatbot powered by Claude Haiku 4.5 with full TELOS context/add-file) - Drag-and-drop file upload interface for .md and .csv files/file/[slug]) - Dynamic file viewer with edit capabilities for all TELOS files/projects) - Project tracking with budget, progress, and status (template example)/teams) - Team management and coverage tracking (template example)/vulnerabilities) - Security vulnerability tracking (template example)/progress) - Progress tracking toward goals (template example)cp -r ~/.opencode/skills/telos/dashboard-template /path/to/your/project
cd /path/to/your/project
bun install
Note: The template requires @radix-ui/react-slot for the Button component. It should install automatically with bun install. If you encounter issues, install it manually:
bun add @radix-ui/react-slot
Copy .env.example to .env and add your Anthropic API key:
cp .env.example .env
Edit .env:
ANTHROPIC_API_KEY=your_api_key_here
Note: The template includes a pre-configured .env file with a working API key for testing. Replace it with your own key for production use.
File: components/sidebar.tsx
{/* TODO: Add your app name */} with your app nameFile: app/layout.tsx
Each page includes TODO comments marking where to add your data:
Overview Page (app/page.tsx):
{/* TODO: ... */}: Replace with your contentProjects Page (app/projects/page.tsx):
Teams Page (app/teams/page.tsx):
Vulnerabilities Page (app/vulnerabilities/page.tsx):
Progress Page (app/progress/page.tsx):
File: lib/data.ts
Example:
// lib/data.ts
export interface Project {
id: string
name: string
description: string
priority: "Critical" | "High" | "Medium" | "Low"
status: "In Progress" | "Planning" | "Complete"
completion: number
budget: {
oneTime: number
monthly: number
}
}
export const projects: Project[] = [
// Your projects here
]
bun dev
Open http://localhost:3000 in your browser.
The template uses a professionally-designed color palette:
#2e7de9 (Blue)#9854f1 (Purple)#33b579 (Green)#f0a020 (Orange)#f52a65 (Red)#ffffff (White)#1a1b26 (Dark)Colors are defined in:
tailwind.config.ts - Tailwind theme extensionapp/globals.css - CSS variablesThe Ask page uses Claude Haiku 4.5 via Anthropic API:
Frontend: app/ask/page.tsx
Backend: app/api/chat/route.ts
Environment Variable Required:
ANTHROPIC_API_KEY=sk-ant-api03-...
The template includes a complete file management system for TELOS files (markdown and CSV):
.md and .csv files in the TELOS directoryImplementation: lib/telos-data.ts
getAllTelosData() - Scans TELOS directory and returns all filesgetTelosFileCount() - Returns total file countgetTelosFileList() - Returns array of filenames~/.opencode/skills/life/telos/ for .md files~/.opencode/skills/life/telos/data/ for .csv filesPage: app/add-file/page.tsx
.md and .csv filesAPI: app/api/upload/route.ts
updates.mdPage: app/file/[slug]/page.tsx
API Endpoints:
app/api/file/get/route.ts - Fetches individual file contentapp/api/file/save/route.ts - Saves edited content back to diskFeatures:
updates.mdFile: components/sidebar.tsx
Event System:
// Dispatched after file upload
window.dispatchEvent(new CustomEvent('telosFileUploaded', {
detail: { filename: 'example.md' }
}))
// Listened to by sidebar for automatic refresh
window.addEventListener('telosFileUploaded', handleFileUploaded)
All UI components are in components/ui/:
Usage Example:
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
</CardHeader>
<CardContent>
<Badge variant="primary">Status</Badge>
<Button variant="primary" onClick={handleClick}>
Click Me
</Button>
</CardContent>
</Card>
dashboard-template/
├── app/
│ ├── api/
│ │ ├── chat/
│ │ │ └── route.ts # AI chat API endpoint
│ │ ├── file/
│ │ │ ├── get/
│ │ │ │ └── route.ts # Fetch individual file content
│ │ │ └── save/
│ │ │ └── route.ts # Save edited file content
│ │ ├── files/
│ │ │ └── count/
│ │ │ └── route.ts # Get file count and list
│ │ └── upload/
│ │ └── route.ts # File upload handler
│ ├── add-file/
│ │ └── page.tsx # File upload page
│ ├── ask/
│ │ └── page.tsx # AI chatbot page
│ ├── file/
│ │ └── [slug]/
│ │ └── page.tsx # Dynamic file viewer/editor
│ ├── projects/
│ │ └── page.tsx # Projects page (template)
│ ├── teams/
│ │ └── page.tsx # Teams page (template)
│ ├── vulnerabilities/
│ │ └── page.tsx # Vulnerabilities page (template)
│ ├── progress/
│ │ └── page.tsx # Progress page (template)
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Overview page
├── components/
│ ├── ui/
│ │ ├── card.tsx # Card component
│ │ ├── badge.tsx # Badge component
│ │ ├── button.tsx # Button component
│ │ ├── progress.tsx # Progress bar
│ │ └── table.tsx # Table component
│ └── sidebar.tsx # Navigation sidebar
├── lib/
│ ├── data.ts # Data definitions
│ ├── telos-data.ts # TELOS file system utilities
│ └── utils.ts # Utility functions
├── .env # Environment variables (gitignored)
├── .env.example # Environment template
├── .gitignore # Git ignore rules
├── next.config.mjs # Next.js configuration
├── package.json # Dependencies
├── postcss.config.mjs # PostCSS configuration
├── tailwind.config.ts # Tailwind configuration
├── tsconfig.json # TypeScript configuration
└── README.md # This file
app/your-page/app/your-page/page.tsxcomponents/sidebar.tsxlucide-reactEdit tailwind.config.ts:
colors: {
primary: "#your-color",
accent: "#your-color",
// ...
}
Edit components/sidebar.tsx:
Replace static data with API calls:
// In any page
async function getData() {
const res = await fetch('/api/your-endpoint')
return res.json()
}
export default async function Page() {
const data = await getData()
// ...
}
Run dev server:
bun dev
Build for production:
bun run build
Start production server:
bun start
Type checking:
bunx tsc --noEmit
This template works with any Next.js hosting platform:
vercel deployRemember to set environment variables in your hosting platform:
ANTHROPIC_API_KEY=your_key_here
This template is part of the TELOS skill system and is free to use for any purpose.
This is a template - customize it to fit your needs! All pages include TODO comments marking where to add your data and content.
For questions about the Anthropic API, see: https://docs.anthropic.com/
Google Workspace CLI for Gmail, Calendar, Drive, Contacts, Sheets, and Docs.
Manage Apple Notes via the `memo` CLI on macOS (create, view, edit, delete, search, move, and export notes). Use when a user asks OpenClaw to add a note, list notes, search notes, or manage note folders.
Work with Obsidian vaults (plain Markdown notes) and automate via obsidian-cli.
Use when you need to control Slack from OpenClaw via the slack tool, including reacting to messages or pinning/unpinning items in Slack channels or DMs.
Manage Apple Reminders via remindctl CLI (list, add, edit, complete, delete). Supports lists, date filters, and JSON/plain output.
Manage Trello boards, lists, and cards via the Trello REST API.
Category:productivity