WEBVTT

00:00:00.160 --> 00:00:04.010
In this app, at this point,
I can add notes, but I don't

00:00:04.100 --> 00:00:07.890
see any notes I added on this dashboard,
and therefore, I can't also

00:00:07.900 --> 00:00:10.980
really view them or edit them
or delete them.

00:00:11.000 --> 00:00:14.820
So naturally,
that would be the next things I want to

00:00:14.900 --> 00:00:17.380
and I'll start with the first step.

00:00:17.660 --> 00:00:21.620
I want Claude to add a functionality to
show the notes

00:00:21.640 --> 00:00:25.570
that belong to a user on the dashboard
route to make them

00:00:25.600 --> 00:00:29.560
clickable and link to the viewing page,
and on that viewing page,

00:00:29.620 --> 00:00:32.490
able to view the note so it should be
rendered there.

00:00:32.540 --> 00:00:36.300
As always, I'll start in plan mode, and

00:00:36.420 --> 00:00:39.780
after giving me a plan, which I accepted,
it went to

00:00:39.820 --> 00:00:43.460
work, and now I can view my notes here.
I can click them.

00:00:43.500 --> 00:00:46.700
They are then also rendered here,
so that's looking

00:00:46.760 --> 00:00:50.640
good. Next, I want to make sure
that notes are editable and

00:00:50.710 --> 00:00:54.060
deletable,
so that's the prompt I'm using for that,

00:00:55.500 --> 00:00:58.880
asking the AI to add edit
and delete buttons with the

00:00:58.940 --> 00:01:02.600
appropriate functionality to link to the
edit page, where I

00:01:02.660 --> 00:01:06.640
can edit a note or to show a confirmation
dialog using

00:01:06.720 --> 00:01:10.510
the native dialog element,
a little bit of extra context I'm giving

00:01:10.560 --> 00:01:14.020
code here to ensure
that I'm getting the solution I have in

00:01:14.120 --> 00:01:18.100
course,
a note should be removed from the database

00:01:18.140 --> 00:01:20.140
navigated back to the dashboard route.

00:01:20.160 --> 00:01:24.140
And again,
I'll start this in plan mode to make sure

00:01:24.180 --> 00:01:28.100
be any clarification questions the AI
wants

00:01:28.140 --> 00:01:31.880
to ask, it can do so and it can,
in general, create a proper plan,

00:01:33.020 --> 00:01:36.800
and after more work, it did then add

00:01:36.860 --> 00:01:40.500
those buttons. But here, we have an issue.

00:01:40.520 --> 00:01:44.240
It decided to output the raw JSON,
which is the format in which

00:01:44.300 --> 00:01:48.060
the entered content is stored in
that editor, and that's, of

00:01:48.100 --> 00:01:52.080
course, not right. So, of course,
we can describe this problem

00:01:52.090 --> 00:01:55.320
to the AI, and I'll do that,
but we can also pass

00:01:55.500 --> 00:01:58.970
screenshots into our prompts.
So I took a screenshot here

00:01:59.540 --> 00:02:03.440
and I pasted that screenshot into my
prompt, and you can

00:02:03.480 --> 00:02:07.320
see that it's attached here,
and this screenshot will be passed

00:02:07.380 --> 00:02:11.280
along to Claude Code because Claude Code
does have image vision and can

00:02:11.320 --> 00:02:15.240
take a look at images. Now,
I'm also providing a prompt to it

00:02:15.280 --> 00:02:19.180
here to describe the problem,
but I also pointed at the screenshot

00:02:19.220 --> 00:02:22.800
there so that it really sees what the
problem is, and for some problems,

00:02:22.840 --> 00:02:26.580
especially, of course, UI problems,
this can make a lot of

00:02:26.640 --> 00:02:30.450
sense. If you got an error message
or anything like that, just copy and

00:02:30.520 --> 00:02:34.420
pasting the raw text into the prompt
is better typically, but

00:02:34.460 --> 00:02:38.160
when you've got UI problems,
something that's displayed in a wrong way

00:02:38.200 --> 00:02:42.080
or anything like that,
a screenshot in addition to a prompt can

00:02:42.140 --> 00:02:45.820
achieve better results. And with that,
it implemented a

00:02:45.860 --> 00:02:49.430
fix,
and indeed now I can see I got editable

00:02:49.460 --> 00:02:53.190
I can save that, edit it again,
and the formatting is

00:02:53.220 --> 00:02:56.810
preserved, and if I try deleting that,
I get a dialog which is

00:02:56.840 --> 00:03:00.710
positioned incorrectly
and also styled incorrectly, so that's

00:03:00.740 --> 00:03:03.900
another case for a screenshot,

00:03:04.760 --> 00:03:07.740
and I'm taking a screenshot of the entire
page here to make it clear that the

00:03:07.760 --> 00:03:11.600
positioning really
is off besides the styling.

00:03:11.720 --> 00:03:15.580
So I'm sharing this screenshot with Claude
Code now along

00:03:15.640 --> 00:03:18.060
with some extra instructions
and descriptions,

00:03:19.620 --> 00:03:23.240
and with that, it went to work again,
and now this looks a lot

00:03:23.260 --> 00:03:27.130
better. If I confirm this, indeed it
is deleted and I'm navigated back

00:03:27.220 --> 00:03:29.549
here where I can delete all my notes.

00:03:29.580 --> 00:03:31.820
So that all seems to work