CalvinBackup/gstack
1
0
Fork 0
mirror of https://github.com/garrytan/gstack.git synced 2026-09-12 16:08:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor(design): design-review, design-consultation, design-shotgun, plan-design-review, design-html drive Aside

Browse Source 
Design-system extraction is one script printing FONTS/COLORS/HEADINGS/TOUCH_TARGETS/NAV; competitor research confirms the exact URLs before opening them in the real browser and runs on the bundled browser when Aside is absent; design-html's viewport screenshots, sketches and comparison boards render through gstack-render.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Sina
2026-09-05 16:48:37 -04:00
co-authored by Claude Fable 5.1
parent 181f9d863b
commit 27e38cbeec
7 changed files with 282 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
design-html/SKILL.md.tmpl
+14 -9
View File
@@ -49,8 +49,6 @@ around obstacles.
{{SECTION:doctrine}}
{{BROWSE_SETUP}}
---
## Step 0: Input Detection
@@ -325,13 +323,17 @@ kill $_SERVER_PID 2>/dev/null || true
### Verification Screenshots
If `$B` is available (browse binary), take verification screenshots at 3 viewports:
Take verification screenshots at 3 viewports. One `gstack-render` call serves
the HTML's directory on 127.0.0.1 (so relative assets resolve), opens the page
in the Aside browser when it is running — otherwise in gstack's own headless
browser (the first output line, `ENGINE=aside` or `ENGINE=browse`, says which)
— and captures each width:
```bash
$B goto "file://<path-to-finalized.html>"
$B screenshot /tmp/gstack-verify-mobile.png --width 375
$B screenshot /tmp/gstack-verify-tablet.png --width 768
$B screenshot /tmp/gstack-verify-desktop.png --width 1440
bun run ~/.claude/skills/gstack/bin/gstack-render.ts <path-to-finalized.html> \
--screenshot /tmp/gstack-verify-mobile.jpg --width 375 --jpeg \
--screenshot /tmp/gstack-verify-tablet.jpg --width 768 --jpeg \
--screenshot /tmp/gstack-verify-desktop.jpg --width 1440 --jpeg
```
Show all three screenshots inline using the Read tool. Check for:
@@ -341,8 +343,11 @@ Show all three screenshots inline using the Read tool. Check for:
If issues are found, note them and fix before presenting to the user.
If `$B` is not available, skip verification and note:
"Browse binary not available. Skipping automated viewport verification."
Only if `gstack-render` prints `NEEDS_ASIDE` or `ASIDE_NOT_RUNNING` followed by
`ERROR: no browser available` (Aside is not open AND gstack's own browser is not
built), skip verification and note: "No browser available (open the Aside app,
or run ./setup in the gstack repo to build gstack's browser). Skipping automated
viewport verification." Never install either for the user.
### Refinement Loop