templates

Web Template

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

A CLAUDE.md template for web apps and sites.

The Template

terminal
# App Name

A web [app / tool / site] that [core functionality].

---

## What This Is

[Description of the web app]

## Tech Stack

- HTML5 / CSS3 / JavaScript
- [Framework: None / React / Vue / etc.]
- [Build tool: None / Vite / etc.]
- No external dependencies (prefer vanilla JS when possible)

## Current State

[Where is the project?]

## Features

- [ ] Core: [main feature]
- [ ] [Feature 2]
- [ ] [Feature 3]
- [ ] Polish & details

## Conventions

- Mobile-first responsive design
- Support light and dark mode
- Semantic HTML
- Accessible (WCAG AA)
- Works without JavaScript where possible

## Structure

project-name/ ├── index.html # Main page ├── styles.css # Styling ├── script.js # Interactivity └── assets/ # Images, fonts, etc.

terminal

For larger projects:

project-name/ ├── index.html ├── css/ │ ├── main.css │ └── components.css ├── js/ │ ├── app.js │ └── utils.js └── assets/

terminal

## Deployment

- Target: Static hosting (Netlify, Vercel, GitHub Pages)
- No server required
- Works from file:// for local testing

## Browser Support

- Modern browsers (Chrome, Safari, Firefox, Edge)
- Last 2 versions
- No IE11

## Notes

[Anything specific to this project]

Exercises

  1. Copy this template into a CLAUDE.md and choose whether it's an app, tool, or site — then pick your framework (None, React, Vue) and build tool in the Tech Stack.
  2. Decide between the simple flat structure and the larger-project structure, and delete the one you won't use so Claude follows a single clear layout.
  3. Set your deployment target (Netlify, Vercel, or GitHub Pages) and add any project-specific accessibility or dark-mode requirement to the "Notes" section.