# Implementation And QA

Use this checklist before delivering any page created with this skill.

## File Structure

Default:

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

## Build Checklist

- semantic HTML with `lang="ja"`
- responsive viewport
- descriptive title and meta description
- accessible controls and alt text
- CSS variables for the chosen visual direction
- no negative letter spacing
- no body text scaling with viewport width
- stable button/tab dimensions
- icons instead of one-kanji badges
- source footer when facts may change

## Distinct-UI Checklist

Pass this before delivery:

- chosen UI direction is visible in the first viewport
- first viewport is bright and readable when using Warm Studio
- main generated image is not squeezed into the first viewport unless the layout truly supports it
- palette differs from previous/reference material
- background treatment differs
- navigation differs
- card styling differs
- heading/section-number treatment differs
- chapter numbers are large enough to scan quickly
- table/tabs/callouts differ
- conclusion block differs
- images are framed differently
- side-by-side screenshots would not look like the same template

If the answer is weak, redesign.

## Browser QA

Verify:

- desktop screenshot
- mobile screenshot
- no console/page errors
- all images load with natural dimensions
- all tab groups stay synchronized
- copy buttons and worksheet output work
- no text overflow
- no incoherent overlap

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

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

## Image QA

Reject/regenerate if:

- placeholder-looking visual remains
- random horizontal lines appear
- important labels are unreadable
- image is too small in the final layout
- image does not teach the intended point
- image color mood is not too close to the prior/reference image set when the user is worried about similarity

## Warm Studio Accepted Pattern Checks

When using the Warm Studio default, verify:

- hero uses a light warm gradient, not a dark command-center block
- H1 remains readable without a large image competing beside it
- first major diagram appears after `要点まとめ`
- chapter chip has a large number, roughly `27px` desktop and `23px` mobile
- chip includes a small label such as `CHAPTER`
- left chapter rail remains easy to use
- the image prompt asks for a more colorful version when similarity risk is about image color

## Deployment QA

If deploying:

- deploy the static folder
- verify production HTML returns `200 OK`
- verify at least one image asset returns `200 OK`
- provide the production URL

## Final Response

Include:

- output path
- chosen UI direction
- verification
- live URL if deployed

Keep it short.
