In this app, at this point, I can add notes, but I don't
see any notes I added on this dashboard, and therefore, I can't also
really view them or edit them or delete them.
So naturally, that would be the next things I want to
and I'll start with the first step.
I want Claude to add a functionality to show the notes
that belong to a user on the dashboard route to make them
clickable and link to the viewing page, and on that viewing page,
able to view the note so it should be rendered there.
As always, I'll start in plan mode, and
after giving me a plan, which I accepted, it went to
work, and now I can view my notes here. I can click them.
They are then also rendered here, so that's looking
good. Next, I want to make sure that notes are editable and
deletable, so that's the prompt I'm using for that,
asking the AI to add edit and delete buttons with the
appropriate functionality to link to the edit page, where I
can edit a note or to show a confirmation dialog using
the native dialog element, a little bit of extra context I'm giving
code here to ensure that I'm getting the solution I have in
course, a note should be removed from the database
navigated back to the dashboard route.
And again, I'll start this in plan mode to make sure
be any clarification questions the AI wants
to ask, it can do so and it can, in general, create a proper plan,
and after more work, it did then add
those buttons. But here, we have an issue.
It decided to output the raw JSON, which is the format in which
the entered content is stored in that editor, and that's, of
course, not right. So, of course, we can describe this problem
to the AI, and I'll do that, but we can also pass
screenshots into our prompts. So I took a screenshot here
and I pasted that screenshot into my prompt, and you can
see that it's attached here, and this screenshot will be passed
along to Claude Code because Claude Code does have image vision and can
take a look at images. Now, I'm also providing a prompt to it
here to describe the problem, but I also pointed at the screenshot
there so that it really sees what the problem is, and for some problems,
especially, of course, UI problems, this can make a lot of
sense. If you got an error message or anything like that, just copy and
pasting the raw text into the prompt is better typically, but
when you've got UI problems, something that's displayed in a wrong way
or anything like that, a screenshot in addition to a prompt can
achieve better results. And with that, it implemented a
fix, and indeed now I can see I got editable
I can save that, edit it again, and the formatting is
preserved, and if I try deleting that, I get a dialog which is
positioned incorrectly and also styled incorrectly, so that's
another case for a screenshot,
and I'm taking a screenshot of the entire page here to make it clear that the
positioning really is off besides the styling.
So I'm sharing this screenshot with Claude Code now along
with some extra instructions and descriptions,
and with that, it went to work again, and now this looks a lot
better. If I confirm this, indeed it is deleted and I'm navigated back
here where I can delete all my notes.
So that all seems to work