Part 1: Wellness Tracker w/ Claude Code

Build a browser wellness tracker while mastering Claude Code workflows.

Introduction

30 Second Summary

Tracking your daily habits is easy on day one. Staying consistent for weeks is the hard part, especially when you cannot see whether your efforts are paying off.

In this project, you will build a Daily Wellness Tracker web app using Claude Code. Along the way, you will master the four most powerful Claude Code workflows: project memory, plan mode, verification loops, and custom skills.

What You'll Build

You open your browser, log today's mood with a tap on an emoji, punch in your water, exercise, and sleep numbers, and flip to a dashboard to see your week's trends as colorful bar charts.

By the end of this project, you'll have:

  • A logging form with emoji mood buttons, water/exercise/sleep inputs, and instant save confirmation that persists data in your browser's localStorage.
  • A weekly dashboard displaying your averages and trend bar charts for mood, water, exercise, and sleep.
  • A reusable CLAUDE.md project memory file and a custom /check-app skill that you can copy into any future Claude Code project to work effectively from the first message.
  • Secret Mission: A streak counter that shows how many consecutive days you have logged entries.

Are there any prerequisites?

You need Claude Code installed with an active Claude Max subscription, Node.js on your machine, and basic comfort running commands in your terminal. Step 1 covers all remaining setup.

Before We Start

Before we dive in, let's lock in what you're about to build and why it matters. Naming the goal upfront gives both you and Claude Code clear direction from the start.

Set Up Your Project and Write a CLAUDE.md

Claude Code is powerful, but it starts every session with zero memory of your project. It does not know your tech stack, your naming conventions, or which mistakes to avoid.

A CLAUDE.md file at your project root solves this. Claude Code reads it at the start of every session, giving it persistent context about your rules and preferences. In this step, you will create the project folder, initialize Git, and write the CLAUDE.md that will guide Claude through the entire build.

In this step, get ready to:
  • Create a project directory and initialize Git.
  • Write a CLAUDE.md file with your project rules.
  • Verify Claude Code reads your conventions.
Create the project directory and initialize Git

Every project needs a home folder. You will create one on your Desktop so it is easy to find.

  • Open your terminal by pressing Cmd+Space to open Spotlight Search.
  • Type Terminal and press Enter to open it.
  • Move to your Desktop by running this command:
cd ~/Desktop
  • Create your project folder, move into it, and initialize Git by running these commands:
mkdir wellness-tracker
cd wellness-tracker
git init
  • Confirm the folder is set up by running:
ls -a

You should see a .git folder in the output. This means Git is tracking your project.

Don't see .git in the output?

Make sure you ran git init inside the wellness-tracker folder, not your Desktop. Run pwd to check your current location.

help me set up my project folder with Git

Open the project in Cursor

Now that the folder exists, open it in Cursor so you can create files inside it.

  • Press Cmd+Space to open Spotlight Search.
  • Type Cursor and press Enter to open it.
  • In Cursor, click File in the top menu bar.
  • Click Open Folder.
  • Navigate to your Desktop, select the wellness-tracker folder, and click Open.

You should see wellness-tracker in the Cursor sidebar with an empty file tree.

Write your CLAUDE.md file

This file is your project's instruction manual for Claude Code. It tells Claude what tech stack to use, how to name things, and which mistakes to avoid.

  • In Cursor's sidebar, hover over the wellness-tracker folder name and click the new file icon.
  • Name the file CLAUDE.md and press Enter.
  • Paste the following content into CLAUDE.md:
# Wellness Tracker Project

## Project Overview
A daily wellness tracking web app using vanilla HTML, CSS, and JavaScript with localStorage for data persistence.

## Tech Stack
- HTML5, CSS3, vanilla JavaScript (no frameworks)
- localStorage for data persistence
- No build tools required - open index.html directly in browser

## Code Conventions
- Use semantic HTML elements
- CSS follows BEM-like naming with kebab-case class names
- JavaScript uses camelCase for variables and functions
- All event listeners attached in dedicated init functions
- Data stored as JSON array in localStorage under key 'wellness-tracker-entries'

What does this section cover?

  • Project Overview gives Claude a one-sentence summary so it understands the app's purpose.
  • Tech Stack prevents Claude from suggesting React, Vue, or other frameworks. It keeps everything vanilla.
  • Code Conventions ensures consistent naming. Claude will use camelCase for JavaScript and kebab-case for CSS classes in everything it generates.
  • Now paste the remaining sections below the Code Conventions section in the same file:
## File Structure
- index.html - Main app shell and markup
- style.css - All styles
- app.js - All application logic

## Testing
- Open index.html in browser to test
- Check browser console for errors (Cmd+Option+J in Chrome)
- Verify localStorage data in DevTools > Application > Local Storage

## Common Mistakes to Avoid
- Don't add external CDN dependencies without asking first
- Don't create a backend/server - this is a client-side only app
- Don't modify the localStorage key name - other parts of the app depend on it

What do these sections do?

  • File Structure tells Claude exactly which files to create. It will not invent extra files.
  • Testing gives Claude a way to tell you how to verify its output.
  • Common Mistakes acts as a guardrail. Claude will not add CDN dependencies or spin up a backend server.
  • Save the file with Cmd+S.

You should see CLAUDE.md listed in your Cursor sidebar.

✔️ Awesome, I've got everything!

Great. Make sure you have saved CLAUDE.md before moving on.

ⓧ I'd like to double check the full code

Your CLAUDE.md should contain both chunks from above in order. Scroll up and confirm:

  • The first section starts with # Wellness Tracker Project and ends with the Code Conventions list.
  • The second section starts with ## File Structure and ends with the Common Mistakes to Avoid list.
  • There is a blank line between each ## heading section.

Don't see CLAUDE.md in the sidebar?

Check that you created the file at the top level of the wellness-tracker folder, not inside a subfolder. The file name must be all uppercase: CLAUDE.md, not claude.md.

help me create the CLAUDE.md file in the right location

Start Claude Code and verify it reads your conventions

Time to test whether Claude Code actually picks up your CLAUDE.md rules. You will start a session and ask Claude about your conventions.

  • In Cursor, open the integrated terminal by pressing Ctrl+` (backtick key, top-left of your keyboard).
  • Confirm you are inside the wellness-tracker folder by running:
pwd

You should see a path ending in /Desktop/wellness-tracker.

  • Start a Claude Code session by running:
claude

What happens when Claude Code starts?

Claude Code automatically scans the current directory for a CLAUDE.md file. If it finds one, it reads the contents and uses them as context for the entire session. Every message you send in this session benefits from those rules.

Before you ask Claude anything, predict: what do you think Claude will say if you ask about your project conventions?

  • Type the following message into your Claude Code session and press Enter:
What are my project conventions?

Claude responds with details from your CLAUDE.md. You should see it mention camelCase for JavaScript, BEM-like CSS naming, the localStorage key wellness-tracker-entries, and the three-file structure.

Why does this matter?

Without CLAUDE.md, you would need to re-explain your conventions in every single session. Now Claude remembers your rules automatically. The better your CLAUDE.md, the less time you spend correcting Claude's output.

Claude did not mention your conventions?

Make sure you started claude from inside the wellness-tracker folder (not your Desktop or home directory). Run pwd in a separate terminal tab to confirm your location.

Also confirm your file is named exactly CLAUDE.md (all caps) at the root of the project folder.

help me troubleshoot why Claude Code is not reading my CLAUDE.md

Your project foundation is in place. Next up, you will use Claude Code's plan mode to design and build a wellness logging form without writing a single line of code yourself.

Plan and Build the Logging Form

Your project directory is set up and Claude Code already knows your conventions from the CLAUDE.md. Now it's time to build the first piece of your app: the daily logging form.

Jumping straight to code without a plan often produces the wrong solution. Claude Code has a plan mode that lets you design the approach first, then execute with confidence. You'll use it to describe what you want before any code gets written.

In this step, get ready to:
  • Enter plan mode and describe the wellness logging form.
  • Let Claude build all three project files.
  • Open the app in your browser and log a test entry.
Enter plan mode and describe your form

Plan mode separates thinking from doing. Instead of Claude immediately writing code, it researches your project and proposes a step-by-step plan you can review before anything changes.

  • In your Claude Code session, press Shift+Tab to cycle into plan mode.
  • You'll see the mode indicator change in your terminal status bar to confirm you're in plan mode.

What is plan mode?

Pressing Shift+Tab cycles through Claude Code's permission modes. In plan mode, Claude reads your codebase and proposes a plan without making any file changes.

You review the plan, suggest changes, and only approve implementation once you're satisfied with the approach.

  • Type the following prompt to describe what you want Claude to build:
Build a daily wellness logging form. I need:
- A mood selector with 5 emoji buttons (from worst to best: 😫 😟 😐 🙂 😄)
- Number inputs for water (glasses), exercise (minutes), and sleep (hours)
- A Save button that stores entries to localStorage
- A confirmation message that appears briefly after saving
- Navigation tabs for "Log Entry" and "Dashboard" (dashboard can be empty for now)
- Clean, modern styling with a card-based layout
  • Press Enter to send the prompt.

Claude will analyze your CLAUDE.md conventions and produce a detailed plan for the three files it intends to create.

Why plan before building?

Without plan mode, Claude might create a React app, add a backend server, or pull in CDN dependencies. Your CLAUDE.md already forbids these, but plan mode lets you catch misunderstandings before code gets written.

Reviewing the plan first means fewer undo moments and less wasted context.

Review the plan and let Claude build

Claude's plan should outline the structure of index.html, style.css, and app.js. Take a moment to read through it.

  • Read through Claude's proposed plan. Confirm it mentions:
  • If anything looks off (wrong tech stack, missing features), type a correction and let Claude revise the plan.
  • Once the plan looks good, press Shift+Tab to cycle back to your default permission mode.
  • Type a follow-up message to approve and begin implementation:
Looks good, go ahead and build it.
  • Claude will now create all three files in your project folder. Watch as it writes each file.
  • Confirm the files were created by running this command in a separate terminal:
ls

You should see CLAUDE.md, index.html, style.css, and app.js listed.

Only seeing CLAUDE.md?

Make sure you exited plan mode before telling Claude to build. In plan mode, Claude proposes but doesn't write files. Press Shift+Tab until you're back in your default mode, then resend your approval message.

help me exit plan mode and get Claude to generate the files

Open in your browser and log a test entry

Claude has written the code, but you haven't seen it run yet. Time to open the app and make sure the form actually works.

  • Open index.html in your browser. You can do this by double-clicking the file in Finder, or by running:
open index.html

Before you interact with the form, what do you expect to see? Think about what you asked Claude to build.

You should see a clean card with the title "How are you today?", five emoji buttons, number inputs for water, exercise, and sleep, and a blue Save Entry button at the bottom.

  • Click one of the emoji mood buttons. It should highlight with a blue border and grow slightly.
  • Enter 8 in the Water field.
  • Enter 30 in the Exercise field.
  • Enter 7 in the Sleep field.
  • Click Save Entry.

A green "Entry saved!" confirmation should appear briefly, then disappear after about two seconds.

  • Verify the data actually persisted by opening DevTools. Press Cmd+Option+J in Chrome to open the console.
  • Click the Application tab at the top of DevTools.
  • Expand Local Storage in the left sidebar and click your page's URL.
  • Look for the key wellness-tracker-entries. Its value should be a JSON array containing the entry you just saved.

What is localStorage?

localStorage is a browser API that stores key-value pairs persistently. Data survives page refreshes and browser restarts. Your app uses it instead of a database so there's nothing to set up or host.

Form not showing or Save not working?

Check the browser console for red error messages. Common issues include a missing <script src="app.js"> tag in index.html, or the style.css link not matching the actual filename.

If the form renders but nothing happens on save, make sure app.js has a submit event listener on the form element.

help me debug why my wellness tracker form isn't working in the browser

✔️ Awesome, I've got everything!

Great. Make sure you've saved your test entry and can see it in localStorage under the Application tab in DevTools.

ⓧ I'd like to double check the full code

Since Claude Code generated your files, here are the key elements to verify in each one:

  • index.html should have a <form id="wellness-form"> containing five .mood-btn buttons with data-mood values 1 through 5, number inputs with IDs water, exercise, and sleep, a hidden input mood-value, and a <div id="confirmation"> for the save message.
  • style.css should style .mood-btn.selected with a highlight, .submit-btn as a full-width blue button, and .confirmation.hidden with display: none.
  • app.js should define a STORAGE_KEY constant set to 'wellness-tracker-entries', functions getEntries(), saveEntry(), initMoodSelector(), and initForm(), all wired up in a DOMContentLoaded listener.

If any of these elements are missing, tell Claude Code what's wrong and ask it to fix the specific issue.

Your logging form is live and saving data. Next up, you'll build a dashboard view that visualizes your wellness trends as weekly charts.

Build the Weekly Dashboard

Your logging form is saving entries to localStorage. Now you need a way to see your wellness trends over time, not just individual entries.

In this step, you will ask Claude Code to build a weekly dashboard with averages and bar charts. But this is where you will hit a real limitation of AI coding: Claude has no way to see your browser, so it cannot verify the dashboard actually renders correctly.

In this step, get ready to:
  • Ask Claude Code to add a dashboard with weekly averages and bar charts.
  • Open the app and navigate to the Dashboard tab.
  • Discover why AI coding needs a verification loop.
Ask Claude Code to add the dashboard view

Your app already has the Dashboard button in the navigation and an empty #dashboard-view section in the HTML. What is missing is the JavaScript logic to calculate weekly averages and render bar charts.

  • Switch back to your Claude Code session in the terminal.
  • Type this prompt to Claude Code:
Add the dashboard functionality to app.js. I need a getWeekEntries() function that filters entries from the last 7 days, and a renderDashboard() function that shows weekly averages for mood, water, exercise, and sleep in summary cards, plus bar charts for each metric showing daily values. Handle the empty state when there are no entries.
  • Press Enter to send the prompt.

Watch Claude Code work. It will add two new functions to app.js and may ask for permission to edit the file.

What is Claude building?

Claude adds two functions that work together:

  • getWeekEntries() filters your saved entries to only the last 7 days.
  • renderDashboard() calculates averages, builds summary cards, and draws horizontal bar charts for each metric using colored CSS bars.
  • If Claude asks for permission to write to app.js, allow it.
  • Wait for Claude to finish and confirm it has added the dashboard code.

Let Claude finish before checking

Claude may write both functions in one pass or ask clarifying questions. Let it complete its work before you open the browser to test.

✔️ Awesome, Claude added the functions!

Open app.js in Cursor and confirm you can see both getWeekEntries() and renderDashboard() defined as functions.

ⓧ Claude didn't add what I expected

If Claude produced something different, send a follow-up prompt:

The renderDashboard() function should calculate averages for mood, water, exercise, and sleep from the last 7 days, display them in summary cards, and render horizontal bar charts for each metric. Make sure getWeekEntries() filters entries from the last 7 days only.

Claude will revise its implementation based on the more specific instructions.

Open the app and navigate to the Dashboard tab

The code is written. Time to see if it actually works in the browser.

  • Switch to your browser where index.html is open from the previous step.
  • Refresh the page to load the updated app.js.

Before you click the Dashboard button, think about this: you saved one test entry in the last step. What do you expect the weekly dashboard to show with only a single day of data?

  • Click the Dashboard button in the navigation bar.

You should see the Dashboard tab become active. The view either shows an empty state message or a single lonely bar for today's entry.

Seeing a blank page or JavaScript error?

  • Open the browser console with Cmd+Option+J (Chrome) or Cmd+Option+C (Safari). Check for red error messages.
  • If you see a ReferenceError mentioning renderDashboard or getWeekEntries, Claude may not have saved the file. Ask Claude to check that both functions are in app.js.
  • Make sure you refreshed the browser after Claude finished editing the file.

Why is my Dashboard tab not rendering anything?

Spot the verification gap

Look at what the dashboard is actually showing you. With only one test entry in localStorage, you are in one of these situations:

  • The dashboard shows "No entries yet this week" because your test entry might not fall within the 7-day window.
  • The dashboard shows one data point with a single tiny bar. The averages are just today's values repeated.

Either way, you cannot tell if the chart rendering logic actually works correctly. Would seven bars stack properly? Do the colors show up? Are the percentage widths calculated right?

Why is this a problem?

Claude Code wrote the dashboard logic, but it has no way to open your browser and see the result. It treats the task as "done" the moment the code compiles without syntax errors.

Without a way to verify its own output, Claude becomes a one-shot generator. You become the verification loop, manually checking every visual detail. That does not scale.

You have a dashboard that might work perfectly with a full week of data, or might have subtle bugs hiding behind that empty state. In the next step, you will give Claude a way to verify its own output so you never have to be the one squinting at charts to spot rendering issues.

Master the Verification Loop

In Step 3, you hit a real limitation of AI-assisted coding. Claude built the dashboard code, but when you opened it in the browser, you could not confirm the charts actually render correctly. You only had one test entry, and Claude has no way to see your browser.

This is the core problem the verification loop pattern solves. Without a check Claude can run, "looks done in the code" is its only signal for stopping. You become the verification loop, manually checking every change. In this step, you will give Claude a runnable check so it can verify its own output autonomously.

In this step, get ready to:
  • Populate localStorage with test data using a verification prompt.
  • Confirm the dashboard renders charts correctly with real data.
  • Remove the test data and keep the working dashboard code.
Give Claude a verification prompt

Right now, Claude has no feedback mechanism. It wrote dashboard code, said "done," and moved on. But you saw in Step 3 that the dashboard was empty or showed minimal data. Claude cannot open your browser to check.

What is a verification loop?

A verification loop gives Claude a check it can actually run. This could be tests, a build command, or a script that validates output. Without a check, "looks done" is Claude's only signal and you become the manual verification step for every single change.

The fix is to give Claude something concrete to verify against. In this case, you will ask Claude to populate test data AND check for console errors. Claude can run the error check itself, closing the loop.

  • Switch back to your Claude Code session in the terminal.
  • Type the following verification prompt into Claude Code:
Add a temporary function called loadTestData() at the bottom of app.js that populates localStorage with 7 days of sample wellness entries (one per day for the past week, with varied realistic values for mood 1-5, water 4-10, exercise 0-60, sleep 5-9). Call it immediately so the data loads on page refresh. Then check app.js for any syntax errors or undefined references.

What does this prompt do?

This prompt gives Claude two tasks: create test data that exercises the dashboard, and check for errors. The test data gives YOU something to visually verify. The error check gives CLAUDE something it can verify on its own.

This is the verification loop in action. You are no longer the only one checking if things work.

Claude will create the test data function, add it to app.js, and report back on any errors it finds.

Claude asking for permission to edit files?

Claude Code may ask for permission before modifying app.js. Accept the edit to let it proceed. If Claude seems stuck, try rephrasing: "Go ahead and add the test data function to app.js."

Help me get Claude Code to edit my app.js file.

Confirm the dashboard renders with real data

Claude added the test data. Now you do the part Claude cannot do: visually verify the dashboard.

  • Open index.html in your browser (or refresh if it is already open).
  • Click the Dashboard button in the navigation.

Before you look at the dashboard, predict: what do you expect to see now that 7 days of test data are in localStorage?

You should see four summary cards showing averages (Avg Mood, Avg Water, Avg Exercise, Avg Sleep) and four chart sections below them. Each chart section has colored horizontal bars for each day of the week. Mood bars are purple, water bars are blue, exercise bars are green, and sleep bars are orange.

Why this matters

This is the moment that proves your dashboard code works. In Step 3, you could not tell whether renderChart() was correct because there was no data to render. Test data made the invisible visible.

  • Open the browser console by pressing Cmd+Option+J (macOS) or Ctrl+Shift+J (Windows) to check for any JavaScript errors.

You should see no red error messages in the console. If the console is clean, the app is working correctly.

  • Now switch back to Claude Code and ask it to run its own check:
Check app.js for any issues: look for undefined variables, missing event listeners, CSS class names in the JavaScript that don't match style.css, and confirm the empty state is handled when there are no entries.

What is Claude checking?

You verified the visual output (something Claude cannot do). Now Claude verifies code-level correctness (something it is fast at). This combination of human visual check plus Claude code check is the full verification loop.

Claude should report that all checks pass with no issues found.

Remove the test data and confirm a clean state

The test data served its purpose. Your dashboard is confirmed working. Now you need to remove the temporary code so your app only contains production logic.

  • In Claude Code, ask it to clean up by typing:
Remove the loadTestData() function and its call from app.js. Also clear the test data from localStorage by adding a one-time console.log that confirms removal. Keep all the dashboard and form code intact.
  • After Claude finishes, refresh index.html in your browser.
  • Click the Dashboard button.

You should see the empty state message: "No entries yet this week. Start logging to see your trends!" This confirms the test data was successfully removed and the empty-state handling still works.

  • Open app.js in Cursor and confirm there is no loadTestData function remaining.

Still seeing chart data after removing test data?

The test data may still be in localStorage. Open your browser console and run localStorage.removeItem('wellness-tracker-entries') then refresh the page.

Help me clear leftover test data from localStorage.

✔️ Awesome, I've got everything!

Great. Double check that you have saved app.js and it contains only the production code (no test data functions).

ⓧ I'd like to double check the full code

Your app.js should contain these sections in order. Scroll through your file and confirm each one is present:

  • The STORAGE_KEY constant at the top.
  • The getEntries(), saveEntry(), and getWeekEntries() data functions.
  • The initNavigation(), initMoodSelector(), and initForm() setup functions.
  • The renderDashboard() function with the nested renderChart() helper.
  • The DOMContentLoaded event listener at the bottom calling all three init functions.
  • No loadTestData function anywhere in the file.

You have now mastered the verification loop. You know how to give Claude a concrete check (test data plus error scanning) so it can verify its own output instead of relying on you to manually confirm every change. Next up, you will package this verification workflow into a reusable custom skill.

Create a Custom /check-app Skill

In the last step, you gave Claude a verification prompt and it caught issues it could never have spotted without a way to check its own output. That verification loop closed the gap between "code looks right" and "app actually works."

The problem is that you typed that verification prompt manually. Every time you change something and want to re-check the app, you would need to type or paste the same instructions again. A custom skill packages that workflow into a single reusable command you can invoke with /check-app in any future session.

In this step, get ready to:
  • Create a custom skill file that defines a verification checklist.
  • Confirm the skill is discovered in a fresh Claude Code session.
  • Invoke /check-app and verify it runs the full checklist.
Ask Claude Code to create the skill

Claude Code supports custom skills that live in your project. A skill is a markdown file at .claude/skills/<name>/SKILL.md that Claude reads and adds to its toolkit.

Once a skill exists, you invoke it by typing /skill-name directly in your Claude Code session.

  • In your Claude Code session, ask Claude to create the skill by typing this prompt:
Create a custom skill at .claude/skills/check-app/SKILL.md that checks the wellness tracker app for common issues. It should verify: all three files exist (index.html, style.css, app.js), HTML references are correct, the localStorage key 'wellness-tracker-entries' is used consistently in app.js, no obvious JavaScript errors, form submission prevents default and saves data, dashboard handles empty state, and CSS class names in JS match those in style.css. Add a YAML frontmatter with a description field.

What does this prompt do?

You are telling Claude Code exactly what checks the skill should perform. Claude will create the .claude/skills/check-app/ directory structure and write the SKILL.md file for you.

The YAML frontmatter description field tells Claude when this skill is relevant, so it can suggest it automatically in future sessions.

  • After Claude finishes, verify the file was created by asking Claude to run this command:
ls .claude/skills/check-app/

You should see SKILL.md listed in the output.

Don't see the file?

Claude may have placed the file in a different location. Ask Claude: "Where did you create the skill file? Move it to .claude/skills/check-app/SKILL.md if it isn't there already."

If the .claude directory does not exist at all, ask Claude to create the full directory path first, then the file.

Help me debug why my skill file wasn't created

Now confirm the file content matches what you expect.

✔️ Awesome, I've got everything!

Great. Make sure the file is saved before moving on.

ⓧ I'd like to double check the full code

Your .claude/skills/check-app/SKILL.md file should look like this:

---
description: Checks the wellness tracker app for common issues by verifying file structure, valid HTML, and JavaScript consistency.
---

# Check App

Verify the wellness tracker is working correctly:

1. Confirm all three files exist: index.html, style.css, app.js
2. Check that index.html references both style.css and app.js correctly
3. Verify the localStorage key 'wellness-tracker-entries' is used consistently in app.js
4. Look for any obvious JavaScript errors (undefined variables, missing event listeners)
5. Confirm the form submission handler prevents default and saves data
6. Check that the dashboard rendering handles the empty state (no entries)
7. Verify all CSS class names used in JavaScript match those defined in style.css

Report any issues found, or confirm the app looks correct.

If your file differs slightly in wording, that is fine as long as it covers the same seven checks. If it is missing entire checks, ask Claude to update the file to include all seven.

Start a fresh session to confirm skill discovery

Skills are loaded when a Claude Code session starts. Your current session was already running when the skill file was created, so Claude may not have picked it up yet.

  • Exit your current Claude Code session by typing:
/exit
  • Start a fresh Claude Code session by running:
claude
  • Once the new session starts, ask Claude: "What skills do you have available?"

Claude should mention the check-app skill in its response, confirming it discovered the file on startup.

Claude doesn't mention the skill?

Make sure the file is at exactly .claude/skills/check-app/SKILL.md relative to your project root (the folder where you run claude).

Also confirm the file has the YAML frontmatter block (the --- lines at the top with a description field). Without frontmatter, Claude may not recognize it as a skill.

Help me troubleshoot why Claude Code can't find my custom skill

Invoke /check-app and confirm the verification runs

The moment of truth. Your skill is a one-command replacement for the manual verification prompt you typed in the last step.

  • Before you run the skill, think about what you expect to happen. Will it report any issues, or will all checks pass?
  • Invoke the skill by typing:
/check-app

Claude runs through each of the seven checks from your SKILL.md file, reporting the status of each one. Since your app is already verified from the last step, all checks should pass.

Why is this better than a manual prompt?

You now have a persistent, reusable verification command. Every time you make a change to the wellness tracker, type /check-app and Claude runs the full checklist without you needing to remember what to verify.

You can copy this .claude/skills/ folder into any future project and adapt the checks. The skill travels with your project, not with a single session.

Seeing errors in the check output?

If Claude reports a failing check, read the specific issue it names. Common causes include a missing file reference in index.html or a typo in the localStorage key.

Ask Claude to fix the issue it found, then run /check-app again to confirm the fix.

Help me understand and fix the issues /check-app found

You now have a fully configured Claude Code project with a CLAUDE.md for project memory, a verified app, and a reusable /check-app skill for one-command verification. This setup transfers to every future project you build with Claude Code.

Secret mission

Add a Streak Counter

Your wellness tracker logs entries and shows weekly trends. But what keeps someone coming back every day? A streak counter. In this mission, you will use the full Claude Code workflow (plan mode, build, verify with /check-app) to add a streak feature to your dashboard independently.

Clean Up Your Resources

Clean Up Your Resources

Decide whether to keep your resources running, pause them to come back later, or delete them entirely. This project runs entirely locally with no cloud services, so there are no ongoing costs.

Resources you used:

  • Project folder on your Desktop (wellness-tracker directory with index.html, style.css, app.js, CLAUDE.md, and .claude/skills/).
  • localStorage data stored in your browser under the key wellness-tracker-entries.
  • Local Git repository inside the project folder.

Keep everything running

No action needed. Choose this if you plan to keep using the wellness tracker daily or want to continue building on it.

  • Your project folder stays on your Desktop, ready to open in Cursor anytime.
  • Your localStorage data persists in your browser between sessions.
  • Your CLAUDE.md and custom /check-app skill stay ready for your next Claude Code session.

Pause - I'll come back to this later

Since this is a local project with no running processes, there is nothing to pause. Your files stay on disk and your browser data stays in localStorage until you clear it.

  • Close the browser tab with your wellness tracker.
  • Close Cursor if you are done for now.
  • Everything will be exactly as you left it when you come back.

Delete - I don't want to use this again

Remove all project files and browser data to start fresh.

  • Delete the project folder by running this command in your terminal:
rm -rf ~/Desktop/wellness-tracker
  • Clear the localStorage data from your browser:
  • Open your browser and press Cmd+Option+J (macOS) or Ctrl+Shift+J (Windows) to open the console.
  • Run this command in the console:
localStorage.removeItem('wellness-tracker-entries')
  • Close the console and the browser tab.

Nice Work!

Nice Work!

You just built a fully functional Daily Wellness Tracker and learned four power-user Claude Code workflows along the way. You now have a reusable project configuration that transfers to every future project you build with Claude Code.

You learned how to:

  • Build a complete web app with Claude Code that stores mood, water, exercise, and sleep data in localStorage with no backend required.
  • Create a CLAUDE.md file that gives Claude persistent project memory across sessions, and use plan mode to design before building.
  • Master the verification loop pattern that lets Claude check its own output, and package it into a reusable /check-app custom skill for one-command verification.
  • Secret Mission: Added a streak counter using the full plan-build-verify workflow independently.

Ready to quiz yourself?