add-composites-test-bed
Installation
SKILL.md
Add Composites Test Bed
packages/composites 컴포넌트의 시각적 회귀 diff를 위한 정적 Test Bed 스토리 하나를 대상 *.stories.tsx에 추가한다.
- 회귀 하네스 필터:
story.name이'Test Bed'로 시작 +title이'Composites/'로 시작. (packages/composites/__tests__/regressions.test.ts:12) —Test Bed Light,Test Bed Dark두 스토리 모두 매칭. - 컴포넌트당 스토리 2개:
TestBed_Light(라이트 모드) +TestBed_Dark(다크 모드). 동일한 회귀 조건 테이블을 두 appearance에서 각각 렌더한다. - 테이블 구조: 회귀 조건별 컬럼(현재는 각 variant prop 하나) + 마지막
render컬럼(조건 적용된 컴포넌트 렌더 결과). - 테이블 렌더는
packages/composites/src/utils/regressions.tsx의Regression.Table편의 컴포넌트를 재사용한다.conditions(각 조건의key·label·values·format),render(row + container → 컴포넌트) 2개 prop만 넘기면 카테시안 곱 rows·ColumnGroup·Header·Condition 셀·Render 셀이 자동 생성된다. 세밀한 커스텀이 필요하면 하위 컴파운드(Regression.Root / ColumnGroup / ConditionColumn / RenderColumn / Header / Body / Row / Heading / Condition / Render)를 직접 조립한다. VaporTable위에 얹혀 있고, 스타일은$css로 붙는다.
Steps
1. 대상 컴포넌트 확정
사용자가 지정하지 않았다면 AskUserQuestion으로 묻는다. 대상은 packages/composites/src/components/<kebab-name>/ 하위.
완료: 폴더 경로가 확정되어 있고, 해당 폴더에 <name>.tsx와 <name>.stories.tsx가 존재한다.