Now, as mentioned, here we'll build an example application.
And the example application we'll build will be a
note-taking app that allows users to create
notes using a rich text editor, to use text
formatting in there. Then they can, of course, view those notes
and they can also manage them, and for example, edit them, or
of course, also delete those notes.
In addition, I also will add a feature
share notes publicly so that users can view notes
that don't belong to them. But therefore, the question now, of course,
is how do we start working on this application with Claude
Code? Any problem or task you wanna tackle with
starts with a prompt. So here, when I wanna build a brand
new application from scratch, the question is, what is that prompt?
And the answer for me at least is that I wanna provide a
specification document that describes the application we're
working on. And by the way, this is also important if you're working on an
existing application. Then still you want
to provide this information, you wanna describe this
application to Claude. So that matters no matter if
you're working on a new application or an existing one.
Now, I typically build those specification
with help of AI. So for this demo here, I used
ChatGPT, and I described my application to
ChatGPT here. By the way, this is a one-time task, of course.
I don't do this before every prompt I send to Claude
Code. I just wanna make sure I have an initial
document for this application. So here I'm describing
that we're building a note-taking web
app. I describe the core features about
updating, deleting and sharing notes.
I describe the tech stack, so that I'm using
Next.js with Bun and TypeScript in my case, and for
styling, Tailwind CSS. For authentication, I'll use
a third-party library, the betterauth library.
The rich text editor will be implemented with help of yet another
library, the tictac library. We also need a database, and
here I'll use SQLite because that's an amazing database also for
production, but especially also for development
and edit it locally with ease. And then I ask
ChatGPT to, in the end, write me a technical specification
document, which I got
here. And you see, this is a rather
long document. Now, what I'll do is I'll
then copy that document here, head over to my project,
and in there, I like to add a Spec.md file,
to you. That's not a file Claude Code expects or
anything like that. That's just my choice.
This Spec.md file now could do with some
formatting. So now inside of my editor, I'll
save this file and I'll open Claude Code again, and as a first
step, I'll let it improve this Spec.md file.
Again, this is a one-off task when getting started, but it can help
further down the road when working on this project.
And I'll use Claude Code to first revise this Spec.md
file and format it properly. So for that, I'll give it a prompt
and say, "We're building an app described in
@spec.md." And that's the first
important thing here. This is the official
way of pointing Claude Code at a specific file, of
including a specific file into the context.
I have not added my instructions to this prompt yet, but I'm already
starting with the context engineering.
If you know that a certain task involves a
certain file or that a certain file contains information that's
important for a certain task, you wanna typically
include it in your prompt like this, by pointing at it with that at
symbol. You don't wanna include all files
potentially be relevant because here we enter the territory
of including irrelevant context, which we don't want.
That will lead to worse results. But if we know that a certain file will be
relevant, we wanna include it, and that's what I'm doing
here. That is an important part of proper
engineering. Claude Code is absolutely capable
of finding useful files itself. You don't need to reference them all.
It's no problem if you forgot a file that's important, but if you know about a
file, explicitly pointing Claude Code at it
So here I'm pointing it at that, and then the first task here for me
related to that file because I'll say, "Please format this
file as proper Markdown." So that is my very specific
instruction. It's a super simple prompt, but it's my first prompt, though
I don't stop here because I already noticed that in my spec
file here, there are some problems.
For example, it describes a users table
in a certain shape, but as I mentioned, I'll use a
third-party library for authentication.
I'll use the betterauth library, and that library
expects a very specific database structure.
If I take a look at the schema they expect, I can see that they expect
a user table, so singular, not
plural, with these fields, and a couple of other tables
as well. So what I'll do is I'll copy that
documentation page as Markdown. Many websites offer these
nowadays. I could also just copy and paste all the content,
but that is the better way, gives me just the relevant content,
and I'll go back to my prompt here. And in there I'll say,
"Also update the file and update the part
about the users table and
auth-related tables." We're using the betterauth
library, which expects a certain database
And then I provide that article which I copied as
extra context because context engineering is not just about
inserting your instructions and pointing at files.
That's important, but it's also about providing any other
that's relevant. So in my case here, I know that that betterauth database
documentation will be relevant for updating this Spec.md file,
so I'll include it here. And what I personally like to do is if
I insert a longer piece of text, a longer error
message or an article from the documentation, I like to use these XML
tags. That's not required, but it can help the
LLM better identify where your
documentation article, in this case, starts and ends.
It's not a must-do, but in my experience it can help with
getting good results. So I'll paste this article in there,
me, that's all. That's my complete prompt with the
instructions, two instructions in this case about
and about updating parts of that file, and then providing the relevant
context. Now we can send this off. And I can do
this by hitting enter, or since I know that I wanna
accept any edit requests anyways, I'll hit shift
tab to switch to this accept edits on
mode, and then I'll hit enter here.
And now I'll let Claude Code do its thing, read that
Spec.md file, and then convert that file to proper
Markdown. So now here it's done, and if I take a look at
Spec.md, I can see that now in there we have proper
Markdown formatting. Now would be a good time to finally read
that document one more time and make any changes with or
without AI that need changes, and then continue with the next
steps.