Практика Shadowing: Claude Code Mods Explained: Customize Your Setup - Изучайте разговорный английский по видео

Выберите режим практики

Каждый режим открывает полноэкранную комнату практики.

340 предложений

Если предложения слишком короткие или длинные, нажмите Edit, чтобы их изменить.

Hey, what's going on guys?

So Cloud Code has something called mods now, and they actually let you change the Cloud Code UI itself.

And you can add information above the prompt or in the sidebar.

You can open your own custom panels.

And mods can also add commands and give

Cloud new tools to call.

So a mod is a Cloud Code plugin with JavaScript or TypeScript code that runs inside Cloud Code.

And that code responds to events like session starting

or part of the interface being drawn

and you can ask Claude to create these for you

and just kind of vibe code them and I'll show you how to do

that but I always like to kind of preach to understand what's going on under the hood.

So first I want to show you how a mod fits together

and of course you don't have to write every mod from scratch

I just want you to know what the files are

and how they connect so that you know where to look

if you need to change something and just so you have a better overall understanding of how mods work.

So if you've used skills you're used to giving Claude instructions to follow.

Well, mods let you register code that runs when specific events happen.

Like I said, when a session starts or part of the interface is drawn, skills can include scripts too,

but with a mod, you decide which events trigger your code.

Now, mods run with your user permissions and they can access files, they can start processes, they can make network requests.

They're not sandboxed and they can influence tool approval.

So don't rely on the usual permission prompts to catch everything.

You want to make sure that you read the source, stick to authors you know and trust, or of course create your own.

So here's the plan.

We're going to start with a small mod just to see how the files connect.

And then after that we'll create a session note mod just by prompting

and setting up a marketplace so that we can keep it.

And then I'll show you the mods that I've been using lately.

Some I created and some are open source

and I'll show you how to install each one

and the commands for those and everything will be in a dev stash in the description if you want it.

For now, let's take a quick look at the structure of a simple mod.

So this video is sponsored by Appify.

Now if you're building AI agents, one of the biggest challenges is giving them useful and fresh web data without building every integration yourself.

So Appify is a marketplace of thousands of ready -to -run tools called Actors, and they can collect structured web data,

they can track prices, research businesses, and handle many other web -based tasks.

And you can connect Appify to an MCP -compatible AI client, and then your agent can just search the Actor catalog,

choose the right tool for the job, run it, and return structured results from a plain English request.

And if the tool that you need doesn't exist, you can just build your own actor with JavaScript or Python and then deploy it on Appify.

So use the code Traversy25 for $25 in Appify credits.

Check it out using the link in the description and thanks to Appify for sponsoring the video.

Okay so this example

that I'm going to show you is about as simple as I could get it and it's basically a hello world.

It just puts a message above the prompt and you don't have to understand the code.

Just pay attention to the structure and what each file is for and how they connect.

So everything lives in this hello mod folder and that's just the name of the mod.

It could be anything.

And we have a plugin .json inside of a .clad plugin folder.

And this gives the plugin name, version, description.

It tells CloudCode what the plugin is.

And then we have hooks .json inside the hooks folder and its modules entry points to the register .tsx file,

which is the code that we want

Cloud Code to load.

That's the main file.

And the .slash just means it's in the same folder.

It's right beside the hooks .json.

Now register .tsx is the whole file.

When the mod loads, Cloud Code runs this exported register function, and it passes in a function called on.

And we use on to register our event handlers.

And each call takes an event name as well as a function with the code

that we want to run when that event happens.

So the first handler listens for session .start.

When the mod starts in a session, we set this message to hello from my mod, and then next passes the event along,

and we can continue with the startup.

Now the second handler listens for ui .render, and the above prompt setting tells it which part of the interface to draw in,

which of course is above the prompt.

And then here we get a text component

and return it with our message inside

and that's what puts the greeting above the prompt

so that's the connection you got hooks .json points to register .tsx register sets up the handlers

and the handlers decide what happens when cloud code calls them

and where it shows up all right guys

so i have the cloud code ui open here the the desktop version

and by the way this works on the cli as well as the vs code plugin

or extension and i'm in my bellfree project which is just a

Thank you a website uptime project it doesn't matter where you do this

and i'm going to create just a very simple session note mod

and it's just going to have kind of an input with

a save button where i can save just one piece of text per session

so if i'm in belfry or

if i'm in whatever tmux configs wherever i have just

this area where i can just save a note whether it's something

i plan on doing a reminder whatever it might be all right

and then after that i'll go over the locations

because at first it just saves it within the session

and then you have to move it to a marketplace

so i'll explain all that we'll even look at the code and compare it to what we've already learned

so i'm going to give it a prompt

and i have this inside of a dev stash

that i'll have in the description if you want to copy it

and use this and create the same exact thing

but i would encourage you to kind of experiment

and explore with your own stuff as well your own ideas

so it says use the plugin authoring skill to build a mod called session note

it adds a pain beside the conversation with a text box a save button

so I can jot down what I'm working on now this right here it says add a session note command

or slash session note to reopen the pain

100

so that's another thing you can add these commands to open

101

and close the mods

102

which is cool keep it clean small heading bit of padding keep your reply short

103

and let's run it and by the way I disabled all my mods that's why this is so bare bones.

104

But after I'm going to re -enable them or reinstall them one by one, and I'll show you them, show you what I'm using.

105

If you want to install them, you can.

106

They'll all be in the DevStash link in the description.

107

Now, this is going to pop up, and this is important.

108

You want to click enable for this session.

109

This is for hot reloading so that as you're creating it, you can see it, and you're probably going to have to reiterate on it, right?

110

Because you're probably not going to get exactly what you want the first time.

111

So it'll just keep updating when you, as you prompt and you change things.

112

So you want hot reloading.

113

Okay.

114

So now this is finished and it tells us where this is located, which is basically a temporary location or it's, it's only for this session.

115

So you can see over here, I have my interface and I'll just say like, I don't know, test test note one and save that now

116

if i go to another

117

if i go to tmux configs you can see it doesn't even show here

118

because it's only within this session so if you want this to be permanent

119

and you want it to show up in other projects

120

and continuously use it as well as in the cli

121

then you're going to want to move it to a marketplace and you could move the files

122

manually if you want but i'm just going to tell claude to i'm going to say can you put

123

can you put this mod into a marketplace folder called my dash mods in my code

124

I'll say in my code sandbox and you can put a path

125

but I know it knows where my code sandbox is in fact I'm going to pull it up here

126

so you can see I have my code code folder a sandbox folder and it should create a my mods folder here.

127

Now, just because it creates, it doesn't make it a marketplace.

128

There is a couple of commands we have to run, but it will create it and move it here.

129

So you can see right now my mods session note.

130

In fact, I'm going to bring my mods into VS Code just so you can see VS Code.

131

Remember that, guys?

132

all right so we have my mods

133

and there's a dot cloud plugin folder with a marketplace dot json

134

so this is what what defines it as a marketplace although we still do have to run a couple commands

135

but it just gives us the information about the marketplace

136

and then any plugins in the array are going to be part of

137

that marketplace so

138

if you create more mods you can just put them in this marketplace make sure

139

you add them to the plugins now

140

if we look at the actual session note it has some additional things like types and tests

141

but you can see it has what we looked at before hooks .json it has a register tsx

142

and if we take a look at this i'm not going to go through all this code

143

but we have some helper functions

144

but then here you can see the register function right

145

so register takes in on we have events on session start we have on command run on ui render

146

which we saw in the in the hello mod

147

and then it just outputs jsx right so pretty simple that's

148

that now to register it as a marketplace

149

we have a couple commands to run i don't think it ran them but uh let's open the terminal

150

okay and then in the terminal let's see i'm going to jump into dev stash i think i have the

151

I think I have the things here.

152

And you can also validate, right?

153

So I could do a validate, which checks the JSON structure and stuff like that.

154

But right here is what I want to show you.

155

Claude plugin marketplace add and then the location.

156

So that will add the marketplace.

157

If you want to install a mod from that marketplace, it's Claude plugin install session node or whatever the name of

158

that mod at the marketplace and it scopes it as the user so that it'll be in all your projects.

159

You can scope it to that specific project as well, but user is the default, so you don't even really need this.

160

But I'm going to copy those and then jump back into the terminal and let's paste those in.

161

Okay, so successfully added

162

Marketplace, my mods, and then successfully installed the plugin session note.

163

So now if I go back to Claude and I go back and I go to another session or another project,

164

you can see that this is here, session note.

165

Let me just put like test note, test note two, save.

166

Okay.

167

If I go back to Belfry, test note one is still there.

168

So very simple, but it gives you a good example of a mod and how it works.

169

Now I just want to show you the CLI as well.

170

So if I go to Claude, and since it's a sidebar mod, this has to be really wide.

171

In fact, I think it has to be like 1440, which is past the screen that I'm recording.

172

But yeah, so there it pops in.

173

So it has to be very wide for the sidebar.

174

Actually, I can move that.

175

I guess it doesn't.

176

You just have to fix it.

177

Yeah, so test node 2.

178

I'm not sure why that's already there.

179

That might have been left over from before.

180

But let's say test node 3. and save.

181

All right, so you can use it there, and it would also work in the VS Code extension as well.

182

So that's the basics of just creating a mod, very simple stuff.

183

So what I'm going to do next is show you the five or six mods that I've been using.

184

Some I created myself, some are open source, and if you want to use them, of course you can.

185

So now what I want to do is take you through some of the mods that I've been using.

186

And I didn't go scour the internet for like really flashy mods to make a fancy video.

187

These are tools that I use in my everyday workflow.

188

So the first one is called Session HUD.

189

And this is from my Traversy Claude mods repo.

190

And there's just three mods here.

191

I'll add more as time goes on.

192

And I would just want to install these one by one.

193

So the first one is we want the marketplace.

194

So we want this command here get I'm sorry not get Claude plugin marketplace add

195

and then Claude plugin install session hud at Traversey mods

196

which is the marketplace name so you want to copy those

197

and then we're going to jump into the terminal paste those in run it adding marketplace

198

and then it installs the mod and then

199

if we jump back over to Claude it should show up

200

if it doesn't you can do reload plugins but there it is.

201

So basically we have this bar and this is really common.

202

There's a lot of mods that show your context usage.

203

In fact, they actually built it in here into, you know, native, the native UI.

204

But if you notice it's 9 % of 1 million, which is my allocated limit, my context limit in Cloud Code.

205

However, that's way too much.

206

I like to keep it much smaller than that.

207

I clear my context when I get around 300 ,000, 400 ,000 at the absolute most.

208

So what this allows you to do is set that max.

209

So you can see it says 28 % of 300 ,000.

210

When it gets near that, I know that I have to clear and I have a workflow, I have a system where I will,

211

you know, load in my session data, and then I will, I'll save it.

212

So when it starts to get to close to 300 ,000, I'll save it.

213

And then I'll clear my context.

214

And then I'll load it again.

215

That way, I'm always under 300 ,000.

216

And this keeps that in my visual field if I'm getting close to that.

217

It also shows the get branch.

218

It also shows what I've used for the week.

219

And if I click details, it opens this pane that shows this right here.

220

So 86K used of 300 ,000.

221

If I want, I can change that to, let's say I want to do 400 ,000, save that.

222

And now I have 21 % of 400 ,000.

223

And then it just shows like your five hour usage, your weekly usage, what this session is made up of.

224

So messages, MCP tools, et cetera, basically the same stuff that is shown in here okay

225

so I really just use this mainly to have my own max level of you know of context

226

so that is session hud

227

So the next one is called tool cards.

228

And when you run or when Claude runs bash or read or any of those internal tools,

229

what this will do is it'll show a card with an icon depending on what type of tool it is.

230

And it'll give you extra information as well.

231

And it just makes it obvious that a tool call was run.

232

So if I run this prompt right here before I install it, I'm going to run this.

233

So let's jump into Claude

234

and this will just tell it to use bash to run git branch show current

235

and it'll also tell it to use the read tool as well

236

and and this is before the tool card installation

237

so basically it just says ran two commands and

238

if I click on

239

that it just shows me this showed current git branch whatever

240

now I'm going to install tool cards with this command here and this is also in the the repo.

241

This is the same marketplace as SessionHUD.

242

And then let's go ahead and we want to paste that into our terminal.

243

Okay, so that's going to install tool cards.

244

And right away, we should see this change.

245

It should change to the new style.

246

And there we go.

247

So it looks much better.

248

It has a specific icon for the type of tool.

249

So this is for bash, the red, this is for read.

250

It tells us if it's running or completed.

251

It tells us we have the details where it shows us

252

some more information like the git branch in this case listed the three first three tracked files

253

and then shows us this as well.

254

So I think this it not only looks better but it gives you more information.

255

So that's tool cards.

256

So the next one is called next steps.

257

This is the last one from that that repo or that marketplace.

258

And basically once you run a prompt and it gives you a response,

259

it'll give you three optional steps to take based on what you asked it, based on what it thinks you'll want to do next.

260

So to install it, we can grab this right here.

261

Again, this is from the Traversy Cloud mods.

262

And let's jump back over to the terminal and let's paste that in, run it.

263

okay

264

and then I'm going to run this right here

265

this prompt just says explain how this project is organized in a few sentences

266

and then it should give me some next step options

267

and you can see it's running a bash tool as well if I wanted details on that I could

268

okay it's explaining what it is Belfry is a standard next app

269

and and there it is

270

so these choice is right here it says run the v test suite and summarize the results show the prisma schema

271

list the eight completed features in blueprint so those give me some options

272

and if i click it it'll just put it in the prompt

273

and i can hit enter so that is next steps

274

so the next one i want to show you is file tree

275

and it just puts the files in cloud code and i know there's a there's a native file tree,

276

but I really like the way this one looks and I like how it behaves.

277

So when it's reading a file or creating a file, it shows you, it has these little flashy animations.

278

So it just makes me feel more connected to the code

279

because I was using the VS Code extension for a long time because I liked having the code there.

280

But this is really cool because you can set it to open files in VS Code

281

if you just double click on them.

282

So this is by Datagoblin.

283

This is slash clodcode file tree.

284

And to install, we want to first add the marketplace and then just install the plugin or the mod.

285

So let's do that.

286

Paste that in, run it, and let's jump back over.

287

And we should see the file tree just pop right in here.

288

Okay, there it is.

289

And I just really like how it looks especially compared to the the default one actually

290

I think I have a prompt in the dev stash we can we can use yeah

291

so read the projects readme

292

and one of its source files then create a folder called file tree demo so let's try that out

293

and right away you can see the readme flashes flashes purple so there's different like color codes I believe.

294

I think purple is just when it's reading it.

295

And then it should create the file.

296

And now you can see that the files are green that were created.

297

So you know exactly you know what was added.

298

And then if I were to let's say I want to read this monitor's ts file.

299

If I double click it it opens right in vs code

300

so I could edit it or do what I want with it.

301

So really cool stuff so that's file tree

302

so the last one i want to show you is blast radius

303

which will offer extra protection if you are in auto mode and you want to delete files and so on

304

But I want to show you this repo.

305

This is, let's see, hamzafer slash clodcodemods.

306

And it's relatively popular, 300 stars for a mod repo.

307

Mods were just released, like, I think less than two weeks ago.

308

But there's quite a few really cool stuff here.

309

There's a whole mission control, which is a live map of agents, tool calls, and the code they touch.

310

I actually have that installed on my dev machine behind me um there's like a context bar

311

which is similar to session hud

312

but i don't believe you can set your custom limit uh what else

313

there's usage meter heat maps your open ai balance

314

so i would definitely suggest checking checking out this repo session saver

315

but the one

316

that i'm using from here is is a blast radius let me just search for it yeah

317

this right here blast radius so see what what rm rf would delete

318

because you you want to make sure that you don't delete

319

that you know or have clod delete that you're not supposed to

320

so basically what we need is i have it in the dev stash to add the hams hamzafer marketplace

321

and then just install blast radius

322

so let's do that we want to go to the terminal and paste that in run it

323

okay and then in the the dev stash i have this make directory build demo print

324

so it's just going to create a build demo folder

325

and then i'm going to ask it to delete it so let's copy that

326

and by the way i'm in auto mode of course in in clod

327

so it has you know full permissions so let's run

328

that whoops i need to run that here but i guess we could

329

so it does the same thing so now we have

330

that build demo and you can see it's green

331

because we just created it and then let's grab this to use the bash tool and run rm rf

332

and we should see the blast radius tool work there it is

333

so you're just going to get this prompt um let's see it's just it basically just holds the files

334

so delete two files build demo two dot txt one dot txt I can cancel

335

or proceed I proceed and now they're deleted

336

so just an just an extra layer of safety um

337

but yeah so those are the I mean I have maybe maybe four four

338

or five more mods installed on my dev machine but these are the ones that I find the most useful, at least right now.

339

So let me know what you guys think, if you guys have any mods that you suggest, whether they're your own or someone else's,

340

and hopefully you like this video and shed a little light on Cloud Code mods.

Скачать приложение

Всё для свободной речи

ИИ-оценка произношенияОценка каждой фразы

Практика IPAОсвойте каждый звук

СловарьСоберите свой словарный запас

Игра со словамиУчитесь играя

Сканировать QR

Download on theApp Store Get it onGoogle Play

Тот же канал

FOR YOU

Лексика и советы по произношению к этому уроку

Этот урок разговорной практики построен на видео «Claude Code Mods Explained: Customize Your Setup». Чаще всего повторяются слова: mod, code, session, file, marketplace. В этом видео 340 предложений и 4121 слов для шедоуинга. Речь длится 23:06. Говорящий говорит в естественном темпе, около 178 слов в минуту, близком к повседневной речи. 82% слов входят в 3000 самых частых слов английского языка; остальные стоит разобрать перед занятием.

Ключевая лексика этого видео

15 слов из видео, которые стоит выучить, с произношением и значением:

Слово	Произношение	Значение
marketplace существительное		ры́нок, база́р
prompt глагол	/pɹɑmpt/	побужда́ть, внуша́ть
cloud существительное	/ˈklaʊ̯d/	о́блако, ту́ча
install глагол	/ɪnˈstɔl/	устана́вливать, установи́ть
folder существительное	/ˈfoʊldɚ/	па́пка, скоросшива́тель
terminal существительное	/ˈtɚmɪnəl/	аэровокза́л, термина́л
delete глагол	/dɪˈliːt/	удаля́ть, удали́ть
pasta существительное	/ˈpɑ.stə/	макаро́ны, макаро́нные изде́лия
stash существительное	/stæʃ/	тайни́к, зага́шник
connect глагол	/kəˈnɛkt/	свя́зывать, связа́ть
hook существительное	/hʊk/	крюк, крючо́к
blast существительное	/blæst/	поры́в ве́тра, поры́в
demo существительное	/ˈdɛm.oʊ/	демонстра́ция, пока́з
radius существительное	/ˈɹeɪ.di.əs/	лучева́я кость
bash глагол	/bæʃ/	колоти́ть, поколоти́ть

Фразовые глаголы, которые вы услышите

Слово	Произношение	Значение
set up глагол	/ˌsɛt ˈʌp/	устана́вливать, установи́ть
show up глагол		объявля́ться, объяви́ться
check out глагол		проверя́ть, прове́рить
go ahead глагол	/ˌɡoʊ əˈhɛd/	дава́й, приступа́йте
go back глагол		возвраща́ться, возврати́ться
go over глагол		хорошо́ принима́ться

Фразы, которые стоит повторять

Короткие законченные фразы из видео, которые пригодятся в повседневном разговоре:

Hey, what's going on guys?
I'm not sure why that's already there.
I'll add more as time goes on.
It also shows what I've used for the week.
It tells us if it's running or completed.

Грамматика в этом видео

Конструкции, которые говорящий использует чаще всего, с точными словами из видео:

Конструкция	В видео
Present Perfect Continuous have/has been + -ing — действие началось раньше и продолжается	I've been using
Пассивный залог be + причастие прошедшего времени — важно, что происходит, а не кто это делает	being drawn · is drawn · is sponsored
Придаточные определительные who / which + предложение — уточнение о человеке или предмете	project which is · located, which is · million, which is

Произношение, на которое стоит обратить внимание

Говорящий использует 87 сокращённых и редуцированных форм, например I'm, I'll, don't. Произносите их коротко, так, как слышите.

Звуки «sh» и «zh»: stash /stæʃ/, bash /bæʃ/, extension /ɪkˈstɛnʃən/, flash /flæʃ/, integration /ˌɪn.tɪˈɡɹeɪ.ʃən/
Длинные слова — следите за ударением: successfully /səkˈsɛs.fə.li/, automobile /ˈɔː.tə.məˌbil/, temporary /ˈtɛmp(əˌɹ)ɛɹi/, experiment /ɪkˈspɛɹ.ə.mənt/, integration /ˌɪn.tɪˈɡɹeɪ.ʃən/

Звуки, трудные для русскоязычных:

/w/ — губы округлены, это не /v/: wherever /(h)wɛɹˈɛvɚ/, suite /swiːt/, workflow /ˈwɝkfloʊ/, whoop /wuːp/
/h/ — лёгкий выдох, а не русское «х»: hook /hʊk/, handler /ˈhænd.lə/, wherever /(h)wɛɹˈɛvɚ/, ham /ˈhæm/, behave /bɪˈheɪv/
Звонкие согласные в конце слова — не оглушайте их: mod /mɑd/, cloud /ˈklaʊ̯d/, usage /ˈjuːsɪd͡ʒ/, installed /ɪnˈstɔːld/, node /noʊd/

Как заниматься с этим видео

Прослушайте всё видео один раз молча и выпишите незнакомые слова.
Начните со скорости 0,75×, повторяйте предложение за предложением и вернитесь к обычной скорости, когда станет легко.
Запишите себя и сравните с оригиналом, обращая внимание на такие слова, как marketplace, prompt, cloud.

Что такое техника Shadowing?

Shadowing — это научно обоснованная техника изучения языка, изначально разработанная для подготовки профессиональных переводчиков и популяризированная полиглотом доктором Александром Аргуэльесом. Метод прост, но эффективен: вы слушаете аудио на английском от носителей языка и немедленно повторяете вслух — как тень, следующая за говорящим с задержкой в 1–2 секунды. В отличие от пассивного прослушивания или грамматических упражнений, Shadowing заставляет мозг и мышцы рта одновременно обрабатывать и воспроизводить реальные речевые паттерны. Исследования показывают, что это значительно улучшает точность произношения, интонацию, ритм, связную речь, понимание на слух и беглость речи — что делает его одним из самых эффективных методов для подготовки к IELTS Speaking и реального общения на английском.

Техника шедоуинга: читать полное пошаговое руководство →

Практика Shadowing: Claude Code Mods Explained: Customize Your Setup - Изучайте разговорный английский по видео

Выберите режим практики

Скачать приложение

Тот же канал

Does Anyone Use JavaScript Anymore?

I've Changed My Opinion On DEVELOPERS Vibe Coding

Nobody is hiring vibe coders. Sorry

12 Important Concepts In the Age of AI Software Development

Рекомендуемое видео

9 Insane Claude Mods I Already Can't live Without

STOP Running Code On Your Computer

Prompt Engineering - Guidelines

Use these CSS features instead of JavaScript

How I Learned Procedural Generation

Give Me 24 minutes, I'll Give You 1,000+ hours of Claude Knowledge

The easy way to keep your repos tidy.

000 - STM32F1 Tutorial Introduction Video

JUST $1 For Billions of Tokens?! (DeepSeek v4 Pro)

What is a PLC and how does it work?

Best NextJS Folder Structures | Beginner - Intermediate - Advanced

Frieren but with coding jargon