devlyn-cli 1.4.0 → 1.5.1

package/config/skills/devlyn:browser-validate/SKILL.md

@@ -35,12 +35,32 @@ $ARGUMENTS
    - `--port PORT` — override detected port
    - `--tier N` — force a specific tier (1, 2, or 3)
    - `--mobile-only` / `--desktop-only` — limit viewport testing
+   - `--topic SLUG` — override the auto-derived screenshot topic slug
+
+8. **Derive the screenshot topic slug**. All screenshots for this run go under `.devlyn/screenshots/<topic-slug>/` so runs for different features don't pile up together. Resolution order:
+   1. `--topic` flag value, kebab-cased
+   2. First non-blank heading/line of `.devlyn/done-criteria.md` (strip `#`, kebab-case, max 40 chars)
+   3. Current git branch name, if not `main`/`master`/`HEAD`
+   4. Fallback: `run-<YYYYMMDD-HHMM>`
+
+   Then wipe and recreate the topic dir (fresh evidence per run; don't touch other topics' dirs):
+   ```bash
+   SCREENSHOT_DIR=".devlyn/screenshots/<topic-slug>"
+   rm -rf "$SCREENSHOT_DIR"
+   mkdir -p "$SCREENSHOT_DIR"/{smoke,feature,visual}
+   ```
+
+   Record `$SCREENSHOT_DIR` and reuse it through the run. All screenshot paths below are **relative to `$SCREENSHOT_DIR`**:
+   - Smoke: `smoke/<route-slug>.png` (root → `smoke/root.png`)
+   - Feature: `feature/<criterion-slug>-step<N>.png`
+   - Visual: `visual/<viewport>-<route-slug>.png` (e.g., `visual/mobile-dashboard.png`)
 
 Announce:
 ```
 Browser validation starting
 Feature: [what was built, from done-criteria or git diff]
 Framework: [detected] | Port: [PORT] | Tier: [N — name]
+Topic: [topic-slug] → .devlyn/screenshots/<topic-slug>/
 Phases: Server → Smoke → Feature Test → Visual → Report
 ```
 

package/config/skills/devlyn:browser-validate/references/tier1-chrome.md

@@ -71,7 +71,12 @@ Identify fields with `find` first, then use `form_input` with the field selector
 ```
 computer → screenshot action captures the visible viewport
 ```
-Save screenshots with descriptive names: `smoke-root.png`, `flow-create-project-step3.png`, `visual-mobile-dashboard.png`.
+Save screenshots into the topic-scoped directory that PHASE 1 set up (`.devlyn/screenshots/<topic-slug>/`), organized by phase:
+- Smoke: `<topic>/smoke/<route>.png` — e.g., `smoke/root.png`, `smoke/dashboard.png`
+- Feature: `<topic>/feature/<criterion>-step<N>.png` — e.g., `feature/create-project-step3.png`
+- Visual: `<topic>/visual/<viewport>-<route>.png` — e.g., `visual/mobile-dashboard.png`
+
+Since `computer → screenshot` writes to a default location, move/rename the captured file into the right subdirectory immediately after taking it, so evidence paths in the report match this scheme.
 
 ### Resize viewport
 ```

package/config/skills/devlyn:browser-validate/references/tier2-playwright.md

@@ -89,7 +89,10 @@ test.describe('Smoke Tests', () => {
       const pageUrl = page.url();
       expect(title, 'Page shows a browser error — server may be down').not.toBe(pageUrl);
 
-      await page.screenshot({ path: `.devlyn/screenshots/smoke${route.replace(/\//g, '-') || '-root'}.png`, fullPage: true });
+      await page.screenshot({ path: `${SCREENSHOT_DIR}/smoke/${route.replace(/^\//, '').replace(/\//g, '-') || 'root'}.png`, fullPage: true });
+      // SCREENSHOT_DIR is the topic-scoped dir set up in PHASE 1 of SKILL.md
+      // (e.g., .devlyn/screenshots/add-login-page). Inject it at test-generation
+      // time so every test writes into the same per-run folder.
 
       if (errors.length > 0) {
         test.info().annotations.push({ type: 'console_errors', description: errors.join(' | ') });
@@ -123,7 +126,7 @@ test('flow: [criterion description]', async ({ page }) => {
   await expect(page.locator('[verification selector]')).toBeVisible();
 
   // Screenshot
-  await page.screenshot({ path: '.devlyn/screenshots/flow-[name].png' });
+  await page.screenshot({ path: `${SCREENSHOT_DIR}/feature/[criterion-slug]-step[N].png` });
 });
 ```
 
@@ -135,7 +138,7 @@ test.describe('Visual - Mobile', () => {
   for (const route of ROUTES) {
     test(`visual-mobile: ${route}`, async ({ page }) => {
       await page.goto(`http://localhost:${PORT}${route}`, { waitUntil: 'networkidle' });
-      await page.screenshot({ path: `.devlyn/screenshots/visual-mobile${route.replace(/\//g, '-') || '-root'}.png`, fullPage: true });
+      await page.screenshot({ path: `${SCREENSHOT_DIR}/visual/mobile-${route.replace(/^\//, '').replace(/\//g, '-') || 'root'}.png`, fullPage: true });
     });
   }
 });
@@ -145,7 +148,7 @@ test.describe('Visual - Desktop', () => {
   for (const route of ROUTES) {
     test(`visual-desktop: ${route}`, async ({ page }) => {
       await page.goto(`http://localhost:${PORT}${route}`, { waitUntil: 'networkidle' });
-      await page.screenshot({ path: `.devlyn/screenshots/visual-desktop${route.replace(/\//g, '-') || '-root'}.png`, fullPage: true });
+      await page.screenshot({ path: `${SCREENSHOT_DIR}/visual/desktop-${route.replace(/^\//, '').replace(/\//g, '-') || 'root'}.png`, fullPage: true });
     });
   }
 });
@@ -154,7 +157,7 @@ test.describe('Visual - Desktop', () => {
 ## Execution
 
 ```bash
-mkdir -p .devlyn/screenshots
+mkdir -p "$SCREENSHOT_DIR"/{smoke,feature,visual}
 npx playwright test .devlyn/browser-test.spec.ts \
   --reporter=json \
   --output=.devlyn/playwright-results \
@@ -182,7 +185,7 @@ rm -rf .devlyn/playwright-results
 rm -f .devlyn/playwright-output.json
 ```
 
-Keep `.devlyn/screenshots/` — those are evidence referenced by the report.
+Keep `$SCREENSHOT_DIR` (`.devlyn/screenshots/<topic-slug>/`) — those are evidence referenced by the report. Don't touch other topics' directories.
 
 ## Limitations vs Tier 1
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devlyn-cli",
-  "version": "1.4.0",
+  "version": "1.5.1",
   "description": "Claude Code configuration toolkit for teams",
   "bin": {
     "devlyn": "bin/devlyn.js"