Agent Skills in Claude Code and Visual Studio Code: Setup, Benefits, Risks, and a Step-by-Step Example
You may think “build a reading list app” is specific enough. The AI still has to guess whether the app needs accounts, cloud storage, book covers, ratings, editing, filters, mobile support, or an external API.
Every guess can expand the project.
A short project brief prevents many of those assumptions. It explains who the application is for, what problem it solves, which features belong in the first version, which features are intentionally excluded, and how you will decide whether the result works.
The brief does not need to look like a corporate specification. It only needs to be clear enough that you and the AI coding assistant are working toward the same product.
By the end of this guide, you should be able to:
AI coding tools are good at filling gaps.
That strength can also become a problem.
When requirements are missing, the tool may choose:
The generated result may still look polished.
That does not mean it matches your intention.
A project brief reduces ambiguity before the first implementation prompt.
It gives you a reference for questions such as:
Without a brief, every new idea can feel like part of the current task.
With a brief, new ideas can be recorded for later instead of expanding the first version.
A common beginner mistake is starting with a tool choice.
For example:
Build a React application with a database and an API.
That sentence describes technology, not the user’s problem.
A stronger starting point is:
A reader wants a simple way to save books and track whether they plan to read, are currently reading, or have finished them.
This statement gives the project a purpose.
Technology can be selected after the problem is clear.
For this series, the application can begin with plain HTML, CSS, and JavaScript because the first version does not require a server or database.
The technology choice follows the project needs.
It does not define them.
A project brief should identify who will use the application.
Avoid descriptions that are too broad.
Weak target user:
Everyone who reads booksBetter target user:
An individual reader who wants a simple personal list of books and reading statuses.The second version is useful because it limits the product.
It suggests that the first release does not need:
A focused target user helps prevent unnecessary features.
For the Personal Reading List Tracker:
Target user:
An individual reader who wants to keep a small personal list of books in a web browser without creating an account.This one sentence influences several technical decisions.
Because the user is individual and local:
The product statement should explain what the application does and why it exists.
Use this structure:
A [type of application] that helps [target user] [complete a useful task].For the reading list project:
A browser-based application that helps an individual reader save books and track their reading status.This sentence is short enough to remember.
It also gives the AI assistant a stable product direction.
When the tool suggests a social feature or account system, you can compare the suggestion with the statement and reject unnecessary scope.
The user workflow describes the sequence of actions that delivers the project’s central value.
For this application:
Enter a book title
→ Optionally enter an author
→ Choose a reading status
→ Add the book
→ View it in the listSecondary actions include:
Filter the list by status
Remove a book
Refresh the page and keep saved booksA workflow should describe user behavior, not implementation details.
Weak workflow:
Call a JavaScript function, update an array, and write JSON to localStorage.That may describe part of the code, but it does not explain what the user is trying to accomplish.
The user workflow should remain understandable even if the implementation changes later.
A project brief should distinguish between:
This prevents an AI session from treating every idea as immediate work.
For the first version:
1. Add a book title.
2. Add an optional author.
3. Choose a reading status.
4. Display saved books.
5. Filter books by status.
6. Remove a book.
7. Preserve books after a page refresh.
8. Show a useful empty state when no books are saved.Each feature supports the main workflow.
These ideas may be useful later:
- Edit an existing book.
- Sort books by title or date added.
- Search the local list.
- Import book details from an external API.
- Display book cover images.
- Export the list.They should not be implemented in the first version unless the project plan changes deliberately.
The first version will not include:
- User registration
- Login
- Cloud synchronization
- Social sharing
- Public book reviews
- Personalized recommendations
- Payments
- A custom backend
- A production databaseThe exclusion list gives you permission to say no.
That is useful when an AI assistant proposes a technically interesting feature that does not belong in the current release.
Technical constraints guide implementation without turning the brief into a detailed architecture document.
For this project:
- Use plain HTML, CSS, and JavaScript.
- Do not use a frontend framework in the first version.
- Do not add third-party dependencies unless approved.
- Store data in browser localStorage.
- Keep the application deployable as a static website.
- Use semantic HTML where practical.
- Support current desktop and mobile browsers.
- Keep files simple enough for a beginner to review.These constraints help the AI avoid unnecessary complexity.
For example, without the dependency rule, an assistant may add a library for generating IDs, formatting dates, or managing state.
Those packages may work, but they are not required for this project.
Avoid overly rigid instructions such as:
Every function must be exactly ten lines.That does not improve the product.
Use constraints that support:
A data model describes the information the application needs to store.
For each book:
id
title
author
status
createdAtA sample object may look like:
{
id: "book-001",
title: "Kindred",
author: "Octavia E. Butler",
status: "want-to-read",
createdAt: "2026-07-11T10:30:00.000Z"
}id
A unique value used to identify one book.
title
The required book title.
author
An optional author name.
status
One of a limited set of allowed values.
For example:
want-to-read
reading
finishedcreatedAt
The date and time when the book was added.
Without a defined model, the AI may use different field names in different files.
For example:
bookTitle
title
nameOr:
to-read
wantToRead
want-to-readInconsistent field names create bugs and confusion.
A small data model gives the project a shared vocabulary.
Acceptance criteria describe observable behavior that must be true for a feature to be considered complete.
They should be testable.
Weak criterion:
The form should work well.This is subjective.
Better criteria:
- A book with a non-empty title can be added.
- Leading and trailing spaces are removed from the title.
- A whitespace-only title is rejected.
- The author field may be empty.
- The selected status is displayed with the saved book.These statements can be tested directly.
- The user can enter a title.
- The user can optionally enter an author.
- The user can choose one of the supported statuses.
- A valid book appears in the list after submission.
- A blank or whitespace-only title is rejected.
- The form clears after a successful submission.
- Invalid input does not create a new book.- Every saved book displays its title.
- The author is shown when available.
- The selected status is visible.
- The empty state appears when no books exist.
- The empty state disappears after a book is added.- The user can view all books.
- The user can filter by Want to Read.
- The user can filter by Reading.
- The user can filter by Finished.
- Filtering does not delete or modify stored books.- Every book has a remove action.
- Removing one book does not remove other books.
- The removed book disappears immediately.
- The removal is preserved after a page refresh.- Saved books remain after the browser page is refreshed.
- Removed books do not return after refresh.
- The application handles missing saved data without an error.
- Invalid stored data does not permanently break the interface.The last criterion introduces a useful edge case without requiring a complex recovery system.
This project needs only one page.
A simple file structure could be:
reading-list-tracker/
├── index.html
├── styles.css
├── app.js
├── README.md
└── .gitignoreindex.htmlContains the page structure:
styles.cssContains:
app.jsContains:
README.mdExplains:
This structure is small enough to understand and large enough to demonstrate a real workflow.
Functional requirements describe what the application does.
Non-functional requirements describe qualities of the implementation.
For this project:
- The interface should remain usable on narrow mobile screens.
- Form fields should have visible labels.
- Keyboard users should be able to reach interactive controls.
- Text should have sufficient visual contrast.
- The application should not require an internet connection after loading.
- No secret or API key should be required for the first version.
- The code should be readable enough for a beginner to review.These requirements improve the project without adding large new systems.
They also remind the AI assistant that a working button is not the only measure of quality.
A project can continue forever unless the first release has a clear stopping point.
The definition of done should include more than “the code exists.”
For this project, version one is done when:
- All required features are implemented.
- Every acceptance criterion has been checked.
- No excluded feature was added.
- The application runs locally without a fatal error.
- Data persists through page refresh.
- The main workflow works on desktop and a narrow mobile viewport.
- Git shows no unexplained files or changes.
- No credentials or private data are committed.
- The README explains how to run and test the project.
- The verified version is committed to Git.
- The application is ready for static deployment.This list creates a real finish line.
It also gives the AI assistant a set of boundaries when asked to evaluate progress.
The project brief is not only for the beginning.
Use it during every development stage.
Before a prompt:
After the AI responds:
For example:
Requirement:
Reject blank book titles.
Allowed files:
- app.js
Acceptance criteria:
- Empty string is rejected.
- Whitespace-only input is rejected.
- Valid titles are trimmed and accepted.
Constraints:
- No dependency added.
- No unrelated function renamed.This is much easier to review than:
Make the form better.The following brief can be saved as PROJECT_BRIEF.md.
# Personal Reading List Tracker
## Product Statement
A browser-based application that helps an individual reader save books and track their reading status.
## Target User
An individual reader who wants a simple personal book list without creating an account.
## Main Problem
Readers often discover books they want to remember but do not need a large social or cloud-based platform to track them.
## Main Workflow
1. Enter a book title.
2. Optionally enter an author.
3. Select a reading status.
4. Add the book.
5. View it in the list.
6. Filter or remove books later.
## Required Features
- Add a book title.
- Add an optional author.
- Select Want to Read, Reading, or Finished.
- Display saved books.
- Filter books by status.
- Remove a book.
- Preserve the list with localStorage.
- Display an empty state.
## Excluded Features
- User accounts
- Login
- Cloud synchronization
- Social features
- Public reviews
- Payments
- Personalized recommendations
- Custom backend
- Production database
## Technical Constraints
- Plain HTML, CSS, and JavaScript
- No frontend framework
- No third-party dependency without approval
- Browser localStorage for persistence
- Static-site deployment
- Responsive layout
- Semantic HTML where practical
- Beginner-readable code
## Data Model
Each book contains:
- id
- title
- author
- status
- createdAt
Allowed status values:
- want-to-read
- reading
- finished
## Acceptance Criteria
### Add a Book
- Valid titles are accepted.
- Leading and trailing spaces are removed.
- Empty and whitespace-only titles are rejected.
- Author is optional.
- Selected status is saved.
- Form clears after successful submission.
### Display Books
- Every book displays a title.
- Author appears when available.
- Status is visible.
- Empty state appears when the list is empty.
### Filter Books
- All books can be displayed.
- Books can be filtered by each status.
- Filtering does not modify stored data.
### Remove Books
- One selected book can be removed.
- Other books remain unchanged.
- Removal persists after refresh.
### Persistence
- Added books remain after refresh.
- Removed books do not return.
- Missing storage data does not cause an error.
## Definition of Done
- Required features work.
- Acceptance criteria are verified.
- Excluded features are not present.
- No unexplained Git changes remain.
- No secrets are committed.
- README documents setup and testing.
- The verified project is committed.
- The app is ready for static deployment.This brief is detailed enough to guide implementation without prescribing every function or CSS rule.
A feature list does not explain the user, problem, constraints, or completion criteria.
Include the purpose and workflow.
A brief should protect the first version from expansion.
Move optional ideas into a separate section.
Avoid phrases such as:
Make it beautiful.
Make it modern.
Make it easy.Replace them with observable requirements where possible.
For example:
The layout remains usable at a 375-pixel-wide viewport.
All form fields have visible labels.Do not add a backend because it sounds professional.
Use only what the current version requires.
An exclusion list is one of the best defenses against AI-generated scope expansion.
The brief may change when you discover a real requirement.
Update it deliberately and commit the change.
Do not allow the implementation to drift silently away from the documented plan.
In real development work, a short clear brief often prevents more problems than a long technical document nobody reads.
The brief should be easy to review before a task.
When working with AI coding tools, I prefer requirements that make the expected change and review boundary obvious.
For example:
Implement the Add Book behavior described in PROJECT_BRIEF.md.
Modify only index.html and app.js.
Do not add dependencies.
Show the proposed plan before editing.This prompt works because the project brief already defines the product.
The prompt does not need to repeat the entire application description every time.
That is one of the most useful roles of a project brief: it becomes stable context for future AI sessions.
Before moving to implementation prompts, confirm that the brief answers:
For this series, the Personal Reading List Tracker now has enough structure to begin implementation planning.
A project brief turns a vague idea into a buildable and reviewable plan.
It defines the target user, problem, workflow, required features, exclusions, technical constraints, data model, acceptance criteria, and definition of done.
This structure is especially valuable in vibe coding because AI tools are designed to fill missing details. A clear brief reduces unwanted assumptions and gives you a stable standard for reviewing generated changes.
The Personal Reading List Tracker is now defined well enough to begin working with an AI coding assistant.
The next article will show how to turn this brief into focused prompts that ask for one clear outcome, provide relevant context, set boundaries, and specify how the result should be verified.
Comments
Post a Comment