mirror of
https://github.com/bmad-code-org/BMAD-METHOD.git
synced 2026-09-19 08:11:52 +08:00
do-operator
87d3407873
* feat(website): restyle the docs in the bmadcode design system The docs carried a Ghost-blog theme: Inter and Space Grotesk, a #3b82f6 accent, 12px radii, tinted panels and hover lifts. bmadcode.com is built from the foundry ramp on paper, Archivo and IBM Plex Mono, one accent held under ~2% of the page, 2px corners and hairlines. This aligns the two so the method and its documentation read as one thing. Four type registers, and almost nothing else: Instrument Serif for the page masthead, Archivo 600 for headings, Archivo 400 at 17px for prose, and IBM Plex Mono at 11px for labels — spent once per section, never on prose or a table header. The measure comes down to 46rem so a page reads as an article. Also fixes the site title, which was the only place in the repo spelling the brand "BMAD Method"; it now matches the prose, and every page title and share card with it. The four component overrides are the parts CSS could not reach: the mark in its ink tile, the accent eyebrow naming each section, and the dark footer band. The footer renders from TwoColumnContent rather than the Footer slot because Starlight right-aligns the content column (--sl-content-margin-inline: auto 0), so a band in that column never reached the sidebar edge. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * feat(website): inline hand-authored SVG diagrams Diagrams shipped as rasters: build-diagram.png at 488 KB, plus a -fr and a -ko export of the same picture. Every translation meant re-exporting an image, three of the five locales fell back to the English one, and none of them could follow the site's light and dark themes. Diagrams are now hand-authored SVGs carrying geometry and classes only. A rehype plugin inlines them where a page links to one, so a single stylesheet themes every diagram — an <img> is opaque to page CSS, which is the whole reason for inlining. A second diagram written against the same class vocabulary matches the first without any styling work. Labels are translated rather than redrawn: each <text> carries a data-i18n key and the strings live in <name>.labels.json, so one drawing serves every language and a translation cannot drift out of shape. The integration exists because the inlined SVG lands inside Astro's content layer cache, which is keyed on the markdown file. Editing a diagram left the previous drawing on the page, through a build that reported success. It watches the diagram directory in dev and drops the content store when the drawing changes. Diagram.astro is the same behaviour for anywhere that can take a component. The docs are 193 .md files and no .mdx, where components cannot be imported, so the plugin is the path pages actually use. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * docs(build): draw the bmad-build run as a themed SVG Replaces build-diagram.png and its -fr and -ko exports with one drawing shared by all five locales: the actors in a left lane, the spine down the middle, a return channel for BAD_SPEC and INTENT_GAP, and the review lenses in a panel — the layout the original had. Gzipped, the diagram goes from 440 KB to 1 KB, and it now follows the theme. The French labels are in place; the other locales fall back to the English text in the SVG, which is what their pages showed before. The raster files stay for now: walk-through-a-change still uses walkthrough-diagram, and that conversion is a separate change. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(website): let the diagram cache stamp survive a fresh checkout The stamp is written into Astro's cache directory, which does not exist until Astro creates it partway through the build. On a clean clone — CI, every time — the integration threw in astro:config:done and took the build with it. It now creates the directory, and treats any failure as a warning: a cache that cannot be stamped is a slower build, not a broken one. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * docs(walkthrough): draw the walkthrough run as a themed SVG Replaces walkthrough-diagram.png and its -fr and -ko exports with one drawing shared by all five locales, keeping the original's layout: the two inputs in a left lane, the five stages down the spine, the notes beside them, the early exit skipping the middle, and the three outcomes along the bottom. The outcome chips introduce a `chip` class in the shared stylesheet, taking the green and amber the asides already use, so a green in a diagram is the same green as a tip. Nothing else about this diagram needed styling: it inherits the vocabulary build-run established. With both diagrams converted, website/public/diagrams is empty and the six raster files are gone. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * docs(plan): fold the remaining diagrams into the themed pipeline planning-skills, development-paths and bmad-delivery-loop were already SVG, but outside the pipeline in three ways: they carried their own palettes, they were served as <img> so page CSS could not reach them, and two of them shipped a -ko twin that duplicated the geometry to translate the labels. Two were drawn dark — navy grounds, white text, cyan strokes — so on a light docs page they sat as dark panels. Their palettes are mapped onto the shared tokens, which flips them correctly in both themes, and their backdrops are dropped: a diagram sits on the page's ground rather than painting its own. The hardcoded typefaces go too, so they inherit Archivo and IBM Plex Mono like everything else. The Korean strings are lifted out of the -ko files into the label files, matched by document order, so all five diagrams are now one drawing per diagram. docs/images is empty. Also fixes the cache guard, which was clearing the wrong store: build writes to the cache directory, dev writes to .astro beside the config, and the stamp was shared between them so whichever ran first consumed the invalidation. It is now per command and build-only — deleting the store under a running dev server leaves the content layer unable to render, so dev needs a restart after a diagram edit instead. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(diagrams): align the imported diagrams with the shared vocabulary Mapping the old palettes onto the theme tokens made those three diagrams theme-aware, but not part of the system. They still carried 8-16px corners, painted their own canvas panel or background grid, drew every connector in the accent, and left arrowheads baked to a colour of their own — so next to build-run and walkthrough-run they read as imports. They now use the same roles as the two authored diagrams: .node for boxes, .edge for connectors, .head for arrowheads, 2px corners, and no self-painted ground. Accent drops out of all five: it is for the one thing a drawing points at, which here is a single .node.hot on the destination box rather than a green that read as a status. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * chore(docs-site): record hast-util-from-html in the lockfile The dependency was declared in package.json during the move to docs-site but its entry never reached the lockfile's root block, so the two disagreed about what the site depends on. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(diagrams): land the arrowheads on their targets in build-run Three arrows pointed at glyphs rather than at boxes, and all three fell short: DEFER stopped 10px from the document and aimed at its corner instead of its body, REJECT stopped 27px from the discard glyph, and the result returning to you stopped 21px from the person. The boxes were fine throughout — every arrow into a node already landed within 2px. What the three had in common is that a glyph sits inside a translated group, so eyeballing them against the drawing's coordinates put the endpoints in the wrong place. Measured across all twenty arrowheads in screen space afterwards: the largest remaining gap is 3px. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(diagrams): move the DEFER label off its own curve, and clear the cache on a dev start too Re-aiming the DEFER arrow at the document glyph swung its curve left, straight through the label that had been sitting clear of the old path. The label moves into the pocket between Present and the curve. Checking it exposed a worse problem: dev was still serving the previous drawing after a restart, so the fix looked like it had not applied. The cache guard had been narrowed to build-only after clearing the store under a live dev server broke rendering — but that failure came from clearing on a mid-session restart, and the watch that caused those is gone. On a cold start, before the content layer loads, clearing is safe in both commands. Confirmed by probe: edit a diagram, restart dev, the edit is served, no errors. So the limitation is now what it was documented to be. Previously an edited diagram needed a full build before dev would show it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(diagrams): give every connector an arrowhead, and clear the boxes Three defects in development-paths, all inherited from the import: Connectors were written as two subpaths in one path element. A marker-end lands on the last vertex of a path, so only the second segment ever drew a head — which is why Change—Edit had none and Edit→Verify did. Four connectors are now separate paths, and all twelve carry a head. The two routed connectors ended exactly on the box they point at, so the arrowhead sat on the border. They stop 4px clear. The epic row was 140/130/130 wide with the labels centred on each box. All three are 140 now, evenly spaced, with the connectors and labels following. Band backgrounds were imported as .node, which made every check treat a connector crossing its own band as an error. They are .band now: same appearance, but the drawing says what it means. Also moves the DEFER label in build-run back alongside its curve. The previous fix pushed it clear of the line and lost the association. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(diagrams): one stroke weight across all five drawings build-run and walkthrough-run carry no inline stroke-width — the stylesheet owns it, at 1.5 for a connector and 1 for a box. The three imported drawings still carried their own: 2, 3, 4 and 2.5, so their lines were twice as heavy as the authored ones. That is also what made the arrowhead into "Build × stories" look wrong. A marker scales with stroke-width by default, so a head defined at 7 units rendered at 21px on a 3px line instead of 10.5px. On a 9px final drop it overshot the corner and sat on the horizontal run above the box. Sixty inline stroke-widths are gone, and the two routed connectors get a longer final drop so the head has room to sit on. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * test(docs-site): cover rehype-inline-diagrams, and fix what it caught Twelve tests alongside the existing plugin suite, against a temporary site root: what gets inlined and what is left alone, label substitution per locale with fallback to the authored English, the accessible name, and the mtime-keyed re-read the dev server depends on. The first run failed on the accessible name, and it was right to. hast camel-cases ARIA attributes, so the guard read `aria-labelledby` and found nothing — meaning every diagram's own <title> was being replaced by the markdown alt text. build-run and walkthrough-run both title themselves with a sentence describing the whole run, and both were announcing a four-word alt instead. Now 119 assertions, and a diagram that names itself keeps its name. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(diagrams): recover the Korean walkthrough labels, and correct the guide Review caught two things. The style guide sent contributors to website/src/diagrams/, the path this branch renamed. A diagram placed there would never be found by the loader or localized. The second is a regression this branch introduced and the PR described wrongly. It claimed the non-English pages "fall back to the English text in the SVG, which is what their pages showed before". That is untrue for four pages: they had localized exports, and replacing those with one drawing plus an English-only label file puts English labels in front of readers who previously had their own language. walkthrough-diagram-ko.svg was an SVG, so its Korean is recoverable and is now the ko-KR label set for walkthrough-run — all 22 keys. The other three were .webp exports, so their text cannot be lifted out: ko-kr build-a-change build-run ko-KR 0/30 keys fr explanation/build build-run fr-FR 13/30 keys fr build/walk-through walkthrough fr-FR 0/22 keys Those need a translator. The 13 French keys are mine and unreviewed. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * i18n(diagrams): complete the French and Korean diagram labels Fills the three gaps review found: build-run had no Korean and only 13 of 30 French keys, walkthrough-run had no French. All four sets are now complete. Terms come from the repository rather than fresh coinage. Korean reuses what the -ko diagrams and the Korean pages already established — 의도, 구체화, 계획, 검토, 결과, 사양 — and French follows the vocabulary of docs/fr/explanation/build.md: revue, intention, résultat, implémentation, spécification, and visite guidée from the French walkthrough page. The uppercase edge tokens stay as they are. PATCH, REJECT, BAD_SPEC, INTENT_GAP and DEFER appear in no locale's prose, so they read as protocol constants, the way bmad-build and path:line are already left alone in the Korean set. French runs longer than English and these are fixed-geometry drawings, so both French pages and the Korean one were checked for labels overflowing their box, sitting on a connector, or colliding: none. These are my translations, not a native speaker's. Worth a pass from whoever owns each locale before release. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(docs-site): satisfy the repo's lint and format rules in the new tests The diagram tests used .forEach to walk the hast tree, which this repo's eslint config rejects (unicorn/no-array-for-each), and the file was not Prettier-formatted. CI had been failing on lint since the tests landed. Rewritten as for…of and formatted. Verified against every gate the workflow runs — lint, format:check, test, build — rather than the build alone. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * docs(website): describe the source of the theme without naming a private repo The comments cited the private repository and file paths it was ported from. They point at bmadcode.com instead, which is the public thing a reader can actually check. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * fix(website): keep footer links in the reader's language The footer prefixed only BASE_URL to root-locale paths, so a French or Korean reader following any internal link landed on the English page and lost their language for the rest of the visit. The links now carry the page's locale. Every target exists under every locale — Starlight generates the untranslated ones as fallbacks — so this is safe rather than a trade of one broken link for another: all 36 routes, 6 links across 6 locales, resolve in the built site. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
8.0 KiB
8.0 KiB
title, description, sidebar
| title | description | sidebar | ||
|---|---|---|---|---|
| 변경 사항 둘러보기 | bmad-walkthrough로 완성된 변경을 살펴보고 승인, 재작업 또는 추가 논의 여부를 결정하는 방법 |
|
bmad-walkthrough는 완성된 변경을 목적과 컨텍스트부터 세부 사항까지 차례로 안내합니다. 사용자는 설명을 따라가며 승인할지, 다시 작업할지, 더 논의할지를 결정할 수 있습니다. 전체 실행 과정은 bmad-walkthrough 실행하기에서 확인하세요.
이 스킬의 목적은 사람이 변경을 이해하도록 돕는 것입니다. bmad-build가 이미 수행한 리뷰나 bmad-code-review를 대신하지 않습니다.
사용 시점
가장 일반적인 사용 시점은 bmad-build가 끝난 직후입니다. 구현이 완료되고 리뷰 경로가 추가된 사양 파일이 열리면 출시 여부를 결정해야 합니다. 이때 "walkthrough"라고 말하면 됩니다.
Build는 사람의 개입을 줄인 채 오래 실행됩니다. Walkthrough에서는 사용자가 다시 운전대를 잡습니다. diff를 눈으로 훑을 수도 있지만 변경이 여러 파일에 걸치면 흐름을 놓치거나, 서로 떨어진 변경의 연결을 지나치거나, 충분히 이해하지 못한 채 승인할 수 있습니다. 원본 diff는 Git의 파일 순서로 내용을 보여주는데, 이 순서는 이해가 쌓이는 순서와 거의 일치하지 않습니다.
단독으로도 사용할 수 있습니다.
- PR 리뷰 - 특히 파일 수가 많거나 여러 영역에 걸친 변경을 검토할 때
- 변경 내용 파악 - 직접 작성하지 않은 브랜치에서 무슨 일이 있었는지 이해할 때
- 스프린트 리뷰 - 스프린트 상태 파일에서
review로 표시된 스토리를 찾아볼 때
"walkthrough" 또는 "이 변경을 따라가며 설명해 줘"라고 말해 실행하세요. 어떤 터미널에서도 작동하지만 VS Code나 Cursor 같은 IDE 안에서 사용하면 더 편리합니다. 각 단계에 path:line 참조가 표시되며 IDE 내장 터미널에서는 이 참조를 클릭할 수 있습니다.
bmad-walkthrough 실행하기
bmad-build가 끝난 뒤 같은 채팅에서 "walkthrough"라고 말하세요. 다른 변경을 검토하려면 새 채팅을 열고 /bmad-walkthrough에 PR, 브랜치, 사양 경로 또는 현재 Git 상태를 전달합니다.
walkthrough
/bmad-walkthrough https://github.com/org/repo/pull/42를 검토해 줘.
워크플로는 다섯 단계로 진행됩니다. 각 단계는 이전 단계에서 이해한 내용을 바탕으로 "무엇이 바뀌었나?"에서 "출시해도 되는가?"로 초점을 옮깁니다. 스킬은 diff와 사양이 있다면 해당 사양, 주변 코드베이스를 읽고 git diff의 파일 순서가 아닌 이해하기 좋은 순서로 변경을 보여줍니다.
1. 방향 잡기
워크플로는 PR, 커밋, 브랜치, 사양 파일 또는 현재 Git 상태에서 변경 대상을 식별합니다. 그런 다음 한 줄로 의도를 요약하고 변경 파일 수, 영향을 받은 모듈, 논리 코드 줄 수, 경계를 넘는 변경, 새 공개 인터페이스 같은 영향 범위 통계를 보여줍니다.
이 단계에서는 "내가 보려던 변경이 맞나?"를 확인합니다. 코드를 읽기 전에 올바른 대상을 보고 있는지 확인하고 예상 범위와 맞는지 가늠하세요.
2. 둘러보기
변경은 파일이 아니라 관심사를 기준으로 묶습니다. 관심사는 "입력 검증"이나 "API 계약"처럼 서로 밀접하게 연결된 설계 의도입니다. 각 관심사에는 이 접근 방식을 선택한 이유와 코드에서 따라갈 수 있는 path:line 지점이 붙습니다.
이 단계에서는 코드가 정확한지가 아니라 해당 접근 방식이 시스템에 적합한지를 판단합니다. 관심사는 가장 높은 수준의 의도부터 보조 구현까지 하향식으로 제시됩니다. 아직 살펴보지 않은 내용을 먼저 참조하지 않습니다.
3. 상세 검토
설계를 이해한 뒤에는 잘못됐을 때 영향이 가장 큰 지점 2~5개를 보여줍니다. [auth], [schema], [billing], [public API], [security] 같은 위험 범주를 붙이고 문제가 생겼을 때 영향이 큰 순서로 정렬합니다.
이 단계는 버그 찾기가 아닙니다. 자동화 테스트와 CI가 정확성을 검사합니다. 상세 검토에서는 잘못됐을 때 비용이 큰 지점을 파악합니다. 특정 영역을 더 깊게 살펴보려면 "이 영역을 더 파고들어 줘"라고 말해 정확성에 초점을 맞춘 재검토를 요청할 수 있습니다.
독립 에이전트가 이미 사양을 검토했다면 관련 발견 사항도 이 단계에 나타납니다. 이미 수정된 버그가 아니라 사용자가 알아야 한다고 표시된 결정 사항을 보여줍니다.
4. 테스트
변경이 작동하는 모습을 수동으로 확인할 방법 2~5개를 제안합니다. 자동화 테스트 명령이 아니라 테스트 모음만으로 얻기 어려운 확신을 주는 관찰 방법입니다. 시도할 UI 동작, 실행할 CLI 명령, 보낼 API 요청과 각각의 예상 결과가 포함됩니다.
사용자에게 보이는 동작이 없다면 그렇다고 알려줍니다. 불필요한 확인 작업을 만들지 않습니다.
5. 마무리
승인, 재작업, 추가 논의 중 하나를 선택합니다. 로컬 bmad-build 결과를 승인한다면 푸시할 준비가 된 것입니다. 에이전트가 푸시와 PR 생성을 도울 수 있습니다. PR을 승인할 때는 gh pr review --approve 실행을 도울 수 있습니다. 재작업을 선택하면 문제가 접근 방식, 사양, 구현 중 어디에서 시작됐는지 진단하고 구체적인 코드 위치에 연결된 피드백을 작성하도록 돕습니다.
보고서가 아닌 대화
워크플로는 각 단계를 최종 답이 아닌 대화의 출발점으로 제시합니다. 단계 사이 또는 도중에도 LLM과 대화하고 질문하거나 구성 방식에 이의를 제기할 수 있습니다. 다른 스킬을 불러 새로운 관점에서 살펴볼 수도 있습니다.
- "오류 처리를 고급 도출로 다시 검토해 줘" - 특정 영역의 분석을 다시 생각하고 다듬습니다.
- "이 스키마 마이그레이션이 안전한지 파티 모드로 토론해 줘" - 여러 에이전트의 관점으로 집중 토론을 진행합니다.
- "코드 리뷰를 실행해 줘" - 적대적 검토와 엣지 케이스 분석을 포함한 구조화된 발견 사항을 생성합니다.
Walkthrough는 사용자를 정해진 순서에 가두지 않습니다. 구조가 필요할 때는 안내를 제공하고 더 깊이 탐색할 때는 자유롭게 대화할 수 있습니다. 다섯 단계는 전체 그림을 빠뜨리지 않도록 돕지만 각 단계에서 얼마나 깊게 살펴볼지와 어떤 도구를 사용할지는 사용자가 결정합니다.
리뷰 경로
둘러보기 단계는 권장 리뷰 순서가 있을 때 가장 잘 작동합니다. 사양 작성자가 변경 내용을 안내하려고 남긴 지점 목록입니다. 사양에 이 목록이 있다면 워크플로가 그대로 사용합니다.
작성자가 만든 경로가 없다면 워크플로가 diff와 코드베이스 컨텍스트를 바탕으로 생성합니다. 자동으로 만든 경로는 작성자가 직접 구성한 것보다 품질이 낮지만 파일 순서대로 변경을 읽는 것보다는 훨씬 낫습니다.
하지 않는 일
bmad-walkthrough는 리뷰 스킬이 아닙니다. bmad-build가 이미 수행한 리뷰, 완료된 스토리에서 같은 실행을 다시 호출하는 작업, bmad-code-review를 대신하지 않습니다. 린터, 타입 검사기, 테스트 모음을 실행하지 않으며 심각도 점수나 통과·실패 판정도 만들지 않습니다. 사람이 중요한 곳에 판단을 집중하도록 돕는 읽기 안내서입니다.