본문으로 건너뛰기
cccskills
무료GitHub에 공개한국어 소개

browser

Superset 작업 공간의 브라우저에서 페이지를 열고 클릭하거나 입력하며, 화면과 콘솔 정보를 확인합니다. 개발 중인 웹 앱 미리 보기, 폼 동작 및 화면 이동 점검에 활용할 수 있습니다.

원문원문 설명 보기

Open, navigate, screenshot, read, click, and type in web pages from an agent. Use when the user asks to open a URL, preview or verify a running web app, check a page's console, fill a form, click through a web flow, or automate anything in a browser, including "open localhost:3000", "screenshot the page", "what does the console say", "click the submit button", "I'm logged in on Chrome". Drives the in-app browser pane of a Paradev (formerly Superset) workspace by default and Browser Use for browsers the panes cannot reach.

ParadevAI/Paradev스타 15,724(GitHub 15,724 + cccskills 0)

실행 점수 미검증

설치 방법 보기

이럴 때 유용합니다

  • 로컬 웹 앱 미리 보기
  • 페이지 화면 캡처
  • 콘솔 오류 확인
  • 폼과 화면 이동 점검
  • 동의를 받아 로그인 정보 가져오기

한국어 소개

할 수 있는 일

이 스킬은 Superset 작업 공간 안의 브라우저를 조작합니다. 페이지를 열어 읽고, 클릭하거나 글자를 입력하고, 스크롤할 수 있습니다. 작업 후에는 화면 캡처와 페이지 내용, 콘솔 출력을 살펴 상태를 확인합니다. 기본 브라우저 조작만으로 부족하면 CDP라는 브라우저 제어 연결을 사용할 수 있습니다.

이럴 때 유용합니다

개발 중인 웹 앱을 미리 보거나 폼 입력부터 화면 이동까지 동작을 확인할 때 유용합니다. 사용자가 보고 있는 것과 같은 브라우저 세션에서 화면 내용과 오류를 살펴봅니다. Superset 브라우저 창에서 접근할 수 없는 대상에는 Browser Use를 사용하는 절차도 자료에 나와 있습니다.

사용 예시

  • “localhost:3000을 열어 화면을 확인해 주세요.”
  • “이 페이지의 화면을 캡처해 주세요.”
  • “폼이 제대로 작동하는지 확인하고 콘솔 오류도 살펴봐 주세요.”

주의 사항

기본 브라우저 조작에는 호환되는 Superset CLI와 데스크톱 앱이 필요합니다. 로그인 정보 가져오기는 macOS의 Chromium 기반 브라우저에서만 가능하며, 선택한 프로필의 모든 쿠키를 복사하므로 사용자의 동의가 필요합니다. 폼 제출 같은 중요한 작업과 증거 이미지 공개는 사전 확인 대상입니다. 비밀번호와 다중 인증 정보는 사용자가 직접 입력합니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

문서 점검

AI가 SKILL.md의 내용에서 주의가 필요한 작업과 도입 전제를 확인했습니다. 점수는 실제로 실행한 결과(실행 검증)만으로 매깁니다.

안전성전송·삭제·명령 실행 등을 명시하고 있는가
A양호전체 쿠키 가져오기 동의, 중요 작업 확인, 사용자 직접 인증 정보 입력을 명시합니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가
B일부 부족호환되는 Superset CLI와 데스크톱 앱이 필요하며 로그인 가져오기는 macOS Chromium 브라우저로 제한됩니다.

점수에는 넣지 않았습니다. 2026년 10월 29일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

어느 항목이 왜 다르다고 생각하는지 적어 주세요. 로그인은 필요 없습니다. SKILL.md와 대조해 평가를 다시 만들고 이곳에 반영합니다.

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

포함된 파일(3)

  • SKILL.md12.2 KB
  • agents/openai.yaml241 B
  • references/browser-use.md5.2 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Paradev Browser Control

paradev is an alias for the superset CLI: every superset command here also runs as paradev.

Drive web pages through the browser panes inside a Paradev workspace with the superset browser commands. Every operation runs in the pane the user can see, against the pane's real, logged-in session. A raw Chrome DevTools Protocol (CDP) endpoint covers anything the high-level verbs don't.

Choose a surface

  • If a plain HTTP request or an API can answer (a public page, docs, a JSON endpoint), use curl or your fetch tool and skip the browser.
  • Default to the in-app pane whenever the page is, or can be, open in a workspace pane: previewing a dev server, verifying UI the user is watching, clicking through a flow in the app.
  • Use Browser Use only when the panes cannot reach the target: a Chrome window outside Paradev, a host with no desktop app attached (pane commands error clearly there), or work that needs an isolated or cloud browser. Read references/browser-use.md before using it; it covers install consent, attaching, and cleanup.

Browser Use can also drive a pane, and for three kinds of pane task it's the nicer tool: an open-ended goal to run end to end ("get through this signup"), a long multi-step flow on a shifting UI, or a recorded walkthrough. If one of those fits and Browser Use isn't installed, offer it once ("I can hand this to Browser Use, which drives multi-step flows more cleanly, but it's a one-minute install. Want that, or should I drive the pane directly?"), then respect the answer for the rest of the session, and hand a pane to Browser Use only after the user has said yes (the pane is their signed-in session and its CDP URL carries a token). Don't offer it for a screenshot, one eval, or a plain read; the pane verbs already cover those.

Establish the control surface

  1. Run superset schema 2>/dev/null | jq -re '.commands[] | select(.path==["browser"]) | .commands[].path[1]' || superset browser --help and require list, open, navigate, screenshot, eval, console, and cdp. The --help fallback covers a CLI older than 1.34.0 (no schema) and a machine without jq. If the verbs are absent, run superset update and recheck. The app-bundled CLI (~/.superset/bin/superset) updates only with the desktop app, so if it lacks browser, updating the app is the fix; check type -a superset for another install before giving up.
  2. Resolve the workspace. Inside a workspace, use $SUPERSET_WORKSPACE_ID; otherwise superset workspaces list --local --json and pick the target. Pass --host <id> for a remote host.
  3. Panes live in the desktop app. A host with no desktop attached (a standalone superset start) has no panes and every command errors clearly; surface that rather than retrying.

Find or open a pane

Every pane has a stable paneId, scoped to its workspace: pass the same --workspace you opened it under or the operation is rejected.

superset browser list --workspace <id> --json
superset browser open --workspace <id> --url https://example.com --json
superset browser open --workspace <id> --url http://localhost:3000 --target new-tab --json

--target new-tab opens a fresh tab and focuses it; the default current-tab reuses the active browser pane. Opening needs the workspace visible in the desktop app (the renderer creates the pane), so if it times out, ask the user to open the workspace.

Drive with the high-level verbs

# Point an existing pane at a new URL
superset browser navigate --workspace <id> --pane <paneId> --url https://…

# Capture a PNG (base64 by default; --out writes a file)
superset browser screenshot --workspace <id> --pane <paneId> --out shot.png

# Read the pane's captured console output
superset browser console --workspace <id> --pane <paneId> --max-lines 100

# Evaluate JavaScript in the page and return the result
superset browser eval --workspace <id> --pane <paneId> \
  --code "document.querySelector('h1')?.textContent"

Screenshot to see state, eval to read structured data (.textContent, .value = …, element.click(), location.href), console to check for page errors. Prefer these over raw CDP unless you need real input events. An eval expression that throws comes back as a command error, not a value. open and navigate accept only http(s) and about: URLs; bare input like localhost:3000 is upgraded, while file://, chrome://, and data: are rejected with a clear error.

Import logins from another browser

import-login copies a system browser's cookies into the pane so it's signed in to the sites the user already uses. It imports every cookie that profile has on disk, not just the one site, and panes share a profile, so say that when offering and run it only with the user's go-ahead. Offering it is how most users discover it, so reach for it in two cases:

  • The user says they're already signed in somewhere ("I'm logged in on Chrome", "use my Arc session", "it works in my browser"). Ask once before you navigate, and wait for a yes: "Want me to import your logins from <browser>? It copies all of that browser's cookies into the Paradev browser, not just this site." Naming the browser is not consent to the full scope; the yes to this question is.
  • A pane hits a login wall for a site the user uses in their own browser: suggest importing that login instead of stopping.

Prefer this over attaching Browser Use to their own browser: the work stays in the pane they can see. The user always picks the source browser; people run several Chromium browsers (Chrome, Edge, Brave, Arc, Dia, Comet) and only they know which holds the session. macOS only; it reads the browser's Keychain key (first run prompts them to allow it) and never modifies the source browser. On another OS, or for a non-Chromium browser like Safari or Firefox, say it can't import and leave sign-in to the user.

  1. List the installed browsers and let the user choose: superset browser import-login --workspace <id> --pane <paneId>
  2. Import from their choice, then reload the pane: superset browser import-login --workspace <id> --pane <paneId> --from Comet followed by superset browser navigate …. --profile <name> disambiguates a browser with several profiles; an ambiguous --from errors and lists them.

Only cookies written to disk can import. Many sites keep auth in session cookies that live in browser memory, so have the user quit the source browser first to flush its logins. imported: 0, keyUnavailable: true means the Keychain prompt was denied; ask them to allow it and retry.

Full interaction over raw CDP

For clicking, typing, scrolling, waiting on selectors, or any Playwright-class flow, get the pane's CDP WebSocket endpoint. This pattern is for panes only; for the user's own browser, follow references/browser-use.md:

superset browser cdp --workspace <id> --pane <paneId> --json

The printed url speaks CDP directly (Page, Runtime, DOM, Input, Network, …). It embeds an auth token, so treat it as a secret and keep it out of shared logs. Minimal pattern (Node 22+ / Bun):

const ws = new WebSocket(cdpUrl);
let id = 0;
const send = (method, params) =>
  new Promise((resolve) => {
    const myId = ++id;
    const h = (e) => {
      const m = JSON.parse(e.data);
      if (m.id !== myId) return;
      ws.removeEventListener("message", h);
      resolve(m.result);
    };
    ws.addEventListener("message", h);
    ws.send(JSON.stringify({ id: myId, method, params }));
  });

await new Promise((r) => ws.addEventListener("open", r, { once: true }));
await send("Page.enable");
await send("Runtime.enable");
await send("DOM.enable");

// Focus a text field by resolving its center, then dispatching a real click.
const sel = "#email";
const { result } = await send("Runtime.evaluate", {
  expression: `(()=>{const el=document.querySelector(${JSON.stringify(sel)});if(!el)return null;const b=el.getBoundingClientRect();return {x:b.x+b.width/2,y:b.y+b.height/2};})()`,
  returnByValue: true,
});
if (!result.value) throw new Error(`not found: ${sel}`);
const { x, y } = result.value;
await send("Input.dispatchMouseEvent", { type: "mousePressed", x, y, button: "left", clickCount: 1 });
await send("Input.dispatchMouseEvent", { type: "mouseReleased", x, y, button: "left", clickCount: 1 });

// Confirm the field is focused before typing, then type into it.
const focused = await send("Runtime.evaluate", {
  expression: `document.activeElement === document.querySelector(${JSON.stringify(sel)})`,
  returnByValue: true,
});
if (focused.result.value) await send("Input.insertText", { text: "ada@example.com" });

Gotchas that keep CDP flows reliable:

  • One CDP session per pane. A second concurrent attach is rejected with close code 1013 until the first disconnects; close the socket when done, then retry.
  • After a click that should focus a field, verify document.activeElement before Input.insertText, and poll a selector or state check after each action rather than sleeping a fixed time; the guest repaints slowly when the window is backgrounded.
  • To submit with Enter, the keyDown must carry the character: {type: "keyDown", key: "Enter", code: "Enter", text: "\r", unmodifiedText: "\r", windowsVirtualKeyCode: 13} then the matching keyUp. Without text: "\r" no char is generated and forms silently don't submit.
  • Page.navigate obeys the same scheme allowlist as the CLI.

Verify

Confirm outcomes from the page itself, not from the fact a command returned: read back location.href, the DOM via eval, or a screenshot after each meaningful step, and check the console for page errors before declaring success.

When the evidence is the deliverable, a bug report or a before-and-after or a walkthrough someone else has to read, publish it rather than listing file paths nobody can open. Put the screenshots in a directory beside an index.html that lays them out, and publish the directory: the images ride along at their relative paths, so nothing needs inlining.

superset pages publish ./evidence/ --workspace <id> --title "Checkout flow: 3 blockers"

Read every screenshot before it goes up. This browser is signed into the user's accounts, so a capture can hold a session token, an email address, a customer name, or a dashboard that was never meant to leave the tab. New pages default to org-wide visibility. Crop or redact what does not belong in the report, pass --visibility just_me when the org does not need it, and confirm with the user before publishing.

Safety

  • In-app panes share one browser profile, so eval and CDP reach whatever the user is logged into in any pane (GitHub, dashboards, …). Never read cookies, tokens, or credentials, exfiltrate session data, or act on authenticated sites beyond the task.
  • Confirm with the user before a step that submits a form, makes a purchase, or takes another consequential action.
  • Login walls stay with the user: never enter passwords or MFA yourself. At a login wall you may offer import-login (above) rather than only stopping.
  • Never install Browser Use, enable Chrome remote debugging, attach to the user's signed-in profile, or start a billed cloud browser without explicit consent. If consent is refused, report what you couldn't do rather than working around it.
  • Pane operations are scoped to the pane's workspace; don't reach panes in another workspace.
  • Leave state clean. Navigating away from what the user was viewing is itself a change, so prefer --target new-tab for a scratch surface, and don't close their tabs or clear history unless asked.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

10x

무료요약 있음

Superset 사용 현황을 살펴보고 아직 쓰지 않는 기능 중 업무 방식에 맞는 항목을 제안합니다. 각 기능을 설명하고, 사용자가 고른 예약 실행 에이전트나 병렬 작업 공간, 공유 작업 등을 설정합니다.

  • 사용하지 않는 Superset 기능 찾기
  • 에이전트 예약 실행 설정
  • 여러 작업 공간에서 병렬 작업
ParadevAI/Paradev1.6만2026년 10월 29일 업데이트

automate

무료요약 있음

반복 작업을 Superset 자동화로 설정합니다. 에이전트 지침, 일정 또는 이벤트 조건, 실행 작업 공간을 정리하고 명시적인 확인을 받은 뒤 자동화를 만듭니다. 저장된 조건과 첫 실행 결과를 살펴 지침을 조정합니다.

  • 매일 또는 매주 작업 예약
  • GitHub에서 풀 리퀘스트가 열릴 때 실행
  • Slack의 지정된 반응을 계기로 실행
ParadevAI/Paradev1.6만2026년 10월 29일 업데이트

build-a-stripe-integration

무료요약 있음

Stripe 공식 문서와 API 매개변수 정의를 확인해 결제, 구독, 청구서, 웹훅 연동을 구현합니다. 적절한 제품 선택부터 샌드박스 테스트와 웹훅 처리까지 다루며, 결제와 구독 상태를 웹훅 이벤트로 판단합니다.

  • 정기 결제에 맞는 Stripe 제품 선택
  • Checkout 또는 청구서 처리 구현
  • 오작동하는 Stripe 연동 조사
ParadevAI/Paradev1.6만2026년 10월 29일 업데이트

cdp-verification

무료요약 있음

Chrome DevTools Protocol로 실행 중인 Electron 데스크톱 앱을 조작해 UI 변경을 확인하고 문제를 재현합니다. 실제 사용 흐름을 따라 화면 전환을 검증하고, 스크린샷과 경로·스크롤 위치·포커스·저장 상태를 기록해 비교합니다.

  • 실행 중인 앱에서 UI 문제 재현
  • 수정 후 화면 동작 확인
  • 화면 전환이 포함된 흐름 검증
ParadevAI/Paradev1.6만2026년 10월 29일 업데이트

ci-triage

무료요약 있음

GitHub Actions 실패 로그에서 최초 오류를 찾아 코드 결함, 환경 문제, 간헐적 실패, 기존 장애로 구분합니다. 기준 브랜치와 PR 변경 사항을 비교해 관련성을 설명하고 다음 조치를 정리합니다.

  • PR 검사 실패 원인 조사
  • 불안정한 테스트와 코드 결함 구분
  • 기준 브랜치의 기존 장애 확인
ParadevAI/Paradev1.6만2026년 10월 29일 업데이트

computer

무료요약 있음

실제 데스크톱 화면을 읽고 컨트롤을 식별해 클릭, 입력, 메뉴 선택, 창 배치를 수행하며 매번 결과를 확인합니다. 설정 변경, 앱 작업, 로그인된 시스템 브라우저를 통한 전체 흐름 점검에 사용할 수 있습니다.

  • 데스크톱 설정 변경
  • 앱에서 저장하거나 글자 입력
  • 화면 확인 또는 창 배치
ParadevAI/Paradev1.6만2026년 10월 29일 업데이트

ParadevAI의 스킬 모두 보기

이 스킬의 문제 신고