{
  "steps": [
    {
      "title": "Open Claude on this repo",
      "body": "Easiest: go to <a href=\"https://claude.ai/code\">claude.ai/code</a>, start a new session, and choose the repository <strong>HighestVibrations/vibe-prototypes</strong>. Already use Claude Code on your computer? Open it in the vibe-prototypes folder instead."
    },
    {
      "title": "Start up to date",
      "body": "Paste the “Get the latest” prompt below, so you begin from what everyone else has already done."
    },
    {
      "title": "Describe what you want",
      "body": "Pick the prompt that matches your goal, copy it, and replace the [bracketed parts] with your own words. Plain language is perfect. Claude already knows the brand and our standards (it reads AGENTS.md by itself)."
    },
    {
      "title": "Review and refine",
      "body": "Claude will tell you how to open what it built. Look at it on your phone and your computer, then ask for changes in your own words: “make the header calmer”, “add a step for …”."
    },
    {
      "title": "Publish it",
      "body": "Paste the “Save and publish” prompt. Claude saves your work to the shared <strong>main</strong> copy, and our site updates automatically in a minute or two. Claude gives you the live link to share. Because everyone works on the same copy, Claude always updates first and never overwrites a teammate's work."
    }
  ],
  "prompts": [
    {
      "id": "latest",
      "title": "Get the latest",
      "when": "Do this first, every time you start.",
      "prompt": "Before we start, make sure you're working from the latest version of the vibe-prototypes repo on GitHub (the main branch). Read AGENTS.md and follow it for everything we do. Tell me in plain language if anything is in the way, and give me a one-paragraph summary of what's changed recently so I know what my teammates have been up to."
    },
    {
      "id": "new-prototype",
      "title": "Create a new prototype",
      "when": "You have a new idea, flow or screen to try. Claude command: /new-prototype",
      "prompt": "I'd like to create a brand-new Let's Vibe prototype.\n\nWhat it is: [describe it in plain words, e.g. a flow where a Seeker books a place at an event]\nWho it's for: [Seeker, Practitioner, or both]\nScreens or steps I imagine: [list them, or write \"you decide\"]\nName: [a short name like event-booking, or write \"pick one\"]\n\nRead AGENTS.md first and follow it exactly. Build it as v1 in the right folder, using our brand. It must support both light and dark mode (our brand tokens are built for it). Check it on a phone and a computer, in light and dark mode and with the keyboard only, and make sure every screen has its own link that still works after a reload and with the Back button. Once it passes, save it straight to main and publish it (no pull request needed), updating from main first so you never overwrite a teammate's work. When you're done, tell me in plain language what you built, give me the live link and how to open it locally, and anything you could not check."
    },
    {
      "id": "new-version",
      "title": "Create a new version of an existing prototype",
      "when": "You want to change something people have already reviewed. Claude command: /new-version",
      "prompt": "Create a new version of the prototype [name, e.g. wellness-hub]. Start from its latest version and leave all older versions untouched.\n\nWhat I want to change: [describe the changes in plain words]\n\nRead AGENTS.md first and follow it. Write a changelog that explains what is different from the previous version, update the version list, and run the same checks (phone and computer, both light and dark mode, keyboard, working links and Back button), and add dark mode if the earlier version did not have it. Once it passes, save it straight to main and publish it (no pull request needed), updating from main first. Tell me in plain language what changed and give me the live link to the new version."
    },
    {
      "id": "small-change",
      "title": "Make a small change to the latest version",
      "when": "A typo, a wording tweak or a small fix that does not change the design.",
      "prompt": "Make a small change to the latest version of [prototype name]: [describe the change].\n\nOnly do this in place if it's a minor fix that doesn't change what people already reviewed. If it changes the design, flow or behaviour, stop and ask me, and make a new version instead. Record the change in that version's changelog, check it still works on a phone and a computer, then update from main, save it straight to main and publish it (no pull request needed). Give me the live link."
    },
    {
      "id": "from-design",
      "title": "Build from a design or screenshot",
      "when": "You have a Figma link, screenshots or a sketch.",
      "prompt": "Build a Let's Vibe prototype from this design: [paste a Figma link, or attach screenshots or a sketch].\n\nPurpose: [what it should show or prove]\nName: [a short name, or write \"pick one\"]\n\nRead AGENTS.md first. Match our brand tokens (colours, fonts, spacing) rather than copying exact values from the design, and tell me where you made a judgement call. It must support both light and dark mode. Check phone and computer, light and dark, keyboard, and working links. Once it passes, update from main, save it straight to main and publish it (no pull request needed), and give me the live link."
    },
    {
      "id": "check",
      "title": "Check a prototype against our standards",
      "when": "Before you share something, or to review someone else's work. Claude command: /check-standards",
      "prompt": "Check [prototype name and version, e.g. partners v1] against our standards in AGENTS.md: accessibility, phone and computer layouts, and links and the Back button. List anything that fails in plain language, fix it, and check again. Tell me exactly what you tested and what you could not."
    },
    {
      "id": "ship",
      "title": "Save and publish my work",
      "when": "You're happy with it and want the team to see it live. Claude command: /ship",
      "prompt": "Save and publish my work. First update from the latest main so nothing a teammate did gets overwritten. Run the checks in AGENTS.md (the app builds, my prototype loads, phone and computer layouts, working links). If those pass, commit with a clear message, push straight to main (no pull request needed), and tell me when it's live along with the link and a two-line summary I can paste to the team. If something conflicts with a teammate's work, stop and explain it simply before changing anything."
    },
    {
      "id": "explain",
      "title": "Help me understand this repo",
      "when": "First time here, or you're lost.",
      "prompt": "I'm new to this repo and not technical. Explain in plain language what's here, how prototypes are organised, how I can preview them, and what I'd do to start my first one. Keep it short and ask me what I want to make."
    }
  ],
  "tips": [
    "You never need to write code. Describe what you want like you would to a designer.",
    "Always let Claude read AGENTS.md. It holds our brand, accessibility and link rules, and Claude follows it automatically.",
    "We move fast: work is saved straight to main and the site updates itself, with no pull requests. That's why Claude checks everything before it publishes.",
    "Keep new ideas as a new prototype or a new version, so earlier work stays available to compare.",
    "Always start with “Get the latest”, so you build on your teammates' newest work.",
    "Don't paste passwords, keys or real customer information into a prompt or a prototype."
  ],
  "commands": [
    {
      "name": "/get-latest",
      "what": "Updates your copy to the newest work on main, reads our rules, and tells you in one paragraph what your teammates changed recently.",
      "when": "Start of every session.",
      "example": "/get-latest"
    },
    {
      "name": "/new-prototype",
      "what": "Creates a brand-new prototype as v1 in the right folder, with our brand, accessible and mobile-friendly layouts, working links and Back button, a flow map and a changelog. Asks you up to three short questions if details are missing, then publishes it.",
      "when": "You have a new idea, flow or screen.",
      "example": "/new-prototype A booking flow where a Seeker reserves a place at an event. Name it event-booking."
    },
    {
      "name": "/new-version",
      "what": "Copies the latest version of a prototype into the next version (v2, v3 …), leaves the old ones untouched, applies your changes, writes the changelog and publishes it.",
      "when": "You want to change something people have already reviewed.",
      "example": "/new-version wellness-hub: simplify the sign-in screen and add a welcome step for new Seekers"
    },
    {
      "name": "/check-standards",
      "what": "Tests a prototype in a real browser for accessibility, phone and computer layouts, and links and the Back button, explains any problems in plain language, fixes them and checks again.",
      "when": "Before you share something, or to review a teammate's work.",
      "example": "/check-standards partners v1"
    },
    {
      "name": "/ship",
      "what": "Updates from main, runs the checks, saves your work straight to main (no pull request) and gives you the live link plus a two-line summary to paste to the team.",
      "when": "You're happy with it and want the team to see it live.",
      "example": "/ship Added the event booking prototype"
    }
  ]
}