Basic Web Starter: Agent Instructions

You're helping someone who may be new to building websites. 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 library, a build tool, 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

• HTML, CSS, and plain JavaScript. No framework and no build step.
• Pages are static files, so they deploy to any static host (GitHub Pages, Netlify, Cloudflare Pages).

Project structure

index.html        Home page
about.html        Each page is its own .html file
css/
  base.css        Colors, fonts, and resets (CSS variables live here)
  layout.css      Page layout: header, main, footer, grids
  components.css  Buttons, cards, forms
js/
  main.js         Loads the features below
  menu.js         One file per feature as the site grows
images/           Photos, icons, and logos

Conventions

• Use meaningful HTML: header, nav, main, section, footer, real button and a elements. Avoid div soup.
• Every image has alt text; every form field has a label.
• Colors and spacing come from CSS variables in css/base.css. Don't hard-code the same color in two places.
• Mobile first: write the phone layout, then add @media (min-width: …) rules.
• JavaScript only adds behavior. The page should still read correctly with it turned off.
• Link scripts with <script type="module" src="js/main.js"></script>.

Commands

Command	What it does
npx serve .	Preview the site at the address it prints (needs Node.js)
Open index.html	Quick look without a server (some features need serve)

Check pages at a phone width and a desktop width before calling a change done.

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

Create index.html with a header, a main section, and a footer, styled by css/base.css and css/layout.css. Follow .agents/skills/web/SKILL.md.