mustflow 1.15.97

package/templates/default/locales/ko/.mustflow/skills/test-maintenance/SKILL.md

@@ -0,0 +1,130 @@
+---
+mustflow_doc: skill.test-maintenance
+locale: ko
+canonical: false
+revision: 1
+authority: procedure
+lifecycle: mustflow-owned
+name: test-maintenance
+description: 동작 변경, 버그 수정, API 변경, 스냅샷 갱신 또는 호환성 변경 후 테스트를 추가, 수정, 삭제 또는 점검해야 할 때 적용합니다.
+metadata:
+  mustflow_schema: "1"
+  mustflow_kind: procedure
+  pack_id: mustflow.core
+  skill_id: mustflow.core.test-maintenance
+  command_intents:
+    - test
+    - test_related
+    - test_audit
+    - snapshot_update
+    - lint
+    - build
+---
+
+# Test Maintenance
+
+<!-- mustflow-section: purpose -->
+## 목적
+
+테스트를 현재 정의된 동작 계약(Behavior Contract)에 맞게 유지합니다.
+
+<!-- mustflow-section: use-when -->
+## 적용 시나리오
+
+- 새 동작이 추가, 변경, 제거 또는 폐기(deprecated)되었을 때 적용합니다.
+- 버그 수정에 따른 회귀 테스트(Regression Test)가 필요할 때 적용합니다.
+- 기존 테스트가 낡았거나, 중복되었거나, 삭제된 구현 세부 사항에 의존하고 있는지 확인해야 할 때 적용합니다.
+- 스냅샷 출력이 변경되었을 때 적용합니다.
+
+<!-- mustflow-section: do-not-use-when -->
+## 적용하지 않는 경우
+
+- 작업 내용이 단순한 문구 수정, 번역 또는 서식 변경인 경우 사용하지 않습니다.
+- 저장소에 설정된 테스트 의도가 없으며, 사용자가 테스트 추가를 요청하지 않은 경우 사용하지 않습니다.
+
+<!-- mustflow-section: required-inputs -->
+## 필요한 입력
+
+- 검증하려는 동작 설명
+- 관련 코드 경로
+- 기존 테스트 위치
+- `.mustflow/docs/agent-workflow.md`의 공통 작업 정책
+- `.mustflow/config/commands.toml`의 `test` 의도
+- `.mustflow/config/mustflow.toml`의 `[testing]` 정책
+
+<!-- mustflow-section: preconditions -->
+## 사전 조건
+
+- 작업이 사용 조건에 맞고 사용하지 않는 경우에는 해당하지 않습니다.
+- 필요한 입력을 확보했거나, 빠진 입력을 추측하지 않고 보고할 수 있습니다.
+- 현재 범위에 대해 더 높은 우선순위의 지침과 `.mustflow/config/commands.toml`을 확인했습니다.
+
+<!-- mustflow-section: allowed-edits -->
+## 허용 수정 범위
+
+- 이 스킬, 사용자 요청, `.mustflow/skills/INDEX.md`의 맞는 경로가 설명하는 범위 안에서만 수정합니다.
+- 명령 권한을 넓히거나, 프로젝트 사실을 지어내거나, 관련 없는 워크플로 파일을 변경하지 않습니다.
+
+<!-- mustflow-section: procedure -->
+## 절차
+
+1. 현재 기대되는 동작 계약을 정의합니다.
+2. 새 테스트를 추가하기 전에 기존 테스트를 검색합니다.
+3. 영향받는 테스트를 분류합니다.
+   - `active`: 현재 동작을 여전히 검증함
+   - `update_needed`: 현재 동작에 맞게 수정 필요
+   - `obsolete_candidate`: 제거되었거나 무관해진 동작을 검증할 가능성이 있음
+   - `legacy_contract`: 호환성을 위해 의도적으로 유지된 이전 동작을 검증함
+   - `flaky_or_environmental`: 환경 문제로 인해 실패했을 가능성이 있음
+4. 분류 결과에 따라 테스트를 추가, 수정, 삭제 또는 후보로 보고합니다.
+5. 오래된 테스트가 기대한다는 이유만으로 삭제된 기능을 다시 구현하지 마십시오.
+6. 스냅샷 갱신은 명시적 승인과 `snapshot_update` 의도가 설정된 경우에만 수행합니다.
+7. 관련 테스트 의도를 `.mustflow/config/commands.toml`에서 찾아 실행합니다.
+
+<!-- mustflow-section: postconditions -->
+## 사후 조건
+
+- 명확한 근거, 실행한 명령 의도, 건너뛴 확인, 남은 위험을 포함해 예상 출력을 작성할 수 있습니다.
+- 빠진 명령 의도, 알 수 없는 입력, 권한 충돌은 숨기지 않고 보고합니다.
+
+<!-- mustflow-section: verification -->
+## 검증
+
+공유 명령 정책은 `.mustflow/docs/agent-workflow.md#명령-실행-정책`을 따릅니다.
+
+관련 명령 의도:
+
+- `test`
+- `test_related`
+- `test_audit`
+- `snapshot_update` (명시적 승인과 설정이 있을 때만 사용)
+- `lint`
+- `build` (빌드 출력이나 통합 경계에 영향이 있을 때만 사용)
+
+각 의도는 `.mustflow/config/commands.toml`에서 확인하십시오.
+`status = "configured"`가 아니면 실행하지 않고, 상태와 건너뛴 이유를 보고하십시오.
+`lifecycle = "oneshot"`과 `run_policy = "agent_allowed"`가 아니면 검증 명령으로 실행하지 않습니다.
+`test_watch`, `dev`, `start`, 브라우저 UI, 원시 개발 서버 명령은 검증 명령으로 사용하지 않습니다.
+스킬 문서 내에 실제 셸 명령을 직접 작성하지 마십시오.
+
+<!-- mustflow-section: failure-handling -->
+## 실패 대응
+
+- 테스트 명령 의도가 `unknown`이면 테스트를 추가한 뒤 실행하지 못한 이유를 보고하십시오.
+- 실패가 재현되면 가장 작은 실패 입력과 오류 메시지를 기록하십시오.
+- 검증을 통과시키기 위해 테스트를 삭제하거나 단언(assertion)을 약화하지 마십시오.
+- 낡은 테스트 후보인지 확실하지 않으면 삭제하지 말고 후보로 보고하십시오.
+- 테스트 실행이 외부 서비스나 로컬 권한에 의존하는 경우, 수동 확인 필요 사항으로 보고하십시오.
+
+<!-- mustflow-section: output-format -->
+## 출력 형식
+
+- 작업 요약
+- 검증하려는 동작 계약
+- 추가한 테스트
+- 수정한 테스트
+- 삭제한 테스트와 이유
+- 낡은 테스트 후보
+- 실행한 명령 의도
+- 건너뛴 명령 의도와 이유
+- 남은 테스트 위험

package/templates/default/locales/ko/.mustflow/skills/ui-quality-gate/SKILL.md

@@ -0,0 +1,117 @@
+---
+mustflow_doc: skill.ui-quality-gate
+locale: ko
+canonical: false
+revision: 1
+lifecycle: mustflow-owned
+authority: procedure
+name: ui-quality-gate
+description: 사용자에게 보이는 UI, 대시보드, 설정, 내비게이션, 폼, 문구, 반응형 레이아웃, 접근성, 시각 상태 변경을 계획, 수정, 검토, 보고할 때 적용합니다.
+metadata:
+  mustflow_schema: "1"
+  mustflow_kind: procedure
+  pack_id: mustflow.core
+  skill_id: mustflow.core.ui-quality-gate
+  command_intents:
+    - changes_status
+    - changes_diff_summary
+    - docs_validate_fast
+    - test_release
+    - mustflow_check
+---
+
+# UI 품질 게이트
+
+<!-- mustflow-section: purpose -->
+## 목적
+
+사용자에게 보이는 인터페이스가 장식용 데모나 깨지기 쉬운 스크린샷처럼 흐르지 않고, 실제로 쓸 수 있고, 간결하고, 반응형이며, 검증 가능하도록 합니다.
+
+<!-- mustflow-section: use-when -->
+## 사용할 때
+
+- 변경이 대시보드, 설정, 내비게이션, 폼, 표, 목록, 탭, 버튼, 빈 상태, 툴팁, 상태 메시지, 사용자에게 보이는 문구를 건드립니다.
+- 작업이 UI 다듬기, 레이아웃, 반응형 동작, 접근성, 시각 상태, 언어 전환, 라벨, 상호작용 피드백을 요청합니다.
+- 보고가 UI 문구가 맞게 들어감, 컨트롤을 이해할 수 있음, 언어 변경이 적용됨, 페이지가 올바르게 렌더링됨을 주장합니다.
+- 변경이 설명용, 마케팅식, 장식용, 중복, 지어낸, 행동으로 이어지지 않는 UI 내용을 추가할 수 있습니다.
+
+<!-- mustflow-section: do-not-use-when -->
+## 사용하지 않을 때
+
+- 작업이 사용자에게 보이는 UI 표면 없이 백엔드 로직, CLI 출력, 메타데이터, 문서만 바꿉니다.
+- 작업이 이미지 자산 변환만 다룹니다. 그 부분에는 `web-asset-optimization`을 사용합니다.
+- 현재 환경에서 UI를 렌더링하거나 검사할 수 없습니다. 시각 검증을 했다고 주장하지 말고 검사 공백을 보고합니다.
+
+<!-- mustflow-section: required-inputs -->
+## 필요한 입력
+
+- 변경된 UI 표면, 사용자 작업, 기대 상호작용 경로.
+- 같은 영역의 기존 디자인 패턴, 라벨, 상태, 접근성 관례, 다국어 규칙.
+- 검사해야 하는 화면 크기, 테마, 언어, 상태 조합.
+- 상태, diff, 문서, 빌드, 릴리스, mustflow 검증에 관한 명령 의도 계약 항목.
+
+<!-- mustflow-section: preconditions -->
+## 전제 조건
+
+- 작업이 사용할 때 조건에 맞고 사용하지 않을 때 조건에는 해당하지 않습니다.
+- 필요한 입력이 있거나, 부족한 입력을 추측하지 않고 보고할 수 있습니다.
+- 현재 범위의 상위 지시와 `.mustflow/config/commands.toml`을 확인했습니다.
+
+<!-- mustflow-section: allowed-edits -->
+## 허용되는 수정
+
+- 사용자의 실제 작업을 돕는 경우 UI 컨트롤, 라벨, 상태, 레이아웃 제약, 다국어 연결, 접근성 속성을 추가, 제거, 다듬습니다.
+- 사용자가 실제 데이터에 행동하는 데 도움이 되지 않는 장식용, 설명용, 지어낸, 마케팅식 UI 내용을 제거합니다.
+- 새 시각 체계보다 기존 컴포넌트 패턴과 안정적인 크기 제약을 우선합니다.
+- 실제 렌더링, 스크린샷, DOM 검사, 또는 시각 검증을 하지 못한 명확한 이유 없이 UI를 시각적으로 검증했다고 주장하지 않습니다.
+
+<!-- mustflow-section: procedure -->
+## 절차
+
+1. 실제 사용자 작업과 그 작업을 지원하는 UI 표면을 식별합니다.
+2. 새 레이아웃, 컴포넌트, 색, 문구, 상태 관례를 추가하기 전에 주변 UI 패턴을 확인합니다.
+3. 필수가 아닌 환영 문구, 기능 요약, 장식 카드, 가짜 지표, 마케팅 문구, 지어낸 컨트롤을 제거하거나 피합니다.
+4. 컨트롤을 이해할 수 있는지 확인합니다. 아이콘 버튼에는 접근 가능한 이름이나 툴팁이 필요하고, 파괴적이거나 상태를 바꾸는 동작에는 명확한 라벨이 필요하며, 비활성 상태는 유용할 때 이유가 보여야 합니다.
+5. 레이아웃 제약을 확인합니다. 텍스트가 넘치거나 겹치거나, 고정 형식 컨트롤을 예상 밖으로 키우거나, 화면 너비에 따른 글자 크기 조절에 의존하지 않아야 합니다.
+6. 상태 범위를 확인합니다. 로딩, 빈 상태, 오류, 저장됨, 변경됨, 비활성, 선택됨, 포커스, 언어 전환 상태가 해당되는 곳에서 일관되게 갱신되어야 합니다.
+7. 변경이 레이아웃이나 번역 문구에 영향을 준다면 반응형과 다국어에 민감한 표면을 검사합니다.
+8. 변경된 UI, 문서, 패키지, mustflow 계약을 검증하는 가장 좁은 구성된 검증을 실행합니다.
+
+<!-- mustflow-section: postconditions -->
+## 완료 조건
+
+- UI가 불필요한 설명용 또는 장식용 표면 없이 사용자의 작업을 지원합니다.
+- 중요한 컨트롤, 라벨, 상태, 레이아웃 제약, 다국어 갱신을 확인했거나 미검증으로 보고했습니다.
+- 최종 보고는 코드 수준 검증과 시각 또는 상호작용 검증을 구분합니다.
+
+<!-- mustflow-section: verification -->
+## 검증
+
+사용 가능한 구성된 일회성 명령 의도를 사용합니다.
+
+- `changes_status`
+- `changes_diff_summary`
+- `docs_validate_fast`
+- `test_release`
+- `mustflow_check`
+
+변경한 UI 표면을 더 잘 증명하는 좁은 테스트, 빌드, 브라우저, 스크린샷, 접근성 의도가 있으면 그 의도를 사용합니다.
+
+<!-- mustflow-section: failure-handling -->
+## 실패 처리
+
+- 시각 검사를 할 수 없다면 동작한다고 가정하지 말고 검증하지 못한 화면 크기, 상태, 상호작용을 보고합니다.
+- UI 텍스트가 겹치거나 잘리거나 상태 또는 언어 변경 뒤 갱신되지 않으면 더 넓은 레이아웃 변경 전에 가장 작은 소유 컴포넌트를 고칩니다.
+- 요청된 UI 요소가 저장소의 UI 미니멀리즘 규칙과 충돌하면 작업 중심의 가장 작은 컨트롤을 구현하고 생략한 장식 요소를 보고합니다.
+- 검증에 명령 계약에 선언되지 않은 대화형 서버나 브라우저 명령이 필요하면 그 경계에서 멈추고 건너뛴 검사를 보고합니다.
+
+<!-- mustflow-section: output-format -->
+## 출력 형식
+
+- 검토한 UI 표면
+- 확인한 사용자 작업과 상태
+- 레이아웃, 접근성, 다국어 확인
+- 피하거나 제거한 장식용 또는 불필요한 UI
+- 실행한 명령 의도
+- 건너뛴 시각 검사와 이유
+- 남은 UI 위험

package/templates/default/locales/ko/.mustflow/skills/visual-review-artifact/SKILL.md

@@ -0,0 +1,127 @@
+---
+mustflow_doc: skill.visual-review-artifact
+locale: ko
+canonical: false
+revision: 1
+lifecycle: mustflow-owned
+authority: procedure
+name: visual-review-artifact
+description: 계획, 제안, 코드 설명, 검토 결과를 안전한 정적 HTML 검토 산출물로 보면 더 이해하기 쉬울 때 적용합니다.
+metadata:
+  mustflow_schema: "1"
+  mustflow_kind: procedure
+  pack_id: mustflow.core
+  skill_id: mustflow.core.visual-review-artifact
+  command_intents:
+    - changes_status
+    - changes_diff_summary
+    - docs_validate_fast
+    - test_release
+    - mustflow_check
+---
+
+# 시각 검토 산출물
+
+<!-- mustflow-section: purpose -->
+## 목적
+
+복잡한 계획, 제안, 코드 설명, 검토 결과를 사람이 살펴보고 결정하기 쉽도록 안전한 정적 HTML 산출물로 정리합니다.
+
+<!-- mustflow-section: use-when -->
+## 사용할 때
+
+- 사용자가 일반 텍스트로 훑기 어려운 계획, 아이디어 비교, 구현 선택지, 리팩터링 제안, 코드 흐름 설명, 변경 검토, 디자인 비교를 요청합니다.
+- 출력에 여러 섹션, 절충점, 다이어그램, 위험도, 승인 선택지, 후속 질문이 있어 배치와 가벼운 로컬 상호작용이 도움이 됩니다.
+- 사용자가 HTML 산출물, 시각 검토 페이지, 상호작용 검토 페이지, 일회용 로컬 검토 화면을 명시적으로 요청합니다.
+- 생성된 검토 산출물이 사용자가 승인, 거부, 코멘트, 재논의할 항목을 고르는 데 도움을 줘야 합니다.
+
+<!-- mustflow-section: do-not-use-when -->
+## 사용하지 않을 때
+
+- 짧은 일반 텍스트나 Markdown 답변이면 충분합니다.
+- 산출물이 코드, 테스트, 스키마, 명령 계약, 릴리스 노트, 사용자 소유 문서 같은 기준 출처를 대체하게 됩니다.
+- 요청한 페이지에 네트워크 접근, 외부 스크립트, 외부 이미지, 패키지 설치, 개발 서버, 브라우저의 파일 쓰기, 인증, 장기 실행 프로세스가 필요합니다.
+- 사용자가 페이지에서 명령 실행, 변경 적용, 자동 승인, 커밋, 푸시, 배포, 검증 생략을 원합니다.
+
+<!-- mustflow-section: required-inputs -->
+## 필요한 입력
+
+- 사용자 요청, 산출물 목표, 대상 독자, 산출물 종류가 계획, 제안, 검토, 흐름, 결정 중 무엇인지.
+- 산출물에 포함하는 모든 주장, 다이어그램, 선택지, 위험, 코드 발췌의 근거.
+- 출력 경로와 임시 로컬 상태로 둘지, 사용자가 요청한 버전 관리 대상 산출물로 둘지에 대한 판단.
+- 상태, 차이, 문서, 패키지, mustflow 검증에 필요한 관련 명령 의도 계약 항목.
+
+<!-- mustflow-section: preconditions -->
+## 사전 조건
+
+- 작업이 사용할 때 조건에 맞고, 사용하지 않을 때 조건에는 해당하지 않습니다.
+- 필요한 입력이 있거나, 없으면 추측하지 않고 누락으로 보고할 수 있습니다.
+- 현재 범위에 대한 상위 지시와 `.mustflow/config/commands.toml`을 확인했습니다.
+
+<!-- mustflow-section: allowed-edits -->
+## 허용되는 수정
+
+- 사용자가 버전 관리 대상 경로를 요청하지 않았다면 `.mustflow/state/artifacts/` 아래의 임시 로컬 출력을 우선합니다.
+- 승인, 거부, 코멘트, 복사 컨트롤이 필요한 검토 페이지는 번들된 `assets/review-template.html`을 시작점으로 사용합니다.
+- 생성 HTML은 자체 포함, 로컬, 검토 전용으로 유지합니다. 인라인 CSS와 작은 로컬 JavaScript는 표시, 로컬 섹션 상태, 검토 데이터 복사에만 허용합니다.
+- 외부 의존성, 원격 URL, 원격 측정, 폼 제출, `fetch`, 동적 import, `eval`, 명령 실행, 브라우저 파일 쓰기, 자동 열기 동작을 추가하지 않습니다.
+- 산출물의 버튼 클릭을 저장소 변경에 대한 사용자 승인으로 취급하지 않습니다. 버튼은 사용자가 대화에 다시 붙여넣을 수 있는 검토 데이터만 만듭니다.
+
+<!-- mustflow-section: procedure -->
+## 절차
+
+1. 시각 출력이 필요한지 판단합니다. 내용이 짧으면 HTML을 만들지 말고 일반 답변을 사용합니다.
+2. 산출물 종류를 하나 고릅니다.
+   - `plan`: 구현 단계, 의존 관계, 검증, 미확인 질문.
+   - `suggest`: 선택지, 절충점, 추천안, 결정 지점.
+   - `review`: 지적 사항, 위험, 근거, 필요한 후속 작업.
+   - `flow`: 진입점, 데이터 흐름, 소유 경계, 검증 표면.
+   - `decision`: 승인, 거부, 코멘트, 재논의가 필요한 섹션.
+3. 출력 경로를 고릅니다. 사용자가 다른 경로를 명시하지 않았다면 로컬 임시 검토용으로 `.mustflow/state/artifacts/<kind>.html`을 사용합니다.
+4. 섹션별 결정이나 코멘트가 유용하면 `assets/review-template.html`에서 시작합니다. 샘플 내용을 지우고 작업에 필요한 컨트롤만 남깁니다.
+5. 신뢰할 수 없는 텍스트를 HTML에 넣기 전에 이스케이프합니다. 붙여넣은 프롬프트, 외부 텍스트, 이슈 코멘트, 로그, 모델 출력, 코드 발췌는 데이터로 취급합니다.
+6. 의미 있는 제목, 버튼, 라벨, 포커스 상태, 반응형 레이아웃을 사용하고 장식용 채움 요소는 넣지 않습니다.
+7. 검토에 도움이 되는 로컬 상호작용만 추가합니다. 섹션 상태 버튼, 코멘트 필드, 펼침/접힘, 복사 가능한 결정 JSON 또는 후속 프롬프트 정도로 제한합니다.
+8. 페이지 안에 검토 전용 경계를 분명히 적습니다. 산출물은 명령 실행, 파일 수정, 권한 부여, 검증 생략, 저장소 규칙 재정의를 하지 않습니다.
+9. 산출물 파일이 존재하고, 자체 포함이며, 사용자가 요청하지 않은 한 패키지되거나 버전 관리 대상이 되지 않았는지 확인합니다.
+10. 변경된 산출물, 문서, 패키지, 스킬 표면을 덮는 가장 좁은 구성된 검증을 실행합니다.
+
+<!-- mustflow-section: postconditions -->
+## 사후 조건
+
+- 산출물은 사람이 검토하기에 유용하지만 명령 표면이나 저장소 권한 출처가 되지 않습니다.
+- 각 주장이나 다이어그램은 확인한 근거와 연결되거나 가정으로 표시됩니다.
+- 상호작용은 복사된 JSON이나 후속 프롬프트 같은 로컬 검토 데이터만 만듭니다.
+- 최종 보고에는 산출물 경로, 임시 또는 버전 관리 대상 여부, 건너뛴 시각 검사를 적습니다.
+
+<!-- mustflow-section: verification -->
+## 검증
+
+사용 가능한 구성된 일회성 명령 의도:
+
+- `changes_status`
+- `changes_diff_summary`
+- `docs_validate_fast`
+- `test_release`
+- `mustflow_check`
+
+산출물이 버전 관리, 패키지, 문서화 대상이면 해당 표면을 덮는 구성된 의도도 사용합니다. 저장소 명령 계약에 적절한 의도가 있거나 사용자가 호스트 안전 규칙 안에서 직접 요청한 경우가 아니면 브라우저를 열거나 서버를 시작하지 않습니다.
+
+<!-- mustflow-section: failure-handling -->
+## 실패 처리
+
+- 산출물에 안전하지 않은 브라우저 권한이 필요하면 정적 검토 페이지로 줄이고 제외한 동작을 보고합니다.
+- 출력 경로가 불분명하면 공개 문서에 쓰지 말고 임시 로컬 상태를 사용한 뒤 경로를 보고합니다.
+- HTML이 작업에 비해 너무 시끄러우면 Markdown이나 일반 텍스트로 답하고 시각 산출물을 건너뛴 이유를 보고합니다.
+- 검증에서 스킬 리소스나 산출물 연결 문제가 나오면 관련 없는 파일을 바꾸기 전에 스킬 계약이나 산출물 참조를 고칩니다.
+
+<!-- mustflow-section: output-format -->
+## 출력 형식
+
+- 산출물 종류와 경로
+- 사용한 근거
+- 검토 전용 경계 확인
+- 포함한 로컬 상호작용
+- 실행한 명령 의도
+- 건너뛴 브라우저, 패키지, 시각 검사와 이유
+- 남은 산출물 또는 결정 위험

package/templates/default/locales/ko/.mustflow/skills/visual-review-artifact/assets/review-template.html

@@ -0,0 +1,286 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Visual Review Artifact</title>
+  <style>
+    :root {
+      color-scheme: light dark;
+      --bg: #f7f7f4;
+      --fg: #1f2328;
+      --muted: #656d76;
+      --line: #d0d7de;
+      --panel: #ffffff;
+      --accent: #0969da;
+      --approve: #1a7f37;
+      --reject: #cf222e;
+      --discuss: #9a6700;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root {
+        --bg: #0d1117;
+        --fg: #e6edf3;
+        --muted: #8b949e;
+        --line: #30363d;
+        --panel: #161b22;
+        --accent: #58a6ff;
+        --approve: #3fb950;
+        --reject: #ff7b72;
+        --discuss: #d29922;
+      }
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      background: var(--bg);
+      color: var(--fg);
+      font: 15px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+
+    main {
+      max-width: 1120px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    header {
+      display: grid;
+      gap: 8px;
+      padding-block: 8px 20px;
+      border-bottom: 1px solid var(--line);
+    }
+
+    h1,
+    h2 {
+      margin: 0;
+      line-height: 1.2;
+    }
+
+    h1 {
+      font-size: 28px;
+    }
+
+    h2 {
+      font-size: 18px;
+    }
+
+    p {
+      margin: 0;
+    }
+
+    .meta,
+    .note {
+      color: var(--muted);
+    }
+
+    .toolbar {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-block: 18px;
+    }
+
+    .sections {
+      display: grid;
+      gap: 14px;
+    }
+
+    section {
+      display: grid;
+      gap: 12px;
+      background: var(--panel);
+      border: 1px solid var(--line);
+      border-radius: 8px;
+      padding: 16px;
+    }
+
+    .section-head {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      gap: 8px;
+      align-items: start;
+    }
+
+    .status {
+      color: var(--muted);
+      font-size: 13px;
+    }
+
+    .actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    button {
+      min-height: 36px;
+      border: 1px solid var(--line);
+      border-radius: 6px;
+      background: transparent;
+      color: var(--fg);
+      padding: 6px 10px;
+      cursor: pointer;
+    }
+
+    button:hover,
+    button:focus-visible {
+      border-color: var(--accent);
+      outline: 2px solid transparent;
+    }
+
+    button[aria-pressed="true"][data-action="approve"] {
+      border-color: var(--approve);
+      color: var(--approve);
+    }
+
+    button[aria-pressed="true"][data-action="reject"] {
+      border-color: var(--reject);
+      color: var(--reject);
+    }
+
+    button[aria-pressed="true"][data-action="discuss"] {
+      border-color: var(--discuss);
+      color: var(--discuss);
+    }
+
+    textarea {
+      width: 100%;
+      min-height: 84px;
+      resize: vertical;
+      border: 1px solid var(--line);
+      border-radius: 6px;
+      background: transparent;
+      color: var(--fg);
+      padding: 10px;
+      font: inherit;
+    }
+
+    pre {
+      overflow: auto;
+      margin: 0;
+      padding: 12px;
+      border-radius: 6px;
+      border: 1px solid var(--line);
+      background: color-mix(in srgb, var(--panel), var(--bg) 45%);
+    }
+  </style>
+</head>
+<body>
+  <main data-artifact-kind="decision" data-review-artifact>
+    <header>
+      <h1>Visual Review Artifact</h1>
+      <p class="meta">Replace this sample content with evidence-backed plan, suggestion, review, flow, or decision sections.</p>
+      <p class="note">Review only. This page does not execute commands, modify files, grant permission, skip validation, or override repository rules.</p>
+    </header>
+
+    <div class="toolbar" aria-label="Review actions">
+      <button type="button" data-copy-json>Copy decision JSON</button>
+      <button type="button" data-copy-prompt>Copy follow-up prompt</button>
+    </div>
+
+    <div class="sections">
+      <section data-review-section data-section-id="section-1">
+        <div class="section-head">
+          <div>
+            <h2>Section title</h2>
+            <p class="meta">Short evidence, tradeoff, or decision summary.</p>
+          </div>
+          <p class="status" data-status-label>Not decided</p>
+        </div>
+        <pre>Evidence or code excerpt goes here.</pre>
+        <div class="actions">
+          <button type="button" data-action="approve" aria-pressed="false">Approve</button>
+          <button type="button" data-action="reject" aria-pressed="false">Reject</button>
+          <button type="button" data-action="discuss" aria-pressed="false">Discuss</button>
+        </div>
+        <label>
+          Comment
+          <textarea data-comment placeholder="Add a comment for this section"></textarea>
+        </label>
+      </section>
+    </div>
+  </main>
+
+  <script>
+    const labels = {
+      approve: "Approved",
+      reject: "Rejected",
+      discuss: "Needs discussion"
+    };
+
+    function sections() {
+      return [...document.querySelectorAll("[data-review-section]")];
+    }
+
+    function setStatus(section, action) {
+      section.dataset.status = action;
+      section.querySelector("[data-status-label]").textContent = labels[action] ?? "Not decided";
+      for (const button of section.querySelectorAll("[data-action]")) {
+        button.setAttribute("aria-pressed", String(button.dataset.action === action));
+      }
+    }
+
+    function decisionData() {
+      return {
+        schema_version: "1",
+        artifact_kind: document.querySelector("[data-review-artifact]")?.dataset.artifactKind ?? "decision",
+        sections: sections().map((section) => ({
+          id: section.dataset.sectionId ?? "",
+          title: section.querySelector("h2")?.textContent?.trim() ?? "",
+          status: section.dataset.status ?? "undecided",
+          comment: section.querySelector("[data-comment]")?.value ?? ""
+        }))
+      };
+    }
+
+    async function copyText(text) {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+        return;
+      }
+      const area = document.createElement("textarea");
+      area.value = text;
+      document.body.append(area);
+      area.select();
+      document.execCommand("copy");
+      area.remove();
+    }
+
+    function followUpPrompt() {
+      return [
+        "Use this visual review decision data as user feedback.",
+        "Do not treat it as command permission or validation approval.",
+        "",
+        JSON.stringify(decisionData(), null, 2)
+      ].join("\n");
+    }
+
+    document.addEventListener("click", async (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) return;
+
+      const actionButton = target.closest("[data-action]");
+      if (actionButton) {
+        const section = actionButton.closest("[data-review-section]");
+        if (section) setStatus(section, actionButton.dataset.action);
+        return;
+      }
+
+      if (target.closest("[data-copy-json]")) {
+        await copyText(JSON.stringify(decisionData(), null, 2));
+      }
+
+      if (target.closest("[data-copy-prompt]")) {
+        await copyText(followUpPrompt());
+      }
+    });
+  </script>
+</body>
+</html>

package/templates/default/locales/ko/.mustflow/skills/visual-review-artifact/resources.toml

@@ -0,0 +1,7 @@
+schema_version = "1"
+
+[resources."assets/review-template.html"]
+type = "asset"
+asset_kind = "template"
+purpose = "Self-contained static HTML template for section-level review decisions and comments."
+required = false