marionette:verify-component

Verify one CoUI component's interactive behaviour in isolation.

항목	내용
Invoke	/marionette:verify-component
Category	cocode-flutter
Complexity	simple
MCP Servers	marionette

/marionette verify-component — 부품 하나만 콕 집어 동작 점검#

한마디로#

버튼·입력창 같은 UI 부품 하나를 바꿨을 때, 그게 여전히 제대로 동작하는지 확인해 주는 명령입니다. 새로 만든 자동차 문 손잡이 하나만 떼어내 "잘 열리고 닫히나" 직접 눌러보는 점검과 같아요.

누가·언제 쓰나요#

CoUI 디자인 시스템의 부품(컴포넌트) 하나를 수정한 개발자
그 변경 후 "이 부품이 여러 형태(variant)에서 여전히 잘 동작하는지" 빠르게 확인하고 싶을 때

무엇을 해주나요#

지정한 부품을 화면에서 직접 눌러보고, 그 결과를 점검 보고서 폴더로 남겨 줍니다. 폴더 안에는:

before.png — 누르기 전 화면 사진
after.png — 누른 후 화면 사진 (변화가 있었는지 비교용)
element.json — 점검 대상 부품 정보
summary.md — 점검 결과 요약

입력창(Input·Textarea) 부품이라면 글자를 입력한 뒤 "실제로 그 글자가 잘 들어갔는지"까지 확인합니다.

어떻게 쓰나요#

/marionette verify-component --type=PrimaryButton --usecase=destructive

--type (필수) — 점검할 CoUI 부품 이름. 예: PrimaryButton
--usecase (선택) — 그 부품의 특정 형태만 골라 점검. 생략하면 모든 형태를 점검합니다.
--prop-overrides (선택) — 부품 설정값을 그 자리에서 바꿔 점검 (YAML 형식)

안에서 무슨 일이 벌어지나요#

점검할 부품(또는 지정한 형태) 화면으로 이동합니다.
누르기 전 화면을 사진으로 찍습니다 (before.png).
그 화면에서 실제로 누를 수 있는 핵심 요소를 찾습니다.
그 요소를 눌러 봅니다.
누른 후 화면을 다시 사진으로 찍습니다 (after.png).
입력창 부품이라면, 입력한 글자가 제대로 반영됐는지 한 번 더 확인합니다.

⚙️ 상세 옵션·실행 명세 (개발자 / AI 에이전트용)

Parameters#

Parameter	Required	Description
`--type`	✅	CoUI primitive name, e.g. `PrimaryButton`
`--usecase`	❌	Specific Widgetbook UseCase (default: all UseCases for that type)
`--prop-overrides`	❌	YAML inline overrides for Widgetbook knobs

Behaviour#

Navigate Widgetbook to <type> (or the named UseCase).
take_screenshots → before.png.
Identify the primary interactive element (filtered by isInteractiveWidget).
Run its smoke action.
take_screenshots → after.png.
For Input/Textarea, also re-fetch the element and assert the controller value matches the entered text.

Example#

/marionette verify-component --type=PrimaryButton --usecase=destructive

[✓] navigated to PrimaryButton::destructive
[✓] tap target found: text= " Delete account " 
 [✓] tap executed
[✓] post-tap screenshot differs (Δ  >   0)
[✓] no errors in logs
Result: .claude/docs/marionette/verify-PrimaryButton-destructive- < ts > /summary.md

Output#

.claude/docs/marionette/verify- < type > - < usecase > - < ts > /
├── before.png
├── after.png
├── element.json     # what get_interactive_elements returned
└── summary.md