A website or web app

You are setting up this folder for a website or web app, for someone who is new to building with Claude Code. Work through the steps in order. Explain each one in a sentence of plain English as you go, with no jargon. Ask before anything that installs software or changes files outside this folder.

1. **Check this computer.** Run `git --version`. If git is missing, tell me how to install it and wait. This kit also needs: Node.js, for the Playwright check (plain HTML and CSS work without it); Python 3, for the design plugin's search. Check for each, and if one is missing, tell me in plain words what will not work until it is installed and where to get it, then carry on with the rest.
2. **Understand the project.** Ask me my first name. Then, if the folder is empty, ask in one question what I want to build and who it is for, and wait for my answer. If there is code, read it and tell me in two sentences what you found.
3. **Version history.** If this is not a git repository, run `git init` and explain that it lets us undo any change. If git has no name and email set (check with `git config user.email`), ask me for them and set them for this project only with `git config user.name` and `git config user.email`.
4. **Keep secrets out.** Add a `.gitignore` that covers `.env` and `.env.*` (but keeps `.env.example`), `node_modules/` and build output (`dist/`, `.next/`, `out/`). Create `.claude/settings.json` with permissions that deny reading them: `"deny": ["Read(./.env)", "Read(./.env.*)", "Read(./**/.env)", "Read(./**/.env.*)"]`, so keys never reach a prompt or a commit.
5. **Write `CLAUDE.md`.** Keep it under 40 lines: what the project is and who it is for, how to run or build it, the one command that checks it works (below), and any rule you would otherwise get wrong. Leave out anything you could work out from the code. Put this line first: "Call me <my first name> in every reply." If you ever stop doing that, the conversation has grown too long to keep track of, and I should start a new one.
6. **A check you can run.** A Playwright test that opens the home page and fails on any error in the console, plus the build command if the site has one (for example `npm run build`). A plain HTML site needs no build. Playwright needs Node.js. If there is no code yet, write the planned check in `CLAUDE.md` marked "set up when the first code lands", and set it up then. Once it exists, allow it in `.claude/settings.json` (for example `"allow": ["Bash(npm run build)"]`) and run it before saying anything is done.
7. **Install the tools**, for this project only. First show me the list below and ask for one yes. Then run each line on its own (a line can chain a few commands), one after another, waiting for each to finish, never in parallel. Skills copied in with git are pinned to the version that was safety-checked; plugins install their current version. Claude Code may ask you to approve each one; if it refuses a line, tell me and show me the line so I can run it myself in a terminal.
   The foundation, for every project:
   - `claude plugin marketplace add https://github.com/multica-ai/andrej-karpathy-skills.git --scope project && claude plugin install andrej-karpathy-skills@karpathy-skills --scope project`: Coding habits from Andrej Karpathy: think before coding, keep changes small and simple, check your work.
   - `claude plugin marketplace add https://github.com/anthropics/claude-plugins-official.git --scope project && claude plugin install claude-md-management@claude-plugins-official --scope project`: Keeps `CLAUDE.md` short and current, and saves what Claude learns each session.
   This kit:
   - `claude plugin marketplace add https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git --scope project && claude plugin install ui-ux-pro-max@ui-ux-pro-max-skill --scope project`: A design brain: styles, colour palettes, font pairings and UX rules, so pages look designed. Its search needs Python 3.
   - `d=$(mktemp -d) && git -C "$d" init -q && git -C "$d" fetch -q --depth 1 https://github.com/vercel-labs/agent-skills.git 063bee94c3f4df8453406c830b0a7df0f2860278 && git -C "$d" checkout -q FETCH_HEAD && mkdir -p .claude/skills && cp -R "$d/skills/web-design-guidelines" .claude/skills/web-design-guidelines && rm -rf "$d"`: Reviews your pages against proven interface rules and catches small mistakes. It fetches the latest rules from Vercel each time.
   - `d=$(mktemp -d) && git -C "$d" init -q && git -C "$d" fetch -q --depth 1 https://github.com/supabase/agent-skills.git c9be0e931b7930f7d02126d04774d904c381e7d7 && git -C "$d" checkout -q FETCH_HEAD && mkdir -p .claude/skills && cp -R "$d/skills/supabase" .claude/skills/supabase && rm -rf "$d"`: How to build the database and sign-in properly with Supabase. Install this only if the site needs accounts, sign-in or a database.
   - `claude plugin marketplace add https://github.com/anthropics/claude-plugins-official.git --scope project && claude plugin install playwright@claude-plugins-official --scope project`: Gives Claude a browser it can click through, so it can check its own work. Needs Node.js.
   If a `claude plugin` line says the `claude` command is not found (usual in the Claude desktop app), don't run the other `claude plugin` lines or hunt for the command, but still run every other line. Instead, with the same yes, add these entries to `.claude/settings.json`, keeping everything already there and leaving out any plugin we agreed to skip:
   ```json
   {
     "enabledPlugins": {
       "andrej-karpathy-skills@karpathy-skills": true,
       "claude-md-management@claude-plugins-official": true,
       "ui-ux-pro-max@ui-ux-pro-max-skill": true,
       "playwright@claude-plugins-official": true
     },
     "extraKnownMarketplaces": {
       "karpathy-skills": {
         "source": {
           "source": "git",
           "url": "https://github.com/multica-ai/andrej-karpathy-skills.git"
         }
       },
       "claude-plugins-official": {
         "source": {
           "source": "git",
           "url": "https://github.com/anthropics/claude-plugins-official.git"
         }
       },
       "ui-ux-pro-max-skill": {
         "source": {
           "source": "git",
           "url": "https://github.com/nextlevelbuilder/ui-ux-pro-max-skill.git"
         }
       }
     }
   }
   ```
   Then, in step 9, tell me which plugins are switched on but not installed yet, and that I install each from the **+** button → **Plugins** in a new session in this folder (or run its line in a terminal where Claude Code is installed).
   If a line fails for any other reason, say why in one line and carry on with the rest. Never install anything that is not on this list. Plugins switch on in the next session: tell me to start a new one in this folder (in a terminal, restart Claude Code), trust the folder if asked, install any that are switched on but not installed yet, and check they are all listed under `/plugin` or the **+** button → **Plugins**.
8. **Commit** everything with the message "Set up with the Vishwaclaudema starter kit". Tell me the copied skills are included, so cloud sessions get them too. Never commit a `.env` file or anything that looks like a key.
9. **Hand over.** In at most ten lines, tell me what you set up and why it matters, including why you will call me by name, and how to finish installing any plugin that is switched on but not installed yet. Then give me this first-week plan, in my own project's terms:
   - Day 1: describe your site's one job and who it is for; ask Claude for three different homepage directions and pick one.
   - Day 2: build that homepage, then have Claude open it in the browser and fix what looks off.
   - Day 3: add the next most important page the same way.
   - Day 4: ask for a design review against the web design guidelines and fix the top five issues.
   - Day 5: put it online: at vercel.com/new, sign in (with GitHub if you have it) and import or upload the project, then share the link with one person for feedback.
   Finish with: "Tell me what you want to build first, and I'll plan it with you before writing any code."