name

bdev-patch

description

B개발자 Patch 브라우저 익스텐션이 만든 비주얼 편집 bdev-patch(JSON)를 받아 실제 소스코드에 적용하는 해석기 스킬. 사용자가 자기 사이트에서 텍스트를 클릭·수정하고 레이아웃을 너지한 뒤 "Copy bdev-patch"한 JSON을 붙여넣으면, 각 edit을 코드에서 찾아 반영한다. type:text는 `from` 문자열을 코드베이스에서 검색해 `to`로 치환, type:layout은 `suggest` 스타일을 매칭된 요소에 적용(Tailwind면 유틸 클래스, 아니면 CSS). 트리거 — B개발자 Patch bdev-patch JSON 붙여넣기, "이 bdev-patch 적용해", "bdev-patch 적용", "내 비주얼 편집 반영해". 핵심 가치 — 바이브코더가 "이거 8px 내려" 같은 수정을 말로 설명하는 고통을 없애고, 클릭한 편집을 코드로 자동 반영.

bdev-patch — 비주얼 bdev-patch → 코드 적용 해석기

B개발자 Patch 익스텐션이 뽑은 bdev-patch JSON을 받아 소스코드에 정확히 반영한다. 사용자는 사이트를 보며 클릭·수정만 하고, 말로 설명하지 않는다. 그 의도를 코드로 옮기는 게 이 스킬의 일.

입력 형태

{
  "tool": "bdev-patch",
  "url": "http://localhost:3000",
  "edits": [
    { "type": "text", "selector": "main h1", "from": "Wellcome", "to": "Welcome" },
    { "type": "layout", "selector": ".hero p", "intent": "줄이 안 맞음", "suggest": { "text-wrap": "balance" } }
  ]
}

처리 절차

bdev-patch 파싱 — edits 배열을 순회. 적용 전, 바꿀 항목을 표로 요약해 보여준다(파일·라인 추정 포함).
type: text — from 문자열을 코드베이스에서 Grep으로 검색.
- 유일하게 매칭되면 → 그 위치를 to로 치환(Edit).
- 여러 곳이면 → selector/주변 마크업으로 가장 그럴듯한 후보를 고르고, 모호하면 사용자에게 확인.
- JSX/HTML/마크다운 어디든 원문 문자열 기준이라 매핑이 정확하다.
type: layout — selector로 요소를 코드에서 찾는다.
- Tailwind 프로젝트(클래스에 유틸 다수) → suggest를 대응 유틸로 변환해 className에 추가. 매핑 예:
  - text-wrap: balance → text-balance
  - text-align: center → text-center, margin-inline: auto → mx-auto
  - max-width: 60ch → max-w-[60ch]
  - line-height: 1.4 → leading-[1.4]
- 일반 CSS/모듈 → 해당 셀렉터 규칙에 선언 추가(없으면 생성). 기존 스타일 보존.
검증 — 변경 후 빌드/렌더가 깨지지 않는지 확인하고, 바뀐 파일 목록을 요약.

원칙

의미 보존: 사용자가 명시적으로 바꾼 텍스트/스타일만 반영. 그 외 카피·로직은 건드리지 않는다.
모호하면 묻는다: from 문자열이 여러 군데이고 구분 불가하면 임의로 고르지 말고 확인.
계획 먼저: edit이 3개 이상이거나 layout이 섞이면, 적용 전 변경 계획을 보여주고 진행.
프로덕션 빌드는 자동 배포 안 함: 코드 수정까지만, 배포는 사용자.

비-목표

익스텐션 자체(브라우저 측 캡처)는 이 스킬이 아니라 bdev-patch 익스텐션이 담당.
bdev-patch에 없는 광범위 리팩터링/리디자인은 하지 않는다(받은 edit만).

bdev-patch — 비주얼 bdev-patch → 코드 적용 해석기

입력 형태

{ "tool": "bdev-patch", "url": "http://localhost:3000", "edits": [ { "type": "text", "selector": "main h1", "from": "Wellcome", "to": "Welcome" }, { "type": "layout", "selector": ".hero p", "intent": "줄이 안 맞음", "suggest": { "text-wrap": "balance" } } ] }

처리 절차

bdev-patch 파싱 — edits 배열을 순회. 적용 전, 바꿀 항목을 표로 요약해 보여준다(파일·라인 추정 포함).

type: text — from 문자열을 코드베이스에서 Grep으로 검색.

유일하게 매칭되면 → 그 위치를 to로 치환(Edit).
여러 곳이면 → selector/주변 마크업으로 가장 그럴듯한 후보를 고르고, 모호하면 사용자에게 확인.
JSX/HTML/마크다운 어디든 원문 문자열 기준이라 매핑이 정확하다.

type: layout — selector로 요소를 코드에서 찾는다.

Tailwind 프로젝트(클래스에 유틸 다수) → suggest를 대응 유틸로 변환해 className에 추가. 매핑 예:
- text-wrap: balance → text-balance
- text-align: center → text-center, margin-inline: auto → mx-auto
- max-width: 60ch → max-w-[60ch]
- line-height: 1.4 → leading-[1.4]
일반 CSS/모듈 → 해당 셀렉터 규칙에 선언 추가(없으면 생성). 기존 스타일 보존.

검증 — 변경 후 빌드/렌더가 깨지지 않는지 확인하고, 바뀐 파일 목록을 요약.

원칙

의미 보존: 사용자가 명시적으로 바꾼 텍스트/스타일만 반영. 그 외 카피·로직은 건드리지 않는다.

모호하면 묻는다: from 문자열이 여러 군데이고 구분 불가하면 임의로 고르지 말고 확인.

계획 먼저: edit이 3개 이상이거나 layout이 섞이면, 적용 전 변경 계획을 보여주고 진행.

프로덕션 빌드는 자동 배포 안 함: 코드 수정까지만, 배포는 사용자.

비-목표

익스텐션 자체(브라우저 측 캡처)는 이 스킬이 아니라 bdev-patch 익스텐션이 담당.

bdev-patch에 없는 광범위 리팩터링/리디자인은 하지 않는다(받은 edit만).