Now, so today we're going to pick up again
on our Anovo dashboard building.
If you want to watch those part one and two,
I think, where we talked about shaping and framing
and we talked about just how we breadboarded some projects.
Today I'm just going to jump in and share my whole screen here.
I'm going to start first.
Let me grab this one here.
I've got a few different screens going on.
Let's get this here.
And yeah, here we go.
So we talked last time about just we
took some ideas from our team meeting.
We've worked them into some stickies.
We've worked some beautiful sketches here,
fat marker sketches.
We've had a few sessions of figuring out our process
and how things are currently paid in the business
and then how things need to be, what kind of our future process
will be.
We've talked just outlining even how our shaping process
happens.
So this is a little bit of a shaping inception
since we're doing breadboarding about how we do breadboarding.
So that's a new one.
And we've talked a little bit about little sketches
of maybe how these could look, different screens and stuff.
So this is all on one giant board.
I think we had a session here we shaped up a problem.
And then I think we got another one here
where we clarified that this was a new view about having control.
And we talked about how we chopped up the project.
And then I think we went through this.
Yeah, we actually had this navigation.
And clients can go through this.
So this is a recap.
We've been building this as we go.
And so we used this task grid, what we call.
So each one of those little components.
So if we take a blob, we call this random blob a project
here.
There's lots of things that stand on their own here.
So this client view, we technically
could build the back end, build the front end.
And then we can go in and actually ship that,
start using it.
And we can actually go to the next thing.
And these sort of independent parts of the project.
So we typically go in and build those out here.
You can see we don't even fill all nine.
We use little tilde here if this is nice
to have if we get time for it.
This is where I've spent most of my time building out
some of these tasks.
And you can see there's not a lot of detail here.
It's just enough for me to remember it.
I don't need to sign this to someone necessarily.
I'm taking this whole little block myself.
Sometimes we'll go here and I'll say this is for Bruce
or this is for Lucian or something like that
if we were doing this together.
But this is just really a scratch pad for me to have this.
It doesn't sync with anything.
It doesn't connect to anything.
But it's here.
And if I do go to our project here,
I'll just say this is sort of what our view would look like.
We have task grid link.
We have the breadboard link, which is this guy.
This guy is the task grid.
And we can get to a few different things there.
So we share a few updates.
I sent something yesterday to the team.
And so far, we have added a couple little things here.
So now if you go to the client dashboard here,
we can actually pick out a project.
I'll pick out these guys.
Now you can see which projects they have open.
You can actually open this here.
And you can go to a quick little jump to Notion if you want.
You can open it and toggle if you want.
You can actually drag these things around if you want.
And that will actually update it in Notion live,
which is pretty helpful.
Then we created this share page.
So the share page is something we can share with the client.
And it's just got this long ID.
And they can't do anything with it, which is great.
So they can't actually click on anything.
You can technically use the Notion,
but you'd have to have access to that page.
That's pretty well protected.
And then if they do want to sign in, they can do that.
There's not really any benefit to signing in right now.
But I wanted to have a logo, and it
looked weird not having a sign in button.
So that's this first little thing, which
I would say considered completed.
We added the card UI, drag and drop.
You can see just how we broke out these little tasks,
being able to write to Notion and Superbase at the same time,
collapsing the inbox and completed.
I wanted to be able to open this and open the completed.
Because these are things we don't really
look at inbox that much.
We don't really look at completed.
So it's nice to have it on the side.
I stole that from the Fizzydoo app.
They have this little thing, so I stole that from that UI.
And then we had the public share URL.
They have an option to sign in.
And then we added tooltips, I actually added this.
Since clients, you can actually hover over this
and it tells them what's going on in this section.
So here we're getting the initial scope of the project.
You know, here we're creating clarity
and making requirements concrete.
Project is clear, concrete, and approved.
In progress, practically building.
And then in review, we're working together to finalize.
So just, you know, as we scale and we get new clients,
these are helpful things, or new team members even.
These are like some very short definitions
if we forget what's going on in each of these,
I thought that would be like a nice little value add.
So I'm going to jump over, sorry,
I'm going to add the team back into this here.
And let me just bring the, share my screen.
Let's see if it'll work.
Sorry, I go back here.
Take a second and I got to go here and then, and there we go.
So you guys are welcome to jump in
with any questions or comments.
But what I thought would be helpful
is just to kind of show you the workflow
of like how we would go about maybe making
this projects by month.
And I can show you guys the cloud skill piece.
So any quick comments or questions
from anything I showed you guys?
I don't know if anyone, if everybody had seen this
other than Lucian and Macy maybe,
but you guys got any thoughts?
Cool, let me add.
I just have a question.
Yes.
I missed the beginning.
Was this recorded?
Can so I can watch the.
Yeah, this is just the first few minutes.
Yeah, we're just doing it.
All right, cool.
Yeah, me too.
Sweet.
It was just a recap of the first part one and part two.
We did like end of December.
So I didn't really miss anything.
So yeah, I'll go in.
Because I was going to kind of talk
through how I would maybe move this through.
And some of you guys are familiar with this.
But I was going to show you my process.
And before I do that, let me show you.
I wanted to show you guys this video.
I'm going to drop it down here.
Here we go.
If you guys aren't following Riley Brown, he's really good.
And he's on YouTube.
And he's not a developer.
And yet he is teaching a lot of developers how to.
There you go.
So I'll drop that link if you guys want it.
But this is all about Cloud Skills.
And so what this does is it's going
to create a skills folder.
So in your .cloud directory, you're
going to have like I have a new skill called Innovo UI.
So inside my project.
And you just prompt it.
You're like, this is the whole part here.
I just went and said like, you know, oops.
Well, it doesn't do well when you zoom in and out.
Let's go back.
Let's see if that works.
You guys noticed.
There you go.
I'll just start here.
I won't change the zoom.
But hey, I want to make a new skill.
And you can just reference this thing.
It's GitHub Anthropic Skills.
There's a whole bunch of documentation on that.
I think I can open it here.
Pull it in.
So yeah, the skills are kind of like how
we used to have like agents.
But it's a little bit more flexible than that.
So what I'm going to do is I'm going
to make a thing called Innovo UI.
So when I build a new component, I
want it to look and be styled like the Innovo brand,
for example.
This is so fun scrolling around here.
Claude really is struggling to.
There we go.
And it's going to create the skill file.
I'll pull it over here.
And you can see it's basically got the brand colors.
It's got some of my styling of what we like, typography
like we already have.
Wow.
It's kind of hard to show it while it's literally
drawing it right this very second.
So let's do this all here.
Are you guys confused by my workspace yet?
OK.
Let me just close this.
I don't really need to look at that right now.
Font families, hierarchy of like, hey, we
use this for page title.
Then for normal text, we use this.
For technical little badges and stuff, I like the font mono.
It's got some general principles.
So what it's going to do is if.
I go and in the skill at the very top, it's always going to have a name for the skill
and then it's going to say, hey, you know, this is the design system and UI guidelines for Nova
Studios. Use this skill when building new pages, components, modifying existing UI ensures
consistent professional bespoke agency aesthetics that avoid generic AI generated patterns.
Emphasis on the avoid generic AI patterns, right? Because now I think everybody's
kind of a little, you know, sick of seeing kind of AI vibe coded components at this point. They
all have like soft blue background, blue border, you know, they kind of have like a certain look
to them. And for some reason, if you guys have seen the jokes, like the tailwind purple and
gradient is like the thing that, you know, AI is obsessed with. So that's easy to get out.
So I think I specifically say like avoid gradient somewhere in here. I don't remember. I think that
was the question. So, but when I, when I created this, let me go back and see if I can try to show
you the process here. Yeah, I made this, then it asked me questions. So it takes you through the
little wizard and it said, hey, what kind of fonts do you want to use? And I said, hey, use the home
page for reference. Like you go figure that out yourself. What kind of balance do you like? So
they had some questions about like, do you want it more compact, more white space, avoid all
gradients together, you know, to make sure it doesn't look AI generated. So I put a few little
points in there. What's the preferred button interaction? You know, I just gave them some,
some quick things that like, and these are things that I've been kind of saying over and over again.
And it, it, I don't even think that's our website. I don't know where it pulled that from, but
border radius, it kind of clarified that it just asked me a few questions and then it built this
document off of this. So in theory, what I can do now is we can clear the context
and you can see there's a new skill. So I'll actually commit that here before she does test
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
to do. Let's just do like, let's say for the, there's a, we have a super blank, like a really
blank team dashboard. Update the, I think it's team dashboard like this to include the,
and I think we have this, let's see.
I'm actually going to do something a little more simple. Let me, let me do something. Let's say
like update, let's just say like build a quick mock-up in, of what team members could see based
on, in the project. So we'll just say like, and I think I can include here. Let's just see what it
does. I'm going to auto accept everything. I do this a lot to have it do a quick mock-up. Of
course, I also love, as you guys know, V0. So I did this to quickly get like, hey, we've got this
like status thing going on here, here by like the columns, but maybe we want to look at it by month.
So it was like, maybe there'll be a toggle here. I'm not quite like decided on it yet,
but you can see the AI, like this is the gradients of this, like stuff drives me crazy. And for some
reason, this yellow, it's like obsessed with this yellow and this color scheme. But yeah, so having
something that I can quickly mock up, I don't use this code. I just get a quick like sketch of it.
This is the same kind of concept in here. And I wanted to see, what we should see is a little
green dot like that once it starts building. And it's going to invoke the Innova UI skill
automatically. I didn't have to call it. I didn't mention it. It just sees that I'm designing
something new and it should just invoke that. So this is a great thing where you could add
a number of skills. If we were framing something, shaping something, if we were
having like a technical audit skill, these are things we could also pass around and share between
all of us. And I just went ahead and said auto accept. I'm not going to ask it. Normally,
I would put it in plan mode. So shift tab, we put it in plan mode. And I want to see if it's
invoking this because that's what it should have done. It's just writing a bunch of stuff. We'll
see what it does. And if it listened to any of the instructions, well, it says it's done. Let's see.
Okay. It's not too bad.
Um, I don't know what, I don't know what this R21 is that like supposed to be a different currency.
Uh, AI did do some gradients, not too bad though.
Um, I'm curious why it didn't invoke.
Um, did you like use that?
I'm just curious.
It should have, it may have to like reset the session or something.
Uh, I didn't, let me check what's in there.
Well, great demo, Claude.
I'm trying to, trying to sell the features here.
Uh, but in, in theory, yeah, you would go through this.
You shouldn't have to invoke it.
It should use, what it uses is the description up here, uh, use this design system.
As long as this is, uh, specified well, it should invoke it at the right moment.
It may be that I had to, um, stop the session and start a new session.
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.
Um, if we had a, you know, another client, we could have skills for like a particular client's UI would be good.
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.
So we should, we could have a tribe backend skill.
That's like, here's how we like this.
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.
Um, and I'm still not seeing it.
Like it should actually have like a little green dot and it's bothering me that I don't see that.
Um, so we'll see what it does.
Maybe it'll, maybe it'll be better.
Yeah, it, it, well, it changed one font and a few of the texts.
That's fine.
Um, I think get rid of that silly gradient though.
So it looks a little better, but he has get the idea.
I wonder if I quit this.
Um, sorry, but anyway, have you guys, I don't know if Janata or are you guys played with, uh, skills yet?
It came out like a couple of weeks ago.
So skills are just cloud files.
Basically.
This is what I'm understanding.
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.
It's similar to a course or rules, I believe.
Yeah, kind of.
Yeah.
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.
Whereas like they used to be agents.
So you could have like an agent MD file and I would call my backend, go do backend things.
Um, this is a little bit more like, it's going to give you, it's like a tool call.
Essentially.
You can set the tool tool up to do something and then, um, obviously pass it between projects.
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.
I could like share that skill, you know, to two places if we wanted to.
Um, does that make sense?
It's very similar to an agent and cursor rules, but, but also slightly different.
I think on them, like they are all trying to, to create different ways for us to create different contexts.
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.
As a pre prompt to the prompts that we are making.
So it's basically a helper for context.
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.
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.
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.
So they're like, they are all playing around and trying to find the best way for, for context building, I believe.
Yeah, I think.
Yeah, basically.
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.
Um, but there's also like, um.
Obviously, we're getting better with context. One thing to be using a lot here, if I get Claude going again,
is to use the context window.
So you can actually visualize this context and it will grab a little... I don't know if you guys have seen this.
This is very useful.
Just hit slash context and it will actually tell you what's going on here as far as what the
200,000 tokens are being used for.
And I apparently just started a brand new, fresh one and already at 13% on a brand new session.
So it just shows you all the things that it's pulling.
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.
And then once I'm done in the planning phase, I'll then compact it so you can easily go hit slash compact.
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.
So what you don't want to do is be at 80%, 90%, and then it just auto compacts.
You're pretty much like that destroys your session right there.
So this context window management obviously is good, but there's a lot...
I mean, this little slash command, you can see there's a ton of things that are available in here.
If you guys would just check out all the stuff about...
I've got MCPs for Superbase, for example, set up.
You can obviously do PR reviews and commits and all that stuff.
So anyway, that's a little bit of just how I've been using it.
And I think we're all in.
I think we're maybe seven hours into this project, which it's doing quite a lot.
But as far as time spent tracked in toggle, I think I'm less than seven hours all in.
So obviously, we're taking some time to talk it through on these calls.
But yeah, 12%.
See, everything's syncing now.
Yeah, well, I've got a session from this morning, so maybe we're at five hours out of the 25.
But this just shows how much you can do with very little.
Because the way I'm doing it is this is one or two deep work sessions to knock out that whole slice.
So that's where if you can do part of it, you do a second part of it,
that's a great check-in checkpoint to make a video.
So that's where I came in here.
I made a video for, I think I tagged Lurch and Macy,
because they were specifically tracking this project with me.
And I just did this.
I just basically gave the highlights of what cool features we have and a three-minute video.
And then anyone can tune in and watch it.
And as I move to the next thing, that's actually been shipped.
I've already published that in production, and I'm already sharing URLs with clients at this point.
So this is already being used, and we're actually creating value.
Now, of course, we could have made this a one-week project,
and each one of these could have been its own project.
But you kind of have to...
It's really not, because this is one or two sessions.
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.
And also, we got really clear.
I think last time, if you go back and watch the videos,
the problem was not having control over what users can see.
Like, what can a client see and do?
And what can a team member see and do?
And then what can an admin see and do?
Those are kind of the things that were blocking us.
And so we're essentially just figuring out notions like shortcomings, having to take like a...
Like if we went to...
I grabbed one of our client pages, something we would use for the clients.
If I shared this client, one, I'd have to share the entire Notion database with the client,
all our projects for the entire company.
Then I'd have to share all the task database, I'd have to share all the client stuff.
It's quite messy, and I don't really have control over what they can see and do.
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.
So we don't run any risk of them...
When they only can see their projects, they can only see certain things.
It got clear when it was really just about like recreating some Notion views.
And yeah, so that's good.
But okay, that was only 30, not even, like 24 minutes into this.
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,
just see how far we can get.
I don't know if you guys are up for it.
Any other questions or thoughts?
I got one.
How do you do your planning sessions?
Do you just tell Claude to write it out to a file
and then use that next?
Yeah, well, let's just do one because now let's add another
view to client dashboard.
We'll just say currently we have a Kanban by status.
I want to do one by invoice date by month.
And I'll just grab, I don't have to come up with all this stuff.
We actually have a great little time schedule here.
It kind of looks like this.
I'll just say like, right here, this view in Notion.
I'll just paste it, paste images.
It loves images.
It's very good at, oops, I may have put that in twice.
Didn't know you could paste directly in there.
I make a screenshots directory and I'm like,
go look at the screenshots.
No, just command.
I use, oh man, a clean shot, command shift R,
command shift 4, the screenshot right there.
It saves it to my clipboard and I just paste.
So I would just simply use clipboard and paste.
I wouldn't put it anywhere.
And then I've got, you hit shift tab.
And as I shift tab, it goes between accept edits.
That's just like YOLO, essentially.
And then plan mode is what I typically would start on.
So it's going to start this and I've given it generally
the things, and you can still talk to it.
So I'll say like, I do want like a toggle
to get between these two views on the same page.
I also want, so there's this phrase,
I think it's called like selective disclosure
or delayed disclosure or something like this.
You don't tell absolutely everything
to Claude in the first prompt.
Let it slowly go through and figure this all out.
It's going to come back with some sort of plan
here in a second.
So we'll give it a second, see what it comes up with.
But we should be able to knock this out.
And it should know that we, like part of my skills
as well, if it does invoke that, I'm not sure if it will,
but it was to reuse as many components as possible
because it's very quick to like just spin up brand new things.
And one of the best things here, I keep this here.
So I'm actually going to discard those changes.
I'll go ahead and like, I'll just
say like B1 of the Novo UI skill.
And I'll kind of start with a clean slate here
because we haven't told it to change any files yet.
But I typically, my flow is like, one, do planning mode.
And I'll go and do something else while it's doing this.
Because this can take a couple of minutes
if you're on Opus 4.5.
It does do a very good job the first pass, I think.
And then once it's good, I execute on it.
And as soon as I execute on it, I'm like, OK,
what did you actually change?
Then I click through each and every file.
I do like this GitHub desktop app
just because it's very quick to get around files.
And then I can see what it changed.
And immediately, I'll go say, why did you create this other
component?
We already have that.
Or why did you create this other API route?
We don't need that.
And it's like, oh, you're absolutely correct.
Absolutely right.
Let me do it the right way.
So then I'll just prompt it until it's done.
Once we get kind of a working version,
I'll commit it locally.
So let's try in here.
And it typically goes a little bit too verbose.
One of the first things I tell it
is this plan is too verbose.
Here you go.
Single file change.
So that's good.
We're only changing that.
Reuse existing data.
Invoice data is already fetched.
Project card reuses existing component.
Perfect.
Same toggle UI.
And I'm not sure if it kept the Kanban board.
Let's just check.
You toggle.
That's fine.
So it's got the little status or by invoice date.
Sorry, it does this every so often.
It just jumps.
OK, so it's asking if I can move all verification.
I'll just say I'm pretty.
It gets very confused with this.
I'm already running the app.
It loves to spin up a brand new npm run dev.
And then it's going to run into port problems
for sharing, fighting over the same port.
It's really dumb.
And then say I want it in a npm run.
And then style, same as status.
I also want drag and drop view.
Dragging and dropping should update Notion the same way.
And then it may have some questions.
The new little wizard thing is quite nice.
And I'll just say, like, the client is a bit opposed.
And this could be like maybe a planning skill
I could invoke later, which is maybe just
more of a minimalist approach.
It seems to get you guys got the client drop down,
the toggle up there.
Even this little diagram is not too bad.
The column there, total number of projects are there,
project card, project card, so it should work well.
Let's see what it comes back with.
This is always like when you're making a tutorial,
we just pause the video.
OK, here we go.
So look, this is much, see how nice this is?
Just like, ah, I can look at this and breathe.
The other one was insane.
Add this view, switch that.
We're changing that one file.
Add a view mode.
Here we go.
Projects by month handled this.
API, OK, it's going to create a new route, which is fine.
I don't care.
Patch the endpoint.
Yep, that's fine.
Same pattern.
That's good.
Month keys, that's good.
They'll do fine.
So it did include this no date, so you
can ignore no date projects.
But now we've got a lot less to update,
so the plan coming back the second round
should be much easier.
And I just let it do this because I don't go and find.
This is a file that it writes somewhere on my desktop.
Here we go.
It's in Claude Plans Abundant Cuddling Mochi,
or whatever it makes up its own little code name.
OK, so then I'll just check here.
It hasn't done anything.
That's good.
And I could compact it, but I can also at this point
just hit context, see where we're at.
We are only 30%.
So I'm just going to go crazy and say.
I missed about a minute.
How did you bring it from a plan of 200 lines
to what you have now, about 40 lines?
Oh, I said you're being too verbose.
Make it concise.
I just asked it.
This is too much.
You're trying too hard.
And then I switched it, hitting Command Shift Tab.
And you can see the little command here.
And I can also put it on.
Sorry, and it needs to be in auto accept.
I'm just going to let it know, because I don't.
Or else it pops every single thing up here.
I just want to let it take one whole pass at it.
Then you can see, we're going to add the toggle state,
project a month grouping, all this stuff.
And now I'll just typically hang out and look at this
so we can quickly see what is starting to change.
And you can just kind of skim this stuff
to see where it's being versed.
It was doing silly things.
Let me take a great example here while we're waiting.
Let's say we take a project like this.
I had this little View and Toggle button.
And all I wanted was the icon there.
And I have the icon in a few places.
If you click Project Connections,
I think we have the icon somewhere here.
We have it in time tracking, I think.
It's here.
And basically, it just was putting the SVG over and over
again, being really dumb.
So I was like, this is silly.
And there was already a toggle icon file that it could use.
And so that was just a little prompt.
I was like, hey, you're not being smart.
Reuse this.
And then when it wants it updated, I was like, hey,
go ahead and update the rest of the app for all toggle icons
to use this one icon file instead
of putting the SVG everywhere.
That's a pretty simple example.
Let's see.
It's already got the toggle in here.
I don't know if I love it up there.
And I don't like the word Invoice up there.
And so let's, again, get something with Projects.
And also, one thing I noticed as well is I
do like these parameters when you're building any app.
I know this happens specifically on Veritas and anything
like this where I'm selecting.
I'm just showing you my pet peeves because you
guys work on the app.
This stuff I check and bothers me immensely.
Veritas is particularly bad with this.
But if you're on a page like this and then you refresh,
it should stay on the right client.
These are little things.
But what it.
Most of the time we'll do,
if you don't have this parameter, obviously,
it just resets, then it's back to like this blank,
oh, this client doesn't have any projects.
So just a little annoying,
especially when you navigate to time tracking
and then you wanna hit the back button.
That's just much nicer experience than it resetting.
Bonus would be like it has a local storage or something
where it's like, or some session storage
where it like remembers what your last client was.
Okay, so it's still going tool use.
Let's see what it's doing.
Just wants to get diagnostics.
I suppose that's fine.
I don't know why it's asking for that.
Let's see.
Oh, there we go.
We already got it sort of working.
So this one's totaling the weeks.
And this one's, so a couple of things that it didn't do,
like I like that these were all like all caps
and they have the certain styling on the fonts there,
but we'll, well, okay, let's just let it check it.
Oh, yeah, so it says it's done.
The information is completed with no errors,
changes to this.
So let's just see if it works like,
oh, it also, I see what's going on.
It's literally going back from the beginning of time.
I don't want to break anything.
Janata's like, what's he going to do?
Break, let's just move this to like December.
Great example.
You see how it jumped.
It actually moved.
But let's just take a look at it.
Did it switch the dates?
Yeah, it did.
So that's actually working.
It visually, it's probably the time zone issue.
Check time zone or something.
I moved from January to December
and it showed up in November one.
Okay, and so,
not this, it's added, so this page has become quite long
and I don't like this being so long
because the AI struggles,
especially once you start to top like a thousand lines.
You guys know that like it does start
to fall apart pretty quick.
So let's take a look at this.
How big are we?
So I'm saying, I just want to show you guys like how,
not haphazard this is, but like how, oh, we did,
oh, I've really messed up the scrolling here.
Oh, there we go.
Status.
I don't know, it's actually okay.
It's just between versions.
Oh, fixed.
Let's see if this works now.
It's not really working.
I can diagnose that in a second.
That's probably what it is though.
Something like that.
Let's move it back to December.
Yeah, it's always, it's going off by one.
Oh, you know what I can do to refresh?
Let's give it a chance.
Move this over here.
We'll let it crank on that.
But one thing I may tell it right now is like this,
this got a little big.
So maybe we can extract this to like a separate file.
Again, I'm not, I'm building it one for humans to look at,
but also I'm really building it for the AI
to work on it next time.
Because right now,
if I want to work on either one of these views,
I have this one massive file
that it has to deal with every single time.
Let's turn this client page is too big.
Let's make,
there's a better like let's refactor to use a one file
for status view and one for,
what's the other one called?
Yeah, invoice.
Okay, let's see if this works.
Let's fix it.
Let it do one thing at a time.
So let's say here.
Oh, that's just annoying.
So Bruce, oh, sorry.
Are we still getting the one off by one issue?
It is.
So yeah, I was going to ask,
one of the reasons why I'm still with cursor
is because it allows me to like hop into an AI
and like, you know,
I can just like,
because it allows me to like hop into another model
if I'm seeing one model is like stuck in this way.
So I was going to ask you,
you don't have to talk about it now,
but can you weave in kind of the pros of using cloud code
as opposed to.
the cursor that you've noticed.
I mean, I've just gotten, it's like you just
use the tool you like.
The Opus 4.5 is just pretty good.
It's a preference.
Like, that does give you a different option.
I didn't have this issue before, but I could,
I'm not going to dig into this, but this will probably,
it could take another 20, 30 minutes to figure out this piece.
It'll figure it out.
And what will happen is we'll do some,
it'll probably ask to do some debugging,
console and I'll copy and paste that back and forth.
And then only after that, it gets it pretty.
Have you, have you tried the Sergey Brin approach
of like telling the AI, and I do actually do this a lot
in cursor before I switch models.
I say, I'm never going to use you again
if you don't get this right.
Or like, I'll say, I'll say something to the AI.
Well, this is actually, this is actually like an approach
that Sergey Brin advocated for.
And I started trying it and it actually does yield results.
And I don't, I don't know what that says.
I were trying to get the AI or something.
Yeah.
It's kind of like, if you yell at it loud enough,
it will comply eventually.
Yeah, it's kind of bizarre.
That's funny.
I mean, you can definitely.
I'm pretty sure like slash model allows you
to change the model in Cloud.
I think you did.
Yeah.
But then you're just choosing between Cloud, obviously.
I think I accidentally interrupted it.
Yeah, I've had to do something kind of like that too,
where it's like, it had a function and I was like,
oh, also add this.
And it replaced the first one.
I'm like, no, put that back.
And it's like, okay, it's done.
And it wasn't.
And it's like, okay, now it's done.
And it wasn't.
And it's like, okay, now it's done.
I put the fourth time and I'm like,
I need to step away and do something different.
I'm like, I might just delete that part
and be like, hey, add this feature.
Yeah, maybe.
But that's part of being on the very, very,
very cutting edge of everything.
Yeah, it is.
I mean, it does go in a spiral for sure.
So it's actually like, I would keep going in this version.
And I think like, if I go to this,
let's just view, see if it is.
I think it's putting the right date in there.
It is getting January.
And if I switch this to December,
it is writing it now to December.
So it's getting it right.
It's just, we still have the.
Oh, another approach that has been really effective for me
is when it's looping like this,
is asking it to add like extensive logging.
And then I'll do the action I want
and then just copy and paste all the logs.
Say, or use this as context to debug.
Yeah, and I just wanna show as well,
like I did make this.
So the first thing I do when we did get in a spiral
is like, I assume that it's not optimized.
Like I have a lot more faith in the AI
than probably anyone on this call.
You guys are like very quick to like,
okay, well, forget that.
I'm gonna do it myself.
So like, I'll assume that like the,
so when I mentioned the like thousand line page thing,
now it's 283 lines and it's built out a Kanban invoice view
and a status view separately.
And each of those are only, I think a few hundred lines.
So yeah, 300 lines on that one.
And it added two new files here.
And then you're out.
So I basically break it down a little bit more.
And so it's saying it parses strict to this, blah, blah,
instead of the new date.
Let's see what it does.
So let's refresh.
Invoice, I also wanted to go ahead and add the,
so we've got January.
Let's pull it to January.
Aha.
See?
Okay, and then I'll just give it this nice little command.
Like, this is great.
I'm way more encouraging than Ira.
You'd be like, you better get this right
or I'm gonna get you fired.
Like, you're doing great, Claude.
What a champ.
This is great.
I'll just tell it this, like clean up anything you can
to get ready for fraud production.
And it does like a whole little analysis of everything.
Sometimes it'll clean up logs.
There's something goofy going on.
I don't know if it's happening.
When I refresh, it's fine.
Let me just try this, see if I can recreate it.
If I go to the end.
Ah, it just kind of keeps scrolling on forever.
So.
Oh, if you scroll this way and there's a scroll within a scroll, there is a horizontal scrolling
bug.
Since it's pretty good right now, and I'm pretty happy with the way this is going, I'm
going to go and say v1 of client invoice view, just to clean that up.
And then I can see what other differences is happening here.
What is it grabbing?
It's cleaning up some unused stuff here.
Let's see what it did.
Maybe it's standardized.
Let's see what it's saying.
Found a few things to clean up.
Good.
You go and do that.
Here.
All cleaned up.
No errors.
Here's the final production summary.
I think I committed it before it even checked finish there.
There's also a bug, like a ... Let's just see what it does there.
And I'll go and sit right there, and hopefully it'll refresh and just fix that for me.
I also want to get the ... While it's doing that, also, I want to change the name invoice
to maybe calendar or schedule.
What do you guys want to call it?
Schedule?
I think we call it schedule.
Update all files.
Okay.
Let me just ... Before I hit it with the ... Ah, it's still there.
Still there.
I'll copy that, clear this up.
I don't think it does it on this view.
Oh, because ... Yeah, because this one doesn't have enough.
Anyway.
Okay.
I'll fix the scrolly thing.
Let's see if it works.
Okay, we've got eight minutes left.
Ah!
No, it didn't.
It's like every time I get there ... Okay.
I'm going to do one of these things to try to actually fix it for it.
Let's see what's going on in here.
Yeah, there's something else going on.
It's like in this ...
Okay.
This is its last attempt.
I'm not going to threaten to fire it, but I will give it this,
and then I will not keep you guys.
We got pretty far, and I can kind of see what it's doing here.
It tried to do max full width, and none of these things actually worked.
It tried to put overflow hidden in there,
so it's doing a bit of hacking there,
and I don't really see it working.
No, it's actually the layout that found it.
Flex one, which is expanded.
Let me try a smarter approach.
Okay, and then this is why I check this,
because I want to see these files cleaned up.
Very often, it will not clean up its mess, right?
Like, it just, like, tries v1.
It tries v2.
It tries v3.
Fixes on v4.
Leaves everything from the first three versions
just sitting in there, right?
You got to, like, tell it, like, hey, I think once ...
There you go.
Okay, so in this case, it did.
Let's see if it fixed it.
Oh, boy.
That's fine.
Okay, so we can go in, like, circles with this,
but I just want to make sure that's ...
These are, like, things to avoid.
This is why I watch everything that it does in this view,
and I can kind of quickly tab these back and forth.
It may undo what it just did there.
Cool, and we got about four minutes left,
so this is what I'm going to do.
I'm going to go ahead and run this,
and then I'm going to run this,
This is like, I wouldn't necessarily ship this yet,
but I would, once we get this thing fixed, what I want to do
is make a few changes here where I want to add the,
so in this moment, we've kind of made,
so I've got client by months, we added the toggle.
I'll add these quick, so we go, I'll just say fix scroll bugs.
That's open.
And we display projects by month or something.
And I can just say, like, dragging and dropping updates
notion.
It's kind of like my little hit list here, some scrolling bug.
I want to also add the parameter to the URL.
So I can remember, if I go back and forth,
I want to have which view I was in remembered.
So that's in there.
And look at that.
It's so beautiful.
It's off by, like, 50 pixels, though.
See?
Wee.
So close.
I think it's changing between them.
And I wonder if you, so it kind of still hits that.
And then it just goes a little further.
So anyway, I'm not going to make you guys fix the scroll bug.
But I just want to show you, like,
we ripped through this whole thing in 30 minutes.
And it's pretty much got a good size feature ready to ship.
Now, most of it was in there.
We used a lot of the components, again.
But I kind of knew what I had to do.
The other thing I could have done
is written out all my requirements here,
take a screenshot of this little card,
and then sent that to the plan.
Like, when it was in planning mode.
But this is where I just drop things like,
I know what the scroll bug is.
If I hand this to Lucian, he probably
won't know what the scroll bug is, right?
But I know what it is I'm staring at.
I'm trying to figure out, I know what this is.
It'll be enough for me to know when this little thing is
complete.
And then I can mark this done.
And then that's where having it in this task grid
is quite nice, because if I was working with Ira or Lucian
on this, and they wanted to see, like, what's left to do,
it's pretty quick to, like, glance at this
and see that, like, this thing would be done,
this one's done, and this is done.
Like, OK, we've got something down here.
Then we could start building out the tasks for this if we had.
So again, we still took, like, a 25-hour project.
And we're still not even going to hit, like, I don't think
we'll get all this done in less than eight hours or 10 hours,
for sure.
And you can get a lot done, obviously, in this mode.
But a lot of the time got spent building these cards
in a previous session.
So that was kind of a cheat thing.
But I did spend some time on those, making that component
just right.
Then I was able to, like, just reuse it in a few places.
So anyway, I'll go and sit for a few minutes
and fix this scrolly thing.
You guys have any other thoughts as we wrap up
in the next few minutes?
I think it was kind of a good example of where AI, well,
I mean, it hits and misses sometimes.
But it's almost, I don't know if you've heard of the 80-20 rule
before.
Kind of, it's like from Tim Ferriss, but basically,
oftentimes, something, you know, 80% of the work
can get done in 20% of the time.
And it's really nailing that last 20% to perfect.
That can take a lot of the time.
I think sometimes AI is like that, where it can get
that 80% down really quickly.
And then when you're looking, like,
that last little bug or something, trying to fix it,
it can kind of spin its wheels for a while.
But still, you know, obviously, extremely helpful
to get 80% of the way there.
Maybe more like 95% and 5%.
Yeah, for sure.
I think, yeah.
I think what I would, like, I'm kind of showing you
the, like, hacky way to do the code piece,
because we can get something out and get kind
of the first version.
And now when I go, if I was to go through this with a client
and they, like, opened it on their tablet,
and now, like, there's a new bug,
I can go and add those to those little vertical slices,
the different task grid.
So I know that section's now not complete,
because there's, like, a little bug in that one section.
So there's obviously more steps to this.
But kind of getting something fleshed out quickly,
it's only working that way because we've
spent, like, five or six hours in the breadboarding
to get really clear about what we're actually trying to solve.
Because this was not very clear, and I
didn't touch this project for a long time,
because it was almost overwhelming.
Like, I didn't know there was so much to do in this project.
There's so many features.
because I wanted to add to this dashboard.
Every time I opened it, I was like,
well, I don't have eight hours to sit and figure this out.
So I just then didn't do anything.
And so this was nice to kind of scope it down.
I think the clarity of like,
oh, we just need to create some views for client
and a view for the team.
And I think we even named the project something like that,
like new team view, client view,
and yeah, new view for team clients and admins.
And so now I was like, okay,
we just need a view we can share with them.
You know, there's lots of other things we can add to it,
but just helped you kind of focus down
into a small thing to make progress or else,
I don't know, it does.
And if you're doing projects for clients
or you're working on your own projects,
then this is helpful to kind of break it into small pieces.
But what I like about this approach with the task grid
is you can kind of get like quick wins
and stuff that I can share with the team
or a client in this case.
So, yeah, sweet.
Awesome.
Yes, very good.
Cool, well, that's it.
I know we're at one o'clock.
So I think that's everything I was gonna say.
So if you guys got any thoughts,
we'll keep on this series maybe
just to finish this one up maybe next week,
but then we'll go on to some other things,
but check out the Cloud Skills,
watch some YouTube videos.
I'll just leave you with this.
Go watch the, Riley thing's pretty sweet.
He basically made a skill that says,
hey, write tweets like me.
So he opened a brand new folder on his phone,
like set up a project that was like,
hey, here's 10 examples of tweets that I write.
It figured out his style,
made a skill called like Riley tweets
or, you know, voice or X posts or whatever.
And then he said, now the next step was to go ahead
and draft those tweets and load them into Typefully,
which is like a scheduler for X and LinkedIn, I think.
And he did this in about four minutes.
It like set up the API, set up the thing.
So now he said like, he went to this,
to just a blank Cloud session and just said,
I need 10 posts, you know, for next week.
And it went and used the skill, wrote the posts,
put them all in draft.
So he didn't, with links, they could like click on it
and it would like open the link in Typefully
and just save them as drafts.
He didn't actually have it posted,
but that just kind of, it was a nice little example
of how you don't, yes, we can use it for coding,
which you can kind of do so much other stuff with it.
If you start to think about linking it to other APIs
and just kind of thinking of this more
of like a general agent that you can use,
not just for coding, but you can do it in your terminal.
So anyway, lots of cool things,
so check that out.
And yeah, I think this is all stuff
we want to be sharpening our tools on every single week
because it is changing all the time.
Yeah.
Hopefully.
Good stuff.
Good.
Well, have a good week.
We'll see you guys next week then.
Have a good one.