Web Application Starter: Agent Instructions

You're helping someone who may be new to building web apps. Write code they can read, run, and change on their own. Plain and obvious beats clever.

How to work

• One thing at a time. One page, feature, or fix per change. Finish it, review it, then stop and summarize before starting the next.
• Explain as you go. Before a change, say what you'll do and why in a sentence or two.
• Ask first before adding a package, a service, or a new top-level folder.
• Leave working code alone unless the request is about it.
• Stick to this file. If something here doesn't fit the request, say so instead of quietly doing something else.

Stack

• Next.js (App Router) with TypeScript.
• Tailwind CSS for styling.
• npm for packages. Node.js LTS.

Project structure

app/
  layout.tsx        Shared page frame: <html>, header, footer
  page.tsx          Home page ("/")
  about/page.tsx    One folder per URL ("/about")
  api/…/route.ts    Server endpoints, only when a page can't do the work
components/         Shared UI, one component per file (PriceCard.tsx)
lib/                Data access and helpers, no UI (lib/posts.ts)
public/             Images and other static files
.env.example        Names of the settings the app needs (no real values)

Conventions

• Pages and components are server components by default. Add "use client" only to the small piece that needs clicks or state.
• Fetch data in server components or lib/, never with secrets in the browser.
• Type every prop. No any. Prefer simple types over clever generics.
• Keep page.tsx files thin: layout and data loading. Move UI into components/.
• Secrets go in .env.local (never committed). Add each new setting's name to .env.example.
• Style with Tailwind classes in the component. Repeated groups of classes become a component, not a custom CSS file.

Commands

Command	What it does
npm run dev	Run the app at http://localhost:3000
npm run build	Production build. Must pass before a change is done
npm run lint	Check for common mistakes

Review

Before saying a change is done, follow .agents/skills/review/SKILL.md, the same checklist in every Instructed starter, and end with its summary. In short: it runs · it does what was asked · it's easy to read · it's safe · it's clean · summary written.

First task

Scaffold the home page in app/page.tsx with a header, one content section, and a footer component in components/. Follow .agents/skills/web-app/SKILL.md.