desktop

ultrahand: desktop

데스크톱 앱 및 웹 앱 화면을 대화형 Claude 아티팩트로 설계합니다. 이 아티팩트는 사용자가 선택한 최소 크기와 최대 크기 사이에서 자유롭게 크기를 조절할 수 있는 창이며, 일반적인 노트북, 모니터 및 스냅 분할 화면에 대한 사전 설정을 제공하고 레이아웃은 드래그하면서 실시간으로 재구성됩니다. 적용하는 모든 규칙은 references/principles.md에 있으며, 각 규칙은 references/sources.md의 출처를 인용합니다. 크기, 제한 및 크기 클래스는 references/presets.md에 있습니다.

1. 요구 사항 수집

추론할 수 없는 것에 대해서만 물어보세요. 그림을 그리기 전에 다음을 결정하세요.

• 플랫폼: macOS, Windows, 웹 앱 또는 여러 개. 기본 macOS 앱은 메뉴 바를 가집니다. Windows 및 웹 앱은 오버플로우가 있는 명령 바 또는 툴바를 가집니다.
• 범위: 하나의 화면 또는 플로우. 플로우의 경우 화면 목록과 사용자가 화면 간 이동하는 방식을 나열하세요: 사이드바, 탭, 목록에서 세부 정보로, 사이드 패널, 대화상자 또는 새 창.
• 주 작업: 각 화면의 목적과 이에 맞는 레이아웃(목록-세부 정보, 지원 창, 피드, 또는 단일 문서 창).
• 실제 콘텐츠: 이름, 길이, 개수, 열 집합 및 가능한 가장 긴 문자열. 더미 텍스트로 설계하지 마세요.
• 데이터 상태: 각 창에서 로드되는 것, 비어 있을 수 있는 것, 실패하거나 오프라인이 될 수 있는 것.
• 창 제한: 최소 창 크기, 최대 창 크기 및 최대 콘텐츠 너비. 기본값은 네이티브 앱의 경우 640 × 480, 웹 앱의 경우 320 × 256입니다(presets.md 참조).
• 입력: 항상 포인터 및 키보드; 2-in-1 또는 터치 노트북에서 실행될 수 있는 경우 터치. 단축키를 받을 만큼 자주 사용되는 명령은 무엇인가요?
• 창: 하나의 창 또는 여러 개(문서, 인스펙터, 분리된 패널)?
• 제약 사항: 브랜드 색상, 글꼴, 기존 디자인 시스템 또는 컴포넌트 라이브러리.
• 테마: 색상, 크기 또는 간격을 선택하기 전에 프로젝트의 테마(디자인/테마.md, *.tokens.json; shared/theme/README.md 참조)를 찾아보세요. 테마가 있으면 그에 따라 설계하세요: node "${CLAUDE_PLUGIN_ROOT}/shared/theme/css.mjs" <tokens.json> --style --out theme.html을 실행하고, 빌드에 --head theme.html을 전달하고, 사용자 정의 속성(var(--color-surface), var(--space-gap-group))만 사용하고, 인벤토리의 컴포넌트를 재사용하세요. 디자인에 테마가 없는 항목이 필요한 경우 가장 가까운 토큰을 사용하고 추가 사항을 미해결 질문에 나열하세요. 값을 임의로 만들지 마세요. 테마가 없으면 shared/theme/rules.md의 필수 규칙을 따르고 theme 스킬을 제공하세요.

2. 참조 읽기

설계하기 전에 references/principles.md와 references/presets.md를 읽으세요. 새로운 패턴을 만들지 말고 플랫폼 고유의 패턴(메뉴 바, 툴바, 사이드바, 분할 보기, 컨텍스트 메뉴, 시트, NavigationView)을 사용하세요.

3. 화면 구성

각각 검사를 통과한 컴포넌트라도 합쳐지면 지저분한 화면이 될 수 있습니다. 빌드하기 전에 플러그인의 구성 규칙(shared/composition/principles.md)을 사용하여 섹션을 구성하고 섹션이 화면을 구성하는 방법을 계획하세요.

• 섹션 맵을 작성하세요. 각 화면에 대해 섹션(최대 세 그룹의 툴바, 사이드바, 콘텐츠 창 및 인스펙터), 각 섹션의 단일 작업, 사용 빈도순으로 정렬된 멤버, 하나의 강조점을 나열하세요. 기본 콘텐츠가 무엇이고 크롬이 무엇인지 말하세요. 콘텐츠가 지배적이며 크롬은 물러납니다.
• 공간으로 그룹화하세요. 그룹 내 간격은 그룹 간 간격보다 명확히 작아야 합니다. 공간이 그룹을 보여줄 수 없을 때만 컨테이너를 추가하세요.
• 역할당 하나의 모양, 섹션당 하나의 강조점. 동일한 역할, 동일한 스타일; 상태 및 레이블은 절대 버튼처럼 보이지 않습니다. 강한 악센트는 섹션당 하나의 요소에만 적용되며, 선택된 상태는 조용한 처리를 사용합니다.
• 작게 유지하세요. 약 세 가지 유형 크기, 한 위치에 하나의 사실, 자주 사용되는 멤버는 보기에, 드문 멤버는 메뉴 뒤에. 변경 사항이 무언가를 추가할 때는 먼저 재구성하고 자리를 얻는 것만 추가하세요.

4. 캔버스 아티팩트 빌드

플러그인의 공유 리사이즈 가능 캔버스(shared/canvas/; README.md에 전체 계약이 있음) 위에 빌드하세요. 화면을 screen.html로, 디자인의 자체 설정을 config.json으로 작성한 다음 빌드하세요.

node "${CLAUDE_PLUGIN_ROOT}/shared/canvas/build.mjs" \
  --presets "${CLAUDE_PLUGIN_ROOT}/skills/desktop/references/presets.md" \
  --config config.json --screen screen.html \
  --title "<디자인 이름>" --out index.html

index.html을 아티팩트로 게시하세요.

• **config.json**은 title, states (예: 기본, 로딩, 빈, 오류) 및 디자인의 **limits**를 설정합니다: { minWidth, minHeight, maxWidth, maxHeight }. 캔버스는 그 사이의 모든 크기로 드래그할 수 있습니다. 웹 앱의 경우 "initialPreset": "browser"도 설정하세요.
• 사전 설정(presets.md에서): 노트북(1366 × 768, 1536 × 864, MacBook 1440 × 900), 모니터(1920 × 1080, 2560 × 1440), 스냅 분할(960 × 1080, 720 × 900) 및 브라우저 창(1280 × 720). 검사: 최소 창, 짧은 1366 × 600 창 및 320 × 256에서 400% 확대.
• 화면 계약: [data-screen] 섹션이 있는 하나의 <template id="uh-screen">, 클릭용 data-nav, data-nav-back 및 data-show-state. 크기에 반응하려면 @media 대신 @container screen (width >= …)를 사용하세요. 텍스트는 rem, 히트 영역, 아이콘 및 거터는 px(200% 텍스트가 컨트롤이 아닌 단어를 키움). 색상은 light-dark() 사용. 동작은 window.ultrahandSetup = function (canvas) { … }에 들어갑니다.
• 내장 토글: 라이트/다크, 200% 텍스트, 상태 선택기 및 탭 대상(데스크톱 최소 24px). 메뉴 또는 팝오버를 연 후 canvas.refresh()를 호출하여 대상 오버레이가 이를 인식하도록 하세요.
• 데스크톱 앱처럼 작동하게 하세요: 호버 상태, 오른쪽 클릭 컨텍스트 메뉴(및 Shift+F10), 보이는 포커스, 작동하는 Tab 및 화살표 키 탐색, 메뉴 및 툴팁의 단축키 힌트, 숨기고 표시하는 창, 드래그 가능한 구분선. 절대 alert, confirm 또는 prompt를 사용하지 마세요. 대화상자는 화면 안에 그리세요.

5. 모든 크기 클래스 설계

넓은 것부터 좁은 것까지 작업하고, 각 문제가 나타나는 크기에서 수정하세요.

1. 대형 / 초대형(laptop-125, desktop-fhd): 창, 탐색, 툴바 그룹 및 밀도를 선택하세요. 콘텐츠 너비를 제한하세요. 추가 너비는 더 긴 줄이 아닌 창에 사용됩니다.
2. 확장형(snap-half, ~960): 인스펙터 또는 보조 창을 접고, 사이드바를 레일로 바꾸고, 계획된 순서대로 툴바 항목을 오버플로우로 이동하기 시작하세요.
3. 중간 및 최소 크기(mac-half, 최소 창 검사): 하나 또는 두 개의 창, 탐색용 메뉴 버튼 또는 레일, 모든 명령이 여전히 메뉴를 통해 접근 가능.
4. 드래그를 최대에서 최소로, 다시 천천히 하세요. 선택, 스크롤 위치, 입력된 텍스트 및 열린 패널은 모든 중단점에서 유지되어야 합니다.

그런 다음 검사를 실행하세요: 짧은 창(고정 막대, 포커스가 가려지지 않음) 및 웹 앱의 경우 320 × 256에서 400% 확대(단일 열, 세로 스크롤만).

6. 제시 전 자체 점검

모든 항목을 검토하세요. 실패를 수정하거나, 이름을 지정하고 허용 가능한 이유를 말하세요.

구성(구성 감사 실행: node "${CLAUDE_PLUGIN_ROOT}/shared/input/drive.mjs" do "${CLAUDE_PLUGIN_ROOT}/shared/composition/audit.mjs"를 가장 큰 크기와 가장 작은 크기에서 실행하거나, 직접 확인):

• 흐릿하게 보면 화면이 의도된 섹션을 보여주고, 기본 콘텐츠가 먼저 눈길을 끕니다. 의도하지 않은 밝은 부분이 없습니다.
• 각 섹션은 하나의 작업을 가지며, 멤버는 기능과 빈도에 따라 그룹화되고, 그룹 간 간격은 그룹 내 간격보다 명확히 큽니다.
• 각 섹션에는 최대 하나의 강하게 강조된 요소가 있습니다. 선택된 상태는 조용합니다.
• 역할당 하나의 스타일: 각 섹션의 컨트롤 스타일을 세고 추가 항목을 정당화하세요. 레이블이나 상태가 버튼처럼 보이지 않습니다.
• 행과 섹션은 공유된 가장자리에 정렬됩니다. 화면에 약 세 가지 유형 크기.
• 어떤 사실도 두 번 표시되지 않으며, 여기서 작업에 도움이 되지 않는 것은 화면에 없습니다.
• 변경 사항 후: 추가된 항목을 나열하세요. 화면이 필요한 것보다 복잡하지 않습니다.
• 테마 값만 사용: 원시 색상 없음, 8포인트 스케일에서 벗어난 간격 없음, 스케일 외부의 유형 크기 없음, 인벤토리 컴포넌트를 재구축 대신 재사용(shared/theme/rules.md NN-1, NN-2, NN-6, EV-4).

컴포넌트 및 플랫폼:

• 디자인은 최소 및 최대 창 크기와 최대 콘텐츠 너비를 명시합니다. 최소 크기에서 아무것도 겹치거나 잘리지 않으며, 최대 크기에서 늘어나지 않습니다.
• 레이아웃은 기기가 아닌 창 너비(Material 600 / 840 / 1200, 또는 Windows 641 / 1008)에 따라 전환됩니다. 모든 기능이 모든 크기에서 접근 가능합니다.
• 크기 조정은 실시간으로 재구성되며 선택, 스크롤, 입력 및 열린 패널을 유지합니다.
• 창은 표준 레이아웃을 따르고, 구분선은 드래그 가능하며, 창은 버튼, 메뉴 및 단축키로 숨길 수 있으며, 설명 없이 빈 창은 없습니다.
• 본문 텍스트는 줄당 80자 이하로 유지됩니다.
• 모든 명령은 메뉴(macOS의 메뉴 바) 또는 툴바 오버플로우에 있습니다. 사용할 수 없는 메뉴 항목은 비활성화되고 숨겨지지 않습니다. 입력이 필요한 명령은 "…"로 끝납니다.
• 툴바 항목은 창이 좁아짐에 따라 계획된 순서로 오버플로우되며, 최대 세 그룹입니다.
• 오른쪽 클릭은 짧고 관련된 컨텍스트 메뉴를 열고, 각 명령은 다른 곳에도 존재합니다.
• 모든 것이 키보드로 작동하며 트랩이 없습니다. 포커스는 항상 보이고 고정 막대 아래에 있지 않습니다. 표준 단축키는 용도가 변경되지 않습니다. 단축키는 메뉴와 툴팁에 표시됩니다.
• 호버에서만 사용할 수 있는 것은 없습니다. 호버 및 포커스 콘텐츠는 Esc로 해제 가능하고, 호버 가능하며 지속됩니다. 툴팁은 중요한 정보를 전달하지 않습니다.
• 대상은 최소 24 × 24px(터치 가능성이 있는 경우 약 40 × 40)입니다.
• 스크롤: 콘텐츠만 스크롤되며, 동일한 방향으로 중첩된 스크롤 영역이 없고, 테이블 헤더는 고정되며, 중요한 컨트롤이 창의 하단 가장자리에 있지 않습니다.
• 편집은 가장 가벼운 패턴을 사용합니다: 필드는 인라인, 레코드는 사이드 패널, 짧은 차단 작업은 시트 또는 대화상자, 긴 플로우는 창 또는 페이지. 확인은 파괴적이고 되돌릴 수 없는 작업에만 사용됩니다. 다른 모든 것은 실행 취소를 제공합니다.
• 모든 드래그 앤 드롭에는 드래그 없는 대안이 있습니다.
• 레이아웃은 200% 텍스트에서도 유지되며, 대비는 텍스트의 경우 최소 4.5:1, UI의 경우 3:1을 라이트 및 다크 모드 모두에서 유지합니다.
• 로딩, 빈 및 오류 상태는 창뿐만 아니라 각 창에 대해 설계되었습니다.
• 웹 앱: 320 × 256(400% 확대)에서 양방향 스크롤 없이 작동하며, 건너뛰기 링크가 있습니다.

7. 제시

아티팩트 링크를 공유하세요. 몇 줄로 섹션 맵(각 섹션의 작업 및 강조점), 창 제한 및 최대 콘텐츠 너비, 주요 결정 및 각 결정의 원칙(소스 키 인용), 각 너비 클래스에서 레이아웃이 변경되는 방식, 이유와 함께 수락한 자체 점검 항목, 제안된 테마 추가 사항(theme 스킬용), 그리고 미해결 질문을 명시하세요.