Delba
@delba_oliveira • 118,727 subscribers
For the love of the craft. Claude Code • @ClaudeDevs @AnthropicAI | Prev. @Vercel
Shorts
![Smol tip: pasting long text into Claude Code collapses it into [Pasted text #1]. If you need to edit it you can paste again to expand. Or, Ctrl+G to open the whole prompt in your code editor. Saved changes sync back to Claude's input field.](https://image.24vids.com/tw-2073782737182367803/amplify_video_thumb/2073782043893231617/img/FDuw7Y4-97SRwBih.jpg)
![How I use Claude Code and Remotion to make animated diagrams. Sorry, it's not a single prompt. 1. Find an input language the model knows well. For example, Mermaid for flowcharts. Claude writes it fluently, so it's my entry point. 2. Use Claude to build components that take that input and bake in the guardrails: design system, animation patterns, layout rules. 3. Now I can describe what I want in plain English e.g. "create a flowchart for the tier check section in the script", and Claude translates it to our input language: ``` flowchart TD t1[Tier 1 read-only] t2[Tier 2 in-project writes] t3[Tier 3 everything else] action[Action] --> t1 action --> t2 action --> t3 t1 --> skip([Skips classifier]) t2 --> skip t3 --> classifier{Classifier} classifier --> approve[Approve] classifier --> deny[Deny] ``` The component handles the rest: layout, styling, node and edge reveals. It also takes events for follow-ups like the trace dot that follows a path and lights up nodes. 4. To finish it off, I wrapped the board in a separate CRT shader component. It really helps to have a shared vocabulary with your agent. When I say "rise in fast on enter", it knows I mean fade in while translating up, from a set offset, faster than the default duration, with a specific bezier curve. For common language inspo: look into Matt Pocock `/grill-with-docs` and by Emil Kowalski and Glenn Hitchcock.](https://image.24vids.com/tw-2065461640401682689/amplify_video_thumb/2065459251602997248/img/35BGOMi0YcZLOlxH.jpg)
Videos
Claude Code: Auto mode Auto mode lets Claude safely complete long-running tasks without asking permission for every action. But how does it work? 4 key terms: • Classifier: a separate model that approves or denies each action based on your intent and scope • Filtering: the classifier only sees your messages and Claude's tool calls, not Claude’s reasoning or tool outputs, so it isn't influenced when making decisions • Tier check: read-only and easily-undone actions (like edits inside your repo) skip the classifier; everything else goes through it • Probe: a server-side check that scans incoming content, like web pages, for prompt injection and flags it to Claude I'm working on a longer video that explains how auto mode works and how to configure it. What questions do you have about it?
Delba42,930 views • 2 months ago
React tip: "use client" misconceptions (1/5) 🚫 You need to mark EVERY individual file with "use client" to ensure it is a Client Component. ✅ You only need to mark each client entry point ONCE. Modules imported into a "use client" file are already part of the client bundle. (0:05) Adding "use client" to `3.js` marks the file as a client entry point, including it in the client bundle. (0:11) Importing `d()` into `3.js` (a client entry point) also includes it in the client bundle. (0:14) Adding "use client" to `4.js` has no additional bundling effect on `d()` because it is already part of the client bundle. (0:23) All modules (and their dependencies) imported to `3.js` are included in the client bundle. (0:26) Removing "use client" from `3.js` moves it and its dependencies into the server bundle.
Delba157,404 views • 2 years ago
Playing around with 'use cache' for a new guide I'm working on. Put together some basic examples at the route, component, and function level. Also gave the playground a glow-up: tweaked the design, added Geist and images, and the gradient borders are finally out, sooo 2022 💁♀️
Delba16,939 views • 1 year ago