Build a personal task tracker with Claude Code, using a written brief and prompts you can copy. You’ll get a browser app with deadlines, task statuses and filters, then learn how to change it and check your work. You don’t need to write the code yourself.
Watch the walkthrough on YouTube, then use the starter files and prompts below to build your own task tracker.
This exercise is for people who already use AI chat and want to try a coding agent: an AI that can read project files, edit code and run commands. The sample tasks are fictional. The counts below are expected results for you to check, and the starter pack contains the instructions and sample data.
If you just need a task list, use your existing task app. This exercise teaches you how to give a coding agent a clear brief and check what it makes.
Download the Claude Code starter pack (ZIP, 6.3 KB). Free, with no sign-up. All ten prompts are also on this page.
What you’ll make
You’ll ask Claude to make My Tasks: one index.html file that opens in a desktop browser. Start with task titles, optional deadlines, To do / Doing / Done statuses, filters and counts. Later steps add Waiting, a task backup and sorting. The app fits in one HTML file; the other files hold the brief and instructions.
This is for one person using one browser. Shared accounts, cloud sync, reminders and hosting are outside the lesson. Stick with the fictional tasks while learning. Before adding real work data, check your employer’s rules and the tool’s data settings.
Work through steps 1–3 to build and check the first version, then pause if you want to. Steps 4–7 cover changes, backups and picking up the project in a new session. Use prompts 08–10 only if something goes wrong.
Before you start
Use the current Claude desktop app and an eligible paid plan with Code access. Check Anthropic’s desktop setup guide for current access and installation instructions. The Code tab includes Claude Code; this route does not require a separate Node.js or command-line installation.
Download and extract the ZIP, then copy its task-tracker folder to a location you can find again. Work in the extracted folder. It starts with just project-brief.md and sample-tasks.md. Keep Prompt-Pack.md open separately, or copy the prompts from this page. The .md files are plain text with simple formatting.
In the Claude desktop app, choose Code, a Local environment and your task-tracker folder. Leave Worktree off if that control appears. Choose Plan for the first prompt, then Manual when you’re ready for edits. Older versions may call Manual ‘Ask permissions’. Review the requested actions before approving them.
Interface labels can change. Use the desktop reference if your screen differs. A worktree is a separate copy of a Git project; this exercise uses the folder itself.
Use a normal browser window. Private or incognito mode can lose saved tasks when you close it. Step 3 checks that your tasks survive closing and reopening the app. If they disappear, follow the storage troubleshooting section below.
1. Read the brief and agree the plan
Paste this prompt with the two starter files in your selected folder. The plan should name index.html and explain how to open it. Check it against the brief. If Claude proposes accounts, extra software packages or hosting, ask it to remove those before you approve.
Read project-brief.md and sample-tasks.md in this folder. I am learning Claude Code and want to build this small task tracker.
Before changing any project files, explain what you will make, which files you will create, how I will open it and how we will check it. Use plain English and keep the plan short. Flag any requirement you cannot meet with one HTML file. Wait for me to approve the plan.2. Build the first version
Once you’re happy with the plan, switch to Manual and send the build prompt. Check that the proposed files are in the task-tracker folder. Open the resulting index.html in your usual desktop browser, using README.md. Use the same browser profile and file location for all the checks below, even if Claude also shows a preview.
The app should start empty. Click Load sample tasks once. On the same local calendar day, the expected counts are 8 total, 6 active, 2 overdue and 2 done. Switching filters should change the visible list while the overall counts stay the same.
Build version 1 from the agreed plan and project-brief.md. Create the working index.html in this folder and a short README.md explaining how to open it.
Keep the starting scope: adding and editing tasks, deadlines, To do / Doing / Done, the four filters, counts, local saving and an explicit Load sample tasks button. Follow sample-tasks.md exactly. Leave Waiting and backups for later.
Check what you can with the tools available. Separate checks you actually ran from checks I still need to do in my browser. Tell me where index.html is. Do not claim that saving or the browser interface works unless you have tested it.3. Check the behaviour yourself
Run these checks yourself before adding features, even if Claude reports that its checks passed. Start with the unchanged sample list and work through them in order on the same day:
The sample dates must stay fixed after loading. Counts can change on later days as deadlines pass. If a check fails, record what happened and use the repair prompt below before continuing. Reloading the samples could erase the evidence.
- Check each filter: All should show 8 tasks, Active 6 and Done 2. Overdue should show only ‘Send the project update’ and ‘Review the budget figures’. The overall counts should stay the same as you switch filters.
- Check ‘Prepare tomorrow’s agenda’, which the sample file deliberately gives today’s date. It should be active and not overdue. ‘Tidy the reference notes’ has no deadline and should never be overdue.
- Mark ‘Send the project update’ Done. Expect 8 total, 5 active, 1 overdue and 3 done. Put it back to To do and check the original counts return.
- Add ‘Check the launch checklist’ with today’s date. Expect 9 total, 7 active, 2 overdue and 2 done. Change its title, refresh, then close and reopen the same file in the same browser profile. The change should survive. Restore the title to ‘Check the launch checklist’ before continuing.
- Change the new task’s deadline to yesterday: expect 3 overdue. Clear its deadline: expect 2 overdue. Put it back to today, refresh and check that today’s date remains saved. Leave the task as To do.
- With your added task still present, click Load sample tasks. It should ask before replacing the list. Cancel and check that all 9 tasks remain. If no confirmation appears, stop and report the fault.
- Try saving a blank or spaces-only title. It should be rejected. Use Tab to reach the controls and check you can see which control has focus. At 125% browser zoom, check that labels, task titles and controls remain readable and usable.
Review this implementation against project-brief.md and sample-tasks.md. Check the overdue rule, including tasks due today, completed tasks and tasks without a deadline. Check that sample dates are stored once and that opening the app cannot overwrite saved tasks.
If you can run browser checks, do so and report the actions and results. If you cannot, say that clearly and give me the manual checks. List any faults separately. Do not add features or redesign the app during this review.4. Add a Waiting status
Copy the project folder before asking for this change, so you can restore the code if needed. Keep opening the original index.html. The copy won’t contain your browser’s saved tasks; you’ll add a task backup in step 5. Waiting means a task is still active while you wait for someone else to act.
Set ‘Get supplier confirmation’ to Waiting. The Waiting filter should show one task; the active and overdue totals should stay the same. Set ‘Review the budget figures’ to Waiting as well. It should appear in both Waiting and Overdue. Put it back to Doing afterwards.
Add Waiting as a fourth task status and add a Waiting filter. A Waiting task still counts as active and can be overdue. The Waiting filter shows only Waiting tasks; the Overdue filter still includes overdue Waiting tasks.
Keep the current tasks, deadlines, existing filters and stable storage key. Do not replace my data or change the layout beyond what this feature needs. Explain what you changed and which checks you actually ran.5. Add export and restore
Add a way to download your tasks as a JSON file, a text file containing the task data. Importing that file should ask before replacing your current list. Browser storage alone won’t give you a backup you can move to another computer.
Export the list. Rename ‘Check the launch checklist’ to ‘Temporary restore check’, then import the export. Cancel the first attempt and check the temporary title remains. Import again and confirm replacement: the original title should return, with the same tasks, deadlines and statuses.
Keep the valid backup. To check rejection, copy it, change the top-level version value from 1 to 999 in a plain-text editor, and try importing that copy. The app should reject it and leave the list unchanged. Ask for help if you’re unsure how to edit the file without changing anything else.
Keep both index.html and a recent JSON export: one contains the app, the other your tasks. Before later code changes, copy the project folder and export your tasks. Export before moving the HTML file too. A copy of the folder alone does not include the browser’s saved task list.
Add Export backup and Import backup controls. Export a JSON file containing version: 1 and a tasks array. Each task must have id and title strings, dueDate as a valid YYYY-MM-DD date or null, and status as one of to-do, doing, done or waiting. Use those status values in exported data even if your internal names differ.
Import must validate the whole file before changing any tasks, reject duplicate IDs, invalid dates, empty titles, unsupported versions and invalid statuses, then ask before replacing existing tasks. Cancelling or rejecting an import must leave the current tasks unchanged. Explain that the backup file contains task data, while index.html is the app.
Keep the existing features and stored tasks. Update README.md with backup and restore instructions. Check a valid round trip and an invalid file if your tools allow it; label anything untested.6. Leave notes for the next session
Now ask Claude to write CLAUDE.md, a short note about how the app works and anything still broken. Read it and correct anything that doesn’t match what you’ve checked.
A project CLAUDE.md gives Claude written context for later sessions. Anthropic’s project memory documentation explains how these files load. They guide behaviour; they do not enforce permissions or guarantee that every instruction will be followed.
Create a short CLAUDE.md in this project folder based on the app as it exists now. Include its purpose, the one-file approach, how to open it, the date and status rules, the stable storage key, the export format and the checks needed after changes.
Say that existing tasks must be preserved and that dependencies or publishing need discussion first. Record any unresolved issues honestly. Keep this under 250 words. Update README.md if it no longer matches. Do not change index.html.7. Return in a fresh session
Export your current tasks, then start a new Code session using the same local folder, with Manual selected. Ask Claude to read the project files before adding sorting.
In All, check that Earliest deadline orders dated tasks from oldest to newest and puts undated tasks last. Task title should sort alphabetically. Change the sort while a filter is selected: it should reorder that filtered list without changing the overall counts. Repeat the reopen and backup checks.
Once those checks pass, you can stop. Team accounts and cloud hosting would need a separate project.
Read CLAUDE.md, README.md and index.html in this folder. Briefly explain what this app currently does and any recorded limits.
Then add a small Sort control: Earliest deadline or Task title. For Earliest deadline, put tasks without deadlines last. Preserve saved tasks, statuses, filters, the storage key and the backup format. Explain the change and tell me which checks you ran.If something goes wrong
If something breaks, tell Claude what you did, what you expected and what happened. Include the exact error message, if there is one. For a visible problem, add a screenshot with private details removed. Then use the prompt that fits below.
A setting or setup step blocks you
I am following a beginner desktop walkthrough to build one standalone index.html in this local folder. Inspect the exact error or screenshot I provide. Explain what is blocking this step and the smallest fix for my current operating system and app version.
Do not install software, switch to a cloud project, change permission modes or enable worktrees without explaining why it is needed and asking me first. If the issue needs a longer setup detour, stop with a clear explanation.The app behaves incorrectly
Use the screenshot and the steps I have just described as the bug report. Compare what happened with project-brief.md and the current requirements. Explain the likely cause, then make the smallest fix that preserves my task data and storage key.
Recheck the failing behaviour and any nearby features affected by the fix. Report what you actually tested and what still needs my manual check. Do not redesign the app or add unrelated features.Tasks disappear when you reopen the file
Check storage before trusting the tracker. MDN documents that localStorage behaviour for directly opened files varies between browsers. Private browsing also clears local storage when the last private tab closes. Use a normal browser profile and test your actual file path. Moving the HTML file or changing browsers can leave the previous stored tasks behind.
If tasks disappear when you reopen the HTML file, ask Claude to check the code first. You may need a small server running on your computer. That adds steps to start and stop it, so have Claude write them in README.md. Reuse the same browser profile and address each time. Export and restore your tasks when changing how you open the app.
The direct-file browser persistence check failed. Inspect the storage handling first and explain whether this is an implementation fault or a browser restriction. Preserve the current tasks by export if possible.
If a local server is needed, check which suitable runtime is already installed. Propose the smallest way to serve only this project folder on 127.0.0.1 at a fixed available port. Explain the exact start, stop and reopen steps for this operating system, and the fact that the same browser profile and address must be reused. Wait for my approval before starting it or installing anything.
Do not publish the project or serve the parent folder. If no suitable runtime exists, stop and explain the additional setup.The starter files
The download contains START-HERE.md, Prompt-Pack.md and a task-tracker folder with the two files below. You can also copy their contents into plain-text files with these exact names. Keep the prompts outside the task-tracker folder so the first plan starts from the brief and sample data.
# My Tasks: first-build brief
This is a fictional learning project for the cliffinkent Claude Code beginner video.
## Who it is for
A working person who wants a small personal task list they can adapt themselves.
## Version 1
Create one self-contained index.html, with its styling and JavaScript inside it. It must open directly in a desktop browser by double-clicking the file. No build process, package installation, external scripts, external fonts, account, API, hosting or paid service.
Use British English. Call the tool My Tasks. Use a clean light layout, dark navy text and restrained teal controls. Make the task list the main content; keep text readable at 125% browser zoom. Use native labelled inputs, visible keyboard focus and text alongside any status colour.
Let me add and edit a task title and an optional deadline. Statuses are To do, Doing and Done. Provide All, Active, Overdue and Done filters. Active means any task not Done. Overdue means an active task whose deadline is earlier than the user's current local calendar date. A task due today is not overdue. A task without a deadline is never overdue. Show total task, active, overdue and done counts independently of the selected filter. Include a way to mark a completed task active again.
Use local browser storage for changes. Keep a stable storage key during later edits. Handle unavailable storage or corrupt saved data without crashing or silently replacing data with samples. Show a useful message if saving fails. This file is a personal learning tool; do not promise cross-browser or cross-device sync.
Start empty. Add a Load sample tasks button using sample-tasks.md. Only load them when clicked, and ask before replacing existing tasks. Calculate the sample deadlines when the samples are first loaded. Store those dates; never recalculate them merely because the page is reopened.
Use plain text rendering for task titles. Reject an empty or whitespace-only title. Interpret dates as local calendar dates, not as UTC timestamps.
The intended next steps are a Waiting status/filter, then export/import backups. Do not build these yet.
Keep all work in this project folder. Read the two starter files before proposing a plan. Explain any extra requirement before acting. Do not deploy, connect services or install software for this build. Written instructions guide the work; they are not a technical security boundary.
Download the starter ZIP to keep the files and prompts together.
# Fictional sample tasks
All names and tasks are constructed examples. They are not client work.
Use the machine-readable IDs shown below. Due offsets are calendar days relative to the local date when Load sample tasks is clicked. Store the resulting dates once.
| ID | Task | Status | Due offset |
| --- | --- | --- | --- |
| t01 | Send the project update | To do | -2 |
| t02 | Review the budget figures | Doing | -1 |
| t03 | Prepare tomorrow's agenda | To do | 0 |
| t04 | Get supplier confirmation | Doing | +3 |
| t05 | Book the team review | To do | +5 |
| t06 | Tidy the reference notes | To do | none |
| t07 | Send the meeting notes | Done | -1 |
| t08 | File the approved brief | Done | 0 |
Before any edits, expected totals: 8 tasks, 6 active, 2 overdue, 2 done.
Only t01 and t02 are overdue. There is 1 active task due today (t03).
There are 2 active future tasks (t04 and t05), and 1 active undated task (t06).
These checks assume the same local calendar day as loading the samples.
What to try next
For your next change, choose a task you know well and adapt one rule. Keep it small enough that you can say what should happen and check the result yourself.
For a look at the work involved in releasing an app, read How I shipped a real app with Claude Code and Codex. It covers the Family Activity Finder build, including testing, billing and store review.
Sources and limits
Documentation and starter files checked on 2 November 2026. The download matches the prompts and sample files on this page. An end-to-end run in Claude Code hasn’t been verified for this page. Run the browser checks above before relying on the app you build.
Anthropic: Get started with the desktop app
Anthropic: Claude Code desktop reference
Anthropic: How Claude remembers your project
MDN: Window.localStorage