하네스 UI를 위한 액체 유리 스위치
사용자가 웹 인터페이스, AI 코딩 하네스 또는 유사한 프로젝트 UI에 패키지된 유리 스위치를 추가하도록 요청할 때 이 스킬을 사용하십시오. 목표는 컴포넌트를 호스트 프로젝트의 프레임워크 및 상태 모델에 적용하는 것이며, 하네스의 관련 없는 부분을 재설계하는 것이 아닙니다.
이 스킬을 Codex나 Claude에 설치하면 코딩 에이전트가 재사용 가능한 지침과 컴포넌트 파일을 얻을 수 있습니다. 이는 해당 제품 자체의 애플리케이션 크롬을 수정하기 위한 API를 제공하지 않습니다. 대신 사용자가 편집 가능한 프로젝트 또는 하네스 소스에서 작업하십시오.
워크플로우
- 편집 전에 호스트 프로젝트를 검사합니다. UI 진입점, 프레임워크, 기존 분할 컨트롤, 상태 소유자, 스타일링 접근 방식 및 사용 가능한 빌드 또는 미리보기 명령을 찾습니다. 로컬의
AGENTS.md,CLAUDE.md및 기타 프로젝트 지침을 따릅니다. - 사용자가 전환하려는 상태 쌍을 식별합니다. 이 컴포넌트는 정확히 두 가지 선택(예: 평면/구체 또는 전역/로컬)을 위한 것입니다. 사용자가 더 많은 선택을 요청하면 패키지된 컨트롤이 이진수임을 설명하고 요청된 상호작용이 여전히 합리적인 경우에만 적용합니다.
references/harness-porting.md와assets/아래의 파일들을 읽습니다. DOM 계약이 맞는 경우assets/liquid-controls.js와assets/liquid-controls.css를 재사용합니다. 그렇지 않으면 상호작용 모델을 호스트 프레임워크로 이식합니다.- 선택을 호스트의 실제 상태 소스에 연결합니다. 클릭 또는 드래그는 선택된 시각적 상태와 표시된 뷰를 모두 업데이트해야 합니다. 선언적 프레임워크에서는 프레임워크 뒤에서 DOM을 변경하는 대신 프레임워크 상태에서 활성 스타일링과
aria-pressed를 파생시킵니다. - 주요 상호작용 동작을 유지합니다: 연속적인 포인터 드래그, 한 제스처 중 반복적인 방향 전환, 70% 이동 임계값에서 전환, 선택된 옵션에 정착, 각 측면 당 20 CSS 픽셀의 렌즈 오버행 제한.
prefers-reduced-motion을 존중합니다. - 호스트 앱이 이미
.view-switch,.view-button또는.view-lens를 사용하는 경우 CSS 선택자를 스코프 지정하거나 이름을 변경합니다. 하네스의 관련 없는 네비게이션, 패널, 라우팅 또는 영속성을 변경하지 않습니다. - 사용 가능한 빌드, 테스트 또는 브라우저 미리보기 워크플로우로 실제 호스트 UI를 확인합니다. 마우스 및 터치 드래그, 직접 버튼 활성화, 반전/빠른 제스처, 크기 조정, 키보드 포커스 및 축소된 모션을 확인합니다. 어떤 검사가 실행되었는지와 호스트 하네스의 제한 사항을 보고합니다.
패키지 리소스
assets/liquid-controls.js: 의존성 없는 포인터 및 렌즈 애니메이션 동작.assets/liquid-controls.css: 밝고 어두운 유리 외관.assets/demo.html: 독립형 브라우저 예제.references/harness-porting.md: 프레임워크 및 하네스 통합 지침.
스위치는 네이티브 버튼을 사용합니다. 호스트 프로젝트는 버튼의 일반적인 click 이벤트에 응답하여 선택된 상태를 변경하는 책임을 유지합니다.