WEBVTT

1
00:00:00.000 --> 00:00:02.720
Now, so today we're going to pick up again

2
00:00:02.720 --> 00:00:05.280
on our Anovo dashboard building.

3
00:00:05.280 --> 00:00:07.120
If you want to watch those part one and two,

4
00:00:07.120 --> 00:00:09.960
I think, where we talked about shaping and framing

5
00:00:09.960 --> 00:00:14.400
and we talked about just how we breadboarded some projects.

6
00:00:14.400 --> 00:00:18.080
Today I'm just going to jump in and share my whole screen here.

7
00:00:18.080 --> 00:00:21.160
I'm going to start first.

8
00:00:21.160 --> 00:00:22.920
Let me grab this one here.

9
00:00:22.920 --> 00:00:25.520
I've got a few different screens going on.

10
00:00:25.520 --> 00:00:27.480
Let's get this here.

11
00:00:27.480 --> 00:00:28.920
And yeah, here we go.

12
00:00:28.920 --> 00:00:34.920
So we talked last time about just we

13
00:00:34.920 --> 00:00:37.600
took some ideas from our team meeting.

14
00:00:37.600 --> 00:00:39.600
We've worked them into some stickies.

15
00:00:39.600 --> 00:00:43.160
We've worked some beautiful sketches here,

16
00:00:43.160 --> 00:00:45.440
fat marker sketches.

17
00:00:45.440 --> 00:00:48.120
We've had a few sessions of figuring out our process

18
00:00:48.120 --> 00:00:50.680
and how things are currently paid in the business

19
00:00:50.680 --> 00:00:54.840
and then how things need to be, what kind of our future process

20
00:00:54.840 --> 00:00:55.800
will be.

21
00:00:55.800 --> 00:01:00.000
We've talked just outlining even how our shaping process

22
00:01:00.000 --> 00:01:00.840
happens.

23
00:01:00.840 --> 00:01:03.920
So this is a little bit of a shaping inception

24
00:01:03.920 --> 00:01:06.880
since we're doing breadboarding about how we do breadboarding.

25
00:01:06.880 --> 00:01:09.880
So that's a new one.

26
00:01:09.880 --> 00:01:12.880
And we've talked a little bit about little sketches

27
00:01:12.880 --> 00:01:16.760
of maybe how these could look, different screens and stuff.

28
00:01:16.760 --> 00:01:19.400
So this is all on one giant board.

29
00:01:19.400 --> 00:01:25.520
I think we had a session here we shaped up a problem.

30
00:01:25.520 --> 00:01:27.560
And then I think we got another one here

31
00:01:27.560 --> 00:01:32.000
where we clarified that this was a new view about having control.

32
00:01:32.000 --> 00:01:36.120
And we talked about how we chopped up the project.

33
00:01:36.120 --> 00:01:38.440
And then I think we went through this.

34
00:01:38.440 --> 00:01:40.520
Yeah, we actually had this navigation.

35
00:01:40.520 --> 00:01:42.240
And clients can go through this.

36
00:01:42.240 --> 00:01:43.920
So this is a recap.

37
00:01:43.920 --> 00:01:46.560
We've been building this as we go.

38
00:01:46.560 --> 00:01:51.160
And so we used this task grid, what we call.

39
00:01:51.160 --> 00:01:55.160
So each one of those little components.

40
00:01:55.160 --> 00:01:58.520
So if we take a blob, we call this random blob a project

41
00:01:58.520 --> 00:01:59.200
here.

42
00:01:59.200 --> 00:02:02.400
There's lots of things that stand on their own here.

43
00:02:02.400 --> 00:02:03.920
So this client view, we technically

44
00:02:03.920 --> 00:02:05.960
could build the back end, build the front end.

45
00:02:05.960 --> 00:02:09.600
And then we can go in and actually ship that,

46
00:02:09.600 --> 00:02:10.400
start using it.

47
00:02:10.400 --> 00:02:11.520
And we can actually go to the next thing.

48
00:02:11.520 --> 00:02:13.960
And these sort of independent parts of the project.

49
00:02:13.960 --> 00:02:16.960
So we typically go in and build those out here.

50
00:02:16.960 --> 00:02:19.200
You can see we don't even fill all nine.

51
00:02:19.200 --> 00:02:21.600
We use little tilde here if this is nice

52
00:02:21.600 --> 00:02:23.880
to have if we get time for it.

53
00:02:23.880 --> 00:02:26.160
This is where I've spent most of my time building out

54
00:02:26.160 --> 00:02:27.880
some of these tasks.

55
00:02:27.880 --> 00:02:29.920
And you can see there's not a lot of detail here.

56
00:02:29.920 --> 00:02:31.640
It's just enough for me to remember it.

57
00:02:31.640 --> 00:02:35.160
I don't need to sign this to someone necessarily.

58
00:02:35.160 --> 00:02:38.000
I'm taking this whole little block myself.

59
00:02:38.000 --> 00:02:40.680
Sometimes we'll go here and I'll say this is for Bruce

60
00:02:40.680 --> 00:02:42.560
or this is for Lucian or something like that

61
00:02:42.560 --> 00:02:44.240
if we were doing this together.

62
00:02:44.240 --> 00:02:48.400
But this is just really a scratch pad for me to have this.

63
00:02:48.400 --> 00:02:49.720
It doesn't sync with anything.

64
00:02:49.720 --> 00:02:51.600
It doesn't connect to anything.

65
00:02:51.600 --> 00:02:52.200
But it's here.

66
00:02:52.200 --> 00:02:54.640
And if I do go to our project here,

67
00:02:54.640 --> 00:02:57.640
I'll just say this is sort of what our view would look like.

68
00:02:57.640 --> 00:02:59.320
We have task grid link.

69
00:02:59.320 --> 00:03:02.600
We have the breadboard link, which is this guy.

70
00:03:02.600 --> 00:03:04.240
This guy is the task grid.

71
00:03:04.240 --> 00:03:06.240
And we can get to a few different things there.

72
00:03:06.240 --> 00:03:07.680
So we share a few updates.

73
00:03:07.680 --> 00:03:10.960
I sent something yesterday to the team.

74
00:03:10.960 --> 00:03:16.640
And so far, we have added a couple little things here.

75
00:03:16.640 --> 00:03:21.320
So now if you go to the client dashboard here,

76
00:03:21.320 --> 00:03:24.880
we can actually pick out a project.

77
00:03:24.880 --> 00:03:27.320
I'll pick out these guys.

78
00:03:27.320 --> 00:03:29.680
Now you can see which projects they have open.

79
00:03:29.680 --> 00:03:32.800
You can actually open this here.

80
00:03:32.800 --> 00:03:39.640
And you can go to a quick little jump to Notion if you want.

81
00:03:39.640 --> 00:03:41.600
You can open it and toggle if you want.

82
00:03:41.600 --> 00:03:44.400
You can actually drag these things around if you want.

83
00:03:44.400 --> 00:03:48.360
And that will actually update it in Notion live,

84
00:03:48.360 --> 00:03:49.840
which is pretty helpful.

85
00:03:50.840 --> 00:03:52.280
Then we created this share page.

86
00:03:52.280 --> 00:03:55.600
So the share page is something we can share with the client.

87
00:03:55.600 --> 00:03:59.760
And it's just got this long ID.

88
00:03:59.760 --> 00:04:02.080
And they can't do anything with it, which is great.

89
00:04:02.080 --> 00:04:04.520
So they can't actually click on anything.

90
00:04:04.520 --> 00:04:06.240
You can technically use the Notion,

91
00:04:06.240 --> 00:04:08.320
but you'd have to have access to that page.

92
00:04:08.320 --> 00:04:10.120
That's pretty well protected.

93
00:04:10.120 --> 00:04:13.120
And then if they do want to sign in, they can do that.

94
00:04:13.120 --> 00:04:15.400
There's not really any benefit to signing in right now.

95
00:04:15.400 --> 00:04:17.800
But I wanted to have a logo, and it

96
00:04:17.800 --> 00:04:19.560
looked weird not having a sign in button.

97
00:04:20.519 --> 00:04:22.320
So that's this first little thing, which

98
00:04:22.320 --> 00:04:25.440
I would say considered completed.

99
00:04:25.440 --> 00:04:27.560
We added the card UI, drag and drop.

100
00:04:27.560 --> 00:04:30.560
You can see just how we broke out these little tasks,

101
00:04:30.560 --> 00:04:33.520
being able to write to Notion and Superbase at the same time,

102
00:04:33.520 --> 00:04:35.360
collapsing the inbox and completed.

103
00:04:35.360 --> 00:04:38.280
I wanted to be able to open this and open the completed.

104
00:04:38.280 --> 00:04:39.900
Because these are things we don't really

105
00:04:39.900 --> 00:04:40.960
look at inbox that much.

106
00:04:40.960 --> 00:04:42.520
We don't really look at completed.

107
00:04:42.520 --> 00:04:44.440
So it's nice to have it on the side.

108
00:04:44.440 --> 00:04:49.600
I stole that from the Fizzydoo app.

109
00:04:49.600 --> 00:04:53.920
They have this little thing, so I stole that from that UI.

110
00:04:53.920 --> 00:04:58.160
And then we had the public share URL.

111
00:04:58.160 --> 00:05:01.080
They have an option to sign in.

112
00:05:00.000 --> 00:05:02.480
And then we added tooltips, I actually added this.

113
00:05:02.480 --> 00:05:05.120
Since clients, you can actually hover over this

114
00:05:05.120 --> 00:05:07.440
and it tells them what's going on in this section.

115
00:05:07.440 --> 00:05:10.080
So here we're getting the initial scope of the project.

116
00:05:10.080 --> 00:05:11.840
You know, here we're creating clarity

117
00:05:11.840 --> 00:05:13.360
and making requirements concrete.

118
00:05:14.000 --> 00:05:15.920
Project is clear, concrete, and approved.

119
00:05:16.480 --> 00:05:19.040
In progress, practically building.

120
00:05:19.040 --> 00:05:21.280
And then in review, we're working together to finalize.

121
00:05:21.280 --> 00:05:24.000
So just, you know, as we scale and we get new clients,

122
00:05:24.000 --> 00:05:26.000
these are helpful things, or new team members even.

123
00:05:26.880 --> 00:05:29.600
These are like some very short definitions

124
00:05:30.000 --> 00:05:32.080
if we forget what's going on in each of these,

125
00:05:32.080 --> 00:05:34.880
I thought that would be like a nice little value add.

126
00:05:34.880 --> 00:05:36.720
So I'm going to jump over, sorry,

127
00:05:36.720 --> 00:05:39.280
I'm going to add the team back into this here.

128
00:05:39.280 --> 00:05:43.440
And let me just bring the, share my screen.

129
00:05:44.800 --> 00:05:45.680
Let's see if it'll work.

130
00:05:48.160 --> 00:05:49.600
Sorry, I go back here.

131
00:05:51.120 --> 00:05:56.480
Take a second and I got to go here and then, and there we go.

132
00:05:57.040 --> 00:05:58.800
So you guys are welcome to jump in

133
00:05:58.800 --> 00:06:00.480
with any questions or comments.

134
00:06:00.480 --> 00:06:01.840
But what I thought would be helpful

135
00:06:02.480 --> 00:06:05.280
is just to kind of show you the workflow

136
00:06:05.280 --> 00:06:08.080
of like how we would go about maybe making

137
00:06:09.760 --> 00:06:11.280
this projects by month.

138
00:06:11.280 --> 00:06:15.280
And I can show you guys the cloud skill piece.

139
00:06:15.280 --> 00:06:18.240
So any quick comments or questions

140
00:06:18.240 --> 00:06:19.520
from anything I showed you guys?

141
00:06:19.520 --> 00:06:21.200
I don't know if anyone, if everybody had seen this

142
00:06:21.200 --> 00:06:23.040
other than Lucian and Macy maybe,

143
00:06:23.040 --> 00:06:24.720
but you guys got any thoughts?

144
00:06:26.480 --> 00:06:36.720
Cool, let me add.

145
00:06:36.720 --> 00:06:39.920
I just have a question.

146
00:06:39.920 --> 00:06:40.480
Yes.

147
00:06:40.480 --> 00:06:41.840
I missed the beginning.

148
00:06:41.840 --> 00:06:42.800
Was this recorded?

149
00:06:42.800 --> 00:06:44.240
Can so I can watch the.

150
00:06:44.240 --> 00:06:46.400
Yeah, this is just the first few minutes.

151
00:06:46.400 --> 00:06:47.680
Yeah, we're just doing it.

152
00:06:47.680 --> 00:06:48.960
All right, cool.

153
00:06:48.960 --> 00:06:49.680
Yeah, me too.

154
00:06:50.640 --> 00:06:50.960
Sweet.

155
00:06:51.680 --> 00:06:55.280
It was just a recap of the first part one and part two.

156
00:06:55.280 --> 00:06:57.920
We did like end of December.

157
00:06:57.920 --> 00:06:59.120
So I didn't really miss anything.

158
00:07:02.560 --> 00:07:06.160
So yeah, I'll go in.

159
00:07:06.160 --> 00:07:08.480
Because I was going to kind of talk

160
00:07:08.480 --> 00:07:12.960
through how I would maybe move this through.

161
00:07:12.960 --> 00:07:15.040
And some of you guys are familiar with this.

162
00:07:15.040 --> 00:07:16.800
But I was going to show you my process.

163
00:07:18.400 --> 00:07:20.240
And before I do that, let me show you.

164
00:07:21.120 --> 00:07:25.840
I wanted to show you guys this video.

165
00:07:25.840 --> 00:07:27.120
I'm going to drop it down here.

166
00:07:28.480 --> 00:07:29.040
Here we go.

167
00:07:30.160 --> 00:07:35.280
If you guys aren't following Riley Brown, he's really good.

168
00:07:36.000 --> 00:07:38.160
And he's on YouTube.

169
00:07:38.160 --> 00:07:40.320
And he's not a developer.

170
00:07:40.880 --> 00:07:44.000
And yet he is teaching a lot of developers how to.

171
00:07:46.720 --> 00:07:47.200
There you go.

172
00:07:48.000 --> 00:07:50.160
So I'll drop that link if you guys want it.

173
00:07:50.720 --> 00:07:53.760
But this is all about Cloud Skills.

174
00:07:54.320 --> 00:07:58.560
And so what this does is it's going

175
00:07:58.560 --> 00:08:01.440
to create a skills folder.

176
00:08:01.440 --> 00:08:04.240
So in your .cloud directory, you're

177
00:08:04.240 --> 00:08:09.200
going to have like I have a new skill called Innovo UI.

178
00:08:09.200 --> 00:08:10.560
So inside my project.

179
00:08:11.120 --> 00:08:12.080
And you just prompt it.

180
00:08:12.080 --> 00:08:13.760
You're like, this is the whole part here.

181
00:08:13.760 --> 00:08:16.320
I just went and said like, you know, oops.

182
00:08:16.400 --> 00:08:18.800
Well, it doesn't do well when you zoom in and out.

183
00:08:20.800 --> 00:08:21.520
Let's go back.

184
00:08:21.520 --> 00:08:22.400
Let's see if that works.

185
00:08:25.520 --> 00:08:26.160
You guys noticed.

186
00:08:26.160 --> 00:08:26.560
There you go.

187
00:08:26.560 --> 00:08:27.280
I'll just start here.

188
00:08:27.920 --> 00:08:29.280
I won't change the zoom.

189
00:08:29.280 --> 00:08:31.440
But hey, I want to make a new skill.

190
00:08:31.440 --> 00:08:32.640
And you can just reference this thing.

191
00:08:32.640 --> 00:08:34.480
It's GitHub Anthropic Skills.

192
00:08:35.120 --> 00:08:36.720
There's a whole bunch of documentation on that.

193
00:08:37.840 --> 00:08:39.120
I think I can open it here.

194
00:08:40.240 --> 00:08:40.799
Pull it in.

195
00:08:41.360 --> 00:08:46.080
So yeah, the skills are kind of like how

196
00:08:46.080 --> 00:08:47.520
we used to have like agents.

197
00:08:47.520 --> 00:08:49.520
But it's a little bit more flexible than that.

198
00:08:50.800 --> 00:08:54.000
So what I'm going to do is I'm going

199
00:08:54.000 --> 00:08:55.680
to make a thing called Innovo UI.

200
00:08:55.680 --> 00:08:57.440
So when I build a new component, I

201
00:08:57.440 --> 00:09:03.600
want it to look and be styled like the Innovo brand,

202
00:09:03.600 --> 00:09:04.160
for example.

203
00:09:05.040 --> 00:09:07.040
This is so fun scrolling around here.

204
00:09:07.680 --> 00:09:09.200
Claude really is struggling to.

205
00:09:12.880 --> 00:09:13.440
There we go.

206
00:09:14.160 --> 00:09:15.760
And it's going to create the skill file.

207
00:09:16.480 --> 00:09:17.440
I'll pull it over here.

208
00:09:18.080 --> 00:09:21.520
And you can see it's basically got the brand colors.

209
00:09:21.520 --> 00:09:25.760
It's got some of my styling of what we like, typography

210
00:09:25.760 --> 00:09:26.720
like we already have.

211
00:09:27.520 --> 00:09:27.760
Wow.

212
00:09:28.880 --> 00:09:31.040
It's kind of hard to show it while it's literally

213
00:09:31.040 --> 00:09:32.960
drawing it right this very second.

214
00:09:32.960 --> 00:09:36.640
So let's do this all here.

215
00:09:37.920 --> 00:09:41.920
Are you guys confused by my workspace yet?

216
00:09:42.800 --> 00:09:43.040
OK.

217
00:09:43.760 --> 00:09:44.640
Let me just close this.

218
00:09:44.640 --> 00:09:46.000
I don't really need to look at that right now.

219
00:09:47.680 --> 00:09:50.160
Font families, hierarchy of like, hey, we

220
00:09:50.160 --> 00:09:51.680
use this for page title.

221
00:09:51.680 --> 00:09:53.760
Then for normal text, we use this.

222
00:09:53.760 --> 00:09:56.320
For technical little badges and stuff, I like the font mono.

223
00:09:57.520 --> 00:09:58.800
It's got some general principles.

224
00:09:58.800 --> 00:09:59.840
So what it's going to do is if.

225
00:10:00.000 --> 00:10:05.120
I go and in the skill at the very top, it's always going to have a name for the skill

226
00:10:05.680 --> 00:10:10.080
and then it's going to say, hey, you know, this is the design system and UI guidelines for Nova

227
00:10:10.080 --> 00:10:14.560
Studios. Use this skill when building new pages, components, modifying existing UI ensures

228
00:10:15.680 --> 00:10:21.440
consistent professional bespoke agency aesthetics that avoid generic AI generated patterns.

229
00:10:21.440 --> 00:10:29.840
Emphasis on the avoid generic AI patterns, right? Because now I think everybody's

230
00:10:29.840 --> 00:10:39.200
kind of a little, you know, sick of seeing kind of AI vibe coded components at this point. They

231
00:10:39.200 --> 00:10:43.920
all have like soft blue background, blue border, you know, they kind of have like a certain look

232
00:10:43.920 --> 00:10:48.800
to them. And for some reason, if you guys have seen the jokes, like the tailwind purple and

233
00:10:48.800 --> 00:10:54.000
gradient is like the thing that, you know, AI is obsessed with. So that's easy to get out.

234
00:10:54.560 --> 00:10:59.200
So I think I specifically say like avoid gradient somewhere in here. I don't remember. I think that

235
00:10:59.200 --> 00:11:05.600
was the question. So, but when I, when I created this, let me go back and see if I can try to show

236
00:11:05.600 --> 00:11:11.920
you the process here. Yeah, I made this, then it asked me questions. So it takes you through the

237
00:11:11.920 --> 00:11:16.240
little wizard and it said, hey, what kind of fonts do you want to use? And I said, hey, use the home

238
00:11:16.240 --> 00:11:20.320
page for reference. Like you go figure that out yourself. What kind of balance do you like? So

239
00:11:20.320 --> 00:11:25.200
they had some questions about like, do you want it more compact, more white space, avoid all

240
00:11:25.200 --> 00:11:29.920
gradients together, you know, to make sure it doesn't look AI generated. So I put a few little

241
00:11:29.920 --> 00:11:35.440
points in there. What's the preferred button interaction? You know, I just gave them some,

242
00:11:35.440 --> 00:11:39.440
some quick things that like, and these are things that I've been kind of saying over and over again.

243
00:11:41.280 --> 00:11:45.120
And it, it, I don't even think that's our website. I don't know where it pulled that from, but

244
00:11:46.720 --> 00:11:50.640
border radius, it kind of clarified that it just asked me a few questions and then it built this

245
00:11:50.640 --> 00:11:57.520
document off of this. So in theory, what I can do now is we can clear the context

246
00:11:58.320 --> 00:12:03.360
and you can see there's a new skill. So I'll actually commit that here before she does test

247
00:12:03.360 --> 00:12:11.120
it. So I'll, I'm just going to try this live. Let's see how it goes. And I got to think of something

248
00:12:11.120 --> 00:12:17.680
to do. Let's just do like, let's say for the, there's a, we have a super blank, like a really

249
00:12:17.680 --> 00:12:26.000
blank team dashboard. Update the, I think it's team dashboard like this to include the,

250
00:12:30.960 --> 00:12:40.000
and I think we have this, let's see.

251
00:12:47.840 --> 00:12:51.760
I'm actually going to do something a little more simple. Let me, let me do something. Let's say

252
00:12:51.760 --> 00:13:01.920
like update, let's just say like build a quick mock-up in, of what team members could see based

253
00:13:01.920 --> 00:13:14.000
on, in the project. So we'll just say like, and I think I can include here. Let's just see what it

254
00:13:14.320 --> 00:13:21.760
does. I'm going to auto accept everything. I do this a lot to have it do a quick mock-up. Of

255
00:13:21.760 --> 00:13:31.200
course, I also love, as you guys know, V0. So I did this to quickly get like, hey, we've got this

256
00:13:31.200 --> 00:13:37.600
like status thing going on here, here by like the columns, but maybe we want to look at it by month.

257
00:13:37.600 --> 00:13:41.600
So it was like, maybe there'll be a toggle here. I'm not quite like decided on it yet,

258
00:13:42.320 --> 00:13:47.280
but you can see the AI, like this is the gradients of this, like stuff drives me crazy. And for some

259
00:13:47.280 --> 00:13:54.800
reason, this yellow, it's like obsessed with this yellow and this color scheme. But yeah, so having

260
00:13:54.800 --> 00:13:59.360
something that I can quickly mock up, I don't use this code. I just get a quick like sketch of it.

261
00:14:00.080 --> 00:14:06.160
This is the same kind of concept in here. And I wanted to see, what we should see is a little

262
00:14:06.240 --> 00:14:11.200
green dot like that once it starts building. And it's going to invoke the Innova UI skill

263
00:14:11.760 --> 00:14:16.240
automatically. I didn't have to call it. I didn't mention it. It just sees that I'm designing

264
00:14:16.240 --> 00:14:20.880
something new and it should just invoke that. So this is a great thing where you could add

265
00:14:21.600 --> 00:14:24.880
a number of skills. If we were framing something, shaping something, if we were

266
00:14:25.440 --> 00:14:31.520
having like a technical audit skill, these are things we could also pass around and share between

267
00:14:32.080 --> 00:14:36.320
all of us. And I just went ahead and said auto accept. I'm not going to ask it. Normally,

268
00:14:36.320 --> 00:14:42.560
I would put it in plan mode. So shift tab, we put it in plan mode. And I want to see if it's

269
00:14:42.560 --> 00:14:48.080
invoking this because that's what it should have done. It's just writing a bunch of stuff. We'll

270
00:14:48.080 --> 00:14:54.320
see what it does. And if it listened to any of the instructions, well, it says it's done. Let's see.

271
00:14:57.520 --> 00:14:59.360
Okay. It's not too bad.

272
00:15:00.000 --> 00:15:07.520
Um, I don't know what, I don't know what this R21 is that like supposed to be a different currency.

273
00:15:08.200 --> 00:15:11.760
Uh, AI did do some gradients, not too bad though.

274
00:15:12.640 --> 00:15:15.800
Um, I'm curious why it didn't invoke.

275
00:15:15.840 --> 00:15:20.240
Um, did you like use that?

276
00:15:24.160 --> 00:15:25.000
I'm just curious.

277
00:15:25.000 --> 00:15:30.280
It should have, it may have to like reset the session or something.

278
00:15:30.640 --> 00:15:33.400
Uh, I didn't, let me check what's in there.

279
00:15:34.640 --> 00:15:36.760
Well, great demo, Claude.

280
00:15:36.920 --> 00:15:38.720
I'm trying to, trying to sell the features here.

281
00:15:39.480 --> 00:15:42.360
Uh, but in, in theory, yeah, you would go through this.

282
00:15:42.360 --> 00:15:43.680
You shouldn't have to invoke it.

283
00:15:43.720 --> 00:15:48.680
It should use, what it uses is the description up here, uh, use this design system.

284
00:15:48.680 --> 00:15:52.840
As long as this is, uh, specified well, it should invoke it at the right moment.

285
00:15:52.840 --> 00:15:57.360
It may be that I had to, um, stop the session and start a new session.

286
00:15:58.080 --> 00:16:05.320
Um, so we'll see what it comes up with anything slightly different, but, um, anyway, that, that'd be how you would use it.

287
00:16:05.480 --> 00:16:12.360
Um, if we had a, you know, another client, we could have skills for like a particular client's UI would be good.

288
00:16:12.720 --> 00:16:21.280
Uh, if we're building things like, um, I don't know, just if we had a certain backend architecture for tribe, like this is how the API.

289
00:16:21.600 --> 00:16:25.280
So we should, we could have a tribe backend skill.

290
00:16:25.440 --> 00:16:27.040
That's like, here's how we like this.

291
00:16:27.040 --> 00:16:35.000
Or, you know, if we have the Pando, uh, app of how it needs to work with flat file, something like a flat file skill, you could actually add that in there.

292
00:16:35.520 --> 00:16:37.920
Um, and I'm still not seeing it.

293
00:16:37.920 --> 00:16:41.880
Like it should actually have like a little green dot and it's bothering me that I don't see that.

294
00:16:42.360 --> 00:16:44.720
Um, so we'll see what it does.

295
00:16:44.760 --> 00:16:47.200
Maybe it'll, maybe it'll be better.

296
00:16:48.160 --> 00:16:51.400
Yeah, it, it, well, it changed one font and a few of the texts.

297
00:16:51.440 --> 00:16:52.160
That's fine.

298
00:16:52.880 --> 00:16:55.400
Um, I think get rid of that silly gradient though.

299
00:16:55.920 --> 00:16:59.240
So it looks a little better, but he has get the idea.

300
00:16:59.680 --> 00:17:01.120
I wonder if I quit this.

301
00:17:01.640 --> 00:17:10.599
Um, sorry, but anyway, have you guys, I don't know if Janata or are you guys played with, uh, skills yet?

302
00:17:11.359 --> 00:17:12.640
It came out like a couple of weeks ago.

303
00:17:12.760 --> 00:17:15.280
So skills are just cloud files.

304
00:17:15.280 --> 00:17:15.720
Basically.

305
00:17:15.720 --> 00:17:16.760
This is what I'm understanding.

306
00:17:17.480 --> 00:17:28.600
Yeah, basically like, um, there's a little video here, but it's like a, you can put all kinds of instructions or scripts or things that cloud can use to do various things.

307
00:17:28.600 --> 00:17:30.840
It's similar to a course or rules, I believe.

308
00:17:30.880 --> 00:17:32.520
Yeah, kind of.

309
00:17:32.560 --> 00:17:32.960
Yeah.

310
00:17:32.960 --> 00:17:46.720
But you could, it's supposed to be, it's supposed to be smart to where, um, you can, uh, you just put this, add the skill and then it will by itself, figure out what needs to, um, when to invoke the skill.

311
00:17:47.120 --> 00:17:48.960
Whereas like they used to be agents.

312
00:17:48.960 --> 00:17:54.600
So you could have like an agent MD file and I would call my backend, go do backend things.

313
00:17:55.040 --> 00:17:58.760
Um, this is a little bit more like, it's going to give you, it's like a tool call.

314
00:17:58.800 --> 00:17:59.200
Essentially.

315
00:17:59.200 --> 00:18:05.480
You can set the tool tool up to do something and then, um, obviously pass it between projects.

316
00:18:05.480 --> 00:18:11.040
Like if I had this dashboard as a repo and then I had a different one, that's just doing like the marketing website for a Novo.

317
00:18:11.280 --> 00:18:15.040
I could like share that skill, you know, to two places if we wanted to.

318
00:18:15.960 --> 00:18:17.280
Um, does that make sense?

319
00:18:17.800 --> 00:18:22.240
It's very similar to an agent and cursor rules, but, but also slightly different.

320
00:18:24.200 --> 00:18:31.920
I think on them, like they are all trying to, to create different ways for us to create different contexts.

321
00:18:31.920 --> 00:18:40.880
Like it's a way that we are basically how we were going to build our prompts because in the end, everything that we are configuring here, I believe is just being added.

322
00:18:41.200 --> 00:18:44.640
As a pre prompt to the prompts that we are making.

323
00:18:44.640 --> 00:18:47.520
So it's basically a helper for context.

324
00:18:48.000 --> 00:18:58.920
Uh, but I think like the real, real thing is like how well the model itself can decide if, uh, this skill is applied in this situation or not.

325
00:18:59.240 --> 00:19:09.280
Because if we mentioned it works nice, but if we have like, if we rely on the model for this decision, uh, sometimes it gets, sometimes it doesn't.

326
00:19:09.360 --> 00:19:30.120
But, uh, I, I, I was trying, I am testing a little bit with, with all these skills and I think now cursor also has like the, they, uh, actually deprecated the cursor rules and they implemented the new model that I think it's agents and the skills as well.

327
00:19:30.680 --> 00:19:37.840
So they're like, they are all playing around and trying to find the best way for, for context building, I believe.

328
00:19:38.840 --> 00:19:40.520
Yeah, I think.

329
00:19:40.520 --> 00:19:41.720
Yeah, basically.

330
00:19:42.000 --> 00:19:56.720
Um, and, uh, so something to try, um, the idea would be to, um, obviously there's the Claude file as well, which is kind of general stuff for how Claude can work on this project.

331
00:19:57.280 --> 00:19:59.800
Um, but there's also like, um.

332
00:20:00.000 --> 00:20:08.000
Obviously, we're getting better with context. One thing to be using a lot here, if I get Claude going again,

333
00:20:10.400 --> 00:20:13.320
is to use the context window.

334
00:20:13.320 --> 00:20:18.240
So you can actually visualize this context and it will grab a little... I don't know if you guys have seen this.

335
00:20:18.240 --> 00:20:19.680
This is very useful.

336
00:20:19.680 --> 00:20:24.760
Just hit slash context and it will actually tell you what's going on here as far as what the

337
00:20:25.480 --> 00:20:29.520
200,000 tokens are being used for.

338
00:20:29.520 --> 00:20:35.160
And I apparently just started a brand new, fresh one and already at 13% on a brand new session.

339
00:20:35.160 --> 00:20:38.280
So it just shows you all the things that it's pulling.

340
00:20:41.200 --> 00:20:49.280
What I'll do is I'll sort of do a planning phase and it will write all these things to my root Claude folder sometimes.

341
00:20:50.280 --> 00:20:59.040
And then once I'm done in the planning phase, I'll then compact it so you can easily go hit slash compact.

342
00:20:59.040 --> 00:21:06.520
It'll, at that point, compact it itself, get it kind of summarized, and then just go execute on the plan that you've already approved.

343
00:21:06.520 --> 00:21:12.200
So what you don't want to do is be at 80%, 90%, and then it just auto compacts.

344
00:21:12.200 --> 00:21:17.560
You're pretty much like that destroys your session right there.

345
00:21:17.600 --> 00:21:22.160
So this context window management obviously is good, but there's a lot...

346
00:21:22.160 --> 00:21:29.080
I mean, this little slash command, you can see there's a ton of things that are available in here.

347
00:21:29.080 --> 00:21:32.520
If you guys would just check out all the stuff about...

348
00:21:32.520 --> 00:21:37.320
I've got MCPs for Superbase, for example, set up.

349
00:21:37.320 --> 00:21:42.160
You can obviously do PR reviews and commits and all that stuff.

350
00:21:42.160 --> 00:21:49.320
So anyway, that's a little bit of just how I've been using it.

351
00:21:49.320 --> 00:21:51.800
And I think we're all in.

352
00:21:51.800 --> 00:21:56.920
I think we're maybe seven hours into this project, which it's doing quite a lot.

353
00:21:56.920 --> 00:22:04.560
But as far as time spent tracked in toggle, I think I'm less than seven hours all in.

354
00:22:04.560 --> 00:22:08.440
So obviously, we're taking some time to talk it through on these calls.

355
00:22:08.440 --> 00:22:11.440
But yeah, 12%.

356
00:22:11.480 --> 00:22:13.360
See, everything's syncing now.

357
00:22:13.360 --> 00:22:19.520
Yeah, well, I've got a session from this morning, so maybe we're at five hours out of the 25.

358
00:22:19.520 --> 00:22:24.200
But this just shows how much you can do with very little.

359
00:22:24.200 --> 00:22:30.720
Because the way I'm doing it is this is one or two deep work sessions to knock out that whole slice.

360
00:22:30.720 --> 00:22:34.560
So that's where if you can do part of it, you do a second part of it,

361
00:22:34.560 --> 00:22:38.280
that's a great check-in checkpoint to make a video.

362
00:22:38.280 --> 00:22:40.040
So that's where I came in here.

363
00:22:40.040 --> 00:22:43.480
I made a video for, I think I tagged Lurch and Macy,

364
00:22:43.480 --> 00:22:48.360
because they were specifically tracking this project with me.

365
00:22:48.360 --> 00:22:49.080
And I just did this.

366
00:22:49.080 --> 00:22:54.160
I just basically gave the highlights of what cool features we have and a three-minute video.

367
00:22:54.160 --> 00:22:55.880
And then anyone can tune in and watch it.

368
00:22:55.880 --> 00:22:59.200
And as I move to the next thing, that's actually been shipped.

369
00:22:59.200 --> 00:23:03.560
I've already published that in production, and I'm already sharing URLs with clients at this point.

370
00:23:03.560 --> 00:23:08.360
So this is already being used, and we're actually creating value.

371
00:23:09.000 --> 00:23:11.440
Now, of course, we could have made this a one-week project,

372
00:23:11.440 --> 00:23:16.160
and each one of these could have been its own project.

373
00:23:16.160 --> 00:23:18.200
But you kind of have to...

374
00:23:18.200 --> 00:23:20.600
It's really not, because this is one or two sessions.

375
00:23:20.600 --> 00:23:29.800
Once it was really clear, and we kind of had some good plan here of what this flow was going to be for the clients.

376
00:23:29.800 --> 00:23:30.880
And also, we got really clear.

377
00:23:30.880 --> 00:23:34.200
I think last time, if you go back and watch the videos,

378
00:23:34.200 --> 00:23:38.600
the problem was not having control over what users can see.

379
00:23:38.600 --> 00:23:40.840
Like, what can a client see and do?

380
00:23:40.840 --> 00:23:44.320
And what can a team member see and do?

381
00:23:44.320 --> 00:23:45.680
And then what can an admin see and do?

382
00:23:45.680 --> 00:23:48.000
Those are kind of the things that were blocking us.

383
00:23:48.000 --> 00:23:55.520
And so we're essentially just figuring out notions like shortcomings, having to take like a...

384
00:23:55.520 --> 00:23:57.200
Like if we went to...

385
00:23:57.200 --> 00:24:02.240
I grabbed one of our client pages, something we would use for the clients.

386
00:24:02.280 --> 00:24:06.560
If I shared this client, one, I'd have to share the entire Notion database with the client,

387
00:24:06.560 --> 00:24:08.800
all our projects for the entire company.

388
00:24:08.800 --> 00:24:12.560
Then I'd have to share all the task database, I'd have to share all the client stuff.

389
00:24:12.560 --> 00:24:18.520
It's quite messy, and I don't really have control over what they can see and do.

390
00:24:18.520 --> 00:24:27.520
And so what's nice about the new share thing here is I have full control over what they can and can't do on this page, which is perfect.

391
00:24:27.520 --> 00:24:29.440
So we don't run any risk of them...

392
00:24:29.440 --> 00:24:34.880
When they only can see their projects, they can only see certain things.

393
00:24:34.880 --> 00:24:40.720
It got clear when it was really just about like recreating some Notion views.

394
00:24:40.720 --> 00:24:45.000
And yeah, so that's good.

395
00:24:45.000 --> 00:24:49.200
But okay, that was only 30, not even, like 24 minutes into this.

396
00:24:49.200 --> 00:24:55.120
So I was going to go, the next thing I was going to do is maybe just like build out another one of these blocks together,

397
00:24:55.120 --> 00:24:58.160
just see how far we can get.

398
00:24:58.160 --> 00:25:00.160
I don't know if you guys are up for it.

399
00:25:00.000 --> 00:25:02.000
Any other questions or thoughts?

400
00:25:04.920 --> 00:25:05.920
I got one.

401
00:25:05.920 --> 00:25:07.720
How do you do your planning sessions?

402
00:25:07.720 --> 00:25:10.560
Do you just tell Claude to write it out to a file

403
00:25:10.560 --> 00:25:11.920
and then use that next?

404
00:25:11.920 --> 00:25:20.080
Yeah, well, let's just do one because now let's add another

405
00:25:20.080 --> 00:25:25.280
view to client dashboard.

406
00:25:25.360 --> 00:25:30.920
We'll just say currently we have a Kanban by status.

407
00:25:30.920 --> 00:25:36.240
I want to do one by invoice date by month.

408
00:25:36.240 --> 00:25:40.840
And I'll just grab, I don't have to come up with all this stuff.

409
00:25:40.840 --> 00:25:45.160
We actually have a great little time schedule here.

410
00:25:45.160 --> 00:25:46.800
It kind of looks like this.

411
00:25:46.800 --> 00:25:55.560
I'll just say like, right here, this view in Notion.

412
00:25:55.560 --> 00:25:57.200
I'll just paste it, paste images.

413
00:25:57.200 --> 00:25:58.360
It loves images.

414
00:25:58.360 --> 00:26:01.120
It's very good at, oops, I may have put that in twice.

415
00:26:04.120 --> 00:26:06.000
Didn't know you could paste directly in there.

416
00:26:06.000 --> 00:26:07.640
I make a screenshots directory and I'm like,

417
00:26:07.640 --> 00:26:08.720
go look at the screenshots.

418
00:26:08.720 --> 00:26:11.080
No, just command.

419
00:26:11.160 --> 00:26:18.080
I use, oh man, a clean shot, command shift R,

420
00:26:18.080 --> 00:26:21.000
command shift 4, the screenshot right there.

421
00:26:21.000 --> 00:26:26.520
It saves it to my clipboard and I just paste.

422
00:26:26.520 --> 00:26:30.240
So I would just simply use clipboard and paste.

423
00:26:30.240 --> 00:26:31.600
I wouldn't put it anywhere.

424
00:26:35.240 --> 00:26:37.040
And then I've got, you hit shift tab.

425
00:26:37.040 --> 00:26:40.120
And as I shift tab, it goes between accept edits.

426
00:26:40.160 --> 00:26:43.720
That's just like YOLO, essentially.

427
00:26:43.720 --> 00:26:46.120
And then plan mode is what I typically would start on.

428
00:26:46.120 --> 00:26:49.760
So it's going to start this and I've given it generally

429
00:26:49.760 --> 00:26:51.520
the things, and you can still talk to it.

430
00:26:51.520 --> 00:26:54.680
So I'll say like, I do want like a toggle

431
00:26:54.680 --> 00:27:01.040
to get between these two views on the same page.

432
00:27:01.040 --> 00:27:04.960
I also want, so there's this phrase,

433
00:27:04.960 --> 00:27:09.680
I think it's called like selective disclosure

434
00:27:09.680 --> 00:27:11.600
or delayed disclosure or something like this.

435
00:27:11.600 --> 00:27:13.320
You don't tell absolutely everything

436
00:27:13.320 --> 00:27:16.040
to Claude in the first prompt.

437
00:27:16.040 --> 00:27:19.840
Let it slowly go through and figure this all out.

438
00:27:19.840 --> 00:27:22.280
It's going to come back with some sort of plan

439
00:27:22.280 --> 00:27:25.920
here in a second.

440
00:27:25.920 --> 00:27:29.080
So we'll give it a second, see what it comes up with.

441
00:27:29.080 --> 00:27:31.520
But we should be able to knock this out.

442
00:27:31.520 --> 00:27:34.520
And it should know that we, like part of my skills

443
00:27:34.520 --> 00:27:37.400
as well, if it does invoke that, I'm not sure if it will,

444
00:27:37.400 --> 00:27:39.720
but it was to reuse as many components as possible

445
00:27:39.720 --> 00:27:44.280
because it's very quick to like just spin up brand new things.

446
00:27:44.280 --> 00:27:48.200
And one of the best things here, I keep this here.

447
00:27:48.200 --> 00:27:50.560
So I'm actually going to discard those changes.

448
00:27:50.560 --> 00:27:53.000
I'll go ahead and like, I'll just

449
00:27:53.000 --> 00:27:57.120
say like B1 of the Novo UI skill.

450
00:27:57.120 --> 00:27:59.600
And I'll kind of start with a clean slate here

451
00:27:59.600 --> 00:28:03.400
because we haven't told it to change any files yet.

452
00:28:03.400 --> 00:28:06.840
But I typically, my flow is like, one, do planning mode.

453
00:28:06.840 --> 00:28:09.160
And I'll go and do something else while it's doing this.

454
00:28:09.160 --> 00:28:10.920
Because this can take a couple of minutes

455
00:28:10.920 --> 00:28:13.040
if you're on Opus 4.5.

456
00:28:13.040 --> 00:28:16.960
It does do a very good job the first pass, I think.

457
00:28:16.960 --> 00:28:22.040
And then once it's good, I execute on it.

458
00:28:22.040 --> 00:28:23.880
And as soon as I execute on it, I'm like, OK,

459
00:28:23.880 --> 00:28:25.080
what did you actually change?

460
00:28:25.080 --> 00:28:26.800
Then I click through each and every file.

461
00:28:26.840 --> 00:28:30.240
I do like this GitHub desktop app

462
00:28:30.240 --> 00:28:32.400
just because it's very quick to get around files.

463
00:28:32.400 --> 00:28:34.680
And then I can see what it changed.

464
00:28:34.680 --> 00:28:37.520
And immediately, I'll go say, why did you create this other

465
00:28:37.520 --> 00:28:38.000
component?

466
00:28:38.000 --> 00:28:38.880
We already have that.

467
00:28:38.880 --> 00:28:40.280
Or why did you create this other API route?

468
00:28:40.280 --> 00:28:40.880
We don't need that.

469
00:28:40.880 --> 00:28:43.400
And it's like, oh, you're absolutely correct.

470
00:28:43.400 --> 00:28:45.280
Absolutely right.

471
00:28:45.280 --> 00:28:47.720
Let me do it the right way.

472
00:28:47.720 --> 00:28:49.560
So then I'll just prompt it until it's done.

473
00:28:49.560 --> 00:28:51.140
Once we get kind of a working version,

474
00:28:51.140 --> 00:28:53.680
I'll commit it locally.

475
00:28:53.680 --> 00:28:56.360
So let's try in here.

476
00:28:56.360 --> 00:28:59.240
And it typically goes a little bit too verbose.

477
00:28:59.240 --> 00:29:00.800
One of the first things I tell it

478
00:29:00.800 --> 00:29:04.400
is this plan is too verbose.

479
00:29:04.400 --> 00:29:04.920
Here you go.

480
00:29:04.920 --> 00:29:06.000
Single file change.

481
00:29:06.000 --> 00:29:06.680
So that's good.

482
00:29:06.680 --> 00:29:08.400
We're only changing that.

483
00:29:08.400 --> 00:29:09.560
Reuse existing data.

484
00:29:09.560 --> 00:29:11.640
Invoice data is already fetched.

485
00:29:11.640 --> 00:29:13.320
Project card reuses existing component.

486
00:29:13.320 --> 00:29:14.760
Perfect.

487
00:29:14.760 --> 00:29:16.120
Same toggle UI.

488
00:29:16.120 --> 00:29:19.480
And I'm not sure if it kept the Kanban board.

489
00:29:19.480 --> 00:29:20.760
Let's just check.

490
00:29:20.760 --> 00:29:21.680
You toggle.

491
00:29:21.680 --> 00:29:22.240
That's fine.

492
00:29:22.240 --> 00:29:28.720
So it's got the little status or by invoice date.

493
00:29:28.720 --> 00:29:30.920
Sorry, it does this every so often.

494
00:29:30.920 --> 00:29:32.040
It just jumps.

495
00:29:32.040 --> 00:29:39.680
OK, so it's asking if I can move all verification.

496
00:29:39.680 --> 00:29:42.920
I'll just say I'm pretty.

497
00:29:42.920 --> 00:29:44.760
It gets very confused with this.

498
00:29:44.760 --> 00:29:46.600
I'm already running the app.

499
00:29:46.600 --> 00:29:48.880
It loves to spin up a brand new npm run dev.

500
00:29:48.880 --> 00:29:50.760
And then it's going to run into port problems

501
00:29:50.760 --> 00:29:52.600
for sharing, fighting over the same port.

502
00:29:52.600 --> 00:29:54.800
It's really dumb.

503
00:29:54.800 --> 00:30:00.520
And then say I want it in a npm run.

504
00:30:00.000 --> 00:30:05.720
And then style, same as status.

505
00:30:05.720 --> 00:30:15.160
I also want drag and drop view.

506
00:30:15.160 --> 00:30:21.520
Dragging and dropping should update Notion the same way.

507
00:30:21.520 --> 00:30:23.440
And then it may have some questions.

508
00:30:23.440 --> 00:30:27.400
The new little wizard thing is quite nice.

509
00:30:27.400 --> 00:30:32.080
And I'll just say, like, the client is a bit opposed.

510
00:30:36.160 --> 00:30:38.760
And this could be like maybe a planning skill

511
00:30:38.760 --> 00:30:40.760
I could invoke later, which is maybe just

512
00:30:40.760 --> 00:30:42.040
more of a minimalist approach.

513
00:30:45.120 --> 00:30:47.240
It seems to get you guys got the client drop down,

514
00:30:47.240 --> 00:30:48.560
the toggle up there.

515
00:30:48.560 --> 00:30:52.520
Even this little diagram is not too bad.

516
00:30:52.520 --> 00:30:55.240
The column there, total number of projects are there,

517
00:30:55.240 --> 00:30:57.080
project card, project card, so it should work well.

518
00:30:57.080 --> 00:30:58.520
Let's see what it comes back with.

519
00:31:00.840 --> 00:31:02.960
This is always like when you're making a tutorial,

520
00:31:02.960 --> 00:31:03.960
we just pause the video.

521
00:31:03.960 --> 00:31:04.760
OK, here we go.

522
00:31:04.760 --> 00:31:08.080
So look, this is much, see how nice this is?

523
00:31:08.080 --> 00:31:11.280
Just like, ah, I can look at this and breathe.

524
00:31:11.280 --> 00:31:13.320
The other one was insane.

525
00:31:13.320 --> 00:31:15.360
Add this view, switch that.

526
00:31:15.360 --> 00:31:16.560
We're changing that one file.

527
00:31:16.560 --> 00:31:17.360
Add a view mode.

528
00:31:17.360 --> 00:31:17.960
Here we go.

529
00:31:17.960 --> 00:31:20.120
Projects by month handled this.

530
00:31:20.120 --> 00:31:23.040
API, OK, it's going to create a new route, which is fine.

531
00:31:23.040 --> 00:31:24.000
I don't care.

532
00:31:24.000 --> 00:31:25.920
Patch the endpoint.

533
00:31:25.920 --> 00:31:27.520
Yep, that's fine.

534
00:31:27.520 --> 00:31:28.480
Same pattern.

535
00:31:28.480 --> 00:31:30.680
That's good.

536
00:31:30.680 --> 00:31:31.680
Month keys, that's good.

537
00:31:31.680 --> 00:31:33.080
They'll do fine.

538
00:31:33.080 --> 00:31:36.000
So it did include this no date, so you

539
00:31:36.000 --> 00:31:41.840
can ignore no date projects.

540
00:31:41.840 --> 00:31:43.760
But now we've got a lot less to update,

541
00:31:43.760 --> 00:31:45.680
so the plan coming back the second round

542
00:31:45.680 --> 00:31:47.600
should be much easier.

543
00:31:51.240 --> 00:31:54.840
And I just let it do this because I don't go and find.

544
00:31:54.840 --> 00:31:58.200
This is a file that it writes somewhere on my desktop.

545
00:31:58.200 --> 00:31:59.520
Here we go.

546
00:31:59.520 --> 00:32:02.280
It's in Claude Plans Abundant Cuddling Mochi,

547
00:32:02.280 --> 00:32:07.480
or whatever it makes up its own little code name.

548
00:32:07.480 --> 00:32:10.000
OK, so then I'll just check here.

549
00:32:10.000 --> 00:32:11.000
It hasn't done anything.

550
00:32:11.000 --> 00:32:11.840
That's good.

551
00:32:11.840 --> 00:32:15.520
And I could compact it, but I can also at this point

552
00:32:15.520 --> 00:32:21.080
just hit context, see where we're at.

553
00:32:21.080 --> 00:32:23.080
We are only 30%.

554
00:32:23.120 --> 00:32:25.080
So I'm just going to go crazy and say.

555
00:32:25.080 --> 00:32:27.040
I missed about a minute.

556
00:32:27.040 --> 00:32:32.480
How did you bring it from a plan of 200 lines

557
00:32:32.480 --> 00:32:34.280
to what you have now, about 40 lines?

558
00:32:34.280 --> 00:32:36.040
Oh, I said you're being too verbose.

559
00:32:36.040 --> 00:32:38.440
Make it concise.

560
00:32:38.440 --> 00:32:39.600
I just asked it.

561
00:32:39.600 --> 00:32:40.800
This is too much.

562
00:32:40.800 --> 00:32:43.240
You're trying too hard.

563
00:32:43.240 --> 00:32:47.080
And then I switched it, hitting Command Shift Tab.

564
00:32:47.080 --> 00:32:50.040
And you can see the little command here.

565
00:32:50.040 --> 00:32:52.440
And I can also put it on.

566
00:32:52.440 --> 00:32:54.760
Sorry, and it needs to be in auto accept.

567
00:32:57.640 --> 00:32:59.560
I'm just going to let it know, because I don't.

568
00:32:59.560 --> 00:33:01.760
Or else it pops every single thing up here.

569
00:33:01.760 --> 00:33:04.080
I just want to let it take one whole pass at it.

570
00:33:04.080 --> 00:33:06.280
Then you can see, we're going to add the toggle state,

571
00:33:06.280 --> 00:33:08.960
project a month grouping, all this stuff.

572
00:33:08.960 --> 00:33:11.200
And now I'll just typically hang out and look at this

573
00:33:11.200 --> 00:33:13.440
so we can quickly see what is starting to change.

574
00:33:13.440 --> 00:33:16.920
And you can just kind of skim this stuff

575
00:33:16.920 --> 00:33:19.240
to see where it's being versed.

576
00:33:19.240 --> 00:33:20.800
It was doing silly things.

577
00:33:21.800 --> 00:33:24.120
Let me take a great example here while we're waiting.

578
00:33:28.600 --> 00:33:30.200
Let's say we take a project like this.

579
00:33:30.200 --> 00:33:33.960
I had this little View and Toggle button.

580
00:33:33.960 --> 00:33:36.640
And all I wanted was the icon there.

581
00:33:36.640 --> 00:33:38.120
And I have the icon in a few places.

582
00:33:38.120 --> 00:33:39.680
If you click Project Connections,

583
00:33:39.680 --> 00:33:43.360
I think we have the icon somewhere here.

584
00:33:43.360 --> 00:33:46.680
We have it in time tracking, I think.

585
00:33:46.680 --> 00:33:47.400
It's here.

586
00:33:47.400 --> 00:33:50.480
And basically, it just was putting the SVG over and over

587
00:33:50.480 --> 00:33:52.480
again, being really dumb.

588
00:33:52.480 --> 00:33:54.040
So I was like, this is silly.

589
00:33:54.040 --> 00:34:01.920
And there was already a toggle icon file that it could use.

590
00:34:01.920 --> 00:34:03.600
And so that was just a little prompt.

591
00:34:03.600 --> 00:34:05.440
I was like, hey, you're not being smart.

592
00:34:05.440 --> 00:34:06.240
Reuse this.

593
00:34:06.240 --> 00:34:08.360
And then when it wants it updated, I was like, hey,

594
00:34:08.360 --> 00:34:11.760
go ahead and update the rest of the app for all toggle icons

595
00:34:11.760 --> 00:34:14.719
to use this one icon file instead

596
00:34:14.719 --> 00:34:17.600
of putting the SVG everywhere.

597
00:34:17.600 --> 00:34:19.800
That's a pretty simple example.

598
00:34:20.760 --> 00:34:21.280
Let's see.

599
00:34:21.280 --> 00:34:22.840
It's already got the toggle in here.

600
00:34:22.840 --> 00:34:24.280
I don't know if I love it up there.

601
00:34:24.280 --> 00:34:27.840
And I don't like the word Invoice up there.

602
00:34:27.840 --> 00:34:33.199
And so let's, again, get something with Projects.

603
00:34:33.199 --> 00:34:35.159
And also, one thing I noticed as well is I

604
00:34:35.159 --> 00:34:38.480
do like these parameters when you're building any app.

605
00:34:38.480 --> 00:34:41.120
I know this happens specifically on Veritas and anything

606
00:34:41.120 --> 00:34:43.320
like this where I'm selecting.

607
00:34:43.320 --> 00:34:45.400
I'm just showing you my pet peeves because you

608
00:34:45.400 --> 00:34:46.280
guys work on the app.

609
00:34:47.120 --> 00:34:50.440
This stuff I check and bothers me immensely.

610
00:34:50.440 --> 00:34:52.040
Veritas is particularly bad with this.

611
00:34:52.040 --> 00:34:55.920
But if you're on a page like this and then you refresh,

612
00:34:55.920 --> 00:34:58.120
it should stay on the right client.

613
00:34:58.120 --> 00:34:59.160
These are little things.

614
00:34:59.160 --> 00:35:01.240
But what it.

615
00:35:00.000 --> 00:35:01.600
Most of the time we'll do,

616
00:35:01.600 --> 00:35:02.960
if you don't have this parameter, obviously,

617
00:35:02.960 --> 00:35:05.400
it just resets, then it's back to like this blank,

618
00:35:05.400 --> 00:35:06.920
oh, this client doesn't have any projects.

619
00:35:06.920 --> 00:35:08.880
So just a little annoying,

620
00:35:08.880 --> 00:35:11.440
especially when you navigate to time tracking

621
00:35:11.440 --> 00:35:13.200
and then you wanna hit the back button.

622
00:35:13.200 --> 00:35:17.720
That's just much nicer experience than it resetting.

623
00:35:17.720 --> 00:35:21.440
Bonus would be like it has a local storage or something

624
00:35:21.440 --> 00:35:23.600
where it's like, or some session storage

625
00:35:23.600 --> 00:35:26.160
where it like remembers what your last client was.

626
00:35:27.160 --> 00:35:30.280
Okay, so it's still going tool use.

627
00:35:31.520 --> 00:35:33.560
Let's see what it's doing.

628
00:35:33.560 --> 00:35:36.160
Just wants to get diagnostics.

629
00:35:36.160 --> 00:35:37.760
I suppose that's fine.

630
00:35:37.760 --> 00:35:39.760
I don't know why it's asking for that.

631
00:35:39.760 --> 00:35:40.600
Let's see.

632
00:35:40.600 --> 00:35:41.420
Oh, there we go.

633
00:35:41.420 --> 00:35:42.720
We already got it sort of working.

634
00:35:44.080 --> 00:35:47.080
So this one's totaling the weeks.

635
00:35:48.560 --> 00:35:51.440
And this one's, so a couple of things that it didn't do,

636
00:35:51.440 --> 00:35:56.440
like I like that these were all like all caps

637
00:35:56.560 --> 00:36:00.200
and they have the certain styling on the fonts there,

638
00:36:00.200 --> 00:36:04.200
but we'll, well, okay, let's just let it check it.

639
00:36:04.200 --> 00:36:05.080
Oh, yeah, so it says it's done.

640
00:36:05.080 --> 00:36:07.360
The information is completed with no errors,

641
00:36:07.360 --> 00:36:09.320
changes to this.

642
00:36:09.320 --> 00:36:11.080
So let's just see if it works like,

643
00:36:13.040 --> 00:36:14.680
oh, it also, I see what's going on.

644
00:36:14.680 --> 00:36:17.280
It's literally going back from the beginning of time.

645
00:36:18.080 --> 00:36:21.520
I don't want to break anything.

646
00:36:21.520 --> 00:36:24.040
Janata's like, what's he going to do?

647
00:36:24.040 --> 00:36:27.800
Break, let's just move this to like December.

648
00:36:29.760 --> 00:36:30.720
Great example.

649
00:36:30.720 --> 00:36:32.080
You see how it jumped.

650
00:36:32.080 --> 00:36:33.440
It actually moved.

651
00:36:33.440 --> 00:36:34.520
But let's just take a look at it.

652
00:36:34.520 --> 00:36:35.760
Did it switch the dates?

653
00:36:37.720 --> 00:36:39.000
Yeah, it did.

654
00:36:39.000 --> 00:36:40.960
So that's actually working.

655
00:36:40.960 --> 00:36:43.360
It visually, it's probably the time zone issue.

656
00:36:44.000 --> 00:36:49.000
Check time zone or something.

657
00:36:50.760 --> 00:36:54.840
I moved from January to December

658
00:36:54.840 --> 00:36:58.920
and it showed up in November one.

659
00:37:02.360 --> 00:37:04.080
Okay, and so,

660
00:37:06.800 --> 00:37:09.920
not this, it's added, so this page has become quite long

661
00:37:09.920 --> 00:37:13.440
and I don't like this being so long

662
00:37:13.440 --> 00:37:17.160
because the AI struggles,

663
00:37:17.160 --> 00:37:20.400
especially once you start to top like a thousand lines.

664
00:37:20.400 --> 00:37:22.520
You guys know that like it does start

665
00:37:22.520 --> 00:37:23.920
to fall apart pretty quick.

666
00:37:23.920 --> 00:37:25.040
So let's take a look at this.

667
00:37:25.040 --> 00:37:25.920
How big are we?

668
00:37:29.160 --> 00:37:31.800
So I'm saying, I just want to show you guys like how,

669
00:37:33.360 --> 00:37:36.960
not haphazard this is, but like how, oh, we did,

670
00:37:37.000 --> 00:37:40.600
oh, I've really messed up the scrolling here.

671
00:37:40.600 --> 00:37:41.440
Oh, there we go.

672
00:37:41.440 --> 00:37:42.280
Status.

673
00:37:42.280 --> 00:37:43.240
I don't know, it's actually okay.

674
00:37:43.240 --> 00:37:44.800
It's just between versions.

675
00:37:46.960 --> 00:37:47.800
Oh, fixed.

676
00:37:47.800 --> 00:37:48.960
Let's see if this works now.

677
00:37:54.000 --> 00:37:54.840
It's not really working.

678
00:37:54.840 --> 00:37:56.360
I can diagnose that in a second.

679
00:37:58.720 --> 00:38:00.760
That's probably what it is though.

680
00:38:00.760 --> 00:38:01.600
Something like that.

681
00:38:01.600 --> 00:38:02.600
Let's move it back to December.

682
00:38:02.600 --> 00:38:04.640
Yeah, it's always, it's going off by one.

683
00:38:07.560 --> 00:38:10.400
Oh, you know what I can do to refresh?

684
00:38:10.400 --> 00:38:11.600
Let's give it a chance.

685
00:38:13.160 --> 00:38:14.160
Move this over here.

686
00:38:23.600 --> 00:38:24.640
We'll let it crank on that.

687
00:38:24.640 --> 00:38:26.840
But one thing I may tell it right now is like this,

688
00:38:26.840 --> 00:38:28.400
this got a little big.

689
00:38:28.400 --> 00:38:31.200
So maybe we can extract this to like a separate file.

690
00:38:31.200 --> 00:38:33.760
Again, I'm not, I'm building it one for humans to look at,

691
00:38:33.760 --> 00:38:35.400
but also I'm really building it for the AI

692
00:38:35.400 --> 00:38:37.000
to work on it next time.

693
00:38:37.000 --> 00:38:37.840
Because right now,

694
00:38:37.840 --> 00:38:39.640
if I want to work on either one of these views,

695
00:38:39.640 --> 00:38:40.960
I have this one massive file

696
00:38:40.960 --> 00:38:43.960
that it has to deal with every single time.

697
00:38:43.960 --> 00:38:48.960
Let's turn this client page is too big.

698
00:38:53.320 --> 00:38:56.000
Let's make,

699
00:38:57.000 --> 00:39:02.000
there's a better like let's refactor to use a one file

700
00:39:09.320 --> 00:39:14.320
for status view and one for,

701
00:39:16.560 --> 00:39:17.680
what's the other one called?

702
00:39:17.680 --> 00:39:19.920
Yeah, invoice.

703
00:39:20.920 --> 00:39:21.920
Okay, let's see if this works.

704
00:39:21.920 --> 00:39:22.760
Let's fix it.

705
00:39:22.760 --> 00:39:23.800
Let it do one thing at a time.

706
00:39:23.800 --> 00:39:24.920
So let's say here.

707
00:39:26.920 --> 00:39:28.160
Oh, that's just annoying.

708
00:39:30.920 --> 00:39:32.920
So Bruce, oh, sorry.

709
00:39:32.920 --> 00:39:35.240
Are we still getting the one off by one issue?

710
00:39:35.240 --> 00:39:36.080
It is.

711
00:39:36.080 --> 00:39:37.560
So yeah, I was going to ask,

712
00:39:39.000 --> 00:39:41.320
one of the reasons why I'm still with cursor

713
00:39:41.320 --> 00:39:45.200
is because it allows me to like hop into an AI

714
00:39:45.200 --> 00:39:46.040
and like, you know,

715
00:39:46.040 --> 00:39:46.880
I can just like,

716
00:39:46.880 --> 00:39:50.600
because it allows me to like hop into another model

717
00:39:50.600 --> 00:39:53.280
if I'm seeing one model is like stuck in this way.

718
00:39:53.280 --> 00:39:54.600
So I was going to ask you,

719
00:39:54.600 --> 00:39:55.520
you don't have to talk about it now,

720
00:39:55.520 --> 00:39:59.440
but can you weave in kind of the pros of using cloud code

721
00:39:59.440 --> 00:40:00.280
as opposed to.

722
00:40:00.000 --> 00:40:02.080
the cursor that you've noticed.

723
00:40:02.080 --> 00:40:05.960
I mean, I've just gotten, it's like you just

724
00:40:05.960 --> 00:40:08.440
use the tool you like.

725
00:40:08.440 --> 00:40:11.440
The Opus 4.5 is just pretty good.

726
00:40:16.160 --> 00:40:17.120
It's a preference.

727
00:40:17.120 --> 00:40:20.960
Like, that does give you a different option.

728
00:40:20.960 --> 00:40:24.960
I didn't have this issue before, but I could,

729
00:40:24.960 --> 00:40:27.200
I'm not going to dig into this, but this will probably,

730
00:40:27.200 --> 00:40:31.520
it could take another 20, 30 minutes to figure out this piece.

731
00:40:31.520 --> 00:40:32.440
It'll figure it out.

732
00:40:32.440 --> 00:40:35.760
And what will happen is we'll do some,

733
00:40:35.760 --> 00:40:38.040
it'll probably ask to do some debugging,

734
00:40:38.040 --> 00:40:40.640
console and I'll copy and paste that back and forth.

735
00:40:40.640 --> 00:40:43.320
And then only after that, it gets it pretty.

736
00:40:43.320 --> 00:40:46.560
Have you, have you tried the Sergey Brin approach

737
00:40:46.560 --> 00:40:49.960
of like telling the AI, and I do actually do this a lot

738
00:40:49.960 --> 00:40:51.360
in cursor before I switch models.

739
00:40:51.360 --> 00:40:53.400
I say, I'm never going to use you again

740
00:40:53.400 --> 00:40:54.400
if you don't get this right.

741
00:40:54.400 --> 00:40:57.760
Or like, I'll say, I'll say something to the AI.

742
00:40:57.760 --> 00:40:59.760
Well, this is actually, this is actually like an approach

743
00:40:59.760 --> 00:41:02.480
that Sergey Brin advocated for.

744
00:41:02.480 --> 00:41:06.040
And I started trying it and it actually does yield results.

745
00:41:06.040 --> 00:41:07.600
And I don't, I don't know what that says.

746
00:41:07.600 --> 00:41:09.600
I were trying to get the AI or something.

747
00:41:12.280 --> 00:41:13.440
Yeah.

748
00:41:13.440 --> 00:41:16.720
It's kind of like, if you yell at it loud enough,

749
00:41:16.720 --> 00:41:19.120
it will comply eventually.

750
00:41:19.120 --> 00:41:21.240
Yeah, it's kind of bizarre.

751
00:41:21.240 --> 00:41:22.080
That's funny.

752
00:41:22.080 --> 00:41:22.920
I mean, you can definitely.

753
00:41:23.320 --> 00:41:26.960
I'm pretty sure like slash model allows you

754
00:41:26.960 --> 00:41:28.960
to change the model in Cloud.

755
00:41:28.960 --> 00:41:29.800
I think you did.

756
00:41:29.800 --> 00:41:30.640
Yeah.

757
00:41:30.640 --> 00:41:33.320
But then you're just choosing between Cloud, obviously.

758
00:41:37.440 --> 00:41:39.360
I think I accidentally interrupted it.

759
00:41:39.360 --> 00:41:41.240
Yeah, I've had to do something kind of like that too,

760
00:41:41.240 --> 00:41:43.680
where it's like, it had a function and I was like,

761
00:41:43.680 --> 00:41:44.920
oh, also add this.

762
00:41:44.920 --> 00:41:46.040
And it replaced the first one.

763
00:41:46.040 --> 00:41:47.240
I'm like, no, put that back.

764
00:41:47.240 --> 00:41:48.840
And it's like, okay, it's done.

765
00:41:48.840 --> 00:41:49.680
And it wasn't.

766
00:41:49.680 --> 00:41:51.160
And it's like, okay, now it's done.

767
00:41:51.160 --> 00:41:52.000
And it wasn't.

768
00:41:52.040 --> 00:41:53.040
And it's like, okay, now it's done.

769
00:41:53.040 --> 00:41:54.880
I put the fourth time and I'm like,

770
00:41:54.880 --> 00:41:57.680
I need to step away and do something different.

771
00:41:57.680 --> 00:41:59.680
I'm like, I might just delete that part

772
00:41:59.680 --> 00:42:01.600
and be like, hey, add this feature.

773
00:42:01.600 --> 00:42:03.080
Yeah, maybe.

774
00:42:03.080 --> 00:42:05.480
But that's part of being on the very, very,

775
00:42:05.480 --> 00:42:07.600
very cutting edge of everything.

776
00:42:08.480 --> 00:42:10.360
Yeah, it is.

777
00:42:10.360 --> 00:42:14.480
I mean, it does go in a spiral for sure.

778
00:42:14.480 --> 00:42:18.920
So it's actually like, I would keep going in this version.

779
00:42:19.920 --> 00:42:23.040
And I think like, if I go to this,

780
00:42:23.040 --> 00:42:24.880
let's just view, see if it is.

781
00:42:24.880 --> 00:42:27.080
I think it's putting the right date in there.

782
00:42:28.440 --> 00:42:29.720
It is getting January.

783
00:42:29.720 --> 00:42:32.960
And if I switch this to December,

784
00:42:34.760 --> 00:42:36.600
it is writing it now to December.

785
00:42:36.600 --> 00:42:37.440
So it's getting it right.

786
00:42:37.440 --> 00:42:41.320
It's just, we still have the.

787
00:42:43.880 --> 00:42:47.320
Oh, another approach that has been really effective for me

788
00:42:47.520 --> 00:42:49.960
is when it's looping like this,

789
00:42:49.960 --> 00:42:53.680
is asking it to add like extensive logging.

790
00:42:53.680 --> 00:42:55.280
And then I'll do the action I want

791
00:42:55.280 --> 00:42:57.840
and then just copy and paste all the logs.

792
00:42:57.840 --> 00:43:00.160
Say, or use this as context to debug.

793
00:43:00.160 --> 00:43:01.800
Yeah, and I just wanna show as well,

794
00:43:01.800 --> 00:43:02.960
like I did make this.

795
00:43:02.960 --> 00:43:07.160
So the first thing I do when we did get in a spiral

796
00:43:07.160 --> 00:43:11.320
is like, I assume that it's not optimized.

797
00:43:11.320 --> 00:43:14.600
Like I have a lot more faith in the AI

798
00:43:14.600 --> 00:43:16.320
than probably anyone on this call.

799
00:43:18.000 --> 00:43:19.600
You guys are like very quick to like,

800
00:43:19.600 --> 00:43:20.440
okay, well, forget that.

801
00:43:20.440 --> 00:43:21.640
I'm gonna do it myself.

802
00:43:21.640 --> 00:43:25.080
So like, I'll assume that like the,

803
00:43:25.080 --> 00:43:28.960
so when I mentioned the like thousand line page thing,

804
00:43:30.080 --> 00:43:35.080
now it's 283 lines and it's built out a Kanban invoice view

805
00:43:36.480 --> 00:43:37.800
and a status view separately.

806
00:43:37.800 --> 00:43:42.440
And each of those are only, I think a few hundred lines.

807
00:43:42.440 --> 00:43:44.800
So yeah, 300 lines on that one.

808
00:43:44.800 --> 00:43:46.760
And it added two new files here.

809
00:43:47.680 --> 00:43:48.520
And then you're out.

810
00:43:48.520 --> 00:43:50.680
So I basically break it down a little bit more.

811
00:43:50.680 --> 00:43:52.960
And so it's saying it parses strict to this, blah, blah,

812
00:43:52.960 --> 00:43:53.800
instead of the new date.

813
00:43:53.800 --> 00:43:54.880
Let's see what it does.

814
00:43:56.760 --> 00:43:58.640
So let's refresh.

815
00:44:01.160 --> 00:44:04.400
Invoice, I also wanted to go ahead and add the,

816
00:44:04.400 --> 00:44:05.400
so we've got January.

817
00:44:05.400 --> 00:44:07.000
Let's pull it to January.

818
00:44:07.000 --> 00:44:07.840
Aha.

819
00:44:09.520 --> 00:44:10.640
See?

820
00:44:10.640 --> 00:44:11.480
See?

821
00:44:12.360 --> 00:44:14.400
Okay, and then I'll just give it this nice little command.

822
00:44:14.400 --> 00:44:17.760
Like, this is great.

823
00:44:17.760 --> 00:44:20.480
I'm way more encouraging than Ira.

824
00:44:20.480 --> 00:44:21.800
You'd be like, you better get this right

825
00:44:21.800 --> 00:44:23.160
or I'm gonna get you fired.

826
00:44:24.120 --> 00:44:26.120
Like, you're doing great, Claude.

827
00:44:26.120 --> 00:44:27.320
What a champ.

828
00:44:28.840 --> 00:44:29.760
This is great.

829
00:44:31.200 --> 00:44:34.920
I'll just tell it this, like clean up anything you can

830
00:44:34.920 --> 00:44:38.840
to get ready for fraud production.

831
00:44:40.080 --> 00:44:42.680
And it does like a whole little analysis of everything.

832
00:44:43.000 --> 00:44:45.080
Sometimes it'll clean up logs.

833
00:44:45.080 --> 00:44:47.200
There's something goofy going on.

834
00:44:47.200 --> 00:44:48.760
I don't know if it's happening.

835
00:44:49.600 --> 00:44:51.160
When I refresh, it's fine.

836
00:44:51.160 --> 00:44:53.120
Let me just try this, see if I can recreate it.

837
00:44:53.120 --> 00:44:54.640
If I go to the end.

838
00:44:54.640 --> 00:44:57.800
Ah, it just kind of keeps scrolling on forever.

839
00:44:57.800 --> 00:44:58.640
So.

840
00:45:00.000 --> 00:45:09.480
Oh, if you scroll this way and there's a scroll within a scroll, there is a horizontal scrolling

841
00:45:09.480 --> 00:45:10.480
bug.

842
00:45:10.480 --> 00:45:15.400
Since it's pretty good right now, and I'm pretty happy with the way this is going, I'm

843
00:45:15.400 --> 00:45:25.720
going to go and say v1 of client invoice view, just to clean that up.

844
00:45:25.720 --> 00:45:29.360
And then I can see what other differences is happening here.

845
00:45:29.360 --> 00:45:33.000
What is it grabbing?

846
00:45:33.000 --> 00:45:35.120
It's cleaning up some unused stuff here.

847
00:45:35.120 --> 00:45:37.720
Let's see what it did.

848
00:45:37.720 --> 00:45:38.720
Maybe it's standardized.

849
00:45:38.720 --> 00:45:39.720
Let's see what it's saying.

850
00:45:39.720 --> 00:45:41.120
Found a few things to clean up.

851
00:45:41.120 --> 00:45:42.120
Good.

852
00:45:42.120 --> 00:45:43.120
You go and do that.

853
00:45:43.120 --> 00:45:44.120
Here.

854
00:45:44.120 --> 00:45:45.120
All cleaned up.

855
00:45:45.120 --> 00:45:46.120
No errors.

856
00:45:46.120 --> 00:45:47.120
Here's the final production summary.

857
00:45:47.120 --> 00:45:50.120
I think I committed it before it even checked finish there.

858
00:45:50.120 --> 00:46:16.000
There's also a bug, like a ... Let's just see what it does there.

859
00:46:16.000 --> 00:46:19.720
And I'll go and sit right there, and hopefully it'll refresh and just fix that for me.

860
00:46:20.320 --> 00:46:33.920
I also want to get the ... While it's doing that, also, I want to change the name invoice

861
00:46:33.920 --> 00:46:37.080
to maybe calendar or schedule.

862
00:46:37.080 --> 00:46:39.080
What do you guys want to call it?

863
00:46:39.080 --> 00:46:40.080
Schedule?

864
00:46:40.080 --> 00:46:43.240
I think we call it schedule.

865
00:46:43.240 --> 00:46:44.240
Update all files.

866
00:46:45.240 --> 00:46:46.240
Okay.

867
00:46:46.240 --> 00:46:49.240
Let me just ... Before I hit it with the ... Ah, it's still there.

868
00:46:54.240 --> 00:46:55.240
Still there.

869
00:46:57.240 --> 00:46:59.240
I'll copy that, clear this up.

870
00:47:06.240 --> 00:47:08.240
I don't think it does it on this view.

871
00:47:08.240 --> 00:47:11.240
Oh, because ... Yeah, because this one doesn't have enough.

872
00:47:14.240 --> 00:47:15.240
Anyway.

873
00:47:19.240 --> 00:47:20.240
Okay.

874
00:47:20.240 --> 00:47:21.240
I'll fix the scrolly thing.

875
00:47:24.240 --> 00:47:25.240
Let's see if it works.

876
00:47:26.240 --> 00:47:27.240
Okay, we've got eight minutes left.

877
00:47:27.240 --> 00:47:28.240
Ah!

878
00:47:28.240 --> 00:47:29.240
No, it didn't.

879
00:47:29.240 --> 00:47:31.240
It's like every time I get there ... Okay.

880
00:47:31.240 --> 00:47:35.240
I'm going to do one of these things to try to actually fix it for it.

881
00:47:37.240 --> 00:47:38.240
Let's see what's going on in here.

882
00:47:39.240 --> 00:47:41.240
Yeah, there's something else going on.

883
00:47:41.240 --> 00:47:42.240
It's like in this ...

884
00:48:08.240 --> 00:48:09.240
Okay.

885
00:48:19.240 --> 00:48:20.240
This is its last attempt.

886
00:48:20.240 --> 00:48:23.240
I'm not going to threaten to fire it, but I will give it this,

887
00:48:23.240 --> 00:48:25.240
and then I will not keep you guys.

888
00:48:26.240 --> 00:48:30.240
We got pretty far, and I can kind of see what it's doing here.

889
00:48:30.240 --> 00:48:33.240
It tried to do max full width, and none of these things actually worked.

890
00:48:33.240 --> 00:48:37.240
It tried to put overflow hidden in there,

891
00:48:37.240 --> 00:48:39.240
so it's doing a bit of hacking there,

892
00:48:39.240 --> 00:48:41.240
and I don't really see it working.

893
00:48:43.240 --> 00:48:45.240
No, it's actually the layout that found it.

894
00:48:45.240 --> 00:48:47.240
Flex one, which is expanded.

895
00:48:47.240 --> 00:48:48.240
Let me try a smarter approach.

896
00:48:48.240 --> 00:48:50.240
Okay, and then this is why I check this,

897
00:48:50.240 --> 00:48:52.240
because I want to see these files cleaned up.

898
00:48:52.240 --> 00:48:56.240
Very often, it will not clean up its mess, right?

899
00:48:56.240 --> 00:48:58.240
Like, it just, like, tries v1.

900
00:48:58.240 --> 00:48:59.240
It tries v2.

901
00:48:59.240 --> 00:49:00.240
It tries v3.

902
00:49:00.240 --> 00:49:01.240
Fixes on v4.

903
00:49:01.240 --> 00:49:03.240
Leaves everything from the first three versions

904
00:49:03.240 --> 00:49:05.240
just sitting in there, right?

905
00:49:05.240 --> 00:49:08.240
You got to, like, tell it, like, hey, I think once ...

906
00:49:08.240 --> 00:49:09.240
There you go.

907
00:49:09.240 --> 00:49:10.240
Okay, so in this case, it did.

908
00:49:10.240 --> 00:49:11.240
Let's see if it fixed it.

909
00:49:15.240 --> 00:49:17.240
Oh, boy.

910
00:49:17.240 --> 00:49:18.240
That's fine.

911
00:49:32.240 --> 00:49:36.240
Okay, so we can go in, like, circles with this,

912
00:49:36.240 --> 00:49:38.240
but I just want to make sure that's ...

913
00:49:38.240 --> 00:49:39.240
These are, like, things to avoid.

914
00:49:39.240 --> 00:49:42.240
This is why I watch everything that it does in this view,

915
00:49:42.240 --> 00:49:46.240
and I can kind of quickly tab these back and forth.

916
00:49:46.240 --> 00:49:48.240
It may undo what it just did there.

917
00:49:51.240 --> 00:49:52.240
Cool, and we got about four minutes left,

918
00:49:52.240 --> 00:49:53.240
so this is what I'm going to do.

919
00:49:53.240 --> 00:49:54.240
I'm going to go ahead and run this,

920
00:49:54.240 --> 00:49:55.240
and then I'm going to run this,

921
00:49:55.240 --> 00:49:56.240
and then I'm going to run this,

922
00:49:56.240 --> 00:49:57.240
and then I'm going to run this,

923
00:49:57.240 --> 00:49:58.240
and then I'm going to run this,

924
00:49:58.240 --> 00:49:59.240
and then I'm going to run this,

925
00:49:59.240 --> 00:50:00.240
and then I'm going to run this,

926
00:50:00.000 --> 00:50:03.360
This is like, I wouldn't necessarily ship this yet,

927
00:50:03.360 --> 00:50:08.280
but I would, once we get this thing fixed, what I want to do

928
00:50:08.280 --> 00:50:15.160
is make a few changes here where I want to add the,

929
00:50:15.160 --> 00:50:17.640
so in this moment, we've kind of made,

930
00:50:17.640 --> 00:50:20.640
so I've got client by months, we added the toggle.

931
00:50:20.640 --> 00:50:26.880
I'll add these quick, so we go, I'll just say fix scroll bugs.

932
00:50:26.880 --> 00:50:28.720
That's open.

933
00:50:28.720 --> 00:50:34.280
And we display projects by month or something.

934
00:50:34.280 --> 00:50:39.720
And I can just say, like, dragging and dropping updates

935
00:50:39.720 --> 00:50:40.880
notion.

936
00:50:40.880 --> 00:50:45.280
It's kind of like my little hit list here, some scrolling bug.

937
00:50:45.280 --> 00:50:51.600
I want to also add the parameter to the URL.

938
00:50:51.600 --> 00:50:53.720
So I can remember, if I go back and forth,

939
00:50:53.720 --> 00:50:58.400
I want to have which view I was in remembered.

940
00:50:58.400 --> 00:50:59.840
So that's in there.

941
00:50:59.840 --> 00:51:04.360
And look at that.

942
00:51:04.360 --> 00:51:06.560
It's so beautiful.

943
00:51:06.560 --> 00:51:09.320
It's off by, like, 50 pixels, though.

944
00:51:09.320 --> 00:51:10.560
See?

945
00:51:10.560 --> 00:51:11.060
Wee.

946
00:51:14.680 --> 00:51:16.120
So close.

947
00:51:16.120 --> 00:51:18.080
I think it's changing between them.

948
00:51:18.080 --> 00:51:24.080
And I wonder if you, so it kind of still hits that.

949
00:51:24.080 --> 00:51:25.960
And then it just goes a little further.

950
00:51:25.960 --> 00:51:32.080
So anyway, I'm not going to make you guys fix the scroll bug.

951
00:51:32.080 --> 00:51:33.600
But I just want to show you, like,

952
00:51:33.600 --> 00:51:37.720
we ripped through this whole thing in 30 minutes.

953
00:51:37.720 --> 00:51:41.280
And it's pretty much got a good size feature ready to ship.

954
00:51:41.280 --> 00:51:42.480
Now, most of it was in there.

955
00:51:42.480 --> 00:51:45.120
We used a lot of the components, again.

956
00:51:45.120 --> 00:51:46.960
But I kind of knew what I had to do.

957
00:51:46.960 --> 00:51:48.360
The other thing I could have done

958
00:51:48.360 --> 00:51:50.280
is written out all my requirements here,

959
00:51:50.280 --> 00:51:52.440
take a screenshot of this little card,

960
00:51:52.440 --> 00:51:55.720
and then sent that to the plan.

961
00:51:55.760 --> 00:51:57.880
Like, when it was in planning mode.

962
00:51:57.880 --> 00:51:59.640
But this is where I just drop things like,

963
00:51:59.640 --> 00:52:00.920
I know what the scroll bug is.

964
00:52:00.920 --> 00:52:02.440
If I hand this to Lucian, he probably

965
00:52:02.440 --> 00:52:04.240
won't know what the scroll bug is, right?

966
00:52:04.240 --> 00:52:06.360
But I know what it is I'm staring at.

967
00:52:06.360 --> 00:52:08.040
I'm trying to figure out, I know what this is.

968
00:52:08.040 --> 00:52:09.840
It'll be enough for me to know when this little thing is

969
00:52:09.840 --> 00:52:10.720
complete.

970
00:52:10.720 --> 00:52:12.420
And then I can mark this done.

971
00:52:12.420 --> 00:52:14.960
And then that's where having it in this task grid

972
00:52:14.960 --> 00:52:18.120
is quite nice, because if I was working with Ira or Lucian

973
00:52:18.120 --> 00:52:21.160
on this, and they wanted to see, like, what's left to do,

974
00:52:21.160 --> 00:52:23.480
it's pretty quick to, like, glance at this

975
00:52:23.480 --> 00:52:26.200
and see that, like, this thing would be done,

976
00:52:26.200 --> 00:52:28.080
this one's done, and this is done.

977
00:52:28.080 --> 00:52:30.200
Like, OK, we've got something down here.

978
00:52:30.200 --> 00:52:36.080
Then we could start building out the tasks for this if we had.

979
00:52:36.080 --> 00:52:42.520
So again, we still took, like, a 25-hour project.

980
00:52:42.520 --> 00:52:45.960
And we're still not even going to hit, like, I don't think

981
00:52:45.960 --> 00:52:48.920
we'll get all this done in less than eight hours or 10 hours,

982
00:52:48.920 --> 00:52:50.840
for sure.

983
00:52:50.840 --> 00:52:54.360
And you can get a lot done, obviously, in this mode.

984
00:52:54.360 --> 00:52:59.000
But a lot of the time got spent building these cards

985
00:52:59.000 --> 00:53:00.240
in a previous session.

986
00:53:00.240 --> 00:53:03.720
So that was kind of a cheat thing.

987
00:53:03.720 --> 00:53:06.160
But I did spend some time on those, making that component

988
00:53:06.160 --> 00:53:08.000
just right.

989
00:53:08.000 --> 00:53:10.440
Then I was able to, like, just reuse it in a few places.

990
00:53:10.440 --> 00:53:13.000
So anyway, I'll go and sit for a few minutes

991
00:53:13.000 --> 00:53:15.440
and fix this scrolly thing.

992
00:53:15.440 --> 00:53:17.160
You guys have any other thoughts as we wrap up

993
00:53:17.160 --> 00:53:18.160
in the next few minutes?

994
00:53:21.840 --> 00:53:25.280
I think it was kind of a good example of where AI, well,

995
00:53:25.280 --> 00:53:27.040
I mean, it hits and misses sometimes.

996
00:53:27.040 --> 00:53:29.680
But it's almost, I don't know if you've heard of the 80-20 rule

997
00:53:29.680 --> 00:53:31.240
before.

998
00:53:31.240 --> 00:53:33.320
Kind of, it's like from Tim Ferriss, but basically,

999
00:53:33.320 --> 00:53:38.280
oftentimes, something, you know, 80% of the work

1000
00:53:38.280 --> 00:53:39.880
can get done in 20% of the time.

1001
00:53:39.880 --> 00:53:43.000
And it's really nailing that last 20% to perfect.

1002
00:53:43.000 --> 00:53:44.760
That can take a lot of the time.

1003
00:53:44.760 --> 00:53:46.880
I think sometimes AI is like that, where it can get

1004
00:53:46.880 --> 00:53:48.160
that 80% down really quickly.

1005
00:53:48.160 --> 00:53:49.320
And then when you're looking, like,

1006
00:53:49.320 --> 00:53:51.160
that last little bug or something, trying to fix it,

1007
00:53:51.160 --> 00:53:53.080
it can kind of spin its wheels for a while.

1008
00:53:53.080 --> 00:53:55.840
But still, you know, obviously, extremely helpful

1009
00:53:55.840 --> 00:53:58.200
to get 80% of the way there.

1010
00:53:58.200 --> 00:54:00.880
Maybe more like 95% and 5%.

1011
00:54:00.880 --> 00:54:01.520
Yeah, for sure.

1012
00:54:01.520 --> 00:54:04.400
I think, yeah.

1013
00:54:04.400 --> 00:54:07.440
I think what I would, like, I'm kind of showing you

1014
00:54:07.440 --> 00:54:09.720
the, like, hacky way to do the code piece,

1015
00:54:09.720 --> 00:54:12.640
because we can get something out and get kind

1016
00:54:12.640 --> 00:54:14.560
of the first version.

1017
00:54:14.560 --> 00:54:17.520
And now when I go, if I was to go through this with a client

1018
00:54:17.520 --> 00:54:19.360
and they, like, opened it on their tablet,

1019
00:54:19.360 --> 00:54:20.760
and now, like, there's a new bug,

1020
00:54:20.760 --> 00:54:24.640
I can go and add those to those little vertical slices,

1021
00:54:24.640 --> 00:54:27.560
the different task grid.

1022
00:54:27.560 --> 00:54:29.360
So I know that section's now not complete,

1023
00:54:29.360 --> 00:54:32.440
because there's, like, a little bug in that one section.

1024
00:54:32.440 --> 00:54:34.840
So there's obviously more steps to this.

1025
00:54:34.840 --> 00:54:39.000
But kind of getting something fleshed out quickly,

1026
00:54:39.000 --> 00:54:40.840
it's only working that way because we've

1027
00:54:40.840 --> 00:54:45.040
spent, like, five or six hours in the breadboarding

1028
00:54:45.040 --> 00:54:48.600
to get really clear about what we're actually trying to solve.

1029
00:54:48.600 --> 00:54:50.200
Because this was not very clear, and I

1030
00:54:50.200 --> 00:54:52.000
didn't touch this project for a long time,

1031
00:54:52.000 --> 00:54:54.560
because it was almost overwhelming.

1032
00:54:54.560 --> 00:54:59.160
Like, I didn't know there was so much to do in this project.

1033
00:54:59.160 --> 00:55:01.280
There's so many features.

1034
00:55:00.000 --> 00:55:01.880
because I wanted to add to this dashboard.

1035
00:55:01.880 --> 00:55:03.240
Every time I opened it, I was like,

1036
00:55:03.240 --> 00:55:08.240
well, I don't have eight hours to sit and figure this out.

1037
00:55:08.880 --> 00:55:10.920
So I just then didn't do anything.

1038
00:55:10.920 --> 00:55:12.700
And so this was nice to kind of scope it down.

1039
00:55:12.700 --> 00:55:14.080
I think the clarity of like,

1040
00:55:14.080 --> 00:55:16.400
oh, we just need to create some views for client

1041
00:55:16.400 --> 00:55:18.120
and a view for the team.

1042
00:55:18.120 --> 00:55:20.240
And I think we even named the project something like that,

1043
00:55:20.240 --> 00:55:23.260
like new team view, client view,

1044
00:55:24.720 --> 00:55:28.180
and yeah, new view for team clients and admins.

1045
00:55:28.180 --> 00:55:29.360
And so now I was like, okay,

1046
00:55:29.360 --> 00:55:31.500
we just need a view we can share with them.

1047
00:55:32.420 --> 00:55:34.420
You know, there's lots of other things we can add to it,

1048
00:55:34.420 --> 00:55:36.480
but just helped you kind of focus down

1049
00:55:36.480 --> 00:55:39.700
into a small thing to make progress or else,

1050
00:55:39.700 --> 00:55:40.540
I don't know, it does.

1051
00:55:40.540 --> 00:55:41.860
And if you're doing projects for clients

1052
00:55:41.860 --> 00:55:43.860
or you're working on your own projects,

1053
00:55:45.060 --> 00:55:48.740
then this is helpful to kind of break it into small pieces.

1054
00:55:48.740 --> 00:55:50.780
But what I like about this approach with the task grid

1055
00:55:50.780 --> 00:55:53.760
is you can kind of get like quick wins

1056
00:55:53.760 --> 00:55:56.380
and stuff that I can share with the team

1057
00:55:56.380 --> 00:55:58.620
or a client in this case.

1058
00:55:58.640 --> 00:56:01.480
So, yeah, sweet.

1059
00:56:03.480 --> 00:56:04.320
Awesome.

1060
00:56:06.440 --> 00:56:08.880
Yes, very good.

1061
00:56:08.880 --> 00:56:10.360
Cool, well, that's it.

1062
00:56:10.360 --> 00:56:11.200
I know we're at one o'clock.

1063
00:56:11.200 --> 00:56:16.200
So I think that's everything I was gonna say.

1064
00:56:17.080 --> 00:56:19.320
So if you guys got any thoughts,

1065
00:56:19.320 --> 00:56:20.920
we'll keep on this series maybe

1066
00:56:20.920 --> 00:56:23.000
just to finish this one up maybe next week,

1067
00:56:23.000 --> 00:56:24.560
but then we'll go on to some other things,

1068
00:56:24.560 --> 00:56:26.440
but check out the Cloud Skills,

1069
00:56:26.440 --> 00:56:27.780
watch some YouTube videos.

1070
00:56:28.620 --> 00:56:29.860
I'll just leave you with this.

1071
00:56:29.860 --> 00:56:32.840
Go watch the, Riley thing's pretty sweet.

1072
00:56:32.840 --> 00:56:34.580
He basically made a skill that says,

1073
00:56:34.580 --> 00:56:36.320
hey, write tweets like me.

1074
00:56:37.420 --> 00:56:39.780
So he opened a brand new folder on his phone,

1075
00:56:39.780 --> 00:56:41.980
like set up a project that was like,

1076
00:56:41.980 --> 00:56:45.400
hey, here's 10 examples of tweets that I write.

1077
00:56:45.400 --> 00:56:47.100
It figured out his style,

1078
00:56:47.100 --> 00:56:49.420
made a skill called like Riley tweets

1079
00:56:49.420 --> 00:56:51.740
or, you know, voice or X posts or whatever.

1080
00:56:51.740 --> 00:56:53.420
And then he said, now the next step was to go ahead

1081
00:56:53.420 --> 00:56:56.680
and draft those tweets and load them into Typefully,

1082
00:56:56.680 --> 00:57:01.580
which is like a scheduler for X and LinkedIn, I think.

1083
00:57:02.880 --> 00:57:05.000
And he did this in about four minutes.

1084
00:57:05.000 --> 00:57:07.260
It like set up the API, set up the thing.

1085
00:57:07.260 --> 00:57:09.280
So now he said like, he went to this,

1086
00:57:09.280 --> 00:57:14.000
to just a blank Cloud session and just said,

1087
00:57:14.000 --> 00:57:17.680
I need 10 posts, you know, for next week.

1088
00:57:17.680 --> 00:57:20.760
And it went and used the skill, wrote the posts,

1089
00:57:20.760 --> 00:57:21.720
put them all in draft.

1090
00:57:21.740 --> 00:57:23.780
So he didn't, with links, they could like click on it

1091
00:57:23.780 --> 00:57:25.500
and it would like open the link in Typefully

1092
00:57:25.500 --> 00:57:27.060
and just save them as drafts.

1093
00:57:27.060 --> 00:57:29.620
He didn't actually have it posted,

1094
00:57:29.620 --> 00:57:31.340
but that just kind of, it was a nice little example

1095
00:57:31.340 --> 00:57:35.700
of how you don't, yes, we can use it for coding,

1096
00:57:35.700 --> 00:57:37.520
which you can kind of do so much other stuff with it.

1097
00:57:37.520 --> 00:57:41.660
If you start to think about linking it to other APIs

1098
00:57:41.660 --> 00:57:42.980
and just kind of thinking of this more

1099
00:57:42.980 --> 00:57:45.500
of like a general agent that you can use,

1100
00:57:45.500 --> 00:57:48.100
not just for coding, but you can do it in your terminal.

1101
00:57:48.100 --> 00:57:51.240
So anyway, lots of cool things,

1102
00:57:51.660 --> 00:57:52.500
so check that out.

1103
00:57:52.500 --> 00:57:54.340
And yeah, I think this is all stuff

1104
00:57:54.340 --> 00:57:58.860
we want to be sharpening our tools on every single week

1105
00:57:58.860 --> 00:58:00.900
because it is changing all the time.

1106
00:58:00.900 --> 00:58:01.740
Yeah.

1107
00:58:01.740 --> 00:58:02.580
Yeah.

1108
00:58:02.580 --> 00:58:03.400
Hopefully.

1109
00:58:05.260 --> 00:58:06.300
Good stuff.

1110
00:58:06.300 --> 00:58:07.140
Good.

1111
00:58:07.140 --> 00:58:08.100
Well, have a good week.

1112
00:58:08.100 --> 00:58:09.300
We'll see you guys next week then.

1113
00:58:09.300 --> 00:58:10.140
Have a good one.