AUTHORITATIVE REFERENCE for WebWorks Reverb 2.0 output. Use when testing Reverb output in browser, analyzing CSH links, customizing SCSS themes, inspecting url_maps.xml, or generating test reports.
/plugin marketplace add quadralay/webworks-claude-skills/plugin install webworks-claude-skills@webworks-claude-skillsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
package.jsonscripts/browser-test.jsscripts/detect-chrome.shscripts/detect-entry-point.shscripts/extract-scss-variables.pyscripts/generate-color-override.shscripts/generate-report.pyscripts/parse-url-maps.pyscripts/setup-dependencies.shtemplates/build-report.jsontemplates/test-results.jsonworkflows/browser-testing.mdworkflows/csh-analysis.mdworkflows/generate-report.mdworkflows/scss-theming.mdAnalysis, testing, and customization tools for WebWorks Reverb 2.0 output. Includes browser-based testing, CSH link analysis, and SCSS theming. </objective>
<overview>Reverb 2.0 is a responsive HTML5 help system with:
<related_skills>
| Skill | Relationship |
|---|---|
| epublisher | Use to understand project structure before testing |
| automap | Use to rebuild output after SCSS customizations |
After customizing themes: Use the automap skill to rebuild:
./automap-wrapper.sh -c -n -t "WebWorks Reverb 2.0" project.wep
</related_skills>
<intake>Wait for response before proceeding. </intake>
<routing>| Response | Workflow |
|---|---|
| 1, "test", "browser" | workflows/browser-testing.md |
| 2, "csh", "links" | workflows/csh-analysis.md |
| 3, "scss", "theme", "colors" | workflows/scss-theming.md |
| 4, "report" | workflows/generate-report.md |
| Feature | Script | Description |
|---|---|---|
| Browser Testing | browser-test.js | Load output in headless Chrome, check for errors |
| CSH Analysis | parse-url-maps.sh | Extract topic mappings from url_maps.xml |
| SCSS Theming | extract-scss-variables.sh | Read current theme values |
| Color Override | generate-color-override.sh | Generate brand color files |
| Entry Detection | detect-entry-point.sh | Find output location from project |
| Report Generation | generate-report.sh | Create formatted test reports |
<browser_testing>
node scripts/browser-test.js <chrome-path> <entry-url> [format-settings-json]
Parcels.loaded_all === true)| Component | DOM ID | Presence Check |
|---|---|---|
| Toolbar | #toolbar_div | childNodes.length > 0 |
| Header | #header_div | childNodes.length > 0 |
| Footer | #footer_div | childNodes.length > 0 OR #ww_skin_footer exists |
| TOC | #toc | childNodes.length > 0 |
| Content | #page_div | Contains #page_iframe |
{
"success": true,
"reverbLoaded": true,
"loadTime": 1039,
"errors": [],
"warnings": [],
"components": {
"toolbar": { "present": true, "searchPresent": true },
"header": { "present": true },
"footer": { "present": false, "type": "none" },
"toc": { "present": true, "itemCount": 35 },
"content": { "present": true, "hasIframe": true }
}
}
</browser_testing>
<csh_analysis>
./scripts/parse-url-maps.sh <url-maps-file> [format]
Format: json (default) or table
<TopicMap>
<Topic topic="whats_new"
path="Getting Started\whats_new.html"
href="index.html#context/whats_new"
title="What's New"/>
</TopicMap>
| Attribute | Description |
|---|---|
@topic | CSH identifier |
@href | Pretty URL (JavaScript-based) |
@path | Static URL (direct HTML path) |
@title | Display name |
| </csh_analysis> |
<scss_customization>
Reverb uses 6 "neo" variables for quick theming:
$neo_main_color: #008bff; // Primary (toolbar, buttons, links)
$neo_main_text_color: #222222; // Text on primary
$neo_secondary_color: #eeeeee; // Sidebar background
$neo_secondary_text_color: #fefefe; // Text on dark backgrounds
$neo_tertiary_color: #222222; // Header/footer background
$neo_page_color: #fefefe; // Page background
./scripts/extract-scss-variables.sh <project-dir> [category]
Categories: neo, layout, toolbar, header, footer, menu, sizes
./scripts/generate-color-override.sh <output-path> \
--main-color "#E63946" \
--main-text "#FFFFFF" \
--secondary-color "#F1FAEE" \
--secondary-text "#1D3557" \
--tertiary-color "#457B9D" \
--page-color "#F1FAEE"
Override priority (highest first):
[Project]/Targets/[Target]/Pages/sass/_colors.scss[Project]/Formats/WebWorks Reverb 2.0/Pages/sass/_colors.scss[Project]/Formats/WebWorks Reverb 2.0.base/Pages/sass/_colors.scss
</scss_customization>| Template | Purpose |
|---|---|
templates/build-report.json | Structured build output with project, target, status, errors/warnings |
templates/test-results.json | Browser test results with component presence and CSH validation |
Use these templates as the canonical structure for script output and report generation. </templates>
<scripts>Installs Node.js dependencies for browser testing.
# Install dependencies (run once)
./scripts/setup-dependencies.sh
Prerequisites:
Exit codes:
cd skills/reverb
npm install
Installs puppeteer-core for headless Chrome automation.
Browser testing requires Chrome. Detect with:
./scripts/detect-chrome.sh
<common_workflows>
# 1. Detect entry point
PROJECT_INFO=$(./scripts/detect-entry-point.sh project.wep)
# 2. Run browser test
TEST_RESULTS=$(node scripts/browser-test.js "$CHROME" "$ENTRY_URL")
# 3. Parse CSH
CSH_DATA=$(./scripts/parse-url-maps.sh output/url_maps.xml)
# 4. Generate report
./scripts/generate-report.sh project.wep "$PROJECT_INFO" "$CSH_DATA" "$TEST_RESULTS"
# 1. Check current colors
./scripts/extract-scss-variables.sh /path/to/project neo
# 2. Generate override
./scripts/generate-color-override.sh \
/path/to/project/Formats/WebWorks\ Reverb\ 2.0/Pages/sass/_colors.scss \
--main-color "#0052CC" --main-text "#FFFFFF"
# 3. Rebuild with automap skill
</common_workflows>
<troubleshooting>Cause: Chrome/Chromium not installed or not in expected location.
Solutions:
CHROME_PATH environment variableCause: Reverb output failed to initialize within timeout.
Solutions:
TIMEOUT=60000 node browser-test.js ...Cause: CSH link file doesn't exist in output.
Solutions:
[Output]/wwhdata/common/ directoryCause: Invalid SCSS syntax in customization file.
Solutions:
--validate-only flag to check before copying<success_criteria>
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.