darkwatch/.claude/skills/update-brochure.md

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:

   <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:

   cd site && node screenshots.js --only feature-name
   

4. Commit all three files:

   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:

   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:

   <!-- Before (Shadowdark only): -->
   <p>Currently: Shadowdark RPG &nbsp;·&nbsp; Next: based on demand</p>
   
   <!-- After (example with Cairn added): -->
   <p>Currently: Shadowdark RPG &nbsp;·&nbsp; Cairn &nbsp;·&nbsp; 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.