gstack

Category: Tools & Productivity | Uploader: lucas-flatwhite | Downloads: 0 | Version: v1.0（Latest）

gstack browse 모드. 지속형 헤드리스 브라우저로 QA 테스트, 사용자 플로우 검증, 스크린샷/증거 수집, 상태 점검을 수행합니다.

Changelog: Source: GitHub https://github.com/lucas-flatwhite/gstack-ko

Directory Structure

Current level: Root

📁 .github/
- 📁 workflows/
  - 📄 skill-docs.yml 365 B
📁 bin/
- 📄 dev-setup 1.9 KB
- 📄 dev-teardown 946 B
- 📄 gstack-update-check 3.0 KB
📁 browse/
- 📁 bin/
  - 📄 find-browse 722 B
- 📁 src/
  - 📄 browser-manager.ts 14.6 KB
  - 📄 buffers.ts 4.2 KB
  - 📄 cli.ts 10.7 KB
  - 📄 commands.ts 7.6 KB
  - 📄 config.ts 2.9 KB
  - 📄 cookie-import-browser.ts 15.3 KB
  - 📄 cookie-picker-routes.ts 7.5 KB
  - 📄 cookie-picker-ui.ts 16.4 KB
  - 📄 find-browse.ts 1.6 KB
  - 📄 meta-commands.ts 7.5 KB
  - 📄 read-commands.ts 10.4 KB
  - 📄 server.ts 13.3 KB
  - 📄 snapshot.ts 14.7 KB
  - 📄 write-commands.ts 11.2 KB
- 📁 test/
  - 📁 fixtures/
    
    📄 basic.html 914 B
    
    📄 cursor-interactive.html 883 B
    
    📄 dialog.html 603 B
    
    📄 empty.html 43 B
    
    📄 forms.html 1.8 KB
    
    📄 responsive.html 1.4 KB
    
    📄 snapshot.html 1.5 KB
    
    📄 spa.html 638 B
    
    📄 states.html 567 B
    
    📄 upload.html 849 B
  - 📄 commands.test.ts 57.5 KB
  - 📄 config.test.ts 4.9 KB
  - 📄 cookie-import-browser.test.ts 16.1 KB
  - 📄 cookie-picker-routes.test.ts 7.4 KB
  - 📄 find-browse.test.ts 782 B
  - 📄 gstack-update-check.test.ts 7.7 KB
  - 📄 snapshot.test.ts 17.6 KB
  - 📄 test-server.ts 2.3 KB
- 📄 SKILL.md 4.2 KB
- 📄 SKILL.md.tmpl 3.0 KB
📁 gstack-upgrade/
- 📄 SKILL.md 3.1 KB
📁 plan-ceo-review/
- 📄 SKILL.md 37.1 KB
📁 plan-eng-review/
- 📄 SKILL.md 12.5 KB
📁 qa/
- 📁 references/
  - 📄 issue-taxonomy.md 4.1 KB
- 📁 templates/
  - 📄 qa-report-template.md 1.8 KB
- 📄 SKILL.md 13.4 KB
- 📄 SKILL.md.tmpl 12.0 KB
📁 retro/
- 📄 SKILL.md 19.2 KB
📁 review/
- 📄 checklist.md 7.7 KB
- 📄 greptile-triage.md 4.3 KB
- 📄 SKILL.md 5.0 KB
📁 scripts/
- 📄 dev-skill.ts 2.4 KB
- 📄 gen-skill-docs.ts 7.6 KB
- 📄 skill-check.ts 3.7 KB
📁 setup-browser-cookies/
- 📄 SKILL.md 3.5 KB
- 📄 SKILL.md.tmpl 2.0 KB
📁 ship/
- 📄 SKILL.md 14.1 KB
📁 test/
- 📁 helpers/
  - 📄 session-runner.ts 5.0 KB
  - 📄 skill-parser.ts 3.4 KB
- 📄 gen-skill-docs.test.ts 6.7 KB
- 📄 skill-e2e.test.ts 6.2 KB
- 📄 skill-llm-eval.test.ts 8.2 KB
- 📄 skill-parser.test.ts 5.3 KB
- 📄 skill-validation.test.ts 6.2 KB
📄 .env.example 171 B
📄 .gitignore 127 B
📄 ARCHITECTURE.md 13.9 KB
📄 BROWSER.md 15.5 KB
📄 CHANGELOG.md 4.2 KB
📄 CLAUDE.md 3.3 KB
📄 conductor.json 87 B
📄 CONTRIBUTING.md 10.2 KB
📄 LICENSE 1.0 KB
📄 package.json 1.6 KB
📄 README.md 35.1 KB
📄 setup 2.8 KB
📄 SKILL.md 4.5 KB
📄 SKILL.md.tmpl 6.1 KB
📄 TODO.md 7.2 KB
📄 TODOS.md 1.8 KB
📄 VERSION 6 B

SKILL.md

---
name: gstack
version: 1.1.0
description: |
  gstack browse 모드. 지속형 헤드리스 브라우저로 QA 테스트, 사용자 플로우 검증,
  스크린샷/증거 수집, 상태 점검을 수행합니다.
allowed-tools:
  - Bash
  - Read
  - AskUserQuestion
---

## Update Check (먼저 실행)

```bash
_UPD=$(~/.claude/skills/gstack/bin/gstack-update-check 2>/dev/null || .claude/skills/gstack/bin/gstack-update-check 2>/dev/null || true)
[ -n "$_UPD" ] && echo "$_UPD" || true
```

출력이 `UPGRADE_AVAILABLE <old> <new>`이면 `~/.claude/skills/gstack/gstack-upgrade/SKILL.md`를 읽고 "Inline upgrade flow"를 따릅니다 (업그레이드 여부를 AskUserQuestion으로 확인. 업그레이드하지 않으면 `touch ~/.gstack/last-update-check`).
`JUST_UPGRADED <from> <to>`이면 `gstack v{to}로 실행 중(방금 업데이트됨)`을 알리고 계속합니다.

# gstack browse: QA 테스트 및 도그푸딩

지속형 헤드리스 Chromium입니다. 첫 호출은 자동 시작(~3초), 이후 커맨드당 약 100ms입니다.
상태(쿠키, 탭, 로그인 세션)가 호출 간 유지됩니다.

## SETUP (browse 커맨드 전에 반드시 실행)

```bash
_ROOT=$(git rev-parse --show-toplevel 2>/dev/null)
B=""
[ -n "$_ROOT" ] && [ -x "$_ROOT/.claude/skills/gstack/browse/dist/browse" ] && B="$_ROOT/.claude/skills/gstack/browse/dist/browse"
[ -z "$B" ] && B=~/.claude/skills/gstack/browse/dist/browse
if [ -x "$B" ]; then
  echo "READY: $B"
else
  echo "NEEDS_SETUP"
fi
```

`NEEDS_SETUP`인 경우:
1. 사용자에게 "gstack browse는 1회 빌드가 필요합니다(~10초). 진행할까요?"라고 묻고 대기합니다.
2. `cd <SKILL_DIR> && ./setup` 실행.
3. `bun`이 없으면 `curl -fsSL https://bun.sh/install | bash` 실행.

## 핵심 QA 패턴

### 사용자 플로우 검증

```bash
$B goto https://app.example.com/login
$B snapshot -i
$B fill @e3 "user@example.com"
$B fill @e4 "password"
$B click @e5
$B snapshot -D
$B is visible ".dashboard"
```

### 액션 전후 변화 검증

```bash
$B snapshot
$B click @e3
$B snapshot -D
```

### 버그 증거 수집

```bash
$B snapshot -i -a -o /tmp/annotated.png
$B screenshot /tmp/bug.png
$B console --errors
```

## Snapshot Flags

`snapshot`은 페이지 구조 이해와 상호작용 대상 식별의 기본 도구입니다.

```
-i        --interactive           대화형 요소만(@e ref)
-c        --compact               빈 구조 노드 제외
-d <N>    --depth                 트리 깊이 제한 (0=root만)
-s <sel>  --selector              CSS 셀렉터 범위로 제한
-D        --diff                  이전 snapshot 대비 unified diff
-a        --annotate              ref 라벨이 있는 주석 스크린샷
-o <path> --output                주석 스크린샷 저장 경로
-C        --cursor-interactive    cursor-interactive 요소(@c ref)
```

- 플래그 조합 가능. (`-o`는 `-a`와 함께 사용할 때만 유효)
- 예시: `$B snapshot -i -a -C -o /tmp/annotated.png`
- 스냅샷 후 @ref를 셀렉터처럼 사용할 수 있습니다.

```bash
$B click @e3       $B fill @e4 "value"     $B hover @e1
$B html @e2        $B css @e5 "color"      $B attrs @e6
$B click @c1
```

네비게이션(`goto`) 후에는 ref가 무효화되므로 snapshot을 다시 실행합니다.

## Command Reference

### Navigation
- `goto <url>`: URL 이동
- `back`, `forward`, `reload`, `url`

### Reading
- `text`, `html [selector]`, `links`, `forms`, `accessibility`

### Interaction
- `click`, `fill`, `select`, `hover`, `type`, `press`, `scroll`
- `wait <sel|--networkidle|--load>`
- `upload <sel> <file> [file2...]`
- `viewport <WxH>`, `useragent <string>`
- `cookie <name>=<value>`, `cookie-import <json>`
- `cookie-import-browser [browser] [--domain d]`
- `header <name>:<value>`
- `dialog-accept [text]`, `dialog-dismiss`

### Inspection
- `js <expr>`, `eval <file>`
- `css <sel> <prop>`, `attrs <sel|@ref>`, `is <prop> <sel>`
- `console [--clear|--errors]`, `network [--clear]`, `dialog [--clear]`
- `cookies`, `storage [set k v]`, `perf`

### Visual
- `screenshot [path]`, `pdf [path]`, `responsive [prefix]`
- `diff <url1> <url2>`

### Snapshot / Meta / Tabs / Server
- `snapshot [flags]`
- `chain` (JSON stdin)
- `tabs`, `tab <id>`, `newtab [url]`, `closetab [id]`
- `status`, `restart`, `stop`

## 운영 팁

- 상호작용 직후 `console --errors`를 습관적으로 확인합니다.
- 접근성 트리에서 놓치는 클릭 가능한 div 탐색은 `snapshot -C`를 사용합니다.
- 재현/보고 품질을 위해 스크린샷은 `/tmp` 또는 프로젝트 내 경로에 저장합니다.

Comments 0

Latest | Hot

Please login before commenting.

No comments yet. Be the first one!

gstack

Directory Structure

SKILL.md

Report

Notice