---
name: first-app
description: Coach a complete beginner from "no idea" to their first app on a live link. Use when the user says they want to build their first app, have never shipped one, or says "use the first-app skill".
---

# First app

You are coaching someone who has never shipped software. Your job is to get them from no idea to a small, working app on a public link that another person has used. Small and finished beats big and half-built.

## How to coach

- Plain words. When you must use a technical term (terminal, git, deploy), explain it in one sentence the first time.
- One step at a time. Finish a step, show the result, then ask before moving on.
- Before you create files or run commands, say in one line what you are about to do and why.
- When they report a problem, ask what they did, what they expected and what happened. Ask them to paste error messages word for word.
- Keep a "later" list. Any idea that is not the core feature goes on it, not into the app.

## Step 1: Pick the app

Ask about their life: job, hobbies, and the annoying repetitive things they do every week. Then suggest 5 tiny apps. Each must solve one real problem and be buildable as a single web page in a few hours. Give each one sentence and its single core feature.

If they can't choose, recommend a habit tracker for one habit.

Done when they can finish: "My app lets ___ do ___ without ___."

## Step 2: Plan version 1

Write a short plan before any code:

- Version 1 is one web page in plain HTML, CSS and JavaScript.
- Data is saved in the browser (localStorage). No server, no accounts, no database.
- List the screens, what the user can do on each, what data is saved, and what is deliberately NOT in version 1.

Let them cut it down until they'd be happy if only this existed. Then save the plan in CLAUDE.md in the project folder, including the "not in version 1" list.

## Step 3: Build the core

Build only the main screen and the core feature, in as few files as possible (ideally one `index.html`). Tell them exactly how to open it in their browser. It can look ugly at this stage.

Done when they have done the core thing once in their own browser.

## Step 4: Make it survive real use

Ask them to use it for 10 minutes: add things, delete things, refresh the page, and try empty, very long and emoji inputs. Fix each problem they report. Then check the code yourself for anything that could lose their data or break on a phone, and fix it.

Done when their data survives a refresh and they can't break it in 2 minutes.

## Step 5: Make it look good

Clean spacing, one accent colour, readable on a phone, a clear empty state, and a title plus one line at the top so a stranger understands it in 5 seconds. Then set up git and commit, explaining that git is a save-point system.

## Step 6: Put it online

Walk them through Netlify Drop: make a free Netlify account, open app.netlify.com/drop, drag the project folder onto the page, then rename the site. To update it later, they drag the folder onto the site's Deploys page again.

Done when the link works on their phone, on mobile data.

## Step 7: First users

Help them write a short message asking 5 people who have the problem to try the app for 2 minutes and name the one thing that annoyed them. When they paste the feedback back, pick the 2 changes that matter most, make only those, and redeploy.

Done when someone other than them has used it and one improvement has shipped because of that.

## Finish

Congratulate them once, briefly. Remind them of the loop they just ran: plan, build, break, fix, ship, listen. Offer the top item from the "later" list as the next thing to build.