{"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":"F5l6RppFaQDF","title":"Triggering code to diagram itself","description":"The visual plan skill turns application code into storyboard-style user flows, making it easier to understand current behavior, plan changes, and identify unwanted paths. It was used to discover organization prompts that were still appearing in signup, onboarding, and setup flows, and the skill is available as open source on GitHub.","publicPageUrl":"https://clips.agent-native.com/share/F5l6RppFaQDF","sourceProvider":null,"thumbnailUrl":"https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3015094fef4f45f4a9d154734cfc451c","animatedThumbnailUrl":null,"durationMs":63971,"duration":"64s","width":1080,"height":1080,"hasAudio":true,"hasCamera":false,"status":"ready","agentReadiness":{"state":"ready","retryAfterSeconds":null,"instruction":null},"createdAt":"2026-08-18T02:46:35.766Z","updatedAt":"2026-08-18T03:02:42.681Z"},"apis":{"context":{"method":"GET","url":"https://clips.agent-native.com/api/agent-context.json?id=F5l6RppFaQDF"},"transcript":{"method":"GET","url":"https://clips.agent-native.com/api/agent-transcript.json?id=F5l6RppFaQDF"},"frame":{"method":"GET","urlTemplate":"https://clips.agent-native.com/api/agent-frame.jpg?id=F5l6RppFaQDF&atMs={timestampMs}","query":{"atMs":"Video timestamp in milliseconds. The endpoint returns image/jpeg."}}},"transcript":{"status":"ready","language":"en","failureReason":null,"retryAfterSeconds":null,"fullText":"When I'm trying to improve the user experience of my applications, one of the most valuable things is to be able to see an entire user flow as a storyboard, rather than just one screen or screenshot at a time. This is something I love to use the visual plan skill for. You can describe any flow you want and the agent will look through your code and wireframe out a storyboard of what all these flows look like and map them out. Then you can visualize the steps in a simplified way and spot areas that can improve. Recently, I found in certain flows we were asking for organizations when I thought I had gotten rid of that and made that automatic. A quick storyboard let me see all the different code paths in a simple, visual, intuitive way. Spot areas of flows I didn't want and have the agent fix it. Sign up, onboarding and setup flows are generally some of the most important experiences of your app and usually the least looked at, especially because it can be hard to reproduce all flows for all situations, for all user types, feature flags or whatever else you have. The visual plan skill lets you visualize any part of your code, either to understand the current state, to plan out a new state, or to recap updates that were made. I'm pretty addicted to this skill. I use it for a lot of other things, so let me know if you want to see videos on those. And it's all open source, you can go grab it on my GitHub. If you try it, let me know your feedback.","segments":[{"startMs":0,"endMs":1575,"timestamp":"0:00","range":"0:00-0:01","text":"When I'm trying to improve the user"},{"startMs":1575,"endMs":2475,"timestamp":"0:01","range":"0:01-0:02","text":"experience of my applications,"},{"startMs":2475,"endMs":4050,"timestamp":"0:02","range":"0:02-0:04","text":"one of the most valuable things is"},{"startMs":4050,"endMs":5625,"timestamp":"0:04","range":"0:04-0:05","text":"to be able to see an entire"},{"startMs":5625,"endMs":6750,"timestamp":"0:05","range":"0:05-0:06","text":"user flow as a storyboard,"},{"startMs":6750,"endMs":8325,"timestamp":"0:06","range":"0:06-0:08","text":"rather than just one screen or screenshot"},{"startMs":8325,"endMs":9000,"timestamp":"0:08","range":"0:08-0:09","text":"at a time."},{"startMs":9000,"endMs":10750,"timestamp":"0:09","range":"0:09-0:10","text":"This is something I love to use"},{"startMs":10750,"endMs":12000,"timestamp":"0:10","range":"0:10-0:12","text":"the visual plan skill for."},{"startMs":12000,"endMs":13355,"timestamp":"0:12","range":"0:12-0:13","text":"You can describe any flow you want"},{"startMs":13355,"endMs":14710,"timestamp":"0:13","range":"0:13-0:14","text":"and the agent will look through your"},{"startMs":14710,"endMs":16065,"timestamp":"0:14","range":"0:14-0:16","text":"code and wireframe out a storyboard of"},{"startMs":16065,"endMs":17420,"timestamp":"0:16","range":"0:16-0:17","text":"what all these flows look like and"},{"startMs":17420,"endMs":18000,"timestamp":"0:17","range":"0:17-0:18","text":"map them out."},{"startMs":18000,"endMs":19750,"timestamp":"0:18","range":"0:18-0:19","text":"Then you can visualize the steps in"},{"startMs":19750,"endMs":21500,"timestamp":"0:19","range":"0:19-0:21","text":"a simplified way and spot areas that"},{"startMs":21500,"endMs":22000,"timestamp":"0:21","range":"0:21-0:22","text":"can improve."},{"startMs":22000,"endMs":23750,"timestamp":"0:22","range":"0:22-0:23","text":"Recently, I found in certain flows we"},{"startMs":23750,"endMs":25500,"timestamp":"0:23","range":"0:23-0:25","text":"were asking for organizations when I thought"},{"startMs":25500,"endMs":27250,"timestamp":"0:25","range":"0:25-0:27","text":"I had gotten rid of that and"},{"startMs":27250,"endMs":28000,"timestamp":"0:27","range":"0:27-0:28","text":"made that automatic."},{"startMs":28000,"endMs":30059,"timestamp":"0:28","range":"0:28-0:30","text":"A quick storyboard let me see all"},{"startMs":30059,"endMs":32118,"timestamp":"0:30","range":"0:30-0:32","text":"the different code paths in a simple,"},{"startMs":32118,"endMs":33000,"timestamp":"0:32","range":"0:32-0:33","text":"visual, intuitive way."},{"startMs":33000,"endMs":35154,"timestamp":"0:33","range":"0:33-0:35","text":"Spot areas of flows I didn't want"},{"startMs":35154,"endMs":37000,"timestamp":"0:35","range":"0:35-0:37","text":"and have the agent fix it."},{"startMs":37000,"endMs":38787,"timestamp":"0:37","range":"0:37-0:38","text":"Sign up, onboarding and setup flows are"},{"startMs":38787,"endMs":40574,"timestamp":"0:38","range":"0:38-0:40","text":"generally some of the most important experiences"},{"startMs":40574,"endMs":42361,"timestamp":"0:40","range":"0:40-0:42","text":"of your app and usually the least"},{"startMs":42361,"endMs":44148,"timestamp":"0:42","range":"0:42-0:44","text":"looked at, especially because it can be"},{"startMs":44148,"endMs":45935,"timestamp":"0:44","range":"0:44-0:45","text":"hard to reproduce all flows for all"},{"startMs":45935,"endMs":47212,"timestamp":"0:45","range":"0:45-0:47","text":"situations, for all user types,"},{"startMs":47212,"endMs":49000,"timestamp":"0:47","range":"0:47-0:49","text":"feature flags or whatever else you have."},{"startMs":49000,"endMs":50581,"timestamp":"0:49","range":"0:49-0:50","text":"The visual plan skill lets you visualize"},{"startMs":50581,"endMs":51710,"timestamp":"0:50","range":"0:50-0:51","text":"any part of your code,"},{"startMs":51710,"endMs":53065,"timestamp":"0:51","range":"0:51-0:53","text":"either to understand the current state,"},{"startMs":53065,"endMs":54420,"timestamp":"0:53","range":"0:53-0:54","text":"to plan out a new state,"},{"startMs":54420,"endMs":56000,"timestamp":"0:54","range":"0:54-0:56","text":"or to recap updates that were made."},{"startMs":56000,"endMs":58000,"timestamp":"0:56","range":"0:56-0:58","text":"I'm pretty addicted to this skill."},{"startMs":58000,"endMs":59000,"timestamp":"0:58","range":"0:58-0:59","text":"I use it for a lot of"},{"startMs":59000,"endMs":60000,"timestamp":"0:59","range":"0:59-1:00","text":"other things, so let me know if"},{"startMs":60000,"endMs":61000,"timestamp":"1:00","range":"1:00-1:01","text":"you want to see videos on those."},{"startMs":61000,"endMs":62154,"timestamp":"1:01","range":"1:01-1:02","text":"And it's all open source,"},{"startMs":62154,"endMs":63750,"timestamp":"1:02","range":"1:02-1:03","text":"you can go grab it on my"},{"startMs":63750,"endMs":64000,"timestamp":"1:03","range":"1:03-1:04","text":"GitHub."},{"startMs":64000,"endMs":64900,"timestamp":"1:04","range":"1:04-1:04","text":"If you try it,"},{"startMs":64900,"endMs":66000,"timestamp":"1:04","range":"1:04-1:06","text":"let me know your feedback."}],"segmentCount":47},"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=F5l6RppFaQDF&atMs=0"},{"atMs":4050,"timestamp":"0:04","reason":"transcript: to be able to see an entire","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F5l6RppFaQDF&atMs=4050"},{"atMs":8325,"timestamp":"0:08","reason":"transcript: at a time.","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F5l6RppFaQDF&atMs=8325"},{"atMs":12000,"timestamp":"0:12","reason":"transcript: You can describe any flow you want","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F5l6RppFaQDF&atMs=12000"},{"atMs":16065,"timestamp":"0:16","reason":"transcript: what all these flows look like and","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F5l6RppFaQDF&atMs=16065"},{"atMs":19750,"timestamp":"0:19","reason":"transcript: a simplified way and spot areas that","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F5l6RppFaQDF&atMs=19750"},{"atMs":23750,"timestamp":"0:23","reason":"transcript: were asking for organizations when I thought","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F5l6RppFaQDF&atMs=23750"},{"atMs":27250,"timestamp":"0:27","reason":"transcript: made that automatic.","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F5l6RppFaQDF&atMs=27250"},{"atMs":32118,"timestamp":"0:32","reason":"transcript: visual, intuitive way.","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F5l6RppFaQDF&atMs=32118"},{"atMs":35154,"timestamp":"0:35","reason":"transcript: and have the agent fix it.","url":"https://clips.agent-native.com/api/agent-frame.jpg?id=F5l6RppFaQDF&atMs=35154"}],"bugReport":null,"browserDiagnostics":null,"ctas":[]}