show-me (시각적 설명)

사용자가 현재 대화 주제를 시각적으로 이해할 수 있도록 돕습니다. 서두는 생략하고 간결하게 유지하며, 핵심을 가장 명확하게 전달할 수 있는 가장 작은 시각화를 선택하세요.

다른 스킬이나 워크플로에서 뷰 형태를 지정했다면, 그 형태를 직접 사용하세요. 형태 선택이나 HTML 아티팩트 옵션은 건너뛰고, 호출자가 요청한 범위와 형식 내에서 출력하세요.

• 논리 또는 알고리즘을 의사코드로 표시:

on(save)
  if content is unchanged
    return cached result
  write new content
  return fresh result

• 런타임 제어 흐름을 호출 트리로 표시:

submitForm
  createSession
    persistPrompt
    launchAgent
  navigateToSession

• UI 구조를 컴포넌트 트리로 표시. 상태 및 모듈 경계가 중요하면 포함:

<SessionPage> (apps/example/src/routes/session.tsx)
  useSessionEvents()
  <SessionToolbar>
    <RunSkillButton> (packages/ui)

• 내보낸 API 또는 인터페이스 변경 사항을 API 표면 차이(diff)로 파일별로 그룹화하여 표시. 추가, 제거, 교체를 명확히 하고 변경된 내보낸 기호나 시그니처만 포함:

 internal/api/suggestion.go
-ApplySuggestion(client, prNumber, commentID)
+ApplySuggestion(client, target SuggestionTarget)
+
 internal/api/types.go
 type SuggestionTarget struct {
+  PullRequest int
+  CommentID   int
 }

• 파일 책임 또는 대규모 리팩터를 얕은 파일 트리로 표시:

src/
├── commands/       # 사용자 액션 파싱
├── sessions/       # 세션 상태 소유
└── transport/      # API 요청 전송

• Mermaid를 사용하여 컴포넌트 상호작용, 제어 흐름 또는 데이터 흐름을 표시. 주제가 분기 워크플로, 상태 전이, 도메인 또는 데이터 관계, 아키텍처, 의존성, 배포 토폴로지를 포함하는 경우 Mermaid 다이어그램 유형을 읽고 일치하는 형태를 선택하세요. flowchart, sequence, state, class, ER 다이어그램 유형만 사용하세요. 터미널 렌더러가 그릴 수 있는 종류입니다. 다이어그램을 120열 미만으로 유지하고 짧은 레이블과 적은 노드를 사용하세요. 더 넓은 경우 터미널에 공지사항으로 대체됩니다. Mermaid를 원시 텍스트로 표시하는 환경에서는 호출 트리나 의사코드 형태를 선호하고 다이어그램이 다운그레이드되었다고 말하세요.

  시간에 따른 상호작용의 순서가 중요할 때 시퀀스 다이어그램을 사용:

sequenceDiagram
    participant User
    participant UI
    participant Daemon
    User->>UI: choose command
    UI->>Daemon: send expanded prompt
    Daemon-->>UI: stream result

• 변경 사항이 중요하고 주변 형태가 이미 존재할 때 diff를 사용. diff 형태를 주제에 맞게 조정하세요.

컴포넌트 변경의 경우:

 <SessionPage>
   useSessionEvents()
   <SessionToolbar>
+    <RunSkillButton />
   <SessionTimeline>
+    <SkillResultCard />

파일 레이아웃 변경의 경우:

 src/
 ├── commands/
+│   └── show-me.ts       # 슬래시 명령어 확장
 ├── sessions/
-└── transport.ts
+└── transport/
+    ├── client.ts
+    └── stream.ts

호출 트리 또는 호출 스택 변경의 경우:

 submitForm
   createSession
     persistPrompt
+    expandSkillMention
     launchAgent
-  navigateToSession
+  navigateToSession
+    subscribeToEvents

상태 또는 제어 흐름 변경의 경우:

 on(save)
-  write content
+  if content is unchanged
+    return cached result
+  write new content
+  invalidate cache

• 대부분이 새 내용이거나 생략된 컨텍스트가 소유권이나 순서를 숨길 때, 또는 사용자가 복사 가능한 대상 형태가 필요할 때 전체 블록을 표시:

function expandSkill(command: string): string {
  const skillName = command.slice(1)
  return `use the ${skillName} skill`
}

• 시각적 UI, 레이아웃, 상태 비교, 또는 Mermaid로 표현하기 너무 복잡한 개념의 경우 하나의 집중된 HTML 파일(다이어그램, 인포그래픽, 짧은 슬라이드 데크)을 작성하세요. 제품의 색상, 글꼴, 간격, 컴포넌트를 일치시키고 실제 레이블과 데이터를 사용하며 데스크탑과 모바일을 지원하세요. 로컬 터미널에서는 플랫폼 오프너로 열고, 호스팅된 환경에서는 아티팩트로 게시하고 링크를 제공하세요:

Bash(open path/to/show-me-{description}.html)

가이드라인

각 시각 자료를 지원하는 짧은 텍스트 옆에 배치하세요. 사용자의 현재 질문이나 논의 중인 선택지를 해결하는 데 필요한 호출, 파일, 속성, 상태, 경계만 유지하세요.

이 중 하나만 사용해도 되고 여러 개를 사용해도 되며, 모두 사용할 필요는 없습니다. 판단력을 사용하고 사용자에게 과부하를 주지 마세요.