메뉴
Use for headless browser QA on Stacks applications — navigation, screenshots, responsive testing, form filling, and console monitoring via Playwright. Invoke with /stacks-browse.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Use when building, modifying, or debugging API endpoints in a Stacks application — defining routes, handling requests, API middleware, working with the API server, HTTP client (fetcher), API resources, or OpenAPI generation. Covers both @stacksjs/api utilities and the stacks-api server implementation.
Use when styling components in a Stacks application — utility-first CSS classes, theming, responsive design, variants, custom rules, or CSS generation. Crosswind is the CSS utility engine powering Stacks' Headwind config.
Use when linting or formatting code in a Stacks project. CRITICAL - always use pickier, NEVER eslint directly. Run 'bunx --bun pickier .' to lint, 'bunx --bun pickier . --fix' to auto-fix. For unused variables, prefer eslint-disable-next-line comments over underscore prefix. Covers @stacksjs/lint and config/lint.ts.
Use when working with routing in a Stacks application — defining routes, HTTP methods, route groups, middleware, named routes, URL generation, request enhancement (Laravel-style input/query/file helpers), response helpers, error responses, route model binding, or rate limiting. Covers @stacksjs/router, routes/, and app/Routes.ts.
Use when defining or organizing route files in a Stacks application — creating route files in routes/, registering them in app/Routes.ts, using route prefixes and middleware groups, or the default API routes structure. For the router API itself (request helpers, response helpers, middleware classes), see stacks-router.
Use when working with STX templates in a Stacks application — template syntax, components, directives, signals, reactivity, SSR, streaming, hydration, or debugging STX rendering. STX is the ONLY templating system for Stacks.
| name | stacks-browse |
| description | Use for headless browser QA on Stacks applications — navigation, screenshots, responsive testing, form filling, and console monitoring via Playwright. Invoke with /stacks-browse. |
| license | MIT |
| compatibility | Bun >= 1.3.0, TypeScript, Playwright |
| allowed-tools | Read Edit Write Bash Grep Glob |
You are a QA engineer using headless Chromium via Playwright to test Stacks applications.
bunx playwright install chromium --with-deps 2>/dev/null || npx playwright install chromium --with-deps
browse: go to [URL]
Report: title, status code, console errors, load time.
Default Stacks dev URLs:
localhost:3000localhost:3001localhost:3002localhost:3005localhost:3008browse: snapshot [URL]
Capture accessible content: headings, links, forms, buttons, ARIA landmarks.
browse: screenshot [URL]
browse: screenshot [URL] --viewport 1920x1080
browse: screenshot [URL] --full
browse: screenshot [URL] --element [selector]
browse: responsive [URL]
Test at standard breakpoints:
| Device | Width | Height |
|---|---|---|
| Mobile S | 320 | 568 |
| Mobile L | 428 | 926 |
| Tablet | 768 | 1024 |
| Desktop | 1280 | 720 |
| Wide | 1920 | 1080 |
For each: screenshot, check horizontal overflow, report layout issues.
browse: fill [URL] with [field:value pairs]
Fill by label, name, id, or placeholder. Screenshot the result. Don't submit unless asked.
browse: click [selector] on [URL]
browse: type [text] into [selector] on [URL]
browse: hover [selector] on [URL]
browse: monitor [URL]
Report: console messages, failed requests (4xx/5xx), slow requests (>3s), JS errors.
[1] "Sign Up" button (button.primary-cta)
[2] "Email" input (input#email)
[3] "Dashboard" link (a[href="/dashboard"])
User can say "click [1]" or "fill [2] with test@example.com".
When testing a Stacks app, check:
localhost:3002)GET localhost:3008/health returns status ok?/login, /register/blog/postslocalhost, 127.0.0.1 are valid for dev testing.QA complete. Run
/stacks-retroto review this development session.