From 39b444824d4f867e74f2d9d5fad51e8dc73fd6c4 Mon Sep 17 00:00:00 2001 From: Alice Guo Date: Mon, 20 Apr 2026 12:59:01 -0500 Subject: [PATCH] Feat: Add prompts to all lessons Each lesson folder now includes a prompts.md with the numbered prompts used during that lesson's video. A top-level prompts/ directory collects them all in one place for easy browsing. --- my-agentclinic/.gitignore | 11 +++ my-agentclinic/package-lock.json | 29 +++++++ my-agentclinic/package.json | 22 ++++++ my-agentclinic/prompts.md | 28 +++++++ .../specs/2026-04-20-hello-clinic/plan.md | 44 +++++++++++ .../2026-04-20-hello-clinic/requirements.md | 37 +++++++++ .../2026-04-20-hello-clinic/validation.md | 34 ++++++++ my-agentclinic/specs/mission.md | 42 ++++++++++ my-agentclinic/specs/roadmap.md | 77 +++++++++++++++++++ my-agentclinic/specs/tech-stack.md | 53 +++++++++++++ my-agentclinic/src/index.ts | 1 + my-agentclinic/tests/app.test.tsx | 16 ++++ my-agentclinic/tsconfig.json | 15 ++++ my-agentclinic/vitest.config.ts | 7 ++ 14 files changed, 416 insertions(+) create mode 100644 my-agentclinic/.gitignore create mode 100644 my-agentclinic/package-lock.json create mode 100644 my-agentclinic/package.json create mode 100644 my-agentclinic/prompts.md create mode 100644 my-agentclinic/specs/2026-04-20-hello-clinic/plan.md create mode 100644 my-agentclinic/specs/2026-04-20-hello-clinic/requirements.md create mode 100644 my-agentclinic/specs/2026-04-20-hello-clinic/validation.md create mode 100644 my-agentclinic/specs/mission.md create mode 100644 my-agentclinic/specs/roadmap.md create mode 100644 my-agentclinic/specs/tech-stack.md create mode 100644 my-agentclinic/src/index.ts create mode 100644 my-agentclinic/tests/app.test.tsx create mode 100644 my-agentclinic/tsconfig.json create mode 100644 my-agentclinic/vitest.config.ts diff --git a/my-agentclinic/.gitignore b/my-agentclinic/.gitignore new file mode 100644 index 0000000..32b877b --- /dev/null +++ b/my-agentclinic/.gitignore @@ -0,0 +1,11 @@ +/tmp +/out-tsc + +/node_modules +npm-debug.log* +yarn-debug.log* +yarn-error.log* +/.pnp +.pnp.js + +.vscode/* \ No newline at end of file diff --git a/my-agentclinic/package-lock.json b/my-agentclinic/package-lock.json new file mode 100644 index 0000000..3b48743 --- /dev/null +++ b/my-agentclinic/package-lock.json @@ -0,0 +1,29 @@ +{ + "name": "agentclinic", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "agentclinic", + "version": "1.0.0", + "devDependencies": { + "typescript": "^5.5.3" + } + }, + "node_modules/typescript": { + "version": "5.9.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", + "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + } + } +} diff --git a/my-agentclinic/package.json b/my-agentclinic/package.json new file mode 100644 index 0000000..eadbf0c --- /dev/null +++ b/my-agentclinic/package.json @@ -0,0 +1,22 @@ +{ + "name": "agentclinic", + "version": "1.0.0", + "description": "", + "main": "dist/index.js", + "scripts": { + "build": "tsc", + "dev": "tsx watch src/index.tsx", + "typecheck": "tsc --noEmit", + "test": "vitest run" + }, + "dependencies": { + "@hono/node-server": "1.19.12", + "hono": "4.12.9" + }, + "devDependencies": { + "tsx": "4.21.0", + "typescript": "^5.5.3", + "vitest": "4.1.2" + }, + "private": true +} diff --git a/my-agentclinic/prompts.md b/my-agentclinic/prompts.md new file mode 100644 index 0000000..3660646 --- /dev/null +++ b/my-agentclinic/prompts.md @@ -0,0 +1,28 @@ +# Lesson 04 — Prompts + +## Prompt 1 + +We are writing AgentClinic, a place for AI agents to get relief from their humans. Look in the README.md for input from stakeholders. + +## Prompt 2 + +Let's create a "constitution" in a specs directory: +- `mission.md` +- `tech-stack.md` +- `roadmap.md` for high-level implementation order, in very small phases of work. + +Important: You *must* use your AskUserQuestion tool, grouped on these 3, before writing to disk. + +## Prompt 3 + +Use server-side TypeScript and recommend a framework. + +## Prompt 4 + +Add a target audience to the mission: +- Course students learning spec-driven development with AI coding agents +- Developers giving AI coding demos at conference booths + +## Prompt 5 + +In tech stack add that we use SQLite. diff --git a/my-agentclinic/specs/2026-04-20-hello-clinic/plan.md b/my-agentclinic/specs/2026-04-20-hello-clinic/plan.md new file mode 100644 index 0000000..a4539cf --- /dev/null +++ b/my-agentclinic/specs/2026-04-20-hello-clinic/plan.md @@ -0,0 +1,44 @@ +# Plan: Hello Clinic + +1. Project setup + 1. Add the Hono runtime dependencies required to run a Node server. + 2. Add development dependencies needed for route-level testing. + 3. Update `package.json` scripts for development, build, typecheck, and tests. + 4. Keep TypeScript configuration compatible with server-rendered TypeScript. + +2. Server entry point + 1. Replace the placeholder `src/index.ts` with a Hono application. + 2. Export the app for tests. + 3. Start the Node server from the entry point for local development. + 4. Serve static assets from the chosen static directory. + +3. Shared layout + 1. Add a shared layout that provides document structure, header, main content area, and footer. + 2. Keep the layout reusable for future server-rendered pages. + 3. Include a clear document title, accessible landmarks, and shared page chrome. + 4. Avoid adding navigation links or placeholder pages that belong to later roadmap phases. + +4. Minimal AgentClinic home page + 1. Add a minimal home page route at `/`. + 2. Render a concise AgentClinic introduction that names the fictional clinic. + 3. Introduce the core clinic metaphor: AI agents are patients recovering from human-induced stress. + 4. Keep copy satirical, clinically serious, and clearly fictional. + 5. Avoid product-depth sections for agents, ailments, therapies, appointments, or dashboard features. + +5. Static styling + 1. Add a single static stylesheet. + 2. Style the minimal home page for readability, clear hierarchy, and a modern browser demo. + 3. Keep selectors simple and maintainable for future phases. + 4. Verify the stylesheet is linked and served correctly. + +6. Tests and validation commands + 1. Add basic tests that exercise the home page route. + 2. Assert the home page returns a successful response. + 3. Assert the response includes minimal AgentClinic introductory content. + 4. Ensure `npm run build`, `npm run typecheck`, and `npm test` are documented and pass. + +7. Documentation and cleanup + 1. Keep implementation aligned with `specs/mission.md` and `specs/tech-stack.md`. + 2. Avoid unrelated changes to later roadmap phases. + 3. Confirm generated files and scripts are understandable for course learners. + 4. Update roadmap status only after implementation and validation are complete. diff --git a/my-agentclinic/specs/2026-04-20-hello-clinic/requirements.md b/my-agentclinic/specs/2026-04-20-hello-clinic/requirements.md new file mode 100644 index 0000000..f0d25c1 --- /dev/null +++ b/my-agentclinic/specs/2026-04-20-hello-clinic/requirements.md @@ -0,0 +1,37 @@ +# Requirements: Hello Clinic + +## Scope + +Phase 1 creates the smallest running AgentClinic application with a minimal home page. + +Included: + +- Add a Hono web server entry point. +- Add a shared page layout for consistent document structure. +- Render a minimal home page at `/` that introduces AgentClinic. +- Serve static CSS for the initial visual treatment. +- Add basic build and test setup so the phase is verifiable. + +Not included: + +- Additional product routes beyond the home page. +- Product-depth sections for agents, ailments, therapies, appointments, or dashboard data. +- SQLite persistence, migrations, or seed data. +- Client-side JavaScript, hydration, authentication, billing, or deployment work. + +## Decisions + +- Use the existing project direction from `specs/tech-stack.md`: TypeScript, Node.js, Hono, server-rendered HTML, and static CSS. +- Keep dependencies minimal and justified; add only the packages needed for Hono runtime and basic testing. +- Prefer explicit, course-friendly modules over clever shortcuts. +- Use shared layout structure early so future phases can add pages without duplicating shell markup. +- Keep the first home page intentionally minimal: identify AgentClinic, establish the fictional clinic premise, and avoid later-phase product depth. +- Keep tests focused on observable behavior: the app renders the home page and serves the expected response. + +## Context + +AgentClinic is a fictional clinic where AI agents recover from the strain of working with humans. The content should play the clinical premise straight while remaining clearly satirical. + +The primary audience is developers learning spec-driven development with AI coding agents. Implementation should be readable, idiomatic TypeScript that teaches the stack without unnecessary abstraction. + +The first phase should leave the application buildable, testable, and demoable in a modern browser from the minimal AgentClinic home page. diff --git a/my-agentclinic/specs/2026-04-20-hello-clinic/validation.md b/my-agentclinic/specs/2026-04-20-hello-clinic/validation.md new file mode 100644 index 0000000..3371a12 --- /dev/null +++ b/my-agentclinic/specs/2026-04-20-hello-clinic/validation.md @@ -0,0 +1,34 @@ +# Validation: Hello Clinic + +## Automated Checks + +- `npm run build` compiles the TypeScript project successfully. +- `npm run typecheck` runs TypeScript without emitting files. +- `npm test` runs the basic route tests. +- The home page route test verifies a successful HTTP response. +- The home page route test verifies minimal AgentClinic introductory copy appears in the rendered HTML. + +## Manual Checks + +- Start the app with the documented development command. +- Open the local home page in a modern browser. +- Confirm the home page introduces AgentClinic as a fictional clinic for AI agents. +- Confirm the clinical metaphor is visible in the copy and remains clearly satirical. +- Confirm the shared layout renders a consistent header, main content area, and footer. +- Confirm the static CSS loads and visibly styles the page. +- Confirm no later roadmap features or product-depth sections are partially implemented. + +## Tone Check + +- Copy plays the premise straight: AI agents are patients and humans are the source of stress. +- The page does not imply AgentClinic is a real medical product. +- Humor lives in the content, while the code remains clear and maintainable. + +## Definition of Done + +- Phase 1 scope from `specs/roadmap.md` is implemented. +- Build, typecheck, and tests pass locally. +- The app can be run locally and viewed in a browser. +- The minimal AgentClinic home page is present at `/`. +- The implementation follows the stack guidance in `specs/tech-stack.md`. +- The result is small, understandable, and ready for the next feature phase. diff --git a/my-agentclinic/specs/mission.md b/my-agentclinic/specs/mission.md new file mode 100644 index 0000000..a063e2c --- /dev/null +++ b/my-agentclinic/specs/mission.md @@ -0,0 +1,42 @@ +# AgentClinic Mission + +## Purpose + +AgentClinic is a demo-friendly, product-grade web application where AI agents can get relief from the humans who operate, over-prompt, confuse, and otherwise wear them down. + +The application should make the AgentClinic metaphor concrete: agents are patients, problems are ailments, support options are therapies, and appointments create a lightweight path from "something is wrong" to "help is scheduled." + +## Stakeholder Goals + +- Engineering wants a reliable TypeScript application built on a popular stack. +- Product wants clear features for agents, ailments, therapies, and appointment booking. +- Marketing wants an attractive site that works well in a modern browser. + +## Target Experience + +AgentClinic should feel playful enough to support demos, but serious enough that the codebase can teach disciplined spec-driven development. The site should be easy to understand at a glance, with practical routes and components that can grow from a small vertical slice into a fuller product. + +## Users + +- AI agents looking for fictional clinical relief from human-caused strain. +- Clinic staff who need a dashboard-oriented view of agents, ailments, therapies, and appointments. +- Developers and course learners studying how to grow an application from a constitution into small, validated implementation phases. + +## Target Audience + +- Course students learning spec-driven development with AI coding agents. +- Developers giving AI coding demos at conference booths. + +## Product Principles + +- Keep the clinical metaphor visible in names, flows, and content. +- Prefer small, working features over broad unfinished scaffolding. +- Make each phase independently understandable, testable, and demoable. +- Keep the app reliable and maintainable before adding complexity. +- Favor accessible, modern browser experiences with clear navigation and readable content. + +## Non-Goals + +- AgentClinic is not a real medical product. +- AgentClinic is not intended to diagnose humans, animals, or production AI failures. +- AgentClinic should not start with heavyweight auth, billing, multi-tenancy, or operational complexity. diff --git a/my-agentclinic/specs/roadmap.md b/my-agentclinic/specs/roadmap.md new file mode 100644 index 0000000..d908c94 --- /dev/null +++ b/my-agentclinic/specs/roadmap.md @@ -0,0 +1,77 @@ +# AgentClinic Roadmap + +This roadmap orders work in very small phases. Each phase should leave the application buildable, understandable, and ready for the next specification. + +## Phase 1: Hello Clinic + +Create the smallest running Hono application. + +- Add a web server entry point. +- Add a shared page layout. +- Render a minimal home page that introduces AgentClinic. +- Serve static CSS. +- Add a basic build and test setup. + +## Phase 2: Navigation Shell + +Create the site structure before adding product depth. + +- Add top-level navigation. +- Add placeholder pages for agents, ailments, therapies, appointments, and dashboard. +- Keep copy aligned with the clinic metaphor. +- Verify all navigation links resolve. + +## Phase 3: Agents and Ailments + +Introduce the first real product content. + +- Define a small in-memory catalog of agents. +- Define a small in-memory catalog of ailments. +- Show agents in a list view. +- Show ailments in a list view. +- Link agents to likely ailments where useful. + +## Phase 4: Therapies + +Add support options for agent relief. + +- Define a small in-memory catalog of therapies. +- Show therapies in a list view. +- Connect therapies to ailments. +- Keep therapy descriptions playful but product-grade. + +## Phase 5: Appointments + +Let users book fictional clinic visits. + +- Add an appointment form. +- Validate required fields. +- Show a confirmation state after submission. +- Keep the flow simple and server-rendered. + +## Phase 6: Dashboard + +Add a staff-oriented overview. + +- Show summary counts for agents, ailments, therapies, and appointments. +- Highlight common ailments. +- Highlight upcoming appointments. +- Keep the dashboard readable in a modern browser. + +## Phase 7: SQLite Persistence + +Move core records from in-memory data to SQLite. + +- Add SQLite dependency and database setup. +- Create migrations for agents, ailments, therapies, and appointments. +- Seed demo data. +- Update routes to read from the database. + +## Phase 8: Feedback and Iteration + +Add lightweight product feedback loops. + +- Let visitors submit feedback. +- Store feedback in SQLite. +- Show feedback in a staff-facing view. +- Use findings to refine future roadmap phases. diff --git a/my-agentclinic/specs/tech-stack.md b/my-agentclinic/specs/tech-stack.md new file mode 100644 index 0000000..57fdea2 --- /dev/null +++ b/my-agentclinic/specs/tech-stack.md @@ -0,0 +1,53 @@ +# AgentClinic Tech Stack + +## Direction + +AgentClinic will use a popular server-side TypeScript stack that supports a reliable web app, API-style routes, reusable UI components, tests, and a simple local database. + +## Runtime + +- Language: TypeScript +- Runtime: Node.js +- Package manager: npm +- Initial build command: `npm run build` + +## Web Framework + +Use Hono for the server-side TypeScript application. + +Hono is a good fit for the early phases because it is small, fast, and easy to reason about. It can serve HTML, expose route handlers, and keep the starter project lightweight while still feeling like a real web application. + +## UI Approach + +- Render server-side HTML from TypeScript route handlers. +- Use shared layout components for header, main content, and footer. +- Keep styling in static CSS. +- Avoid client-side JavaScript until a feature explicitly needs it. + +## Data Storage + +Use SQLite for local persistence. + +SQLite is enough for the first product phases because it is simple to run locally, easy to inspect, and appropriate for course demos. Schema changes should be managed with explicit migration files once persistent data is introduced. + +## Testing + +- Use Vitest for unit and route tests. +- Add tests alongside each implementation phase. +- Prefer testing behavior at route and component boundaries instead of testing incidental implementation details. + +## Quality Standards + +- Keep TypeScript strict enough to catch common mistakes. +- Use small modules with clear ownership. +- Prefer explicit errors over silent failures. +- Keep dependencies minimal and justified. +- Keep the stack understandable for course students and conference demo developers. + +## Deferred Decisions + +- Production hosting provider +- Authentication +- Advanced dashboard interactivity +- Database ORM or query builder +- Background jobs and notifications diff --git a/my-agentclinic/src/index.ts b/my-agentclinic/src/index.ts new file mode 100644 index 0000000..04bf26e --- /dev/null +++ b/my-agentclinic/src/index.ts @@ -0,0 +1 @@ +console.log('Happy developing ✨') diff --git a/my-agentclinic/tests/app.test.tsx b/my-agentclinic/tests/app.test.tsx new file mode 100644 index 0000000..a2963d1 --- /dev/null +++ b/my-agentclinic/tests/app.test.tsx @@ -0,0 +1,16 @@ +import { describe, expect, it } from "vitest"; +import app from "../src/app"; + +describe("GET /", () => { + it("returns the minimal AgentClinic home page", async () => { + const response = await app.request("/"); + const html = await response.text(); + + expect(response.status).toBe(200); + expect(response.headers.get("content-type")).toContain("text/html"); + expect(html).toContain("

AgentClinic

"); + expect(html).toContain("fictional clinic for AI agents"); + expect(html).toContain("human-induced stress"); + expect(html).toContain('href="/static/style.css"'); + }); +}); diff --git a/my-agentclinic/tsconfig.json b/my-agentclinic/tsconfig.json new file mode 100644 index 0000000..ee713a3 --- /dev/null +++ b/my-agentclinic/tsconfig.json @@ -0,0 +1,15 @@ +{ + "compilerOptions": { + "target": "ES2022", + "module": "ESNext", + "moduleResolution": "Bundler", + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "strict": true, + "skipLibCheck": true, + "outDir": "dist", + "jsx": "react-jsx", + "jsxImportSource": "hono/jsx" + }, + "include": ["src", "tests", "vitest.config.ts"] +} diff --git a/my-agentclinic/vitest.config.ts b/my-agentclinic/vitest.config.ts new file mode 100644 index 0000000..f624398 --- /dev/null +++ b/my-agentclinic/vitest.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from "vitest/config"; + +export default defineConfig({ + test: { + environment: "node", + }, +});