87 lines
3.2 KiB
Markdown
87 lines
3.2 KiB
Markdown
# update-brochure
|
|
|
|
Use this skill when a Darkwatch feature is added, changed, or removed, and the brochure needs updating. It keeps `site/index.html` and `site/screenshots.js` in sync with the app.
|
|
|
|
## Scope
|
|
|
|
- `site/index.html` — add, update, or remove feature rows
|
|
- `site/screenshots.js` — add, update, or remove capture blocks
|
|
- System support strip in `site/index.html` — update when a new RPG system is added
|
|
|
|
**Not in scope:** Hero copy, publisher section copy, footer links. Those are editorial and manual.
|
|
|
|
## Process: Feature added
|
|
|
|
1. Add a new `.feature-row` block to `site/index.html` after the last existing feature row (before the `.callout-row`). Follow the alternating pattern:
|
|
- Rows 1, 3, 5, 7 (odd positions): screenshot on the left, text on the right (no `reverse` class)
|
|
- Rows 2, 4, 6 (even positions): `class="feature-row reverse"` (screenshot right, text left)
|
|
- Count existing rows to determine whether to add `reverse` or not
|
|
|
|
Template for a new row:
|
|
```html
|
|
<div class="feature-row">
|
|
<div class="feature-image">
|
|
<img src="assets/screenshots/FEATURE-NAME.png" alt="Description of screenshot">
|
|
</div>
|
|
<div class="feature-text">
|
|
<div class="feature-label">Short Label</div>
|
|
<h2 class="feature-heading">Punchy headline.</h2>
|
|
<p class="feature-desc">
|
|
Two sentences. Write for players and DMs, not developers.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
2. Add a capture block to `site/screenshots.js`:
|
|
- Write a `captureFeatureName(page)` async function that navigates to the right UI state
|
|
- Add `await shot(page, 'feature-name', captureFeatureName);` to the `run()` function, in the same order as the HTML row
|
|
|
|
3. Run the screenshot script for the new capture:
|
|
```bash
|
|
cd site && node screenshots.js --only feature-name
|
|
```
|
|
|
|
4. Commit all three files:
|
|
```bash
|
|
git add site/index.html site/screenshots.js site/assets/screenshots/feature-name.png
|
|
git commit -m "docs: add [feature name] to brochure"
|
|
```
|
|
|
|
## Process: Feature removed
|
|
|
|
1. Delete the feature's `.feature-row` block from `site/index.html`
|
|
2. Recheck alternating pattern — renumber remaining rows if needed
|
|
3. Delete the `capture*` function and `shot()` call from `site/screenshots.js`
|
|
4. Delete the PNG from `site/assets/screenshots/`
|
|
5. Commit
|
|
|
|
## Process: Feature changed (copy update only)
|
|
|
|
1. Update the heading and description in the relevant `.feature-row` in `site/index.html`
|
|
2. Re-run the screenshot if the UI changed visually:
|
|
```bash
|
|
cd site && node screenshots.js --only feature-name
|
|
```
|
|
3. Commit
|
|
|
|
## Process: New RPG system added
|
|
|
|
1. Update the system support strip in `site/index.html`:
|
|
```html
|
|
<!-- Before (Shadowdark only): -->
|
|
<p>Currently: Shadowdark RPG · Next: based on demand</p>
|
|
|
|
<!-- After (example with Cairn added): -->
|
|
<p>Currently: Shadowdark RPG · Cairn · More based on demand</p>
|
|
```
|
|
2. Commit
|
|
|
|
## Tone guidelines
|
|
|
|
Write feature descriptions for players and DMs, not developers.
|
|
|
|
- ✓ "Everyone rolls. The tracker takes the party's highest result."
|
|
- ✗ "The server computes max(party_rolls) and compares to the enemy roll."
|
|
|
|
Keep headings punchy and short. Keep descriptions to two sentences max.
|