{"type":"agent-native.clip.context","version":1,"instructions":["Use transcript.segments for timestamped spoken context.","This clip is readable as both text (transcript) and images (JPEG frames) — you can hear AND see it.","To SEE the screen, GET apis.frame.urlTemplate with atMs (returns image/jpeg). Start with recommendedFrames, then fetch additional frames around transcript timestamps that matter for the task.","If you cannot load an image from a URL, you will only have the transcript — tell the user to open the clip in an image-capable agent (ChatGPT, Claude Code, Cursor, Codex) or to upload a frame image directly so you can see it."],"clip":{"id":"F6SlN9TdlK30","title":"Better, more visual plans for Claude Code","description":"Steve created two open-source Claude Code skills: **visual plan** and **visual recap**. Visual plan turns implementation plans into interactive MDX with diagrams, API specs, schema changes, annotated code, and pan-and-zoom wireframes for review and iteration before coding. Visual recap presents completed agent work in the same visual format, supporting code review and pull request review.","publicPageUrl":"https://clips.agent-native.com/share/F6SlN9TdlK30","sourceProvider":null,"thumbnailUrl":"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F88accb24040744d7b37c1182d4c3b963","animatedThumbnailUrl":null,"durationMs":79595,"duration":"80s","width":1080,"height":1080,"hasAudio":true,"hasCamera":false,"status":"ready","agentReadiness":{"state":"ready","retryAfterSeconds":null,"instruction":null},"createdAt":"2026-08-18T02:47:21.945Z","updatedAt":"2026-08-18T03:02:02.954Z"},"apis":{"context":{"method":"GET","url":"https://clips.agent-native.com/api/agent-context.json?id=F6SlN9TdlK30"},"transcript":{"method":"GET","url":"https://clips.agent-native.com/api/agent-transcript.json?id=F6SlN9TdlK30"},"frame":{"method":"GET","urlTemplate":"https://clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs={timestampMs}","query":{"atMs":"Video timestamp in milliseconds. The endpoint returns image/jpeg."}}},"transcript":{"status":"ready","language":"en","failureReason":null,"retryAfterSeconds":null,"fullText":"Plan mode in Claude Code is incredible, but I always find my eyes glazing over this huge Markdown essay in my terminal. I found I can make much better visual plans with reusable components, so I made a skill called Visual Plan. It generates plans as MDX with highly visual components, diagrams, interactive API specs, schema design changes, annotated code, and even pannable and zoomable wireframes.\n\nEvery UI lets you look at a wireframe first, comment on it, iterate, and then have the agent work. I found this to be a much more intuitive interface for me to reason about what the agent is doing. It's somewhat inspired by that post about how HTML is better than Markdown, but HTML can be slow and verbose to write, and it doesn't look good checked into a repo.\n\nIt’s really made me feel like humans and engineering are kind of entering this new abstraction phase where we reason about things at the plan level. As long as the plan is what we want, agents are getting more and more reliable at executing it—almost to the degree that we trust the C compiler to compile to assembly reliably. As long as the plan is good, we can increasingly trust agents to implement it as expected.\n\nI also made a skill for the reverse of this. I call it Visual Recap. After the agent works, it gives you a recap of everything it did. It's the same idea: wireframes, interactive API specs and diffs, schemas, annotated code, and so on.\n\nNow, when you're reviewing what the agent has done for you or looking at a pull request for somebody else's code, you can see a visual recap. It's all free and open source. You can find it on my GitHub. Let me know what you think.","segments":[{"startMs":0,"endMs":1800,"timestamp":"0:00","range":"0:00-0:01","text":"Plan mode in Claude code is incredible,"},{"startMs":1800,"endMs":3600,"timestamp":"0:01","range":"0:01-0:03","text":"but I always find my eyes glazing"},{"startMs":3600,"endMs":5400,"timestamp":"0:03","range":"0:03-0:05","text":"over this huge markdown essay in my"},{"startMs":5400,"endMs":7200,"timestamp":"0:05","range":"0:05-0:07","text":"terminal. And I found I can make"},{"startMs":7200,"endMs":9000,"timestamp":"0:07","range":"0:07-0:09","text":"much better visual plans with reusable components."},{"startMs":9000,"endMs":11245,"timestamp":"0:09","range":"0:09-0:11","text":"So I made a skill called visual"},{"startMs":11245,"endMs":13490,"timestamp":"0:11","range":"0:11-0:13","text":"plan. It generates plans as MDX with"},{"startMs":13490,"endMs":14452,"timestamp":"0:13","range":"0:13-0:14","text":"super visual components,"},{"startMs":14452,"endMs":16377,"timestamp":"0:14","range":"0:14-0:16","text":"diagrams, API specs that are interactive,"},{"startMs":16377,"endMs":17339,"timestamp":"0:16","range":"0:16-0:17","text":"schema design changes,"},{"startMs":17339,"endMs":19584,"timestamp":"0:17","range":"0:17-0:19","text":"annotated code, and even pan and zoomable"},{"startMs":19584,"endMs":21829,"timestamp":"0:19","range":"0:19-0:21","text":"wireframes. Every UI lets you look at"},{"startMs":21829,"endMs":22791,"timestamp":"0:21","range":"0:21-0:22","text":"a wireframe first,"},{"startMs":22791,"endMs":23753,"timestamp":"0:22","range":"0:22-0:23","text":"comment on it,"},{"startMs":23753,"endMs":26000,"timestamp":"0:23","range":"0:23-0:26","text":"iterate, and then have the agent work."},{"startMs":26000,"endMs":27842,"timestamp":"0:26","range":"0:26-0:27","text":"I found this to be a much"},{"startMs":27842,"endMs":29684,"timestamp":"0:27","range":"0:27-0:29","text":"more intuitive interface for me to reason"},{"startMs":29684,"endMs":31000,"timestamp":"0:29","range":"0:29-0:31","text":"about what the agent's doing."},{"startMs":31000,"endMs":32867,"timestamp":"0:31","range":"0:31-0:32","text":"It's somewhat inspired by that post about"},{"startMs":32867,"endMs":34467,"timestamp":"0:32","range":"0:32-0:34","text":"how HTML is better than markdown,"},{"startMs":34467,"endMs":36334,"timestamp":"0:34","range":"0:34-0:36","text":"but HTML can be slow and verbose"},{"startMs":36334,"endMs":38201,"timestamp":"0:36","range":"0:36-0:38","text":"to write. It doesn't look good checked"},{"startMs":38201,"endMs":39000,"timestamp":"0:38","range":"0:38-0:39","text":"into a repo."},{"startMs":39000,"endMs":41593,"timestamp":"0:39","range":"0:39-0:41","text":"And it's really made me feel like"},{"startMs":41593,"endMs":44186,"timestamp":"0:41","range":"0:41-0:44","text":"humans and engineering is kind of entering"},{"startMs":44186,"endMs":46779,"timestamp":"0:44","range":"0:44-0:46","text":"this new abstraction phase where we reason"},{"startMs":46779,"endMs":49000,"timestamp":"0:46","range":"0:46-0:49","text":"about things at the plan level."},{"startMs":49000,"endMs":50600,"timestamp":"0:49","range":"0:49-0:50","text":"As long as the plan's what we"},{"startMs":50600,"endMs":52200,"timestamp":"0:50","range":"0:50-0:52","text":"want, agents are getting more and more"},{"startMs":52200,"endMs":53343,"timestamp":"0:52","range":"0:52-0:53","text":"reliable at executing on that."},{"startMs":53343,"endMs":54943,"timestamp":"0:53","range":"0:53-0:54","text":"Almost to the degree to which we"},{"startMs":54943,"endMs":56543,"timestamp":"0:54","range":"0:54-0:56","text":"trust the C compiler to compile to"},{"startMs":56543,"endMs":57000,"timestamp":"0:56","range":"0:56-0:57","text":"assembly reliably."},{"startMs":57000,"endMs":58400,"timestamp":"0:57","range":"0:57-0:58","text":"As long as the plan is good,"},{"startMs":58400,"endMs":59800,"timestamp":"0:58","range":"0:58-0:59","text":"more and more we can trust the"},{"startMs":59800,"endMs":61000,"timestamp":"0:59","range":"0:59-1:01","text":"agents to implement it as expected."},{"startMs":61000,"endMs":62400,"timestamp":"1:01","range":"1:01-1:02","text":"I also made a skill for the"},{"startMs":62400,"endMs":63300,"timestamp":"1:02","range":"1:02-1:03","text":"reverse of this."},{"startMs":63300,"endMs":64000,"timestamp":"1:03","range":"1:03-1:04","text":"I call it visual recap."},{"startMs":64000,"endMs":65355,"timestamp":"1:04","range":"1:04-1:05","text":"What it can do is after the"},{"startMs":65355,"endMs":66710,"timestamp":"1:05","range":"1:05-1:06","text":"agent works, give you a recap of"},{"startMs":66710,"endMs":67567,"timestamp":"1:06","range":"1:06-1:07","text":"everything it did."},{"startMs":67567,"endMs":68424,"timestamp":"1:07","range":"1:07-1:08","text":"It's the same idea,"},{"startMs":68424,"endMs":69500,"timestamp":"1:08","range":"1:08-1:09","text":"wireframes, interactive API specs and diffs,"},{"startMs":69500,"endMs":69750,"timestamp":"1:09","range":"1:09-1:09","text":"schemas, annotated code,"},{"startMs":69750,"endMs":70000,"timestamp":"1:09","range":"1:09-1:10","text":"etc."},{"startMs":70000,"endMs":71167,"timestamp":"1:10","range":"1:10-1:11","text":"So now when you're reviewing what the"},{"startMs":71167,"endMs":72067,"timestamp":"1:11","range":"1:11-1:12","text":"agent has done for you,"},{"startMs":72067,"endMs":73234,"timestamp":"1:12","range":"1:12-1:13","text":"or looking at like a pull request"},{"startMs":73234,"endMs":74134,"timestamp":"1:13","range":"1:13-1:14","text":"for somebody else's code,"},{"startMs":74134,"endMs":75134,"timestamp":"1:14","range":"1:14-1:15","text":"you can see a visual recap."},{"startMs":75134,"endMs":76134,"timestamp":"1:15","range":"1:15-1:16","text":"It's all free and open source."},{"startMs":76134,"endMs":77301,"timestamp":"1:16","range":"1:16-1:17","text":"You can find it on my GitHub."},{"startMs":77301,"endMs":78000,"timestamp":"1:17","range":"1:17-1:18","text":"Let me know what you think."}],"segmentCount":54},"comments":[],"commentCount":0,"commentsTruncated":false,"reactions":[],"reactionCount":0,"reactionsTruncated":false,"chapters":[],"recommendedFrames":[{"atMs":0,"timestamp":"0:00","reason":"opening frame","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=0"},{"atMs":3600,"timestamp":"0:03","reason":"transcript: over this huge markdown essay in my","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=3600"},{"atMs":7200,"timestamp":"0:07","reason":"transcript: much better visual plans with reusable components.","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=7200"},{"atMs":11245,"timestamp":"0:11","reason":"transcript: plan. It generates plans as MDX with","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=11245"},{"atMs":14452,"timestamp":"0:14","reason":"transcript: diagrams, API specs that are interactive,","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=14452"},{"atMs":19584,"timestamp":"0:19","reason":"transcript: wireframes. Every UI lets you look at","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=19584"},{"atMs":22791,"timestamp":"0:22","reason":"transcript: comment on it,","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=22791"},{"atMs":26000,"timestamp":"0:26","reason":"transcript: I found this to be a much","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=26000"},{"atMs":29684,"timestamp":"0:29","reason":"transcript: about what the agent's doing.","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=29684"},{"atMs":32867,"timestamp":"0:32","reason":"transcript: how HTML is better than markdown,","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F6SlN9TdlK30&atMs=32867"}],"bugReport":null,"browserDiagnostics":null,"ctas":[]}