Pageclaw Batch -- End-to-End Test
Run the full pageclaw-batch pipeline on bundled fixtures and produce a test report.
Fixtures
- Style matrix:
skills/pageclaw-batch-test/fixtures/style-matrix-test.yaml
- Page-story:
skills/pageclaw-test/fixtures/page-story-test.md (shared with pageclaw-test)
Read both files at the start. These are the only inputs for the entire test run.
Execution
Override output directory. All pageclaw-batch output must go to test-output/batch/ instead of the default output/. Before invoking pageclaw-batch, create test-output/batch/html/ and test-output/batch/docs/. When pageclaw-batch references output/, substitute test-output/batch/ throughout.
Invoke pageclaw-batch with the test style matrix and the shared page-story. Run in autonomous mode -- do not wait for user confirmation at the summary table. The matrix contains 3 styles; expect 3 combinations.
Do not ask the user any questions during the run. If pageclaw-batch would normally ask for confirmation, proceed automatically.
Validation
After the batch pipeline completes, run these checks against test-output/batch/.
Pipeline checks
- Pre-flight: style matrix parsed, page-story found, output dirs created.
- Parse Inputs: 3 styles detected, 1 page-story, 3 combinations listed.
- Each style (
01-sidebar-brutalist, 02-col-whitespace, 03-topnav-editorial): all steps A-E completed without error.
- Master Index:
test-output/batch/index.html generated.
Artifact checks (repeat for each style <id>)
test-output/batch/docs/<id>-design.md exists, contains ## Design Context and ## Design System.test-output/batch/docs/<id>-impl.md exists, contains a task-by-task plan.test-output/batch/html/<id>.html exists, is valid HTML (has <!DOCTYPE html> or <html).- HTML uses CSS custom properties (
--bg, --fg, --accent, etc. per Technical Contract).
- HTML has a light/dark mode toggle with
[data-theme="dark"] override block.
- HTML is responsive (no fixed widths exceeding
100vw).
- Zero raw hex/rgb values outside
:root and [data-theme="dark"] blocks.
- Layout structure matches the style matrix
layout field.
- Design intent from the style matrix is reflected in the visual output.
Master index checks
test-output/batch/index.html exists.- Contains links to all 3 generated HTML files.
- Has its own light/dark mode toggle.
Test Report
Print the following report after validation:
## Pageclaw Batch Test Report
### Pipeline
- [ ] Pre-flight: passed / FAILED
- [ ] Parse Inputs: passed / FAILED
- [ ] Style 01-sidebar-brutalist: completed / FAILED
- [ ] Style 02-col-whitespace: completed / FAILED
- [ ] Style 03-topnav-editorial: completed / FAILED
- [ ] Master Index: generated / FAILED
### Artifact Checks
For each style <id>:
- [ ] output/docs/<id>-design.md exists and contains ## Design Context + ## Design System
- [ ] output/docs/<id>-impl.md exists and contains task-by-task plan
- [ ] output/html/<id>.html exists and is valid HTML
- [ ] HTML has CSS custom properties (--bg, --fg, --accent, etc.)
- [ ] HTML has light/dark mode toggle with [data-theme="dark"] block
- [ ] HTML is responsive (no fixed widths > 100vw)
- [ ] Zero raw hex/rgb outside :root and [data-theme="dark"]
- [ ] Layout matches style-matrix layout field
- [ ] Design intent reflected in visual output
### Master Index Check
- [ ] output/index.html exists
- [ ] Links to all generated HTML files
- [ ] Has light/dark mode toggle
### Violations
(list any issues, or "None")
### Notes
(observations about quality, timing, etc.)
Mark each item with a check (passed) or note the failure. After the report, open test-output/batch/index.html in the browser if possible.
1---2name: pageclaw-batch-test3description: Run an automated end-to-end test of the pageclaw-batch pipeline using bundled fixtures. Validates batch generation with a small style matrix. Use to verify pageclaw-batch behavior after changes.4license: MIT5---6
7# Pageclaw Batch -- End-to-End Test
8
9Run the full `pageclaw-batch` pipeline on bundled fixtures and produce a test report.
10
11## Fixtures
12
13- **Style matrix:** `skills/pageclaw-batch-test/fixtures/style-matrix-test.yaml`
14- **Page-story:** `skills/pageclaw-test/fixtures/page-story-test.md` (shared with pageclaw-test)
15
16Read both files at the start. These are the only inputs for the entire test run.
17
18## Execution
19
201. **Override output directory.** All pageclaw-batch output must go to `test-output/batch/` instead of the default `output/`. Before invoking pageclaw-batch, create `test-output/batch/html/` and `test-output/batch/docs/`. When pageclaw-batch references `output/`, substitute `test-output/batch/` throughout.
21
222. **Invoke pageclaw-batch** with the test style matrix and the shared page-story. Run in autonomous mode -- do not wait for user confirmation at the summary table. The matrix contains 3 styles; expect 3 combinations.
23
243. **Do not ask the user any questions** during the run. If pageclaw-batch would normally ask for confirmation, proceed automatically.
25
26## Validation
27
28After the batch pipeline completes, run these checks against `test-output/batch/`.
29
30### Pipeline checks
31
32- Pre-flight: style matrix parsed, page-story found, output dirs created.
33- Parse Inputs: 3 styles detected, 1 page-story, 3 combinations listed.
34- Each style (`01-sidebar-brutalist`, `02-col-whitespace`, `03-topnav-editorial`): all steps A-E completed without error.
35- Master Index: `test-output/batch/index.html` generated.
36
37### Artifact checks (repeat for each style `<id>`)
38
39- `test-output/batch/docs/<id>-design.md` exists, contains `## Design Context` and `## Design System`.
40- `test-output/batch/docs/<id>-impl.md` exists, contains a task-by-task plan.
41- `test-output/batch/html/<id>.html` exists, is valid HTML (has `<!DOCTYPE html>` or `<html`).
42- HTML uses CSS custom properties (`--bg`, `--fg`, `--accent`, etc. per Technical Contract).
43- HTML has a light/dark mode toggle with `[data-theme="dark"]` override block.
44- HTML is responsive (no fixed widths exceeding `100vw`).
45- Zero raw hex/rgb values outside `:root` and `[data-theme="dark"]` blocks.
46- Layout structure matches the style matrix `layout` field.
47- Design intent from the style matrix is reflected in the visual output.
48
49### Master index checks
50
51- `test-output/batch/index.html` exists.
52- Contains links to all 3 generated HTML files.
53- Has its own light/dark mode toggle.
54
55## Test Report
56
57Print the following report after validation:
58
59```
60## Pageclaw Batch Test Report
61
62### Pipeline
63- [ ] Pre-flight: passed / FAILED
64- [ ] Parse Inputs: passed / FAILED
65- [ ] Style 01-sidebar-brutalist: completed / FAILED
66- [ ] Style 02-col-whitespace: completed / FAILED
67- [ ] Style 03-topnav-editorial: completed / FAILED
68- [ ] Master Index: generated / FAILED
69
70### Artifact Checks
71For each style <id>:
72- [ ] output/docs/<id>-design.md exists and contains ## Design Context + ## Design System
73- [ ] output/docs/<id>-impl.md exists and contains task-by-task plan
74- [ ] output/html/<id>.html exists and is valid HTML
75- [ ] HTML has CSS custom properties (--bg, --fg, --accent, etc.)
76- [ ] HTML has light/dark mode toggle with [data-theme="dark"] block
77- [ ] HTML is responsive (no fixed widths > 100vw)
78- [ ] Zero raw hex/rgb outside :root and [data-theme="dark"]
79- [ ] Layout matches style-matrix layout field
80- [ ] Design intent reflected in visual output
81
82### Master Index Check
83- [ ] output/index.html exists
84- [ ] Links to all generated HTML files
85- [ ] Has light/dark mode toggle
86
87### Violations
88(list any issues, or "None")
89
90### Notes
91(observations about quality, timing, etc.)
92```
93
94Mark each item with a check (passed) or note the failure. After the report, open `test-output/batch/index.html` in the browser if possible.
XY-Showing