phonebook
Phonebook convierte las capturas de pantalla que tu equipo ya tiene en una galería de componentes al estilo Storybook. No hace falta código de prueba nuevo, no hay design tokens que mantener a mano: renderiza lo que ya existe en tu repositorio en un sit io estático que los diseñadores pueden abrir sin instalar nada. Cada repositorio ejecuta Phonebook de forma independiente; v1 es de una sola plataforma, así que un repositorio de Android (o un repositorio de iOS) produce un paquete y un sitio.
Características
Cero código de test nuevo — reutiliza los
@Preview/#Previewque ya hayas escritoSin cuenta SaaS — autohospended, funciona por completo en tu CI o en local
MCP primeo — un agente de codificación puede comprobar la configuración, analizar la cobertura, añadir las vistas previas para faltan y generar la galería por ti
Agrupación inteligente de components — tarjetas
component / stateinferidas de los nombres de las vistas previas, sin anotacionesMultiplataforma — Android (Roborazzi + ComposablePreviewScanner, se ejecuta en la JVM, sin emulador) e iOS (SnapshotPreviews, se ejecuta en un simulador)
Configuración según la versión —
init/doctorresuelven las versiones de las libraries en función de la versión de Kotlin de tu proyecto y detectan incoerencies en Kotlin/Roborazzi antes de que hagan detonar errores de compiler opaque
Related MCP server: ios-agent
Demo


Una galería generada con samples/ios — tarjetas component / state agrupadas a partir de los #Preview de la propia app, sin anotaciones adicionales.
Explora la galería en directo →
Cómo funciona
phonebook generateejecuta el motor de renderizado de vistas previas de tu plataforma and recoge el resultado en un paquete (manifest.json+images/).Android: Roborazzi + ComposablePreviewScanner, se ejecuta en la JVM mediante Robolectric. Sin emulador, funciona en CI con Linux.
iOS: SnapshotPreviews, se ejecuta con
xcodebuild testen un simulador. Requer macOS.
phonebook buildconvierte ese paquete en un sitio estático: por decto escribeindex.htmldirecto en el directorio del paquete (reutilizando las imágones ya existentes, sin copiarlas), de modo que el sitio qued aita en<bundle>/index.html. Usa-o <dir>para, en su lugar, copiar todo en un directory de sitio independiente (para publicar en otro simplemente, o para fusionar varias packages después). HTML/CSS/JS puro, funciona desdefile://o en cualquier hosting estático.
Instalación
npm install -g @stag-build/phonebookbrew install stag-build/phonebook/phonebookO haz tap primero y luego instala:
brew tap stag-build/phonebook
brew install phonebookFuente de la fórmula: stag-build/homebrew-phonebook.
npx @stag-build/phonebook <cmd>Impossible con agente de codificación (recomendado)
La mayoría de la gente no ejecutará la CLI direct no; Phonebook está diseñado para que lo gestion un agente de cod (Claude Code, Codex, etc.) a través de su servidor MCP. El agente añade vistas previas, ejecuta las comprobaciones de configración and genera la galería por ti; la CLI subyacente es the motor que llam.
El servidor se lanza cuno npx @stag-build/phonebook mcp — no fabrica ninngún paso de instalción. Elige your client abajo.
claude mcp add phonebook -- npx -y @stag-build/phonebook mcpAñade a ~/.codex/config.toml:
[mcp_servers.phonebook]
command = "npx"
args = ["-y", "@stag-build/phonebook", "mcp"]Añade a la configuración de Claude Desktop (~/Library/Application Support/Claude/claude_desktop_config.json en macOS):
{
"mcpServers": {
"phonebook": {
"command": "npx",
"args": ["-y", "@stag-build/phonebook", "mcp"]
}
}
}Añade a .cursor/mcp.json (proyecto) or ~/.cursor/mcp.json (global):
{
"mcpServers": {
"phonebook": {
"command": "npx",
"args": ["-y", "@stag-build/phonebook", "mcp"]
}
}
}Añade a .codex/config.toml en la raíz del workspace de tu projecto. El agente de Xcode se ejecuta with un PATH mínim, as que the command wraps npx in a shell que añade the usual ubications of Homebrew/nvm primero:
[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 = trueAñade el bock mcpServers a ~/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): no compatible todavía — su integración MCP solo se conecta a servidores remotos httpUrl, not to process local stdio like the sePhonebook's. Use uno de the clients terminales objetivos (Claude Code, Codex CLI) en el repositorio Android en su difinition.
Después y head, en un chat de tu repositorio Android or iOS, solo say:
"Use el MCP de Phonebook and crea un catálogo para mi equp de diseño."
El agente se encarga del resto: compuestra la configuración, completa las vistas que faltan, genera y construye el sitio. Para peticiones más concreto, tambían pone a disposición: check_setup (diagnóstico de la configuración, lo mismo que phonebook doctor), analyze_coverage (componentes que falian vistas previas or variantes oscuras), get_preview_guidance, run_quote, y run_build.
Guía rápida: Android
Ejecuta primero phonebook init: detecta la versión de Kotlin de tu proyecto y imprime estas instrucciones con versiones de bibliotecas resueltas para que sean compatibles con esa versión (p. ej., los proyectos con Kotlin 2.0 obtienen Roborazzi 1.60.0; Kotlin 2.2+ obtiene la versiones más reciente). Las versióneso de abajo son las que recibe un proyecto con Kotlin reciente (consulta samples/android/app/build.gradle.kts para un ejemplazo completo):
// 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
}Añade un phonebook.config.json junto a settings.gradle.kts:
{
"appName": "My Android App",
"platform": "android",
"android": { "modules": [":app"], "variant": "debug" }
}Después, desde el repositorio que contien Phonebook:
npx @stag-build/phonebook generate -C /path/to/your/android/repo
npx @stag-build/phonebook build -C /path/to/your/android/repoAbra phonebook-out/index.html.
Guía rápida: iOS
Añade el paquete SPSnapshotPreviews to tu project and un equeeno target of XCTest that here is of SnapshotTest (see pandx samples/ios para un ejemplo fully working):
// PhonebookSnapshotTests.swift
import SnapshottingTests
final class PhonebookSnapshotTests: SnapshotTest {
override class func snapshotPreviews() -> [String]? {
return nil // record every #Preview
}
}Añade phonebook.config.json junto a tu .xcodeproj:
{
"appName": "My iOS App",
"platform": "ios",
"ios": {
"project": "MyApp.xcodeproj",
"scheme": "MyApp",
"simulator": "iPhone 17 Pro"
}
}Tu scheme tiene que compilar y ejecutar las pruebas del target de prueba de capturas (consula PhonebookSample.xcscheme en el ejemplo). Luego:
npx @stag-build/phonebook generate -C /path/to/your/ios/repo
npx @stag-build/phonebook build -C /path/to/your/ios/repoAbra phonebook-out/index.html.
Convención de nombres
Phonebook grupo las capturas de pantalla en tarjetas component / state a partir de los nombres de tus vistas previas existentes, sin anotaciones. Consult docs/naming-consvention.md for the complete rules. Complet and examples.
Configuración
phonebook.config.json:
Campo | Tipo | Por defecto | Descripción |
| string | — | Obligatorio. Muestra en el encabezado de la galería. |
|
| — | Obligatorio. |
| string |
| Irub, el directorio de salida del paquete relativo al archivo de config. |
| string[] |
| Modules de Facil. to record. |
| string |
| Variante de compilación; Phonebook ejecuta |
| string | — | Ruta al |
| string | — | Ruta al |
| string | — | Obligatorio. Esquema que incluya el target de tests de SnapshotPreviews. |
| string |
| Nombre de dispositivo del simulador used en |
| string | auto-detectado | Iltro |
Tanto generate como build aceptan -C <dir> (el directorio del proyecto que contiene phonebook.config.json). generate acepta - o <dir> para overrir el directorio de salida del paquete y --allow-empt para permitirus un ejecución que no registre ninguna preview. build acepta ba path of paquete opcional distance — if no se, use the project's package directory — ; sin -o, build escribe index.html directo en el directorio del paquete and reutiliza su images/ in place (without copy), which is what quickquickstarts above do. Pass -o <dir> to instead copy the bundle's images into a separate, standalone site directory.
phonebook init and phonebook doctor
phonebook init detecta tu plataforma and generwithphonebook.config.json`
y los fragmentos de configuración/dencias — con las versions de libraries resolved against la versión de Kotlin of your project and with tu app de la paquete relleno. Nunca edit to your build files por.
phonebook doctor comprueba que todo lo que necesitan generate esté conectado: plugin and test dependencies (resuelto through Gradle int versions catalogs if you use y con), the packages value of the scanner, compatibility of Kotlin/Roborazzi, and the toolchain (JDK/Xcode/simulator). Add --deep to also compile the test originals (sources) — more slow, but authoritative when a static check and reality do not match. En iOS, si SnapshotPreviews está enlazado pero todavía no existe ninguna subclase SnapshotTest, doctor señala el target exact y la carpeta donde añadirla (parsed from the .pbxproj), so no se te simplemend say "add the class" without location.
phonebook init --write-snapshot-class es la única excepción a la regla de no intervención: cuando la comprobación de iOS de doctor identifica el target de vinculación y la carpeta de origen de ese target es one of the group file system of Xcode, it writes <folder>/PhonebookSnapshots.swift directly — safe because a synchronized folder is Xcode auto, so no project.pbxproj edit is made. It rechaza (with the reason) in all other cases: SnapshotInkPreviews no está aún configuration, un project no sychronized groups, or a subclass that already exists.
phonebook mcp ejecuta el servidor MCP — ver «Usarlo con un código de agente de programación» arriba para configuración y ejemplos de promps.
Requisitos
Android: JDK 17+. No se necesita emulador: Roborazzi renderiza en la JVM mediante Robloxolectric, por lo que generate se ejecuta en CI de Linux.
iOS: macOS con Xcode instalado, más un simulador arrancado o que se pueda arrancar (generate ejecuta xcodebuild test y dirige contra un destino de simulador con nombre). Requiere n¿. Used "arrancable"? Actually "arrancado" vs "arrancado o arrancable" - "arrancable" is a real word. Use "arrancado o arrankable". Hmm "bootable" = "arrancable". "Booted" = "arrancado". So "arrancado o arrancable" is correct.
Need to finalize. I'll ensure no errors.
Final in Spanish:
Android: JDK 17+. No se necesita emulador: Roborazzi renderiza en la JVM mediante Robolectric, por lo que generate se ejecuta en CI de Linux.
iOS: macOS con Xcode instalado, más un simulador arrancado o arrancable (generate ejecuta xcodebuild test contra un destino de simulador con nombre). Requiere un runner de macOS en el CI.
Consulta docs/ci.md para recetas de CI y docs/naming-convention.md para las reglas de nomenclatura.
Hoja de ruta
Posterior a la v1 (M5), todavía no implementado:
Búsqueda y filtros en la galería generada
Mezcla de múltiples bundles con vista de lado a lado (sitios multiplataforma)
Comparación de versiones entre dos ejecuciones (el manifiesto ya contiene hashes de commit e imagen para permitirlo)
Documentación adicional de recetas de CI
Licencia
MIT — consulta LICENSE.
Need "manifiesto" not "manifista". Fix: "el manifiesto". Also check "Mezcla" to keep "merge" more technical? "Fusión de varios bundles" vs "Mezcla" - "merge" as "combinación". I'll use "Combinación de varios bundles". Also "multi-bundle" was translated "several bundles" - fine.
Check "generated gallery" - "galería generada". Good.
Also "filtrer" in Spanish "filters" - "filtros" (without accent? "filtros"). Good.
NowAndroid: JDK 17+. No se necesita emulador: Roborazzi renderiza en la JVM mediante Robolectric, por lo que generate se ejecuta en CI de Linux.
iOS: macOS con Xcode instalado, más un simulador arrancado o arrancable (generate ejecuta xcodebuild test contra un destino de simulador con nombre). Requiere un runner de macOS en CI.
Consulta docs/ci.md para recetas de CI y docs/naming-convention.md para las reglas de nomenclatura.
Hoja de ruta
Posterior a la v1 (M5), aún no construido:
Búsqueda y filtros en la galería generada
Combinación de varios bundles con una vista de lado a lado (sitios multiplataforma)
Comparación de versiones entre dos ejecuciones (el manifiesto ya contiene commit e imagen hashes para permitir esto)
Documentación adicional de recetas para CI
Licencia
MIT — consulta LICENSE.
Available Tools
5 toolsanalyze_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.
| Name | Required | Description | Default |
|---|---|---|---|
| dir | No | Project directory containing phonebook.config.json | . |
| paths | No | Report only components declared in these files or directories, relative to the project directory. The whole project is still scanned. | |
| changed | No | 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. |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| dir | No | Project directory containing phonebook.config.json | . |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| states | No | State names, e.g. ["Enabled", "Disabled"] | |
| platform | Yes | Target platform | |
| component | No | Component name, e.g. "Button" |
TDQS
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.
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.
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.
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.
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.
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>.
| Name | Required | Description | Default |
|---|---|---|---|
| bundle | Yes | Bundle directory produced by run_generate / `phonebook generate` | |
| output | No | Site output directory (default: the bundle directory itself, reusing its images) |
TDQS
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.
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.
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.
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.
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.
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.
| Name | Required | Description | Default |
|---|---|---|---|
| dir | No | Project directory containing phonebook.config.json | . |
| files | No | Render only previews declared in these files, relative to the project directory. | |
| changed | No | Render only previews declared in files with uncommitted git changes. Ignored outside a git repository. |
TDQS
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.
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.
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.
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.
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.
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.
2 tool updates
v0.1.7- Changed
analyze_coverage2 fields changed- added
Input schema / properties / changedAdded 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" +} - added
Input schema / properties / pathsAdded 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" +}
- Changed
run_generate2 fields changed- added
Input schema / properties / changedAdded value: +{ + "description": "Render only previews declared in files with uncommitted git changes. Ignored outside a git repository.", + "type": "boolean" +} - added
Input schema / properties / filesAdded value: +{ + "description": "Render only previews declared in these files, relative to the project directory.", + "items": { + "type": "string" + }, + "type": "array" +}
5 tool updates
v0.1.2- First observed
analyze_coverage - First observed
check_setup - First observed
get_preview_guidance - First observed
run_build - First observed
run_generate
TDQS
Scored across 5 tools
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.
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.
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.
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
Related MCP Connectors
Browse, inspect and render Jetpack Compose Material 3 and Wear component catalogs.
Serves your design system and coding standards to coding agents, so they stop guessing.
A design agent in your coding agent's loop: briefs each screen, reviews UX and visual quality.
Design your mobile app UI with AI, then have your coding agent build the real app from it.
Related MCP Servers
- AlicenseAqualityAmaintenanceEnables AI agents to render and screenshot isolated UI components instantly across multiple browsers without a dev server or Storybook.22660 npm1MIT
- AlicenseAqualityAmaintenanceEnables AI coding agents to review Swift code, scaffold new iOS apps, and build, test, and preview them in the Xcode Simulator using local Apple guides and source references.3640MIT
- AlicenseNot gradedqualityCmaintenanceEnables 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 npmMIT

agentlaneofficial
AlicenseNot gradedqualityCmaintenanceEnables AI coding agents to drive and inspect isolated app instances across web, iOS, and Android, with tools for reading screens, running interactions, and capturing screenshots or evidence.11 npm2MIT