이미 실행 중인 Chrome 브라우저(--remote-debugging-port=9269)에 Chrome DevTools MCP로 즉시 연결해 개발 및 디버깅을 수행한다. 브라우저 콘솔 확인, JS 평가, 네트워크 요청 검사, 스크린샷, 페이지 상태 분석 등이 필요할 때 반드시 이 스킬을 사용한다. 키워드: 콘솔 에러, console error, 브라우저 디버깅, 화면 확인, 스크린샷, 네트워크 요청, evaluate, DOM 검사, 라이브 앱 확인, live app, localhost 확인.
Figma 디자인과 라이브 렌더를 비교해 UI 충실도를 끌어올린다. Figma MCP 로 노드 캡처 → Chrome DevTools MCP(폴백 Playwright) 로 라이브 캡처 → multimodal 시각 diff → 프로젝트 디자인 가이드 정합성 검증 → 토큰/레이아웃 상수 미세 조정 → 임시 패치 회수 → 프로젝트 검증 명령 실행. Figma 비교 / 시각 diff / 픽셀 퍼펙트 / UI 충실도 / Figma vs 실제 렌더 키워드에서 호출.
DevOks 팀 Claude Code 하네스 — 코드리뷰·기능개발·Git 워크플로우 플러그인 모음.
의존성 및 MCP 설치 가이드:
docs/mcp-setup-guide.md
플러그인 관리 가이드 (생성·검증·배포):docs/plugin-management.md
| 플러그인 | 내용 | 필수 여부 |
|---|---|---|
devoks-core | 기본 원칙 컨텍스트 (Agent Principles, Project Convention, Memory Policy) | 필수 |
devoks-git | Git 커밋·이슈·PR 워크플로우 커맨드 | 권장 |
devoks-feature | 기능개발 워크플로우 (FRD·PLAN·실행 스킬, UI 구현, 검증) | 권장 |
devoks-code | 코드리뷰·리팩토링·모듈분석 커맨드 | 권장 |
devoks-browser | Chrome DevTools MCP 연결 + Visual Diff 검증 | 선택 |
# 필수: gh CLI 설치
brew install gh && gh auth login
# 1. 마켓플레이스 등록 (최초 1회)
/plugin marketplace add ridsync/devoks-team-harness
# 2. 설치
/plugin install devoks-core@devoks
/plugin install devoks-git@devoks
/plugin install devoks-feature@devoks
/plugin install devoks-code@devoks
전체 의존성 설치는 → docs/mcp-setup-guide.md
/plugin marketplace add ridsync/devoks-team-harness
/plugin install devoks-core@devoks # 필수
/plugin install devoks-git@devoks # Git 워크플로우
/plugin install devoks-feature@devoks # 기능개발
/plugin install devoks-code@devoks # 코드 품질
/plugin install devoks-browser@devoks # 브라우저 도구 (선택)
/plugin marketplace update devoks
git clone https://github.com/ridsync/devoks-team-harness.git
cd /path/to/your-project
/path/to/devoks-team-harness/setup.sh
# 업데이트
/path/to/devoks-team-harness/setup.sh --update
| 스킬 | 호출 | 플러그인 |
|---|---|---|
devoks-core-rules | /devoks-core-rules | devoks-core |
devoks-frd-author | /devoks-frd-author | devoks-feature |
devoks-plan-author | /devoks-plan-author | devoks-feature |
devoks-plan-executor | /devoks-plan-executor | devoks-feature |
devoks-feature-workflow-runner | /devoks-feature-workflow-runner | devoks-feature |
devoks-data-verification | /devoks-data-verification | devoks-feature |
devoks-chrome-devtools-mcp-attach | /devoks-chrome-devtools-mcp-attach | devoks-browser |
devoks-visual-diff-verification | /devoks-visual-diff-verification | devoks-browser |
| 커맨드 | 설명 |
|---|---|
/devoks-git-commit-msg | Conventional Commits 커밋 메시지 생성 |
/devoks-git-create-issue | GitHub 이슈 생성 |
/devoks-git-pull-request | PR 생성 (CODEOWNERS 기반 리뷰어 할당) |
| 커맨드 | 설명 |
|---|---|
/devoks-new-feature-draft | 스펙 기반 기능 구현 |
/devoks-new-feature-github-issue | GitHub 이슈 기반 기능 구현 |
/devoks-new-feature-verify | 구현 전후 체크리스트 + 커버리지 검증 |
/devoks-new-ui-draft | Figma → 코드 UI 구현 |
| 커맨드 | 설명 |
|---|---|
/devoks-code-review-general | 범위 지정 코드리뷰 |
/devoks-code-review-diff-branch | 브랜치 diff 기반 코드리뷰 |
/devoks-code-refactoring | 구조·계약·품질 리팩토링 |
/devoks-code-analyze-module | 모듈/비즈니스 로직 분석 |
| 플러그인 | 필수 | 선택 |
|---|---|---|
| devoks-core | — | — |
| devoks-git | gh CLI | — |
| devoks-feature | gh CLI | Figma MCP, context-mode MCP |
| devoks-code | CodeGraph MCP, Serena MCP | context-mode MCP |
| devoks-browser | Chrome DevTools MCP + ~/.claude.json | Playwright MCP, Figma MCP |
전체 설치 가이드 → docs/mcp-setup-guide.md
devoks-team-harness/
├── .claude-plugin/marketplace.json # 마켓플레이스 카탈로그
├── plugins/
│ ├── devoks-core/skills/ # devoks-core-rules 스킬 (Agent Principles 등)
│ ├── devoks-git/commands/ # Git 커맨드 (3개)
│ ├── devoks-feature/ # 기능개발 (커맨드 4개 + 스킬 5개)
│ ├── devoks-code/commands/ # 코드 품질 (4개)
│ └── devoks-browser/skills/ # 브라우저 도구 (2개)
├── shared/
│ ├── rules/ # SSOT: agent-principles, project-convention, memory-policy
│ ├── refs/ # SSOT: code-review, engineering-principles, git-convention, workflow
│ ├── setup/claude.json.template # ~/.claude.json MCP 설정 템플릿
│ └── templates/CLAUDE.md.project.template
├── docs/
│ ├── mcp-setup-guide.md # MCP 의존성 설치 가이드
│ └── plugin-management.md # 플러그인 생성·검증·배포 워크플로우
├── setup.sh # 폴백 설치 스크립트
└── README.md
shared/rules/와shared/refs/가 SSOT입니다. 규칙 변경 시 이 파일들과plugins/devoks-core/skills/devoks-core-rules/SKILL.md를 함께 수정하고 커밋하세요.
shared/rules/, shared/refs/, 또는 플러그인 파일을 수정합니다./plugin marketplace update devoks 로 갱신합니다.Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
DevOks 기본 원칙 컨텍스트 — Agent Principles, Project Convention, Memory Policy를 스킬로 로드
DevOks Git 워크플로우 — Conventional Commits 커밋·이슈·PR 커맨드
DevOks 코드 품질 — 코드리뷰(범위·브랜치), 리팩토링, 모듈분석 커맨드
DevOks 기능개발 워크플로우 — FRD·PLAN·실행 스킬, UI 구현, 검증 커맨드
npx claudepluginhub ridsync/devoks-team-harness --plugin devoks-browserReliable automation, in-depth debugging, and performance analysis in Chrome using Chrome DevTools and Puppeteer
Access thousands of AI prompts and skills directly in your AI coding assistant. Search prompts, discover skills, save your own, and improve prompts with AI.
Comprehensive feature development workflow with specialized agents for codebase exploration, architecture design, and quality review
Production-grade vibe coding suite. Structured workflows from discovery to deployment: start, build, ship, fix, refactor.
Permanent coding companion for Claude Code — survives any update. MCP-based terminal pet with ASCII art, stats, reactions, and personality.
Plugin that includes the Figma MCP server and Skills for common workflows