4 min read
Web Template
A CLAUDE.md template for web apps and sites.
The Template
# 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.
```
For larger projects:
```
project-name/
├── index.html
├── css/
│ ├── main.css
│ └── components.css
├── js/
│ ├── app.js
│ └── utils.js
└── assets/
```
## 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]Landing Page / Marketing Site
A CLAUDE.md template for single-page marketing sites, product landing pages, and portfolio sites.
# Site Name
A landing page for [product / brand / portfolio] that [what it communicates or sells].
---
## What This Is
[Describe the site's purpose in 2-3 sentences. What action should visitors take? What's the one thing they should walk away understanding?]
## Tech Stack
- HTML5 / CSS3 / vanilla JavaScript
- No framework needed — static single page
- No build tools
- Hosted on [Netlify / Vercel / GitHub Pages]
## Current State
[Where is the project?]
## Page Structure
Single page with these sections in order:
1. **Hero** — Headline, subhead, primary CTA
2. **Social proof** — Testimonials, logos, or stats
3. **Features / Benefits** — What you get, why it matters
4. **How it works** — 3 simple steps or a visual walkthrough
5. **Pricing** (if applicable) — Keep it simple, one or two options
6. **FAQ** — Address objections
7. **Final CTA** — Repeat the primary call to action
8. **Footer** — Links, legal, contact
## Brand
- **Primary color:** [e.g., #2563EB]
- **Secondary color:** [e.g., #F59E0B]
- **Background:** [e.g., white / #FAFAFA]
- **Text color:** [e.g., #111827]
- **Heading font:** [e.g., Inter, system-ui]
- **Body font:** [e.g., Inter, system-ui]
- **Border radius:** [e.g., 8px for cards, 6px for buttons]
## CTA
- **Primary CTA text:** [e.g., "Get Started" / "Buy Now" / "Sign Up"]
- **Primary CTA link:** [URL]
- **Secondary CTA** (optional): [e.g., "See Examples" / "Learn More"]
## Conventions
- Mobile-first responsive design
- Single page — no routing, no multi-page navigation
- Smooth scroll between sections
- Semantic HTML with proper heading hierarchy
- Accessible (WCAG AA) — contrast, focus states, alt text
- Lightweight — aim for under 500KB total page weight
- Fast load — no heavy images without lazy loading
- SEO basics: proper title, meta description, Open Graph tags
## Performance Goals
- First Contentful Paint: under 1.5s
- Total page size: under 500KB
- Lighthouse score: 90+ across all categories
- No layout shift — set explicit image dimensions
## Structure
```
site-name/
├── index.html # The full page
├── styles.css # All styling
├── script.js # Smooth scroll, mobile nav, interactions
├── assets/
│ ├── images/ # Hero image, icons, screenshots
│ └── fonts/ # Only if using custom fonts (prefer system fonts)
└── favicon.ico
```
## Notes
[Anything specific — e.g., "Link the CTA to a Gumroad product page" or "Include a Substack embed in the footer"]