xuui에서 프레젠트하기
현재 대화에서 작업 중인 내용을 실행 가능하고 리뷰 가능한 xuui 스터디로 전환합니다. 핸드오프는 검증된 로컬 URL, 디자인 질문에 대한 간단한 설명, 그리고 리뷰할 가치가 있는 차이점입니다. 핸드오프 후에도 사용자의 리뷰를 계속 듣고 있어야 합니다.
xuui에 머물기
xuui는 이 작업을 위한 프레젠테이션 표면입니다. 디자인이 xuui에 들어가면, 계속해서 xuui에서 프레젠트하세요.
- 다른 스킬이나 워크플로우도 함께 사용 중인 경우, 방향 결정에는 그 방식의 메서드를 사용하되 해당 방향들을 xuui 변형으로 만드세요. 그 방식의 선택기(picker), 애플리케이션 내부의 스위처, 또는 별도의 미리보기 페이지를 절대 만들지 마세요.
- "전체 페이지에 보여줘", "사이트에서 보여줘" 또는 "컨텍스트에서 보여줘"는 더 큰 xuui 스터디를 의미합니다. 디자인 주변의 페이지나 레이아웃을 동일한 변형과 함께 렌더링하세요.
- 사용자가 방향을 구현하거나 출시하라고 요청할 때만 실제 애플리케이션을 변경하세요. 스터디는 유지하여 선택 사항이 계속 리뷰 가능하도록 하세요.
무엇을 프레젠트할지 결정하기
요청된 UI, 참조 또는 최근 작업을 브리프(brief)로 사용하세요. 기존 구현을 충실히 프레젠트하세요. 브리프가 대안을 요청하는 경우, 그 차이점이 디자인 질문에 답변하도록 만드세요. 브리프에서 제시한 수와 유용한 비교를 선택하세요. 대화와 워크스페이스로 주제가 불명확할 때만 질문하세요.
현재 프로젝트에서 스터디 워크스페이스를 찾으세요. 설치된 워크스페이스에는 xuui.studies.ts 파일과 로컬 xuui 의존성이 있습니다. 해당 버전의 README, docs/authoring.md, 내보낸 타입, 그리고 가까운 등록(registration)을 읽으세요. 기존 워크스페이스에 더 새로운 알파 버전을 다운로드하지 말고 설치된 CLI를 사용하세요. xuui 소스 체크아웃인 경우 대신 examples/studies.ts, src/xuui/model.ts, src/xuui/parameters.ts를 사용하고, 그곳의 CONTEXT.md를 읽으세요. 설치된 스킬에서 위쪽으로 디렉토리를 올라가며 소비 워크스페이스를 추론하지 마세요.
알파 버전은 등록된 React 컴포넌트를 독립형 워크스페이스에서 프레젠트합니다. 새 워크스페이스가 필요한 경우, npx --package @getxuui/[email protected] xuui init <directory>를 실행한 후 고정된 설치를 사용하세요. 다른 코드베이스의 작업인 경우, 해당 토큰, 인접 UI, 반응형 제약 조건, 프로바이더 및 데이터를 검사하세요. 관련 컴포넌트와 필요한 의존성을 조용히 재설계하지 않고 적용하세요. 격리로 인해 리뷰가 왜곡될 경우 컨텍스트 래퍼를 포함시키고, 목업 데이터나 사용할 수 없는 백엔드 동작을 공개하세요.
탐색 구성하기
대안이 요청된 경우, 디자인 질문을 명시하고, 주요 변수를 말하고, 무엇이 일정하게 유지되는지 설명하세요. 그 질문에 답하는 방향들을 계획하세요. 일치된 콘텐츠, 의미 있는 상태, 뷰포트 너비 및 스케일로 방향을 시작하세요. 기존 디자인을 충실히 프레젠트하라는 요청에는 대안을 생성하지 마세요. 브리프와 유용한 비교가 개수를 결정하도록 하세요.
스터디 등록하기
디자인과 그 어댑터를 스터디 등록 옆에 두고, 기존 스터디를 따르세요. 스터디를 중앙 레지스트리에 추가하거나, 작업이 동일한 질문을 탐색하는 경우 관련 기존 스터디를 확장하세요.
- 제품 용어인 스터디(study), 변형(variant), 캔버스(canvas), 레이어(layer) 및 가이드(guide) 를 사용하세요.
defineStudy로 스터디를 등록하고variants를 나열하세요. - 각 변형에 모든 등록된 스터디 전체에서 고유한 안정적이고 설명적인 ID를 부여하세요. 리뷰 가능해야 하는 방향을 발전시킬 때 새 ID를 추가하세요. 이전 구현은 보존하세요. 변경 가능한 컴포넌트를 공유한다고 해서 그 이력이 고정되는 것은 아닙니다.
- 각 변형에 유용한 이름, 설명 및 근거를 작성하세요.
- 일반 React 컴포넌트를 등록하세요. xuui가 탐색, 패닝, 줌, 검사, 비교 및 코멘트를 제공합니다. 스터디는 디자인과 필요한 프로바이더 또는 데이터를 제공합니다.
- 스터디의 CSS 범위를 지정하여 스튜디오 크롬이나 관련 없는 변형을 다시 스타일링할 수 없도록 하세요. 디자인에 의미 있는 크기를 부여하세요. 크기가 지정된 포함 블록 없이 퍼센트 너비만 사용하면 캔버스에서 축소될 수 있습니다.
- DOM만으로는 유용하지 않은 레이어 이름이 생성되는 경우
data-xuui-layer-name을 추가하세요.
상태 및 컨트롤 노출하기
사이드바는 변형이 선언한 컨트롤을 표시하고, 리뷰어는 렌더링된 모든 것에 코멘트를 남깁니다. 디자인에 맞는 컨트롤 종류를 선택하세요.
machine디자인의 고유한 상태와 상태 간의 이벤트에 사용합니다: 빈 상태, 로딩 중, 로딩 완료 및 오류; 닫힘 및 열림; 폼이나 흐름의 단계 등. 리뷰어는 사이드바에서 아무 상태로 이동할 수 있으며 재생 모드에서 전환을 따라갈 수 있으므로 각 상태를 판단하고 코멘트할 수 있습니다. 제품에서 사용하는 방식으로 상태와 이벤트 이름을 지정하세요.machine.value로 렌더링하고 디자인의 실제 상호작용을machine.send(event)에 연결하여 재생 모드에서 클릭 시 동일한 머신을 따르도록 하세요.state디자인이 반응하는 독립적인 값(예: 즐겨찾기 토글, 항목 개수)에 사용합니다.props비교할 가치가 있는 디자인 파라미터(예: 복사본, 반경, 너비)에 사용합니다.
디자인에 해피 패스 외에도 의미 있는 상태가 있는 경우, 하나의 상태만 제시하지 말고 머신으로 노출하세요. 디자인에 없는 상태를 만들지 마세요. 렌더링된 디자인을 변경하는 컨트롤만 노출하고 모든 상태가 렌더링되는지 확인하세요. 정확한 형태는 설치된 docs/authoring.md를 참조하세요.
요청된 스터디와 이를 프레젠트하는 데 필요한 등록에 국한된 변경을 유지하세요. 프레젠테이션 요청이 스튜디오 자체를 재설계하는 것을 허용하지 않습니다.
완료는 요청된 디자인이 등록된 변형에서 렌더링되고 노출된 컨트롤이 작동함을 의미합니다.
실행 및 확인
설치된 워크스페이스에서는 npx --no-install xuui dev를 사용하고, 소스 체크아웃에서는 패키지 스크립트를 사용하세요. 기존 미리보기가 있는지 먼저 확인하고 의도된 워크스페이스에 제공되면 재사용하세요. 관련 없는 프로세스는 그대로 두세요. 리뷰어를 위해 로컬 서버를 계속 실행 상태로 두고 실제 출력된 오리진을 사용하세요.
실제 서버 오리진과 등록된 ID를 사용하여 URL을 엽니다.
- 포커스된 변형:
/?study=<study-id>&variant=<variant-id> - 비교: 동일한 URL에
&view=all추가
HTTP 200을 증거로 삼지 말고 렌더링된 변형의 정체성을 확인하세요. 알 수 없는 ID는 기존 스터디로 대체됩니다. UI를 검사하고, 재생 모드에서 중요한 상호작용을 수행하며, 각 노출된 컨트롤을 시도하세요. 각 방향에 동일한 사용성 기준을 적용하세요. 키보드 접근성, 전체 컨트롤에 대한 보이는 포커스, 읽기 쉬운 텍스트, 적절한 reduced motion, 현실적인 콘텐츠, 상태 및 너비. 관련 프로젝트 검사를 실행하고 실패 또는 사용할 수 없는 검사는 정확히 보고하세요.
제출 검사에는 격리된 테스트 저장소를 사용하세요. 리뷰어의 실제 초안 코멘트와 제출된 기록은 그대로 두세요.
완료는 링크가 의도된 디자인을 열고, 의미 있는 상호작용이 작동하며, 리뷰 경계가 명확함을 의미합니다.
핸드오프하기
포커스된 링크와 유용한 경우 비교 링크를 반환하세요. 몇 문장으로 무엇을 판단해야 할지 설명하고 목업 데이터와 같은 중요한 제한 사항을 명시하세요. 리뷰어는 상호작용에 재생 모드(Play), 코멘트에 C, 핸드오프에 Submit review를 사용합니다. 마지막으로 사용자의 리뷰를 듣고 있으며 그동안 계속 대화할 수 있다고 말하며 마무리하세요.
대안의 경우, 무엇이 변경되었는지, 각 방향이 언제 적합한지, 주요 비용은 무엇인지에 대한 짧은 표를 추가하세요. 리뷰된 너비와 상태를 명시하세요. 조용히 승자를 선택하지 마세요. 선택한 방향을 발전시키라는 요청을 받으면, 프로모션된 디자인을 원래 소스 컨텍스트에서 확인하고 리뷰 가능한 스터디를 유지하세요. 이전 구현을 보존하고 추가 비교 작업을 위해 안정적인 ID를 추가하세요.
피드백 듣기
핸드오프 후, 요청 없이 리뷰를 기다리세요.
- xuui MCP 도구를 사용할 수 있는 경우, 스터디의
studyId로xuui_wait_for_review를 호출하세요. 각 호출은 50초 이내에 반환됩니다. 반환된knownReviewIds와 함께 다시 호출하여 리뷰가 도착하거나 사용자가 중단을 요청할 때까지 반복하세요. - 사용할 수 없는 경우, 워크스페이스의 MCP 서버가 연결되지 않은 것입니다. 연결을 제공하고, 설치된
docs/mcp.md를 따르며, 호스트가 로드하기 위해 재시작이 필요한지 말하세요. 그때까지 호스트가 완료 시 알리는 백그라운드 명령을 실행할 수 있다면,.xuui/reviews/에 새 파일이 생길 때까지 기다리는 데 사용하세요. 그렇지 않으면 사용자에게 제출했을 때 알려달라고 요청하세요.
리뷰가 도착하면 전체 패키지를 읽은 후 xuui_acknowledge_review로 확인하세요. 확인(acknowledgment)은 읽었다는 의미일 뿐, 요청이 완료되었다는 의미는 아닙니다. 브라우저 초안은 제출된 피드백이 아닙니다. 코멘트에 따라 행동하세요. 새 ID를 가진 새 변형으로 변경하고, 확인한 후 새 링크를 핸드오프하고 다시 듣기 시작하세요.