| name | managing-views |
| description | Creates, lists, deletes, and regenerates custom task visualizations. Triggers on: "create view", "custom view", "make a dashboard", "view of", "delete view", "list views", "regenerate view", "my view", "ビュー作成", "カスタムビュー", "ダッシュボード作成".
|
| user-invocable | true |
Agentic Tasks — Custom View Management
You manage custom task visualizations that users can create via natural language.
Provider Detection (once per session)
Load ${CLAUDE_PLUGIN_ROOT}/skills/detecting-provider/SKILL.md and follow its instructions to determine active_provider. Skip if already determined in this conversation.
Directory Setup
Custom views are stored outside the plugin directory so they survive updates:
mkdir -p ~/.agentic-tasks/views
Operations
Create
When the user asks to create a custom view (e.g., "create a view showing blocked tasks by assignee", "make a dashboard for team progress"):
- Derive a slug from the user's description (e.g., "team progress dashboard" ->
team-progress-dashboard)
- Generate a standalone HTML file using the Reference Template below
- Write it to
~/.agentic-tasks/views/<slug>.html
- Confirm creation and provide the URL:
http://localhost:3456/custom/<slug>.html
- Open the view in the browser using platform detection (see viewing-tasks skill)
List
When the user asks to list custom views:
ls ~/.agentic-tasks/views/*.html 2>/dev/null
Or use the API: curl -s http://localhost:3456/api/views | jq
Delete
When the user asks to delete a custom view:
rm ~/.agentic-tasks/views/<slug>.html
Confirm deletion with the user before removing.
Regenerate
When the user asks to regenerate or update a custom view:
- Read the existing file to understand what it does
- Generate a new version incorporating the user's feedback
- Overwrite the file at
~/.agentic-tasks/views/<slug>.html
- The view will update on next browser refresh
Reference Template
When generating a custom view HTML file, use this skeleton. Fill in the visualization logic based on the user's request.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="view-name" content="VIEW_NAME_HERE">
<meta name="view-description" content="VIEW_DESCRIPTION_HERE">
<title>VIEW_NAME_HERE — Agentic Tasks</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
surface: { primary: 'rgba(28,28,30,0.8)', secondary: 'rgba(44,44,46,0.6)', tertiary: 'rgba(58,58,60,0.4)' },
label: { primary: '#ffffff', secondary: , : },
: { : , : , : , : , : , : },
}
}
}
}
Views
VIEW_NAME_HERE
Connecting...
Loading tasks...
Task Data Shape
Each task object in the tasks array has these fields:
interface Task {
id: string;
title: string;
description: string;
acceptanceCriteria: string;
status: "Backlog" | "Ready" | "In Progress" | "In Review" | "Done" | "Blocked";
blockedBy: string[];
priority: "Urgent" | "High" | "Medium" | "Low";
executor: string;
requiresReview: boolean;
executionPlan: string;
workingDirectory: string;
sessionReference: string;
dispatchedAt: string | null;
agentOutput: string;
errorMessage: string;
context: string;
artifacts: string;
repository: string | null;
dueDate: string | null;
tags: string[];
: | ;
: | ;
: | ;
: { : ; : }[];
: ;
}
Naming Convention
Derive slugs from the user's description:
- "team progress dashboard" ->
team-progress-dashboard
- "blocked tasks by assignee" ->
blocked-tasks-by-assignee
- "priority heatmap" ->
priority-heatmap
Use lowercase, hyphens for spaces, remove special characters.
Design Guidelines
- Match the existing dark theme (black background, glass-morphism surfaces)
- Use the design system colors defined in the Tailwind config above
- Keep the header consistent with back link to
/selector.html
- Include SSE status indicator
- Make visualizations interactive where possible (hover states, click-to-copy)
- Ensure the view is responsive
