stitch-sdk-domain-design

Projetar o modelo de domínio para o Stitch SDK. Usar ao mapear ferramentas MCP para classes de domínio e bindings em domain-map.json. Esta é a Etapa 2 da geração…

npx skills add https://github.com/google-labs-code/stitch-sdk --skill stitch-sdk-domain-design

Stitch SDK Domain Design

This skill teaches you how to perform Stage 2 of the generation pipeline: reading tool schemas and producing domain-map.json — the intermediate representation that drives codegen.


Your Inputs

  1. tools-manifest.json — raw MCP tool schemas captured from the server (includes outputSchema)
  2. ir-schema.ts — Zod schema defining valid domain-map structure (the canonical contract)
  3. Existing domain-map.json — the current IR (if extending, not starting fresh)
  4. The stitch-sdk-development skill — for understanding the pipeline context

Your Output

A valid domain-map.json with two sections: classes and bindings, validated by ir-schema.ts.

[!IMPORTANT] Your output is validated twice by the codegen: structurally (Zod IR schema) and semantically (projection steps verified against outputSchema from the tools-manifest).


Designing Classes

Each class represents a domain entity. Ask: "What noun does the user interact with?"

{
  "Stitch": {
    "description": "Main entry point. Manages projects.",
    "constructorParams": [],
    "isRoot": true,
    "factories": [
      {
        "method": "project",
        "returns": "Project",
        "description": "Create a Project handle from an ID."
      }
    ]
  }
}

Key decisions:

FieldPurposeExample
constructorParamsFields stored on the instance["projectId", "screenId"]
fieldMappingPer-field data source mapping with optional stripPrefixSee below
parentFieldWhich param is injected from a parent class"projectId"
idFieldWhich param the .id getter aliases"screenId"
factoriesLocal factory methods (no API call)[{ "method": "project", "returns": "Project" }]

Field Mapping

Use fieldMapping when a param needs a different source field, prefix stripping, or a fallback:

{
  "constructorParams": ["projectId", "screenId"],
  "fieldMapping": {
    "projectId": { "from": "name", "stripPrefix": "projects/" },
    "screenId": {
      "from": "id",
      "fallback": { "field": "name", "splitOn": "/screens/" }
    }
  }
}
  • stripPrefix: Removes a resource name prefix from the value
  • fallback: If the primary field is missing, splits an alternate field on a delimiter

Designing Bindings

Each binding maps one MCP tool to one class method. Ask: "Who owns this action?"

Arg routing

TypeMeaningCode generated
selfFrom this.fieldprojectId: this.projectId
paramFrom method parameterprompt: prompt
computedTemplate interpolationname: \projects/${this.projectId}/screens/${screenId}``
selfArrayWrap self field as arrayselectedScreenIds: [this.screenId]

Optional params use "optional": true. Renamed params use "rename": "newName".

Response Projections

The returns.projection array tells codegen how to navigate the API response. Each step is a ProjectionStep:

{ prop: string; index?: number; each?: boolean; fallback?: string }
ProjectionGenerated codeUse when
[] (empty)rawDirect return (whole response)
[{ "prop": "projects" }]raw.projectsArray inside object
[{ "prop": "outputComponents", "index": 0 }, { "prop": "design" }, { "prop": "screens", "index": 0 }]raw.outputComponents[0].design.screens[0]Deeply nested single item
[{ "prop": "outputComponents", "each": true }, { "prop": "design" }, { "prop": "screens", "each": true }]flatMap chainCollect all items across arrays
[{ "prop": "screenshot" }, { "prop": "downloadUrl" }]raw.screenshot.downloadUrlNavigate nested properties

Decision: Use "index": 0 when extracting a single item. Use "each": true when collecting all items (array result). You cannot use both on the same step.

[!TIP] Every prop in a projection is validated against the tool's outputSchema at codegen time. If you typo a property name, codegen will fail with a diagnostic listing the available properties.

Return class wrapping

When returns.class is set, the extracted data is wrapped in a domain class constructor:

{
  "returns": {
    "class": "Screen",
    "projection": [{ "prop": "screens" }],
    "array": true
  }
}

The codegen automatically spreads parentField into the data if the child class declares one.

Cache-aware methods

Add a cache field with a structured projection to check this.data before calling the API:

{
  "cache": {
    "projection": [{ "prop": "htmlCode" }, { "prop": "downloadUrl" }],
    "description": "Use cached HTML download URL from generation response if available"
  }
}

When the cached property is a nested object (like File with a downloadUrl), use multiple projection steps to drill into it.

Generated code:

if (this.data?.htmlCode?.downloadUrl) return this.data?.htmlCode?.downloadUrl;
// ... else call API

Decision Framework

When mapping a new tool, answer these questions:

  1. Which class? Look at which fields the tool requires. If it needs projectId from self, it belongs on Project or Screen. If it needs nothing from self, it belongs on Stitch.

  2. Which method name? Use the verb from the tool name, simplified. generate_screen_from_textgenerate. edit_screensedit.

  3. Arguments from self or param? If the caller already has the data (because they're calling a method on themselves), use self. If they need to provide it, use param.

  4. How deep is the return? Check the tool's outputSchema in tools-manifest.json. Build the projection array step-by-step to navigate to the useful data.

  5. Should it cache? If the data is available from a previous response (like generation), add a cache field with the projection path.


Validation

After editing domain-map.json:

bun scripts/generate-sdk.ts     # Validates IR + projections, then generates
npx tsc --noEmit                 # Type check
npx vitest run                   # Unit tests
bun scripts/e2e-test.ts          # E2E tests
bun scripts/validate-generated.ts  # Lock integrity

If a projection is invalid, you'll see:

❌ Binding "Project.generate" projection step 2:
   property "screenz" not found in outputSchema.
   Available properties: screens, components, metadata

Mais skills de google-labs-code

remotion
google-labs-code
Crie vídeos de walkthrough profissionais a partir de designs do aplicativo Stitch usando Remotion, com transições suaves e sobreposições de texto. Recupera telas de projetos Stitch e as organiza em composições de vídeo Remotion com efeitos de zoom, transições de fade e sobreposições de texto contextuais. Suporta arquitetura de componentes modulares com componentes ScreenSlide e WalkthroughComposition, além de recursos avançados como hotspots interativos e integração de narração. Gera manifestos de tela, baixa...
official
ink
google-labs-code
Renderizador de terminal Ink para json-render que transforma especificações JSON em UIs de terminal interativas. Use ao trabalhar com @json-render/ink, construindo UIs de terminal a partir de…
official
stitch-sdk-pipeline
google-labs-code
Execute o pipeline completo de geração do Stitch SDK. Use quando uma nova ferramenta for adicionada ou o SDK precisar ser regenerado do início ao fim.
official
stitch-sdk-readme
google-labs-code
Gerar ou atualizar o README do Stitch SDK. Use a estrutura do Bookstore Test e obtenha a API atual a partir do código-fonte. Use quando o README precisar…
official
typed-service-contracts
google-labs-code
Architecture standard for building robust, type-safe TypeScript services using the "Spec and Handler" pattern. Use when building CLIs, libraries, or complex…
official
agent-dx-cli-scale
google-labs-code
Uma escala de pontuação para avaliar o quão bem uma CLI é projetada para agentes de IA, baseada nos princípios de "Reescreva sua CLI para Agentes de IA".
official
ink
google-labs-code
Renderizador de terminal para json-render que transforma especificações JSON em interfaces de terminal interativas. Use ao trabalhar com @json-render/ink, criando interfaces de terminal a partir de…
official
stitch-sdk-bug-bash
google-labs-code
Encontre bugs no SDK da Stitch usando uma chave de API real. Cobre bordas funcionais padrão e situações complicadas.
official