# Implementation And QA

Use this checklist when building or updating the HTML.

## File Structure

Default:

```text
generated/html_lecture/<topic-slug>/
  index.html
  assets/
    *.png
artifacts/screenshots/
  <topic-slug>-desktop.png
  <topic-slug>-mobile.png
```

If the user has a different desired folder, follow the user.

## Implementation Checklist

### HTML

- `<!doctype html>`
- `lang="ja"`
- responsive viewport
- descriptive title
- meta description
- semantic sections with ids
- accessible labels for controls
- alt text for images
- source/footer links when needed

### CSS

- CSS variables for palette
- no negative letter spacing
- no viewport-scaling body text
- stable dimensions for icons/buttons/tabs
- card radius around 8-10px
- no card-inside-card page section nesting
- responsive stacking under tablet width
- print CSS if useful

### JavaScript

Keep JS lightweight:

- progress bar
- TOC active state
- tabs
- copy button
- simple worksheet generation

Avoid frameworks unless the page requires state management beyond simple interactions.

## Browser QA

Use a browser or Playwright. Check:

- desktop screenshot
- mobile screenshot
- no console errors
- no page errors
- all images complete and `naturalWidth > 0`
- tab/button interactions
- copy buttons
- generated worksheet output
- no text overflow in buttons/cards
- no incoherent overlap

Example Playwright checks can be adapted from this pattern:

```js
const imgs = [...document.images].map((img) => ({
  src: img.getAttribute("src"),
  ok: img.complete && img.naturalWidth > 0,
  width: img.naturalWidth,
  height: img.naturalHeight
}));
```

On Windows, if Playwright's bundled browser is missing, use Edge:

```js
executablePath: "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"
```

## Visual Review Checklist

Review screenshots as images, not only metrics.

Look for:

- first viewport communicates topic and promise
- major images are large
- image quality matches across sections
- no placeholder-looking line art remains
- icon badges are icons, not one-character labels
- tabs are near the content they affect
- tables are readable
- mobile is acceptable
- conclusion is clear

## Fact-Check Checklist

Browse when claims might have changed:

- current AI model names
- pricing/plans
- product features
- deployment docs
- legal, medical, financial, or platform-policy claims

Prefer official docs. In the final HTML, cite sources in a short footer.

## Self-Refine Checklist

Before final delivery, ask:

- Would the user proudly use this in a paid or community seminar today?
- Are the images doing real teaching work?
- Is the action step specific?
- Are there too many paragraphs without a visual break?
- Are any claims too strong?
- Is every section necessary?
- Does the conclusion land?

## Deploy Checklist

If the user asks to deploy:

1. deploy the static folder, usually with Vercel
2. use `.cmd` on Windows when PowerShell blocks `.ps1` shims
3. verify the production URL returns `200 OK`
4. verify at least one image asset returns `200 OK`
5. give the short production URL

For public/unlisted community sharing, no auth is needed unless the user asks for stricter access.

## Final Response Template

Use concise Japanese:

```text
完成しました。

出力: [index.html](absolute-path)
確認: desktop/mobile表示、画像読み込み、タブ操作、JSエラーなし
必要なら共有URL: ...
```

Do not bury the URL/path under a long implementation essay.
