New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

Stitch SDK Domain Design

by google-labs-code in google-labs-code/stitch-sdk

Design the domain model for the Stitch SDK. An agent skill from google-labs-code/stitch-sdk.

OfficialApache-2.0Auto-check passed

Install Stitch SDK Domain Design

skills CLI
$ npx skills add google-labs-code/stitch-sdk --skill stitch-sdk-domain-design -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install google-labs-code/stitch-sdk stitch-sdk-domain-design --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/google-labs-code/stitch-sdk.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/stitch-sdk-domain-design .claude/skills/stitch-sdk-domain-design && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
stitch-sdk-domain-design
GitHub stars
1.8k
Token cost
~2.4k tokens
SKILL.md length
793 words
Files
1
Skills in repo
9
Repo updated
First seen
Licence
Apache-2.0

At a glance

Design the domain model for the Stitch SDK. An agent skill from google-labs-code/stitch-sdk.

  • Works in 4 steps: tools-manifest.json — raw MCP tool… → ir-schema.ts — Zod schema defining valid… → Existing domain-map.json — the current… → …
  • Mapping MCP tools to domain classes and bindings in domain-map.json
  • SKILL.md covers Your Inputs, Your Output, Designing Classes and Designing Bindings, plus 2 more sections
  • Calls bun and npx

What it does

Stitch SDK Domain Design is an agent skill from google-labs-code/stitch-sdk, published by the product's own GitHub organization. Design the domain model for the Stitch SDK. Use when mapping MCP tools to domain classes and bindings in domain-map.json. This is Stage 2 of the generation pipeline.

Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

The repository describes itself as: Generate UI screens from text prompts and extract their HTML and screenshots programmatically. The licence is Apache-2.0.

When your agent uses it

  • Mapping MCP tools to domain classes and bindings in domain-map.json
  • Tasks that involve MCP servers

Example prompts

  • “/stitch-sdk-domain-design”

Requirements

  • Node.js

Workflow steps

4 steps, taken from the first numbered list in SKILL.md.

  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

What it can do on your machine

Read from SKILL.md and the folder at commit e3f8ece. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • bun
    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Stitch SDK Domain Design loads about 2.4k tokens when it runs. Until then it costs about 48 tokens; SKILL.md has 793 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~48
When it runs · the whole SKILL.md, loaded when a task matches
~2.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from google-labs-code/stitch-sdk at commit e3f8ece, republished under its Apache-2.0 licence (© google-labs-code). 793 words, ~2,437 tokens.

Download SKILL.mdSave it as .claude/skills/stitch-sdk-domain-design/SKILL.md (or your agent's skills folder).
name
stitch-sdk-domain-design
description
Design the domain model for the Stitch SDK. Use when mapping MCP tools to domain classes and bindings in domain-map.json. This is Stage 2 of the generation pipeline.

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?"

json
{
  "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"]
referenceIdentity-map keys (.id aliases the LAST key){ "keys": ["projectId", "screenId"] }
parentFieldWhich param is injected from a parent class"projectId"
factoriesLocal factory methods (no API call)[{ "method": "project", "returns": "Project" }]
sideEffectsHandwritten extension methods (declared, never generated)[{ "method": "upload", "reason": "private_rest", "specPath": "src/spec/upload.ts" }]
extensionPathModule re-exporting the class with handwritten methods"../../src/project-ext.js"

[!IMPORTANT] The IR schema is STRICT. Unknown keys are hard validation errors, not silently ignored. Per-field source-mapping helpers described in older docs were never implemented and do not exist — identity fields are populated by the EntityManager from reference.keys, resource name parsing, and id fallback. If validation rejects a key you expected to exist, the feature does not exist — do not work around it.

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 interpolation ("template": "projects/{projectId}")name: \projects/${this.projectId}/screens/${screenId}``
selfArrayWrap self field as arrayselectedScreenIds: [this.screenId]

Optional params use "optional": true. Renamed params use "rename": "newName". A "default": "VALUE" (requires optional: true) is sent when the caller omits the value: deviceType: options?.deviceType ?? "DESKTOP".

[!IMPORTANT] Method signature shape (D12): required params are positional, in IR order; ALL optional params are emitted into a single trailing options?: { ... } object. generate(prompt, options?), never generate(prompt, deviceType?).

Response Projections

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

typescript
{ prop: string; index?: number; each?: boolean; find?: string; acknowledgeSingle?: boolean }
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. "find": "a.b" scans an array for the first element whose nested path is non-null.

[!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. Stepping THROUGH an array without index/each/find is also a codegen error — the emitted chain would be undefined at runtime.

[!WARNING] Truncation lint: using index or find on an UNBOUNDED array emits a warning — every other element is silently dropped (this exact pattern caused project.generate() to return one screen of many). Prefer "each": true + "array": true. Only if the result is semantically singular, acknowledge it with "acknowledgeSingle": true on the step.

Show full SKILL.md (216 more words)Show less
Return class wrapping

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

json
{
  "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:

json
{
  "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:

typescript
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_text → generate. edit_screens → edit.

  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:

bash
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

© google-labs-code, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in .agents/skills/stitch-sdk-domain-design of google-labs-code/stitch-sdk.

Open the folder on GitHubat commit e3f8ece

Compare with similar skills

Stitch SDK Domain Design next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Stitch SDK Domain Design compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Stitch SDK Domain Design this skillgoogle-labs-code/stitch-sdk1.8k—~2.4kAutomated safety check: PassApache-2.0
MCP Server Builderanthropics/skills180k63 repos~2.3kAutomated safety check: PassApache-2.0
MCP Server BuildershareAI-lab/learn-claude-code78k5 repos~1.2kAutomated safety check: PassMIT
MCP Integration for Pluginsanthropics/claude-plugins-official38k11 repos~3.1kAutomated safety check: PassApache-2.0
MCP Developmentcoollabsio/coolify63k1 repos~949Automated safety check: PassMIT
Code Design Rationale Investigatorcursor/plugins10k9 repos~2.6kAutomated safety check: PassNone

Similar skills

  • MCP Server Builder

    anthropics/skills

    Official

    Guides the design and implementation of Model Context Protocol servers in TypeScript or Python, from tool naming and error messages to evaluation.

    180k GitHub starsUsed in 63 repos~2.3k tokens
    Agent WorkflowsAuto-check passed

  • MCP Server Builder

    shareAI-lab/learn-claude-code

    Walks through building MCP servers in Python or TypeScript that expose tools, resources and prompts to Claude, with templates, registration and testing.

    78k GitHub starsUsed in 5 repos~1.2k tokens
    Agent WorkflowsAuto-check passed

  • MCP Integration for Plugins

    anthropics/claude-plugins-official

    Official

    Explains how to bundle Model Context Protocol servers in a Claude Code plugin, covering config files, stdio, SSE, HTTP and WebSocket server types, and authentication.

    38k GitHub starsUsed in 11 repos~3.1k tokens
    Agent WorkflowsAuto-check passed

  • MCP Development

    coollabsio/coolify

    A skill your agent uses for Laravel MCP development. An agent skill from coollabsio/coolify.

    63k GitHub starsUsed in 1 repo~949 tokens
    Frontend & DesignAuto-check passed

  • Code Design Rationale Investigator

    cursor/plugins

    Official

    Digs into why code is shaped the way it is by checking git history, pull requests and connected tools in parallel, then reporting a cited read on the tradeoffs.

    10k GitHub starsUsed in 9 repos~2.6k tokens
    DevelopmentAuto-check passed

  • Analyze Logs

    activepieces/activepieces

    Analyze application logs from the .evlog/logs/ directory. An agent skill from activepieces/activepieces.

    25k GitHub starsUsed in 1 repo~1.6k tokens
    DevelopmentAuto-check passed

More from google-labs-code/stitch-sdk

All 9 skills in this repo

  • Stitch SDK Development

    google-labs-code/stitch-sdk

    Official

    Develop the Stitch SDK. An agent skill from google-labs-code/stitch-sdk.

    1.8k GitHub stars~3.4k tokensUpdated 8 days ago
    Auto-check passed

  • Stitch SDK Pipeline

    google-labs-code/stitch-sdk

    Official

    Run the full Stitch SDK generation pipeline. An agent skill from google-labs-code/stitch-sdk.

    1.8k GitHub stars~2k tokensUpdated 8 days ago
    Auto-check passed

  • Stitch SDK Readme

    google-labs-code/stitch-sdk

    Official

    Generate or update the README for the Stitch SDK. An agent skill from google-labs-code/stitch-sdk.

    1.8k GitHub stars~1.8k tokensUpdated 8 days ago
    Auto-check passed

  • Stitch SDK Usage

    google-labs-code/stitch-sdk

    Official

    Use the Stitch SDK to generate, edit, and iterate on UI screens from text prompts, manage projects, and retrieve screen HTML/images.

    1.8k GitHub stars~2.8k tokensUpdated 8 days ago
    Auto-check passed

  • TDD Red Green Refactor

    google-labs-code/stitch-sdk

    Official

    Enforces a disciplined Red-Green-Refactor (TDD) workflow in TypeScript/Node.js.

    1.8k GitHub stars~755 tokensUpdated 8 days ago
    Auto-check passed

  • Typed Service Contracts

    google-labs-code/stitch-sdk

    Official

    Architecture standard for building robust, type-safe TypeScript services using the "Spec and Handler" pattern.

    1.8k GitHub stars~1.4k tokensUpdated 8 days ago
    Auto-check passed

Questions about Stitch SDK Domain Design

What does Stitch SDK Domain Design do?

Design the domain model for the Stitch SDK. An agent skill from google-labs-code/stitch-sdk. Stitch SDK Domain Design is an agent skill from google-labs-code/stitch-sdk, published by the product's own GitHub organization. Design the domain model for the Stitch SDK.

When should I use Stitch SDK Domain Design?

Stitch SDK Domain Design fits situations like: mapping MCP tools to domain classes and bindings in domain-map.json; tasks that involve MCP servers.

How do I install Stitch SDK Domain Design in Claude Code?

Run `npx skills add google-labs-code/stitch-sdk --skill stitch-sdk-domain-design -a claude-code`. Or copy the skill folder (.agents/skills/stitch-sdk-domain-design in google-labs-code/stitch-sdk) into .claude/skills/stitch-sdk-domain-design in your project. Claude Code loads it when a task matches its description.

How do I install Stitch SDK Domain Design in Codex?

Run `npx skills add google-labs-code/stitch-sdk --skill stitch-sdk-domain-design -a codex`. Or copy the skill folder (.agents/skills/stitch-sdk-domain-design in google-labs-code/stitch-sdk) into .agents/skills/stitch-sdk-domain-design in your project. Codex loads it when a task matches its description.

Can I use Stitch SDK Domain Design in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add google-labs-code/stitch-sdk --skill stitch-sdk-domain-design -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/stitch-sdk-domain-design, .gemini/skills/stitch-sdk-domain-design, .github/skills/stitch-sdk-domain-design and .opencode/skills/stitch-sdk-domain-design in your project.

What does Stitch SDK Domain Design need to run?

Going by SKILL.md and its folder, Stitch SDK Domain Design needs the command-line tools its instructions call (bun and npx). Our summary lists: Node.js.

Does Stitch SDK Domain Design access the network?

SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Stitch SDK Domain Design safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Stitch SDK Domain Design use?

Stitch SDK Domain Design is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Stitch SDK Domain Design use?

About 2.4k tokens (SKILL.md is roughly 9.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Stitch SDK Domain Design?

Skills that share tags, products or a category with Stitch SDK Domain Design: MCP Server Builder (anthropics/skills, 180k stars), MCP Server Builder (shareAI-lab/learn-claude-code, 78k stars), MCP Integration for Plugins (anthropics/claude-plugins-official, 38k stars) and MCP Development (coollabsio/coolify, 63k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Stitch SDK Domain Design?

google-labs-code (a GitHub organization, an official publisher) maintains it in google-labs-code/stitch-sdk, which has 1,827 GitHub stars. The repository holds 9 skills in this directory. The repository was last updated on October 1, 2026.

Source: google-labs-code/stitch-sdk on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.