Skip to main content
Glama

License

Phonebook은 팀이 이미 보유한 스크린샷을 Storybook 스타일의 컴포넌트 갤러리로 바꿔 줍니다. 새로운 테스트 코드도, 손으로 관리하는 디자인 토큰도 필요 없습니다. 코드베이스에 이미 있는 것을 정적 사이트로 렌더링하므로, 디자이너가 아무것도 설치하지 않고 열어볼 수 있습니다. 각 저장소는 Phonebook을 독립적으로 실행하며, v1은 단일 플랫폼을 지원합니다. 따라서 Android 저장소 하나(또는 iOS 하나라)로 하나의 번들과 하나의 사이트가 만들어집니다.

기능

  • 새 테스트 코드 제로 — 이미 작성한 @Preview / #Preview를 재사용합니다

  • SaaS 계정 불필요 — 자체 호스팅되며, CI나 로컬에서 완전히 동작합니다

  • MCP 우선 — 코딩 에이전트가 설정 확인, 커버리지 분석, 누락된 프리뷰 추가, 갤러리 생성을 대신 처리해 줍니다

  • 스마트 컴포넌트 그룹핑 — 프리뷰 이름에서 추론된 component / state 카드, 필수 어노테이션 없음

  • 크로스 플랫폼 — Android(Roborazzi + ComposablePreviewScanner, JVM에서 동작, 에뮬레이터 불필요) 및 iOS(SnapshotPreviews, 시뮬레이터에서 동작)

  • 버전 인지 설정 — init/doctor가 프로젝트의 Kotlin 버전에 맞춰 라이브러리 버전을 해석하고, Kotlin/Roborazzi 메타데이터 불일치가 불투명한 컴파일러 크래시를 일으키기 전에 잡아냅니다

Related MCP server: ios-agent

데모

Phonebook 프로모션 동영상 보기

Phonebook 갤러리 스크린샷

samples/ios에서 생성한 갤러리 — 앱 자체의 #Preview들에서 component / state 카드를 그룹화했으며, 별도의 어노테이션은 없습니다.

라이브 갤러리 둘러보기 →

동작 방식

  1. phonebook generate는 플랫폼의 프리뷰 렌더링 엔진을 실행하고 산출물을 번들(manifest.json + images/)로 수집합니다.

    • Android: Roborazzi + ComposablePreviewScanner, Robolectric을 통해 JVM에서 실행됩니다. 에뮬레이터가 없어도 되며 Linux CI에서 동작합니다.

    • iOS: SnapshotPreviews, 시뮬레이터에서 xcodebuild test를 통해 실행됩니다. macOS가 필요합니다.

  2. phonebook build는 그 번들을 정적 사이트로 만듭니다 — 기본적으로 index.html을 번들 디렉터리에 직접 작성하고(이미 있는 이미지는 복사하지 않고 재사용), 따라서 사이트는 <bundle>/index.html에 만들어집니다. -o <dir>을 전달하면 별도의 독립형 사이트 디렉터리로 모든 것을 복사합니다(다른 곳에 퍼블리시하거나 나중에 여러 번들을 병합할 때 사용). 순수 HTML/CSS/JS로 이루어져 있으며 file://이나 어떤 정적 호스트에서도 동작합니다.

설치

npm install -g @stag-build/phonebook
brew install stag-build/phonebook/phonebook

또는 먼저 tap한 뒤 설치합니다:

brew tap stag-build/phonebook
brew install phonebook

Formula 소스: stag-build/homebrew-phonebook.

npx @stag-build/phonebook <cmd>

코딩 에이전트와 함께 사용 (권장)

대부분의 사용자는 CLI를 직접 실행하지 않습니다. Phonebook은 MCP 서버를 통해 코딩 에이전트(Claude Code, Codex 등)가 구동하도록 설계되었습니다. 에이전트가 프리뷰를 추가하고, 설정 검사를 실행하고, 갤러리를 생성해 줍니다. 그 아래에 있는 CLI는 에이전트가 호출하는 엔진입니다.

서버는 npx @stag-build/phonebook mcp로 실행됩니다 — 별도의 설치 단계가 필요 없습니다. 아래에서 클라이언트를 선택하세요.

claude mcp add phonebook -- npx -y @stag-build/phonebook mcp

~/.codex/config.toml에 추가하세요:

[mcp_servers.phonebook]
command = "npx"
args = ["-y", "@stag-build/phonebook", "mcp"]

Claude Desktop 설정에 추가하세요(macOS에서는 ~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "phonebook": {
      "command": "npx",
      "args": ["-y", "@stag-build/phonebook", "mcp"]
    }
  }
}

.cursor/mcp.json(프로젝트) 또는 ~/.cursor/mcp.json(전역)에 추가하세요:

{
  "mcpServers": {
    "phonebook": {
      "command": "npx",
      "args": ["-y", "@stag-build/phonebook", "mcp"]
    }
  }
}

프로젝트 워크스페이스 루트의 .codex/config.toml에 추가하세요. Xcode의 에이전트는 최소한의 PATH로 실행되므로, 명령은 일반적인 Homebrew/nvm 위치를 먼저 추가하는 셸로 npx를 감쌉니다:

[mcp_servers.phonebook]
command = "/bin/zsh"
args = [
  "-lc",
  "PATH=/opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin; npx -y @stag-build/phonebook mcp"
]
enabled = true

mcpServers 블록을 ~/Library/Developer/Xcode/CodingAssistant/ClaudeAgentConfig/.claude.json에 추가하세요:

{
  "mcpServers": {
    "phonebook": {
      "command": "/bin/zsh",
      "args": [
        "-lc",
        "PATH=/opt/homebrew/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin; npx -y @stag-build/phonebook mcp"
      ]
    }
  }
}

Android Studio (Gemini Agent Mode): 아직 지원하지 않습니다. Android Studio의 MCP 통합은 Phonebook처럼 로컬 stdio 프로세스가 아닌 원격 httpUrl 서버만 연결할 수 있기 때문입니다. Android 저장소에서는 위의 터미널 기반 클라이언트(Claude Code, Codex CLI)를 사용하세요.

그런 다음 Android 또는 iOS 저장소의 채팅에서 이렇게 요청하면 됩니다:

"phonebook MCP를 사용해서 제 디자이너를 위한 카탈로그를 만들어 주세요."

에이전트가 나머지를 알아서 처리합니다 — 설정 확인, 누락된 프리뷰 채우기, 생성, 사이트 빌드까지 말이죠. 더 세부적으로 요청하려면 다음 도구도 제공합니다: check_setup (설정 진단, phonebook doctor와 동일), analyze_coverage (프리뷰 또는 다크 변형이 없는 컴포넌트), get_preview_guidance, run_generate, run_build.

빠른 시작: Android

먼저 phonebook init을 실행하세요. init은 프로젝트의 Kotlin 버전을 감지해, 그 버전과 호환되도록 라이브러리 버전을 해석한 다음 이 지침을 출력합니다(예: Kotlin 2.0 프로젝트는 Roborazzi 1.60.0을, Kotlin 2.2+는 최신 버전을 받습니다). 아래 버전은 현재 최신 Kotlin 프로젝트가 받는 값이며, 전체 동작 예시는 samples/android/app/build.gradle.kts를 참고하세요:

// app/build.gradle.kts
plugins {
    id("io.github.takahirom.roborazzi") // root build.gradle.kts: version "1.72.0" apply false
}

roborazzi {
    generateComposePreviewRobolectricTests {
        enable = true
        packages = listOf("dev.stag.phonebook.sample") // your app's package
    }
}

dependencies {
    testImplementation("org.robolectric:robolectric:4.14.1")
    testImplementation("io.github.takahirom.roborazzi:roborazzi:1.72.0")
    testImplementation("io.github.takahirom.roborazzi:roborazzi-compose:1.72.0")
    testImplementation("io.github.sergio-sastre.ComposablePreviewScanner:android:0.9.3")
    testImplementation("io.github.takahirom.roborazzi:roborazzi-compose-preview-scanner-support:1.72.0")
    testImplementation("androidx.compose.ui:ui-test-junit4") // version from your Compose BOM, or pin one
}

settings.gradle.kts 옆에 phonebook.config.json을 추가하세요:

{
  "appName": "My Android App",
  "platform": "android",
  "android": { "modules": [":app"], "variant": "debug" }
}

그런 다음 Phonebook이 있는 저장소에서:

npx @stag-build/phonebook generate -C /path/to/your/android/repo
npx @stag-build/phonebook build -C /path/to/your/android/repo

phonebook-out/index.html을 엽니다.

빠른 시작: iOS

SnapshotPreviews SPM 패키지와 SnapshotTest를 상속하는 작은 XCTest 타깃을 프로젝트에 추가하세요(전체 예시는 samples/ios 참고):

// PhonebookSnapshotTests.swift
import SnapshottingTests

final class PhonebookSnapshotTests: SnapshotTest {
    override class func snapshotPreviews() -> [String]? {
        return nil // record every #Preview
    }
}

.xcodeproj 옆에 phonebook.config.json을 추가하세요:

{
  "appName": "My iOS App",
  "platform": "ios",
  "ios": {
    "project": "MyApp.xcodeproj",
    "scheme": "MyApp",
    "simulator": "iPhone 17 Pro"
  }
}

스킴이 스냅샷 테스트 타깃을 빌드하고 테스트하도록 설정해야 합니다(샘플의 PhonebookSample.xcscheme 참고). 그런 다음:

npx @stag-build/phonebook generate -C /path/to/your/ios/repo
npx @stag-build/phonebook build -C /path/to/your/ios/repo

phonebook-out/index.html을 엽니다.

명명 규칙

Phonebook은 기존 프리뷰 이름에서 component / state 카드로 스크린샷을 그룹화합니다 — 필수 어노테이션 없음. 전체 규칙과 예시는 docs/naming-convention.md에서 확인하세요.

구성

phonebook.config.json:

키

유형

기본값

설명

appName

string

—

필수입니다. 갤러리 헤더에 표시됩니다.

platform

"android" | "ios"

—

필수입니다.

output

string

"phonebook-out"

번들 출력 디렉터리, 설정 파일 기준 상대 경로입니다.

android.modules

string[]

[\":app\"]

기록할 Gradle 모듈입니다.

android.variant

string

"debug"

빌드 변형입니다. Phonebook은 <module>:recordRoborazzi<Variant>를 실행합니다.

ios.project

string

—

설정 파일 기준 .xcodeproj 경로입니다. project/workspace 중 하나가 필수입니다.

ios.workspace

string

—

설정 파일 기준 .xcworkspace 경로입니다.

ios.scheme

string

—

필수입니다. SnapshotPreviews 테스트 타깃을 포함하는 스킴입니다.

ios.simulator

string

"iPhone 17 Pro"

-destination에 사용할 시뮬레이터 기기 이름입니다.

ios.onlyTesting

string

자동 감지

generate가 앱의 전체 테스트 스위트가 아니라 스냅샷 클래스만 실행하도록 하는 -only-testing: 필터입니다. SnapshotTest 하위클래스에서 자동으로 유도되며, 전체를 실행하려면 ""로 설정합니다.

generate와 build 모두 -C <dir>(phonebook.config.json이 있는 프로젝트 디렉터리)을 받습니다. generate는 -o <dir>로 번들 출력을 재정의하고, --allow-empty로 프리뷰 없이 기록된 실행을 허용합니다. build는 선택적으로 번들 경로를 받으며 — 주지 않으면 프로젝트의 번들 디렉터리를 사용합니다 — -o <dir>이 있으면 사이트 출력을 지정합니다. -o 없이는 build가 index.html을 번들 디렉터리에 바로 쓰고 그 안의 images/를 그대로 재사용하며(복사 없음), 이것이 위 빠른 시작들의 방식입니다. -o <dir>을 전달하면 대신 번들의 이미지를 별도의 독립형 사이트 디렉터리로 복사합니다.

phonebook init 및 phonebook doctor

phonebook init은 플랫폼을 감지해 phonebook.config.json과 의존성/설정 스니펫을 생성합니다 — 라이브러리 버전은 프로젝트의 Kotlin 버전에 맞게 해석되고, 앱 패키지도 입력됩니다. 이때 빌드 파일을 수정하지는 않습니다.

phonebook doctor는 generate에 필요한 모든 것이 연결되어 있는지 확인합니다: 플러그인 및 테스트 의존성(Gradle 버전 카탈로그를 쓴다면 그 쪽으로 해상), 스캐너의 packages 값, Kotlin/Roborazzi 호환성, 그리고 툴체인(JDK/Xcode/시뮬레이터)까지. --deep를 추가하면 테스트 소스도 컴파일해 확인합니다 — 느리지만 정적 검사와 실제 상황이 다를 때 결정적입니다. iOS에서 SnapshotPreviews가 링크되었는데 아직 SnapshotTest 하위클래스가 없으면, doctor가 그 클래스를 추가해야 할 정확한 타깃과 폴더를 알려줍니다(.pbxproj에서 parsing). 따라서 "어디에 추가하라"는 조작도 아닙니다.

phonebook init --write-snapshot-class는 init의 방침(중립적)의 유일한 예외입니다. doctor의 iOS 검사가 링크 타깃을 찾고, 그 타깃의 소스 폴더가 Xcode 파일시스템 동기화 그룹 중 하나라면 <folder>/PhonebookSnapshots.swift를 바로 작성합니다. 동기화되는 폴더는 Xcode가 자동으로 가져가기 때문에 안전하며, project.pbxproj 편집 없이도 됩니다. 그 외 경우(아직 SnapshotPreviews 연결 없음, 비동기화 그룹 프로젝트, 하위클래스가 이미 존재)에는 이유를 함께 거절합니다.

phonebook mcp는 MCP 서버를 실행합니다 — 설정과 예시 프롬프트는 위의 "코딩 에이전트와 함께 사용"을 참고하세요.

요구 사항

Android: JDK 17+. 에뮬레이터는 필요하지 않습니다. Roborazzi는 Robolectric을 통해 JVM에서 렌더링되므로 generate는 Linux CI에서 실행됩니다.

iOS: Xcode가 설치된 macOS와 부팅되었거나 부팅 가능한 시뮬레이터가 필요합니다(generate는 지정된 시뮬레이터 대상에 대해 xcodebuild test를 실행합니다). CI에는 macOS 러너가 필요합니다.

CI 레시피는 docs/ci.md에서, 명명 규칙은 docs/naming-convention.md에서 확인하세요.

로드맵

v1 이후(M5), 아직 구현되지 않음:

  • 생성된 갤러리의 검색 및 필터

  • 나란히 보기가 포함된 멀티 번들 병합(크로스 플랫폼 사이트)

  • 두 실행 간 버전 비교(이를 위해 매니페스트는 이미 커밋 및 이미지 해시를 보유함)

  • 추가 CI 레시피 문서

라이선스

MIT — LICENSE 참조.

Available Tools

5 tools
analyze_coverageA

Scan the codebase for UI components and the previews that cover them, and report what each component is missing: states implied by its parameters, environment objects no preview supplies, dark theme, large text, and localization when the project ships one. Read-only — it reports the gaps, it does not write previews. After editing, pass changed: true (or paths) to hear only about what you touched; the whole project is always scanned either way, so the answers stay correct.

NameRequiredDescriptionDefault
dirNoProject directory containing phonebook.config.json.
pathsNoReport only components declared in these files or directories, relative to the project directory. The whole project is still scanned.
changedNoReport only components in files with uncommitted git changes — what you just edited. Ignored outside a git repository. Combined with paths when both are given.

TDQS

A4.5/5.0
Behavior5/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It explicitly states 'Read-only — it reports the gaps, it does not write previews,' and clarifies that the entire project is scanned even when filters are applied, ensuring the answers stay correct. This is honest and thorough for a read-only tool.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness4/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single, dense paragraph but each sentence serves a purpose: purpose, behavioral safety, and usage guidance. It is front-loaded with the main objective, and the filtering instructions are kept concise. Slightly long but no waste.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a read-only tool with 3 optional parameters and no output schema, the description adequately explains what is analyzed, what is reported, and how filters behave. It does not specify the exact return format, but that is a minor gap given the clarity of the rest. The tool is fully callable correctly from the description alone.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters4/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema coverage is 100%, so the baseline is 3. The description adds valuable context beyond the schema: it explains that paths restrict reporting but not scanning, that changed is ignored outside a git repo, and that both combine when given together. This clarifies edge cases and adds meaning to each parameter.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description states a specific verb ('Scan'), resource ('codebase'), and a precise objective: report what each UI component is missing in preview coverage (states, environment objects, dark theme, large text, localization). It clearly distinguishes itself from sibling tools like get_preview_guidance (which presumably offers guidance) and run_build/run_generate/check_setup (which are operational, not analytical).

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description explains when to use the changed and paths parameters ('After editing, pass changed: true (or paths) to hear only about what you touched'), and notes that the whole project is always scanned regardless. It doesn't explicitly contrast with get_preview_guidance, but the analytical vs. guidance nature is implied, and the filtering usage is well covered.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

check_setupA

Check that the project is correctly set up for phonebook generate (same checks as phonebook doctor): libraries wired, test target present, JDK/Xcode/simulator available.

NameRequiredDescriptionDefault
dirNoProject directory containing phonebook.config.json.

TDQS

A4/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description carries the full burden of behavioral disclosure. It does communicate that the tool performs checks, names the checks (libraries, test target, JDK/Xcode/simulator), and implies a read-only nature. However, it does not describe failure behavior, exit codes, output format, or whether the tool attempts any fixes, leaving some behavioral ambiguity.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is one tight, well-structured sentence. It front-loads the purpose, gives the equivalence to `phonebook doctor`, and lists the main checks without wasted words.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness4/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a simple single-parameter check tool with no output schema and no annotations, the description covers the essential context: what is checked and why. It could be slightly more complete by stating what a successful or failed check returns, but the current level is adequate for selection and invocation.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

The single parameter `dir` is fully documented in the schema with a clear description and default value, so schema coverage is 100%. The tool description adds no additional parameter semantics, which is acceptable given the schema already handles it.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb ('Check') and resource ('project setup'), names the exact command it supports (`phonebook generate`), and enumerates the concrete checks performed. It clearly distinguishes itself from generation/build tools like `run_generate` and `run_build`.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The description clearly implies this is a precondition check for `phonebook generate`, and the reference to `phonebook doctor` provides an equivalence that helps the agent understand behavior. It does not explicitly state 'use before run_generate' or list when not to use it, so it falls just short of full explicit routing guidance.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

get_preview_guidanceA

Return the preview naming convention plus a ready-to-paste preview code template for a component, so any agent writes consistent previews.

NameRequiredDescriptionDefault
statesNoState names, e.g. ["Enabled", "Disabled"]
platformYesTarget platform
componentNoComponent name, e.g. "Button"

TDQS

A3.5/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are present, so the description carries the behavioral disclosure burden. It clearly discloses a non-mutating return ('Return') and the output type (naming convention + template), but it does not describe output format, failure behavior, or prerequisites. For a simple getter this is adequate but incomplete.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

One sentence with no filler, and the key deliverable is front-loaded before the outcome clause. Every phrase earns its place.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

Only three parameters with 100% schema coverage reduce the burden on the description. However, with no annotations and no output schema, the description could usefully state how platform, states, and component are handled, or when this guidance should be fetched relative to run_generate and run_build. These are gaps but not fatal ones.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, so the baseline for this dimension is 3. The description's 'for a component' aligns with the 'component' parameter but adds no value beyond the schema's documented parameters; nothing is said about how states or platform affect the returned template.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description uses a specific verb ('Return') and identifies a concrete resource ('preview naming convention plus a ready-to-paste preview code template'), with the desired outcome 'so any agent writes consistent previews.' It clearly separates itself from execution-oriented siblings like run_generate and run_build, though it does not explicitly name them.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The phrase 'so any agent writes consistent previews' implies this tool should be consulted before writing a preview, but there is no explicit statement of when to use it versus siblings or when not to use it. It lists no alternatives and no exclusion conditions, leaving agents to infer its place in the workflow.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

run_buildA

Build the static gallery site from a bundle, same as phonebook build <bundle>.

NameRequiredDescriptionDefault
bundleYesBundle directory produced by run_generate / `phonebook generate`
outputNoSite output directory (default: the bundle directory itself, reusing its images)

TDQS

A3.5/5.0
Behavior2/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

No annotations are provided, and the description only states the core action; it does not disclose side effects such as writing into the bundle directory, overwriting output, or requirements. The output default noted in the schema is useful but outside the description, so the description itself carries too little behavioral burden.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is a single front-loaded sentence with no filler, and the CLI-equivalent note is a compact way to anchor expected behavior. It is appropriately sized for a simple build command.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

For a two-parameter tool with full schema coverage, the inputs are adequately specified, but the missing usage routing and side-effect disclosure leave the agent to infer workflow and safety. With no annotations or output schema, a bit more context would make it complete.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

Schema description coverage is 100%, with both 'bundle' and 'output' documented, so the baseline applies. The description adds no parameter semantics beyond the schema other than echoing 'bundle'.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose5/5

Does the description clearly state what the tool does and how it differs from similar tools?

Description opens with an explicit verb ('Build') and resource ('static gallery site'), and identifies the input ('from a bundle'), which clearly separates it from the sibling generation/analysis/check tools. The CLI alias reinforces the exact operation without ambiguity.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines3/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

The 'from a bundle' wording and the schema's 'produced by run_generate' hint imply a build-after-generate workflow, but the description does not explicitly say when to use this tool versus siblings like run_generate or analyze_coverage. No when-not or alternative conditions are stated.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

run_generateA

Run the platform engine to render all previews and produce a bundle (manifest + images), same as phonebook generate. When previews crash, keeps what rendered and says which previews did not, by file and line. Pass changed or files to render only the previews declared in those files, for a faster loop while iterating.

NameRequiredDescriptionDefault
dirNoProject directory containing phonebook.config.json.
filesNoRender only previews declared in these files, relative to the project directory.
changedNoRender only previews declared in files with uncommitted git changes. Ignored outside a git repository.

TDQS

A3.7/5.0
Behavior3/5

Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?

With no annotations provided, the description must carry the full burden of behavioral disclosure. It does disclose crash handling (keeps what rendered, reports failures by file and line) and the bundle output, which is valuable. However, it omits other behavioral traits like side effects, idempotency, and prerequisites, leaving significant gaps.

Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.

Conciseness5/5

Is the description appropriately sized, front-loaded, and free of redundancy?

The description is three sentences with no filler. It front-loads the core purpose, then adds crash behavior and usage tips. Every sentence earns its place and the structure is clean.

Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.

Completeness3/5

Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?

The tool has no output schema and no annotations, so the description should clarify return values and side effects. It mentions the bundle output but does not specify what the tool returns to the agent. It also does not state prerequisites like the config file beyond the dir parameter, leaving completeness gaps.

Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.

Parameters3/5

Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?

All three parameters are fully described in the schema (100% coverage), so the description adds little beyond what is already structured. It mentions passing files or changed but does not elaborate on their semantics beyond the schema's descriptions.

Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.

Purpose4/5

Does the description clearly state what the tool does and how it differs from similar tools?

The description clearly states the tool runs the platform engine to render previews and produce a bundle, referencing 'phonebook generate' for familiarity. It does not explicitly distinguish from sibling tools like run_build, but the core action is unambiguous and specific.

Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.

Usage Guidelines4/5

Does the description explain when to use this tool, when not to, or what alternatives exist?

It provides clear guidance on using the files and changed parameters to limit rendering to specific files for a faster iteration loop. However, it does not mention when to use this tool over siblings or any exclusions, so it falls short of a 5.

Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.

Tool Schema Changelog

Recent tool additions, removals, and schema changes observed during successful MCP inspections.

  1. 2 tool updatesv0.1.7
    • Changedanalyze_coverage2 fields changed
      • addedInput schema / properties / changed
        Added value: +{
        +  "description": "Report only components in files with uncommitted git changes — what you just edited. Ignored outside a git repository. Combined with paths when both are given.",
        +  "type": "boolean"
        +}
      • addedInput schema / properties / paths
        Added value: +{
        +  "description": "Report only components declared in these files or directories, relative to the project directory. The whole project is still scanned.",
        +  "items": {
        +    "type": "string"
        +  },
        +  "type": "array"
        +}
    • Changedrun_generate2 fields changed
      • addedInput schema / properties / changed
        Added value: +{
        +  "description": "Render only previews declared in files with uncommitted git changes. Ignored outside a git repository.",
        +  "type": "boolean"
        +}
      • addedInput schema / properties / files
        Added value: +{
        +  "description": "Render only previews declared in these files, relative to the project directory.",
        +  "items": {
        +    "type": "string"
        +  },
        +  "type": "array"
        +}
  2. 5 tool updatesv0.1.2
    • First observedanalyze_coverage
    • First observedcheck_setup
    • First observedget_preview_guidance
    • First observedrun_build
    • First observedrun_generate

TDQS

A4/5.0

Scored across 5 tools

Disambiguation5/5

Each tool addresses a distinct step in the preview workflow: guidance, setup, coverage analysis, generation, and building. The only adjacent pair (run_generate and run_build) is clearly separated by bundle output versus static-site output.

Naming Consistency4/5

Most names are imperative snake_case with a clear object (get_preview_guidance, analyze_coverage, check_setup). run_build and run_generate are a minor deviation because they use a run_ prefix around CLI command names rather than a pure verb_noun structure.

Tool Count5/5

Five tools is well-scoped for a focused preview-generation workflow. Each tool earns its place by covering a separate phase from setup to final build, with no redundant or padding tools.

Completeness5/5

The tool set covers the full core loop: check setup, get authoring guidance, analyze coverage gaps, generate previews, and build the gallery site. The absence of a write-preview tool is fine because editing code happens outside the server, and the guidance plus coverage tools support that workflow.

Maintenance

ActivityActive
ResponsivenessNo recent community issues

Related MCP Connectors

Related MCP Servers

  • A
    license
    A
    quality
    A
    maintenance
    Enables AI agents to render and screenshot isolated UI components instantly across multiple browsers without a dev server or Storybook.
    22
    660 npm
    1
    MIT
  • A
    license
    Not graded
    quality
    C
    maintenance
    Enables AI coding assistants to inspect frontend projects, search a curated design and motion recipe catalog, prepare and preview structured design plans, apply changes with backups and rollback, capture previews, audit UI accessibility and performance, and monitor activity via a web dashboard.
    13 npm
    MIT