내장 Skills: 브라우저 자동화, UI/UX 디자인과 Git 전문가

학습 완료 후 할 수 있는 것

이 강의를 통해 다음을 배우게 됩니다:

playwright 또는 agent-browser를 사용하여 브라우저 자동화 테스트와 데이터 크롤링 수행
에이전트가 디자이너의 관점을 채택하여 아름다운 UI/UX 인터페이스 구축
원자적 커밋, 히스토리 검색, rebase를 포함한 Git 작업 자동화
dev-browser를 사용하여 지속적인 브라우저 자동화 개발 수행

현재의 어려움

다음과 같은 상황을 경험해 보셨나요:

프론트엔드 페이지를 테스트하고 싶은데, 수동으로 클릭하는 것은 너무 느리고 Playwright 스크립트 작성 방법을 모름
코드를 작성한 후, 커밋 메시지가 엉망이고 히스토리가 복잡함
UI 인터페이스를 디자인해야 하는데, 어디서 시작해야 할지 모르고, 만들어낸 인터페이스가 미학적이지 않음
브라우저 작업을 자동화해야 하는데, 매번 다시 로그인 인증해야 함

내장 Skills는 이러한 통증을 해결하기 위한 스위스 아미 나이프입니다—각 Skill은 특정 영역의 전문가로서, 이러한 통증을 빠르게 해결해 드립니다.

이 기술을 사용해야 할 때

시나리오	권장 Skill	이유
프론트엔드 UI 인터페이스에 아름다운 디자인 필요	`frontend-ui-ux`	디자이너의 관점, 타이포그래피, 색상, 애니메이션에 주목
브라우저 테스트, 스크린샷, 데이터 크롤링	`playwright` 또는 `agent-browser`	완전한 브라우저 자동화 기능
Git 커밋, 히스토리 검색, 브랜치 관리	`git-master`	자동으로 커밋 스타일을 감지하고 원자적 커밋 생성
여러 번의 브라우저 작업 필요 (로그인 상태 유지)	`dev-browser`	지속적인 페이지 상태, 재사용 지원

핵심 개념

Skill이란 무엇인가?

Skill은 에이전트에 전문 지식과 전용 도구를 주입하는 메커니즘입니다. delegate_task를 사용하고 load_skills 매개변수를 지정하면, 시스템은:

Skill의 template을 시스템 프롬프트의 일부로 로드
Skill 구성의 MCP 서버를 주입 (있는 경우)
사용 가능한 도구 범위를 제한 (있는 경우 allowedTools)

내장 vs 커스텀 Skills

내장 Skills: 바로 사용 가능, 프롬프트와 도구가 미리 구성됨
커스텀 Skills: .opencode/skills/ 또는 ~/.claude/skills/ 디렉토리에서 자신만의 SKILL.md를 생성할 수 있음

이 강의에서는 가장 일반적인 개발 시나리오를 다루는 4개의 내장 Skills에 중점을 둡니다.

🎒 시작하기 전 준비

내장 Skills를 사용하기 전에, 다음을 확인하세요:

[ ] Categories와 Skills 강의 학습 완료
[ ] delegate_task 도구의 기본 사용법 이해
[ ] 브라우저 자동화 Skill을 위한 서버 사전 시작 필요 (Playwright MCP 또는 agent-browser)

Skill 1: playwright (브라우저 자동화)

기능 개요

playwright Skill은 Playwright MCP 서버를 사용하여 완전한 브라우저 자동화 기능을 제공합니다:

페이지 탐색 및 상호작용
요소 위치 지정 및 작동 (클릭, 양식 작성)
스크린샷 및 PDF 내보내기
네트워크 요청 가로채기 및 시뮬레이션

적용 시나리오: UI 검증, E2E 테스트, 웹페이지 스크린샷, 데이터 크롤링

따라하기: 웹사이트 기능 검증

시나리오: 로그인 기능이 정상 작동하는지 검증해야 합니다.

1단계: playwright Skill 트리거

OpenCode에서 입력:

playwright를 사용하여 https://example.com/login으로 탐색하고, 페이지 상태를 보여주는 스크린샷을 찍어줘

보게 될 것: 에이전트가 자동으로 Playwright MCP 도구를 호출하여 브라우저를 열고 스크린샷을 찍습니다.

2단계: 양식 작성 및 제출

계속 입력:

playwright를 사용하여 사용자 이름과 비밀번호 필드를 작성하고 ([email protected] / password123), 그런 다음 로그인 버튼을 클릭하고, 결과를 보여주는 스크린샷을 찍어줘

보게 될 것: 에이전트가 자동으로 양식 요소를 찾아 데이터를 작성하고, 버튼을 클릭하며, 결과 스크린샷을 반환합니다.

3단계: 리디렉션 검증

페이지 로드가 완료될 때까지 기다린 후, URL이 /dashboard로 리디렉션되었는지 확인해줘

보게 될 것: 에이전트가 리디렉션이 성공했음을 확인하는 현재 URL을 보고합니다.

체크포인트 ✅

[ ] 브라우저가 성공적으로 대상 페이지로 탐색됨
[ ] 양식 작성 및 클릭 작동이 정상적으로 실행됨
[ ] 스크린샷이 페이지 상태를 선명하게 표시함

구성 설명

기본적으로 브라우저 자동화 엔진은 playwright를 사용합니다. agent-browser로 전환하려면 oh-my-opencode.json에서 구성:

json

{
  "browser_automation_engine": {
    "provider": "agent-browser"
  }
}

Skill 2: frontend-ui-ux (디자이너 관점)

기능 개요

frontend-ui-ux Skill은 에이전트를 "개발자로 전환된 디자이너" 역할로 변모시킵니다:

타이포그래피, 색상, 애니메이션 등 시각적 세부 사항에 주목
대담한 미학적 방향 강조 (미니멀리즘, 맥시멀리즘, 레트로 퓨처리즘 등)
디자인 원칙 제공: 일반적인 폰트 (Inter, Roboto, Arial) 피하기, 독특한 색상 팔레트 생성

적용 시나리오: UI 컴포넌트 디자인, 인터페이스 미화, 시각 시스템 구축

따라하기: 멋진 대시보드 디자인

시나리오: 데이터 통계 대시보드를 디자인해야 하는데, 디자인 시안이 없습니다.

1단계: frontend-ui-ux Skill 활성화

frontend-ui-ux 스킬을 사용하여 데이터 통계 대시보드 페이지를 디자인해줘
요구사항: 3개의 데이터 카드 포함 (사용자 수, 수익, 주문 수), 현대적인 디자인 스타일 사용

보게 될 것: 에이전트가 먼저 "디자인 계획"을 수행하여 목적, 톤, 제약 조건, 차별화 포인트를 결정합니다.

2단계: 미학적 방향 명확화

에이전트가 디자인 스타일을 물어보거나 내부적으로 결정합니다. 예:

**미학적 방향 선택**:
- 미니멀리즘 (Minimalist)
- 맥시멀리즘 (Maximalist)
- 레트로 퓨처리즘 (Retro-futuristic)
- 세련된 고급스러움 (Luxury/Refined)

답변: 미니멀리즘

보게 될 것: 에이전트가 선택한 방향에 따라 디자인 사양 (폰트, 색상, 간격)을 생성합니다.

3단계: 코드 생성

위의 디자인 사양을 기반으로, React + Tailwind CSS를 사용하여 이 대시보드 페이지를 구현해줘

보게 될 것:

정교하게 디자인된 타이포그래피와 간격
선명하지만 조화로운 색상 (일반적인 보라색 그라데이션이 아님)
미묘한 애니메이션과 전환 효과

체크포인트 ✅

[ ] 페이지가 독특한 디자인 스타일을 채택하여 일반적인 "AI 슬롭"이 아님
[ ] 폰트 선택이 독특하여 Inter/Roboto/Arial을 피함
[ ] 색상 팔레트가 응집력 있고 명확한 시각적 계층 구조를 가짐

일반 에이전트와의 차이점

일반 에이전트는 기능적으로 정확한 코드를 작성할 수 있지만, 인터페이스는 미학적으로 부족합니다. frontend-ui-ux Skill의 핵심 가치는:

디자인 프로세스 강조 (계획 > 코딩)
명확한 미학적 지침 제공
반패턴 경고 (일반적인 디자인, 보라색 그라데이션)

Skill 3: git-master (Git 전문가)

기능 개요

git-master Skill은 세 가지 전문 능력을 통합한 Git 전문가입니다:

커밋 아키텍트: 원자적 커밋, 종속성 순서, 스타일 감지
Rebase 외과의사: 히스토리 재작성, 충돌 해결, 브랜치 정리
히스토리 고고학자: 특정 변경 사항이 언제/어디서 도입되었는지 찾기

핵심 원칙: 기본적으로 여러 커밋 생성, "한 커밋에 여러 파일"의 게으른 행동 거부.

적용 시나리오: 코드 커밋, 히스토리 검색, 브랜치 관리, rebase 작업

따라하기: 스마트 코드 커밋

시나리오: 5개의 파일을 수정했고, 코드를 커밋해야 합니다.

1단계: git-master Skill 트리거 (quick category 사용 권장)

delegate_task(category='quick', load_skills=['git-master'])를 사용하여 현재 코드 변경 사항을 커밋해줘

왜 quick category를 사용하나요?

Git 작업은 복잡한 추론이 필요하지 않음
claude-haiku-4-5 모델로도 충분히 빠르게 처리 가능
비용 절약 (Haiku는 Opus보다 10배 저렴)

보게 될 것: 에이전트가 병렬 분석 (Phase 0)을 실행합니다:

git status 및 git diff --stat
최근 30개 커밋 로그 (스타일 감지용)
현재 브랜치 상태

2단계: 스타일 감지 (Phase 1)

에이전트가 출력합니다:

STYLE DETECTION RESULT
======================
Analyzed: 30 commits from git log

Language: ENGLISH
  - English commits: 28 (93%)
  
Style: SEMANTIC
  - Semantic (feat:, fix:, etc.): 25 (83%)
  - Plain: 3 (10%)
  
Reference examples from repo:
  1. "feat: add user authentication"
  2. "fix: resolve database connection issue"
  3. "refactor: extract validation logic"

All commits will follow: ENGLISH + SEMANTIC

보게 될 것: 에이전트가 사용할 커밋 스타일과 언어를 명확히 알려줍니다.

3단계: 원자적 커밋 계획 (Phase 3)

에이전트가 파일 변경을 분석하고 출력합니다:

COMMIT PLAN
===========
Files changed: 5
Minimum commits required: ceil(5/3) = 2
Planned commits: 3
Status: 3 >= 2 (PASS)

COMMIT 1: feat: add authentication service
  - src/services/auth.ts
  - src/types/auth.ts
  Justification: service implementation + its type definitions

COMMIT 2: feat: implement login page
  - src/pages/login.tsx
  - src/components/login-form.tsx
  Justification: page and its components

COMMIT 3: feat: add API endpoint
  - src/api/auth.ts
  - tests/auth.test.ts
  Justification: API endpoint + its test

Execution order: Commit 1 -> Commit 2 -> Commit 3

보게 될 것: 에이전트가 명확히 커밋을 분리하고, 왜 이 파일들이 함께 있어야 하는지 설명합니다.

4단계: 커밋 실행 (Phase 5)

에이전트가 자동으로 실행합니다:

bash

git add src/services/auth.ts src/types/auth.ts
git commit -m "feat: add authentication service"

git add src/pages/login.tsx src/components/login-form.tsx
git commit -m "feat: implement login page"

git add src/api/auth.ts tests/auth.test.ts
git commit -m "feat: add API endpoint"

보게 될 것:

3개의 독립적인 커밋, 각각 명확한 의미적 메시지
작업 디렉토리가 깨끗함 (git status에 미제출 파일 없음)

체크포인트 ✅

[ ] 에이전트가 스타일 감지를 수행하고 명확히 알림
[ ] 커밋 수가 "최소 커밋 수" 규칙을 충족 (파일 수 / 3, 올림)
[ ] 각 커밋 메시지가 감지된 스타일을 따름 (의미적, 일반 설명 등)
[ ] 테스트 파일이 구현 파일과 동일한 커밋에 있음

히스토리 검색 기능

git-master는 강력한 히스토리 검색도 지원합니다:

"X가 언제 추가되었나" → git log -S (pickaxe 검색)
"누가 이 줄을 작성했나" → git blame
"버그가 언제 시작되었나" → git bisect
"X 패턴을 변경하는 커밋 찾기" → git log -G (정규식 검색)

예시: git-master를 사용하여 'calculate_discount' 함수가 어느 커밋에서 추가되었는지 찾아줘

반패턴: 단일 대형 커밋

git-master의 강제 규칙은:

파일 수	최소 커밋 수
3+ 파일	2+ 커밋
5+ 파일	3+ 커밋
10+ 파일	5+ 커밋

에이전트가 1번의 커밋으로 여러 파일을 시도하면, 자동으로 실패하고 재계획됩니다.

Skill 4: dev-browser (개발자 브라우저)

기능 개요

dev-browser Skill은 지속적인 브라우저 자동화 기능을 제공합니다:

페이지 상태 지속성: 여러 스크립트 실행 간 로그인 상태 유지
ARIA 스냅샷: 페이지 요소를 자동으로 발견하고, 참조(@e1, @e2)가 있는 트리 구조 반환
듀얼 모드 지원:
- Standalone 모드: 새로운 Chromium 브라우저 시작
- Extension 모드: 사용자의 기존 Chrome 브라우저에 연결

적용 시나리오: 여러 번의 브라우저 작업 필요 (로그인 상태 유지), 복잡한 워크플로우 자동화

따라하기: 로그인 후 작업 스크립트 작성

시나리오: 로그인 후 일련의 작업을 자동화하고, 세션 상태를 유지해야 합니다.

1단계: dev-browser 서버 시작

macOS/Linux:

bash

cd skills/dev-browser && ./server.sh &

Windows (PowerShell):

powershell

cd skills/dev-browser
Start-Process -NoNewWindow -FilePath "node" -ArgumentList "server.js"

보게 될 것: 콘솔에 Ready 메시지가 출력됩니다.

2단계: 로그인 스크립트 작성

OpenCode에서 입력:

bash

cd skills/dev-browser && npx tsx <<'EOF'
import { connect, waitForPageLoad } from "@/client.js";

const client = await connect();
const page = await client.page("login", { viewport: { width: 1920, height: 1080 } });

await page.goto("https://example.com/login");
await waitForPageLoad(page);

console.log({
  title: await page.title(),
  url: page.url()
});

await client.disconnect();
EOF

보게 될 것: 브라우저가 로그인 페이지를 열고, 페이지 제목과 URL을 출력합니다.

3단계: 양식 작성 작업 추가

스크립트 수정:

bash

cd skills/dev-browser && npx tsx <<'EOF'
import { connect, waitForPageLoad } from "@/client.js";

const client = await connect();
const page = await client.page("login", { viewport: { width: 1920, height: 1080 } });

await page.goto("https://example.com/login");
await waitForPageLoad(page);

// ARIA 스냅샷 가져오기
const snapshot = await client.getAISnapshot("login");
console.log(snapshot);

// 양식 선택 및 작성 (snapshot의 ref 기준)
await client.fill("input[name='username']", "[email protected]");
await client.fill("input[name='password']", "password123");
await client.click("button[type='submit']");

await waitForPageLoad(page);

console.log({
  title: await page.title(),
  url: page.url(),
  loggedIn: page.url().includes("/dashboard")
});

await client.disconnect();
EOF

보게 될 것:

ARIA 스냅샷 출력 (페이지 요소 및 참조 표시)
양식 자동 작성 및 제출
dashboard로 페이지 이동 (로그인 성공 검증)

4단계: 로그인 상태 재사용

이제 두 번째 스크립트를 작성하여 로그인이 필요한 페이지를 조작합니다:

bash

cd skills/dev-browser && npx tsx <<'EOF'
import { connect, waitForPageLoad } from "@/client.js";

const client = await connect();

// 이전에 생성한 "login" 페이지 재사용 (세션이 저장됨)
const page = await client.page("login");

// 로그인이 필요한 페이지에 직접 접근
await page.goto("https://example.com/settings");
await waitForPageLoad(page);

console.log({
  title: await page.title(),
  url: page.url()
});

await client.disconnect();
EOF

보게 될 것: 페이지가 설정 페이지로 바로 이동하고, 다시 로그인할 필요가 없습니다 (세션 상태가 저장됨).

체크포인트 ✅

[ ] dev-browser 서버가 성공적으로 시작되고 Ready 표시
[ ] ARIA Snapshot이 페이지 요소를 올바르게 발견
[ ] 로그인 후 세션 상태가 스크립트 간에 재사용 가능
[ ] 여러 스크립트 실행 간에 다시 로그인할 필요 없음

playwright vs dev-browser의 차이점

특성	playwright	dev-browser
세션 지속성	❌ 매번 새 세션	✅ 스크립트 간에 저장
ARIA Snapshot	❌ Playwright API 사용	✅ 자동으로 참조 생성
Extension 모드	❌ 지원 안 함	✅ 사용자 브라우저에 연결
적용 시나리오	단일 작동, 테스트	여러 작동, 복잡한 워크플로우

모범 사례

1. 적절한 Skill 선택

작업 유형에 따라 Skill을 선택하세요:

작업 유형	권장 조합
빠른 Git 커밋	`delegate_task(category='quick', load_skills=['git-master'])`
UI 인터페이스 디자인	`delegate_task(category='visual-engineering', load_skills=['frontend-ui-ux'])`
브라우저 검증	`delegate_task(category='quick', load_skills=['playwright'])`
복잡한 브라우저 워크플로우	`delegate_task(category='quick', load_skills=['dev-browser'])`

2. 여러 Skills 조합

여러 Skills를 동시에 로드할 수 있습니다:

typescript

delegate_task(
  category="quick",
  load_skills=["git-master", "playwright"],
  prompt="로그인 기능을 테스트하고, 완료 후 코드를 커밋해줘"
)

3. 일반적인 실수 피하기

경고

❌ 잘못됨: git-master 사용 시 수동으로 커밋 메시지 지정
- ✅ 올바름: git-master가 프로젝트 스타일에 맞는 커밋 메시지를 자동으로 감지하고 생성하도록 허용
❌ 잘못됨: frontend-ui-ux 사용 시 "평범하게 해줘" 요청
- ✅ 올바름: 에이전트가 디자이너 역량을 최대한 발휘하여 독특한 디자인을 창조하도록 허용
❌ 잘못됨: dev-browser 스크립트에서 TypeScript 타입 주석 사용
- ✅ 올바름: page.evaluate() 내에서 순수 JavaScript 사용 (브라우저는 TS 문법을 인식하지 못함)

수업 요약

이 수업에서는 4개의 내장 Skills를 소개했습니다:

Skill	핵심 가치	일반적인 시나리오
playwright	완전한 브라우저 자동화	UI 테스트, 스크린샷, 크롤링
frontend-ui-ux	디자이너 관점, 미학 우선	UI 컴포넌트 디자인, 인터페이스 미화
git-master	자동화된 Git 작업, 원자적 커밋	코드 커밋, 히스토리 검색
dev-browser	지속적인 세션, 복잡한 워크플로우	여러 브라우저 작업

핵심 포인트:

Skill = 전문 지식 + 도구: 에이전트에 특정 분야의 모범 사례 주입
조합 사용: delegate_task(category=..., load_skills=[...])로 정확한 매칭 구현
비용 최적화: 단순한 작업에는 quick category 사용, 고가 모델 사용 피하기
반패턴 경고: 각 Skill에는 명확한 "하지 말아야 할 것" 지침이 있음

다음 수업 예고

다음 수업에서는 **수명 주기 후크**를 배웁니다.
배울 내용:
32개 수명 주기 후크의 역할과 실행 순서
컨텍스트 주입 및 오류 복구 자동화 방법
일반적인 후크의 구성 방법 (todo-continuation-enforcer, keyword-detector 등)

부록: 소스 코드 참조

소스 코드 위치 보기

업데이트 시간: 2026-01-26

기능	파일 경로	줄 번호
playwright Skill 정의	`src/features/builtin-skills/skills.ts`	4-16
---	---	---
---	---	---
---	---	---
---	---	---
createBuiltinSkills 함수	`src/features/builtin-skills/skills.ts`	1723-1729
BuiltinSkill 타입 정의	`src/features/builtin-skills/types.ts`	3-16
내장 Skills 로드 로직	`src/index.ts`	51, 311-319
브라우저 엔진 구성	`src/config/schema.ts`	-

핵심 구성:

browser_automation_engine.provider: 브라우저 자동화 엔진 (기본값 playwright, 선택 가능 agent-browser)
disabled_skills: 비활성화된 Skill 목록

핵심 함수:

createBuiltinSkills(options): 브라우저 엔진 구성에 따라 해당 Skills 배열 반환

내장 Skills: 브라우저 자동화, UI/UX 디자인과 Git 전문가 ​

학습 완료 후 할 수 있는 것 ​

현재의 어려움 ​

이 기술을 사용해야 할 때 ​

핵심 개념 ​

🎒 시작하기 전 준비 ​

Skill 1: playwright (브라우저 자동화) ​

기능 개요 ​

따라하기: 웹사이트 기능 검증 ​

1단계: playwright Skill 트리거 ​

2단계: 양식 작성 및 제출 ​

3단계: 리디렉션 검증 ​

체크포인트 ✅ ​

Skill 2: frontend-ui-ux (디자이너 관점) ​

기능 개요 ​

따라하기: 멋진 대시보드 디자인 ​

1단계: frontend-ui-ux Skill 활성화 ​

2단계: 미학적 방향 명확화 ​

3단계: 코드 생성 ​

체크포인트 ✅ ​

Skill 3: git-master (Git 전문가) ​

기능 개요 ​

따라하기: 스마트 코드 커밋 ​

1단계: git-master Skill 트리거 (quick category 사용 권장) ​

2단계: 스타일 감지 (Phase 1) ​

3단계: 원자적 커밋 계획 (Phase 3) ​

4단계: 커밋 실행 (Phase 5) ​

체크포인트 ✅ ​

Skill 4: dev-browser (개발자 브라우저) ​

기능 개요 ​

따라하기: 로그인 후 작업 스크립트 작성 ​

1단계: dev-browser 서버 시작 ​

2단계: 로그인 스크립트 작성 ​

3단계: 양식 작성 작업 추가 ​

4단계: 로그인 상태 재사용 ​

체크포인트 ✅ ​

모범 사례 ​

1. 적절한 Skill 선택 ​

2. 여러 Skills 조합 ​

3. 일반적인 실수 피하기 ​

수업 요약 ​

다음 수업 예고 ​

부록: 소스 코드 참조 ​

내장 Skills: 브라우저 자동화, UI/UX 디자인과 Git 전문가

학습 완료 후 할 수 있는 것

현재의 어려움

이 기술을 사용해야 할 때

핵심 개념

🎒 시작하기 전 준비

Skill 1: playwright (브라우저 자동화)

기능 개요

따라하기: 웹사이트 기능 검증

1단계: playwright Skill 트리거

2단계: 양식 작성 및 제출

3단계: 리디렉션 검증

체크포인트 ✅

Skill 2: frontend-ui-ux (디자이너 관점)

기능 개요

따라하기: 멋진 대시보드 디자인

1단계: frontend-ui-ux Skill 활성화

2단계: 미학적 방향 명확화

3단계: 코드 생성

체크포인트 ✅

Skill 3: git-master (Git 전문가)

기능 개요

따라하기: 스마트 코드 커밋

1단계: git-master Skill 트리거 (quick category 사용 권장)

2단계: 스타일 감지 (Phase 1)

3단계: 원자적 커밋 계획 (Phase 3)

4단계: 커밋 실행 (Phase 5)

체크포인트 ✅

Skill 4: dev-browser (개발자 브라우저)

기능 개요

따라하기: 로그인 후 작업 스크립트 작성

1단계: dev-browser 서버 시작

2단계: 로그인 스크립트 작성

3단계: 양식 작성 작업 추가

4단계: 로그인 상태 재사용

체크포인트 ✅

모범 사례

1. 적절한 Skill 선택

2. 여러 Skills 조합

3. 일반적인 실수 피하기

수업 요약

다음 수업 예고

부록: 소스 코드 참조