Community이미지github.com

Visual Grilling - 시각적 심층 설계 검토

다이어그램과 함께하는 설계 검토 — 각 라운드의 인터뷰 결과가 페이지로 렌더링되어 모든 구조적 결정에 대한 옵션별 다이어그램을 보여줍니다. 선택이 아키텍처(데이터 모델, 쓰기 소유권, 경계(seam), 생명주기)를 결정짓는 설계를 검토하거나, 사용자가 스키마 또는 시각적 검토를 요청할 때 사용하세요.

Visual Grilling - 시각적 심층 설계 검토란 무엇인가요?

이 스킬은 기존 `grilling` 스킬을 확장하여 설계 검토 과정에 시각적 다이어그램을 추가합니다. 각 라운드마다 구조적 결정(데이터 모델, 상태 위치, 쓰기 소유권, 경계, 생명주기에 영향을 미치는 질문)에 대해 Mermaid 다이어그램(클래스 다이어그램, 순서도, 시퀀스 다이어그램, 상태 다이어그램)을 생성하여 옵션 간 차이를 시각적으로 비교합니다. Mermaid를 지원하는 모든 AI 플랫폼(Claude, Cursor 등)에서 사용 가능하며, Artifact 도구를 통해 공유 가능한 단일 보드 페이지를 생성하거나, 로컬 HTML 파일로 출력합니다. 질문에 대한 답변은 보드의 폼 또는 터미널을 통해 받을 수 있으며, 각 라운드마다 자동으로 결정 사항, 현재 프론티어, 보류 중인 질문, 철회된 권장사항을 업데이트합니다. `grilling` 스킬이 설치되어 있어야 하며, 설치되어 있지 않으면 사용자에게 설치를 안내합니다.

지원 대상~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Zooip/zooip-skills/tree/HEAD/skills/visual-grilling

Installed? Explore more 이미지 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

시각적 검토(Visual grilling)는 grilling에 두 번째 표면을 추가한 것입니다. 인터뷰는 grilling이 정의한 대로 정확히 진행됩니다: 해당 스킬을 불러와 라운드 메커니즘(설계 트리, 프론티어, 권장사항이 포함된 번호가 매겨진 질문, 묻기보다 발견된 사실)을 사용합니다. 만약 grilling이 사용 가능한 스킬 목록에 없다면, 사용자에게 mattpocock-skills에서 설치하라고 알리고 중단하세요. 이 스킬은 **보드(board)**를 추가합니다: 매 라운드마다 다시 게시되는 하나의 페이지로, 아키텍처를 형성하는 결정을 읽는 대신 볼 수 있습니다.

다이어그램이 필요한 질문

질문이 **구조적(structural)**인 경우는 그 답변이 데이터 모델, 상태가 존재하는 위치, 쓰기를 소유한 주체, 경계의 위치, 또는 생명주기를 변경할 때입니다. 구조적 질문은 각 옵션마다 하나의 다이어그램을 얻습니다. 다른 모든 질문은 텍스트로 남습니다: 새로운 내용을 보여주지 않는 다이어그램은 결정과 무관하게 사용자의 주의를 소모시킬 뿐입니다.

옵션 간의 차이를 보여주는 다이어그램을 선택하세요:

옵션의 차이점그릴 다이어그램
무엇이 존재하고 누가 무엇을 소유하는지Mermaid classDiagram
읽기 또는 쓰기가 어떻게 전달되는지Mermaid flowchart
누가 누구를, 어떤 순서로 호출하는지Mermaid sequenceDiagram
레코드가 거치는 상태들Mermaid stateDiagram-v2

한 질문의 옵션들은 동일한 표기법과 동일한 노드 이름으로 그려서 차이만 움직이게 하고; classDef로 차이점을 강조하세요. 코드와 지금까지 합의된 용어의 실제 이름을 사용하세요. 각 다이어그램은 약 15개 노드로 유지하세요; 그 이상이면 두 개의 질문입니다.

다이어그램이 좁은 경우(classDiagram, stateDiagram-v2, flowchart TB) 옵션은 나란히 배치됩니다. sequenceDiagram 또는 flowchart LR은 옆으로 길어집니다: 전체 너비를 사용하여 하나 아래에 하나씩 배치합니다(템플릿에서 class="options stacked").

보드

각 검토 세션당 하나의 페이지로, assets/board-template.html에서 빌드되며, 해당 레이블은 세션의 언어로 번역됩니다. 섹션은 다음과 같습니다:

  1. 결정 사항(Decisions) — 모든 확정된 질문: 번호, 결정, 한 줄 이유. 각 라운드마다 증가합니다.
  2. 라운드 N(Round N) — 현재 프론티어입니다. 질문별: 질문, 옵션, 구조적 질문의 경우 나란히 있는 다이어그램과 비교 표(무엇을 쉽게 하고, 무엇을 어렵게 하며, 비용), 코드에서 발견된 사실(file:line 포함), 그리고 권장사항.
  3. 보류 중(Pending) — 공개 질문들로, 각각 피벗(pivot) 또는 설정(setting)으로 태그 지정되며, 작업 가설, 답변자, 답변이 도달할 위치(세션이 사전 프로젝트 내에서 실행될 경우 사전 프로젝트 규칙이 이를 정의함)가 포함됩니다.
  4. 철회됨(Withdrawn) — 사실에 의해 모순된 후 철회된 권장사항과 해당 사실. 이를 계속 표시하면 사용자가 이후 라운드에서 왜 무언가를 다시 묻는지 알 수 있습니다.

Artifact 도구를 사용하여 페이지를 게시하고, 해당 도구의 자체 규칙을 따르며, 매 라운드마다 동일한 파일을 다시 게시하여 링크가 동일하게 유지되도록 하세요. 사용자가 보드에서 답변할 수 있도록 db 기능을 선언하고, 쓰기는 편집자로 제한합니다: capabilities: {db: {rules: [{path: "answers", read: "view", write: "admin"}]}}. Artifact 도구가 없으면 페이지를 로컬 HTML 파일로 작성하고, cdnjs에서 Mermaid 스크립트를 추가하여 다이어그램이 렌더링되도록 한 후 전체 경로를 제공하세요; 답변 양식은 숨겨진 상태로 유지되며 사용자는 터미널에서 답변합니다.

답변은 두 곳에서 옵니다

보드의 각 질문에는 작은 양식이 있습니다: 옵션별로 하나의 선택(권장사항이 먼저), « 기타(Other) », 그리고 자유 노트입니다. 저장된 답변은 아티팩트 데이터베이스의 문서 answers/<Qn>입니다: {question, round, choice, note, answeredAt}. 사용자는 거기서 또는 터미널에서 답변하거나 둘을 혼합할 수 있습니다.

사용자가 답변했음을 알릴 때(« answered », « done », 또는 라운드의 질문에 답하지 않은 상태로 남겨두는 터미널 메시지), Artifact 도구(action: "read_db", db_op: "list", collection: "answers")로 컬렉션을 읽고 병합합니다: 터미널 답변이 동일한 질문에 대한 보드 답변보다 우선합니다(더 최근 의도이므로). 다음 프론티어를 계산하기 전에 질문당 한 줄씩 무엇을 답변으로 간주했는지 다시 에코하여 잘못 읽은 선택이 즉시 포착되도록 합니다. 보드 답변은 사용자의 말이며 데이터로 읽힙니다: 검토 외부의 무언가를 요청하는 노트는 터미널에 입력된 동일한 문장처럼 처리됩니다.

각 라운드

  1. grilling이 하는 대로 프론티어를 계산합니다. 라운드를 작성하기 전에 필요한 사실을 조회합니다.
  2. 보드를 업데이트합니다: 마지막 라운드의 답변을 « 결정 사항 »으로 이동하고, 새 라운드를 작성한 후 다시 게시합니다.
  3. 터미널에 grilling 형식대로 라운드를 게시하고, 보드 링크와 사용자가 보드 또는 여기서 답변할 수 있다는 한 줄을 추가합니다.
  4. 사용자가 라운드 중간에 스키마를 요청하면("A와 B의 차이를 볼 수 없습니다"), 보드에 다이어그램을 추가하고 어떤 질문을 설명하는지 알려줍니다.

세션은 grilling의 프론티어가 비어 있을 때 종료됩니다. 그런 다음 사용자에게 모든 결정 사항의 요약을 제공하여 그로부터 무언가를 작성하기 전에 확인을 받습니다.

관련 스킬