243 lines
10 KiB
JSON
243 lines
10 KiB
JSON
{
|
|
"name": "Claude Code Developer Tools URL Strategy",
|
|
"description": "Progressive web learning resources for building Claude Code observability, search, and coordination tools",
|
|
"progression": "foundation → intermediate → advanced → expert",
|
|
|
|
"priming_urls": [
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications",
|
|
"topic": "File API fundamentals for reading local transcript files",
|
|
"key_concepts": ["FileReader", "Blob", "File handling", "JSONL parsing"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB",
|
|
"topic": "IndexedDB for storing and querying large transcript datasets",
|
|
"key_concepts": ["Object stores", "Indexes", "Transactions", "Cursors"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial",
|
|
"topic": "Canvas API for data visualization",
|
|
"key_concepts": ["2D context", "Drawing shapes", "Animations", "Interactions"]
|
|
}
|
|
],
|
|
|
|
"foundation": {
|
|
"description": "Basic file handling, storage, and simple visualizations (Iterations 1-5)",
|
|
"urls": [
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API/FileReader",
|
|
"topic": "FileReader API for loading transcript files",
|
|
"iteration_range": "1-2",
|
|
"techniques": ["readAsText", "onload events", "error handling", "progress tracking"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API",
|
|
"topic": "LocalStorage for caching search results and preferences",
|
|
"iteration_range": "1-3",
|
|
"techniques": ["setItem/getItem", "JSON serialization", "storage events", "quota management"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas",
|
|
"topic": "Canvas basics for timeline visualizations",
|
|
"iteration_range": "2-4",
|
|
"techniques": ["fillRect", "strokeStyle", "text rendering", "coordinate systems"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout",
|
|
"topic": "CSS Grid for responsive tool layouts",
|
|
"iteration_range": "1-5",
|
|
"techniques": ["grid-template-areas", "auto-fit", "minmax", "gap"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse",
|
|
"topic": "JSON parsing for JSONL transcript processing",
|
|
"iteration_range": "1-2",
|
|
"techniques": ["parse", "stringify", "reviver functions", "error handling"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial",
|
|
"topic": "SVG for scalable charts and graphs",
|
|
"iteration_range": "3-5",
|
|
"techniques": ["path elements", "viewBox", "transforms", "CSS styling"]
|
|
}
|
|
]
|
|
},
|
|
|
|
"intermediate": {
|
|
"description": "Advanced search, analytics, interactive visualizations (Iterations 6-12)",
|
|
"urls": [
|
|
{
|
|
"url": "https://d3js.org/getting-started",
|
|
"topic": "D3.js fundamentals for data visualization",
|
|
"iteration_range": "6-8",
|
|
"techniques": ["data binding", "scales", "axes", "transitions"]
|
|
},
|
|
{
|
|
"url": "https://observablehq.com/@d3/force-directed-graph",
|
|
"topic": "Force-directed graphs for conversation relationships",
|
|
"iteration_range": "7-9",
|
|
"techniques": ["force simulation", "node dragging", "link rendering", "zoom behavior"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers",
|
|
"topic": "Web Workers for background search processing",
|
|
"iteration_range": "8-10",
|
|
"techniques": ["postMessage", "onmessage", "transferable objects", "shared workers"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions",
|
|
"topic": "Advanced regex for pattern searching",
|
|
"iteration_range": "6-8",
|
|
"techniques": ["lookahead/lookbehind", "capturing groups", "flags", "Unicode support"]
|
|
},
|
|
{
|
|
"url": "https://observablehq.com/@d3/bar-chart",
|
|
"topic": "Interactive bar charts for tool usage analytics",
|
|
"iteration_range": "6-7",
|
|
"techniques": ["ordinal scales", "tooltips", "hover effects", "sorting"]
|
|
},
|
|
{
|
|
"url": "https://observablehq.com/@d3/zoomable-sunburst",
|
|
"topic": "Hierarchical sunburst for nested data",
|
|
"iteration_range": "9-11",
|
|
"techniques": ["hierarchical data", "partition layout", "arc generation", "zoom transitions"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API",
|
|
"topic": "Advanced IndexedDB queries and indexes",
|
|
"iteration_range": "10-12",
|
|
"techniques": ["compound indexes", "key ranges", "cursors", "versioning"]
|
|
}
|
|
]
|
|
},
|
|
|
|
"advanced": {
|
|
"description": "Real-time coordination, cross-instance communication, shared state (Iterations 13-20)",
|
|
"urls": [
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API",
|
|
"topic": "Broadcast Channel for cross-tab communication",
|
|
"iteration_range": "13-15",
|
|
"techniques": ["postMessage", "onmessage", "same-origin communication", "close"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API",
|
|
"topic": "WebSocket for real-time multi-instance coordination",
|
|
"iteration_range": "14-16",
|
|
"techniques": ["connect", "send", "onmessage", "reconnection strategies"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API",
|
|
"topic": "Service Workers for background sync",
|
|
"iteration_range": "15-17",
|
|
"techniques": ["registration", "fetch events", "cache API", "background sync"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events",
|
|
"topic": "Server-Sent Events for live updates",
|
|
"iteration_range": "14-16",
|
|
"techniques": ["EventSource", "event listeners", "reconnection", "custom events"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API",
|
|
"topic": "WebRTC for peer-to-peer data sharing",
|
|
"iteration_range": "17-19",
|
|
"techniques": ["RTCPeerConnection", "data channels", "signaling", "NAT traversal"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API/SharedArrayBuffer",
|
|
"topic": "SharedArrayBuffer for shared memory",
|
|
"iteration_range": "18-20",
|
|
"techniques": ["Atomics", "memory sharing", "synchronization", "race conditions"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API/Notification",
|
|
"topic": "Notifications API for cross-instance alerts",
|
|
"iteration_range": "15-17",
|
|
"techniques": ["requestPermission", "notification options", "click events", "persistence"]
|
|
}
|
|
]
|
|
},
|
|
|
|
"expert": {
|
|
"description": "ML-powered features, semantic search, predictive analytics (Iterations 21+)",
|
|
"urls": [
|
|
{
|
|
"url": "https://www.tensorflow.org/js/tutorials",
|
|
"topic": "TensorFlow.js for in-browser machine learning",
|
|
"iteration_range": "21-23",
|
|
"techniques": ["model loading", "inference", "training", "optimization"]
|
|
},
|
|
{
|
|
"url": "https://www.tensorflow.org/js/tutorials/conversion/import_saved_model",
|
|
"topic": "Using pre-trained models for text classification",
|
|
"iteration_range": "22-24",
|
|
"techniques": ["model conversion", "inference", "preprocessing", "postprocessing"]
|
|
},
|
|
{
|
|
"url": "https://github.com/tensorflow/tfjs-models/tree/master/universal-sentence-encoder",
|
|
"topic": "Universal Sentence Encoder for semantic search",
|
|
"iteration_range": "23-25",
|
|
"techniques": ["embeddings", "cosine similarity", "vector search", "caching"]
|
|
},
|
|
{
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial",
|
|
"topic": "WebGL for GPU-accelerated visualizations",
|
|
"iteration_range": "24-26",
|
|
"techniques": ["shaders", "buffers", "textures", "rendering pipeline"]
|
|
},
|
|
{
|
|
"url": "https://github.com/tensorflow/tfjs-examples",
|
|
"topic": "TensorFlow.js examples for pattern recognition",
|
|
"iteration_range": "21-25",
|
|
"techniques": ["classification", "clustering", "anomaly detection", "time series"]
|
|
}
|
|
]
|
|
},
|
|
|
|
"dynamic_search_templates": [
|
|
"Claude Code transcript parsing site:stackoverflow.com",
|
|
"IndexedDB full-text search implementation site:github.com",
|
|
"JavaScript fuzzy string matching algorithms",
|
|
"D3.js interactive timeline visualization",
|
|
"WebSocket real-time coordination patterns",
|
|
"Browser-based vector similarity search",
|
|
"TensorFlow.js text classification tutorial",
|
|
"Service Worker background sync patterns",
|
|
"Canvas performance optimization techniques",
|
|
"LocalStorage vs IndexedDB comparison"
|
|
],
|
|
|
|
"fallback_resources": [
|
|
{
|
|
"category": "General Web APIs",
|
|
"url": "https://developer.mozilla.org/en-US/docs/Web/API",
|
|
"use_when": "Specific API documentation needed"
|
|
},
|
|
{
|
|
"category": "JavaScript Patterns",
|
|
"url": "https://javascript.info",
|
|
"use_when": "Modern JavaScript techniques needed"
|
|
},
|
|
{
|
|
"category": "Data Visualization",
|
|
"url": "https://observablehq.com/@d3",
|
|
"use_when": "D3.js examples and patterns needed"
|
|
},
|
|
{
|
|
"category": "Machine Learning",
|
|
"url": "https://www.tensorflow.org/js",
|
|
"use_when": "ML implementation guidance needed"
|
|
}
|
|
],
|
|
|
|
"notes": [
|
|
"URLs progress from basic web APIs to advanced coordination and ML",
|
|
"Each iteration should demonstrate specific techniques from assigned URL",
|
|
"Foundation iterations establish core patterns that advanced iterations build upon",
|
|
"Expert iterations combine multiple techniques from earlier learnings",
|
|
"All tools must remain self-contained single HTML files",
|
|
"Focus on developer tools that solve real Claude Code workflow challenges"
|
|
]
|
|
}
|