Diagram Design
cathrynlavery/diagram-design
Creates branded diagrams, from architecture, flowchart and sequence to charts and maps, as self-contained HTML with inline SVG, with import from draw.io, Mermaid and Excalidraw.
Generate or update the README for the Stitch SDK. An agent skill from google-labs-code/stitch-sdk.
Install Stitch SDK Readme
$ npx skills add google-labs-code/stitch-sdk --skill stitch-sdk-readme -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install google-labs-code/stitch-sdk stitch-sdk-readme --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-readme .claude/skills/stitch-sdk-readme && rm -rf skills-srcUse ~/.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/
Install the "stitch-sdk-readme" agent skill from https://github.com/google-labs-code/stitch-sdk/tree/main/.agents/skills/stitch-sdk-readme into .claude/skills/stitch-sdk-readme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stitch-sdk-readme", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/google-labs-code/stitch-sdk/tree/main/.agents/skills/stitch-sdk-readmeType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add google-labs-code/stitch-sdk --skill stitch-sdk-readme -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install google-labs-code/stitch-sdk stitch-sdk-readme --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/google-labs-code/stitch-sdk.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/stitch-sdk-readme .agents/skills/stitch-sdk-readme && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "stitch-sdk-readme" agent skill from https://github.com/google-labs-code/stitch-sdk/tree/main/.agents/skills/stitch-sdk-readme into .agents/skills/stitch-sdk-readme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stitch-sdk-readme", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add google-labs-code/stitch-sdk --skill stitch-sdk-readme -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install google-labs-code/stitch-sdk stitch-sdk-readme --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/google-labs-code/stitch-sdk.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/stitch-sdk-readme .cursor/skills/stitch-sdk-readme && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "stitch-sdk-readme" agent skill from https://github.com/google-labs-code/stitch-sdk/tree/main/.agents/skills/stitch-sdk-readme into .cursor/skills/stitch-sdk-readme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stitch-sdk-readme", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/google-labs-code/stitch-sdk.git --path .agents/skills/stitch-sdk-readme--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add google-labs-code/stitch-sdk --skill stitch-sdk-readme -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install google-labs-code/stitch-sdk stitch-sdk-readme --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/google-labs-code/stitch-sdk.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/stitch-sdk-readme .gemini/skills/stitch-sdk-readme && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "stitch-sdk-readme" agent skill from https://github.com/google-labs-code/stitch-sdk/tree/main/.agents/skills/stitch-sdk-readme into .gemini/skills/stitch-sdk-readme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stitch-sdk-readme", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install google-labs-code/stitch-sdk stitch-sdk-readmeInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add google-labs-code/stitch-sdk --skill stitch-sdk-readme -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/google-labs-code/stitch-sdk.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/stitch-sdk-readme .github/skills/stitch-sdk-readme && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "stitch-sdk-readme" agent skill from https://github.com/google-labs-code/stitch-sdk/tree/main/.agents/skills/stitch-sdk-readme into .github/skills/stitch-sdk-readme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stitch-sdk-readme", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add google-labs-code/stitch-sdk --skill stitch-sdk-readme -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install google-labs-code/stitch-sdk stitch-sdk-readme --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/google-labs-code/stitch-sdk.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/stitch-sdk-readme .opencode/skills/stitch-sdk-readme && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "stitch-sdk-readme" agent skill from https://github.com/google-labs-code/stitch-sdk/tree/main/.agents/skills/stitch-sdk-readme into .opencode/skills/stitch-sdk-readme/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "stitch-sdk-readme", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
stitch-sdk-readme- GitHub stars
- 1.8k
- Token cost
- ~1.8k tokens
- SKILL.md length
- 743 words
- Files
- 1
- Skills in repo
- 9
- Repo updated
- First seen
- Licence
- Apache-2.0
At a glance
Generate or update the README for the Stitch SDK. An agent skill from google-labs-code/stitch-sdk.
- Works in 5 steps: Listing and iterating over existing… → Editing a screen and generating variants → Tool access via singleton… → …
- The README needs to be written
- SKILL.md covers How to Source the Current API, The Bookstore Test, Validation and Anti-patterns
- Calls npm; needs STITCH_API_KEY
What it does
Stitch SDK Readme is an agent skill from google-labs-code/stitch-sdk, published by the product's own GitHub organization. Generate or update the README for the Stitch SDK. Use the Bookstore Test structure and source the current API from the codebase. Use when the README needs to be written or updated.
Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Development, covering Technical documentation. It works with Google Stitch. 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
- The README needs to be written
- Tasks that involve Technical documentation
Example prompts
- “/stitch-sdk-readme”
Requirements
- Node.js
- A credential in STITCH_API_KEY
Workflow steps
5 steps, taken from the first numbered list in SKILL.md.
- Listing and iterating over existing projects/screens
- Editing a screen and generating variants
- Tool access via singleton (stitch.listTools(), stitch.callTool()) — zero setup
- Explicit configuration via StitchToolClient (custom API key, base URL)
- AI SDK integration via stitchTools() — import from @google/stitch-sdk/ai, show generateText with tools: stitchTools() and stepCountIs
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:
npm
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm, 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 these keys or tokens, usually read from environment variables:
STITCH_API_KEY
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Stitch SDK Readme loads about 1.8k tokens when it runs. Until then it costs about 50 tokens; SKILL.md has 743 words of instructions outside code blocks.
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). 743 words, ~1,805 tokens.
Download SKILL.mdSave it as
.claude/skills/stitch-sdk-readme/SKILL.md (or your agent's skills folder).- name
- stitch-sdk-readme
- description
- Generate or update the README for the Stitch SDK. Use the Bookstore Test structure and source the current API from the codebase. Use when the README needs to be written or updated.
Stitch SDK README Generator
This skill produces the README for @google/stitch-sdk. It combines a structural strategy (the Bookstore Test) with instructions for sourcing the current API from the codebase — so the README stays accurate as the SDK evolves.
How to Source the Current API
Do not hard-code the API surface. Read it from the codebase at invocation time:
| What you need | Where to find it |
|---|---|
| Public exports (full surface) | packages/sdk/src/index.ts |
| Domain class methods + signatures | Source files for each exported class (sdk.ts, project.ts, screen.ts) |
| Generated method bindings | packages/sdk/generated/domain-map.json → bindings[] array |
| Handwritten methods | Methods in class source files that aren't in domain-map bindings (e.g. Screen.edit, Screen.variants) |
| AI SDK tools adapter | packages/sdk/src/ai.ts → subpath entry for stitchTools() |
| Generated tool definitions | packages/sdk/generated/src/tool-definitions.ts → JSON Schema for each tool |
| Tool client methods | packages/sdk/src/client.ts |
| Error codes | packages/sdk/src/spec/errors.ts → StitchErrorCode |
| Config options | packages/sdk/src/spec/client.ts → StitchConfigSchema |
| Proxy config | packages/sdk/src/proxy/core.ts |
After reading these files, you have the complete API surface. Structure it using the Bookstore Test template below.
The Bookstore Test
A reader decides whether to use a library the same way a person decides to buy a book: they glance at the cover, read the inner flap, then commit to reading the book. The README must earn the reader's attention at each stage.
The Cover
A single sentence stating what problem this library solves — not what the library is. The reader should recognize their own situation. No taglines, no badges, no logos.
For this SDK, the cover is about generating UI from text and extracting HTML/screenshots programmatically.
Good: "Generate UI screens from text prompts and extract their HTML and screenshots programmatically." Bad: "The official TypeScript SDK for Google Stitch, a powerful AI-powered UI generation platform."
The Inner Flap
Immediately show the library in use. Code first, not setup.
Primary workflow — the punchline everything in the SDK exists to produce:
project(id) → generate → getHtmlShow this as the first code block, with one line noting the env var requirement. Do not show installation, imports, or config before this. Show callTool("create_project", ...) separately for project creation.
Secondary workflows — reveal depth progressively:
- Listing and iterating over existing projects/screens
- Editing a screen and generating variants
- Tool access via singleton (
stitch.listTools(),stitch.callTool()) — zero setup - Explicit configuration via
StitchToolClient(custom API key, base URL) - AI SDK integration via
stitchTools()— import from@google/stitch-sdk/ai, showgenerateTextwithtools: stitchTools()andstepCountIs
Rules for this section:
- No setup first. One line mentioning
STITCH_API_KEYis enough before the first example. - Dual install paths. Show
npm install @google/stitch-sdkfirst (core SDK, standalone). Then shownpm install @google/stitch-sdk aifor AI SDK users. Theaipackage is only needed when importing from@google/stitch-sdk/ai. - Straightforward language. No "powerful", "seamless", "robust", "enterprise-grade".
- Working examples. Every code block must be valid, runnable code — not fragments with
// ...elisions. - Progressive complexity. Simplest invocation first, then deeper capabilities.
Show full SKILL.md (285 more words)Show less
Reading the Book
The reader is committed. Document the full API as a reference.
Structure by class in this order: Stitch → Project → DesignSystem → Screen → StitchToolClient → toolDefinitions / toolMap → stitchTools() (AI SDK) → StitchProxy → stitch singleton.
Each entry should have:
- What it does (one line)
- Usage example (minimal, runnable)
- Parameters (table)
- Return type and error behavior
Setup, authentication, and configuration go here — after the reader has already decided the library is worth using.
Tone
Write like a colleague explaining their work to another engineer. Be direct. Be specific. Don't sell — inform. If a feature has limitations, state them. If setup is complex, say so.
Validation
After generating the README, verify:
- Can a reader understand what the library does in under 10 seconds?
- Is there a runnable code example within the first scroll?
- Does setup/config appear after the first code example?
- Is every code block valid, copy-pasteable code?
- Is the language descriptive rather than promotional?
- Does the reference section cover every public export from
index.ts? - Every method name in examples exists in its class source file
- Every import in examples matches an export in
index.ts - All three modalities are documented: domain classes (scripts),
StitchToolClient(agents),stitchTools()(AI SDK)
Anti-patterns
| Anti-pattern | Why it fails |
|---|---|
| Leading with badges, logos, or status shields | Visual noise before the reader knows what the library does |
| "Getting Started" as the first section | Forces setup before demonstrating value |
| Feature bullet lists without code | Tells instead of shows |
| "Easy to use", "simple", "just works" | Self-congratulatory claims that invite skepticism |
| Long install/config blocks before any usage | Asks for investment before demonstrating return |
| Collapsible sections hiding core API docs | Buries the content committed readers came for |
| Hard-coding the API in docs without sourcing | Goes stale when tools are added |
© 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-readme of google-labs-code/stitch-sdk.
Open the folder on GitHubat commit e3f8ece
Compare with similar skills
Stitch SDK Readme 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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Stitch SDK Readme this skillgoogle-labs-code/stitch-sdk | 1.8k | — | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Diagram Designcathrynlavery/diagram-design | 45k | 1 repos | ~7.5k | Automated safety check: Pass | MIT | |
| Simple Englishmoeru-ai/airi | 50k | 2 repos | ~4.6k | Automated safety check: Pass | MIT | |
| Get API Docs with chubandrewyng/context-hub | 14k | 2 repos | ~775 | Automated safety check: Pass | MIT | |
| Doc SyncJetBrains/ideavim | 10k | 2 repos | ~2.6k | Automated safety check: Pass | MIT | |
| Mailspring App ScreenshotsFoundry376/Mailspring | 18k | — | ~1.5k | Automated safety check: Pass | GPL-3.0 |
Similar skills
Simple English
moeru-ai/airi
Write or rewrite technical text with the rules of ASD-STE100 Simplified Technical English so it is clear, unambiguous, and free of AI slop.
Get API Docs with chub
andrewyng/context-hub
Fetches current documentation for third-party APIs and SDKs with the chub CLI before the agent writes code against them, instead of relying on remembered API shapes.
- Official
Doc Sync
JetBrains/ideavim
Keeps IdeaVim documentation in sync with code changes. An agent skill from JetBrains/ideavim.
Mailspring App Screenshots
Foundry376/Mailspring
Captures screenshots of the running Mailspring dev app for docs, PRs or visual checks by launching it with a debugging port, driving the UI and clipping to an element.
Draw.io Diagram Studio
Agents365-ai/drawio-skill
Creates and edits editable draw.io diagrams from descriptions, code, infrastructure files, SQL and API schemas, with sync, review, test and export tools.
More from google-labs-code/stitch-sdk
All 9 skills in this repo- Official
Stitch SDK Development
google-labs-code/stitch-sdk
Develop the Stitch SDK. An agent skill from google-labs-code/stitch-sdk.
- Official
Stitch SDK Domain Design
google-labs-code/stitch-sdk
Design the domain model for the Stitch SDK. An agent skill from google-labs-code/stitch-sdk.
- Official
Stitch SDK Pipeline
google-labs-code/stitch-sdk
Run the full Stitch SDK generation pipeline. An agent skill from google-labs-code/stitch-sdk.
- Official
Stitch SDK Usage
google-labs-code/stitch-sdk
Use the Stitch SDK to generate, edit, and iterate on UI screens from text prompts, manage projects, and retrieve screen HTML/images.
- Official
TDD Red Green Refactor
google-labs-code/stitch-sdk
Enforces a disciplined Red-Green-Refactor (TDD) workflow in TypeScript/Node.js.
- Official
Typed Service Contracts
google-labs-code/stitch-sdk
Architecture standard for building robust, type-safe TypeScript services using the "Spec and Handler" pattern.
Related
Works with
Categories
Questions about Stitch SDK Readme
What does Stitch SDK Readme do?
Generate or update the README for the Stitch SDK. An agent skill from google-labs-code/stitch-sdk. Stitch SDK Readme is an agent skill from google-labs-code/stitch-sdk, published by the product's own GitHub organization. Generate or update the README for the Stitch SDK.
When should I use Stitch SDK Readme?
Stitch SDK Readme fits situations like: the README needs to be written; tasks that involve Technical documentation.
How do I install Stitch SDK Readme in Claude Code?
Run `npx skills add google-labs-code/stitch-sdk --skill stitch-sdk-readme -a claude-code`. Or copy the skill folder (.agents/skills/stitch-sdk-readme in google-labs-code/stitch-sdk) into .claude/skills/stitch-sdk-readme in your project. Claude Code loads it when a task matches its description.
How do I install Stitch SDK Readme in Codex?
Run `npx skills add google-labs-code/stitch-sdk --skill stitch-sdk-readme -a codex`. Or copy the skill folder (.agents/skills/stitch-sdk-readme in google-labs-code/stitch-sdk) into .agents/skills/stitch-sdk-readme in your project. Codex loads it when a task matches its description.
Can I use Stitch SDK Readme 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-readme -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-readme, .gemini/skills/stitch-sdk-readme, .github/skills/stitch-sdk-readme and .opencode/skills/stitch-sdk-readme in your project.
What does Stitch SDK Readme need to run?
Going by SKILL.md and its folder, Stitch SDK Readme needs the command-line tools its instructions call (npm) and credentials named STITCH_API_KEY. Our summary lists: Node.js; A credential in STITCH_API_KEY.
Does Stitch SDK Readme access the network?
SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Stitch SDK Readme 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 Readme use?
Stitch SDK Readme 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 Readme use?
About 1.8k tokens (SKILL.md is roughly 7.2k 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 Readme?
Skills that share tags, products or a category with Stitch SDK Readme: Diagram Design (cathrynlavery/diagram-design, 45k stars), Simple English (moeru-ai/airi, 50k stars), Get API Docs with chub (andrewyng/context-hub, 14k stars) and Doc Sync (JetBrains/ideavim, 10k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Stitch SDK Readme?
google-labs-code (a GitHub organization, an official publisher) maintains it in google-labs-code/stitch-sdk, which has 1,826 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.