Presentation Bootstrap Template

Use for presentation projects that build to static HTML and deploy to S3. Output is fixed A4 landscape per slide, screen styling matched to the print stylesheet so what you see is what you’ll print. No Vercel, no database, no server.

Distinct from the Presentation HTML template — that’s a one-shot single-file artefact you email as an attachment. This is a real project with a build pipeline, local fonts and images, version control, and a deploy script. Use the HTML template for throwaway decks; use this when the presentation lives on.

This is Prompt 01 — the bootstrap. Claude Code will scaffold the project, create governance files, and stop at PLAN.md for your approval.

The prompt

You are bootstrapping a new presentation project. Read this entire prompt
before starting.

MISSION:
[One sentence describing what this presentation is about, for whom, and why.]

TECH STACK:
- Vite (vanilla template, plain JS)
- HTML, CSS, JavaScript — no framework
- Static build, deployed to AWS S3
- No backend, no database, no Vercel

OUTPUT SHAPE:
- Fixed A4 landscape per slide (297mm × 210mm)
- Side drawer navigation, keyboard control (arrows, Home/End, M, Escape)
- Print stylesheet produces clean PDF when printed from Chrome
- All assets local — no fonts loaded over the network, no CDNs

REQUIRED FILES — create these exactly:

1. .claude/settings.json
   With this content exactly:
   {
     "permissions": {
       "allow": [
         "Read",
         "Glob",
         "Grep",
         "LS",
         "Edit",
         "MultiEdit",
         "Write(src/**)",
         "Write(public/**)",
         "Write(docs/**)",
         "Write(index.html)",
         "Bash(npm run *)",
         "Bash(npm install *)",
         "Bash(npm test *)",
         "Bash(git status)",
         "Bash(git diff *)",
         "Bash(git log *)",
         "Bash(git add *)",
         "Bash(git commit *)"
       ],
       "deny": [
         "Read(**/.env*)",
         "Read(**/.dev.vars*)",
         "Read(**/*.pem)",
         "Read(**/*.key)",
         "Read(**/secrets/**)",
         "Read(**/credentials/**)",
         "Read(**/.aws/**)",
         "Read(**/.ssh/**)",
         "Read(**/.npmrc)",
         "Read(**/.pypirc)",
         "Edit(**/.env*)",
         "Write(**/.env*)",
         "Write(**/secrets/**)",
         "Write(**/.ssh/**)",
         "Bash(cat *.env*)",
         "Bash(head *.env*)",
         "Bash(tail *.env*)",
         "Bash(less *.env*)",
         "Bash(more *.env*)",
         "Bash(rm -rf *)",
         "Bash(sudo *)",
         "Bash(git push *)",
         "Bash(npm publish *)",
         "Bash(aws *)",
         "Bash(curl * | sh)",
         "Bash(wget *)"
       ],
       "defaultMode": "acceptEdits"
     }
   }

2. CLAUDE.md
   Sections: Mission, Tech Stack, Conventions, Coding Standards,
   Uncertainty Handling. Include these specifics:
   - Fixed A4 landscape (297mm × 210mm) per slide. Print stylesheet
     enforces page size; screen layout matches.
   - All assets local. No fonts loaded over the network. No CDNs.
   - For messy raw content, use the `brain-dump-cleaner` skill
     before drafting slides.
   - For layout decisions on loose content, use the `content-to-layout`
     skill.
   - PPTX export is a separate workflow. Do not attempt to generate
     PPTX from the HTML output — the `pptx` skill consumes source
     content directly when needed.
   - Never run aws commands directly. Deployment is via the
     `npm run deploy` script only.
   - Uncertainty handling: flag uncertainty about APIs, libraries,
     or existing file structure rather than guessing. Never invent
     function names, types, or import paths.

3. memory.md — empty decision log.

4. .gitignore — standard Node + Vite:
     node_modules/
     dist/
     .env*
     !.env.example
     .DS_Store
     *.log

5. Folder structure:
     /src
       /styles    — base.css, screen.css, print.css
       /scripts   — main.js, drawer.js, keyboard.js
     /public      — fonts, images, anything copied as-is to dist/
     /docs        — PRD, design briefs, feature briefs
     /docs/features
     index.html   — shell + slide sections

6. README.md — project name, mission, how to develop / build / deploy.

7. package.json scripts:
   - dev:     vite
   - build:   vite build
   - preview: vite preview
   - deploy:  aws s3 sync dist/ s3://$BUCKET_NAME/ --delete

8. .env.example with empty values:
     BUCKET_NAME=
     AWS_REGION=

9. vite.config.js — minimal config, base path configurable via
   env var (useful for deploying under an S3 subpath).

10. A short note in docs/ explaining that design.md is optional but,
    if present, takes precedence over default style. Do not create
    design.md itself — that's per-project.

INSTALL:
- npm create vite@latest . -- --template vanilla
- npm install
- Confirm clean install
- Confirm `npm run dev` boots and renders the default Vite page

GIT:
- git init, first commit "Initial bootstrap"
- No remote yet

WHEN DONE:
Write PLAN.md with:
  - Slide count estimate
  - Visual style approach (default Playbook neutral, design.md
    brief expected, or reference URL to extract from)
  - File breakdown (CSS files, JS files, what lives in index.html)
  - Print stylesheet strategy (page size, page breaks, what's hidden)
  - Deploy target: S3 bucket name placeholder + region
Then STOP and wait for approval.