stitch-sdk-readme

為 Stitch SDK 產生或更新 README。使用 Bookstore Test 結構,並從程式碼庫中取得當前 API。當 README 需要…時使用。

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

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 needWhere to find it
Public exports (full surface)packages/sdk/src/index.ts
Domain class methods + signaturesSource files for each exported class (sdk.ts, project.ts, screen.ts)
Generated method bindingspackages/sdk/generated/domain-map.json → bindings[] array
Handwritten methodsMethods in class source files that aren't in domain-map bindings (e.g. Screen.edit, Screen.variants)
AI SDK tools adapterpackages/sdk/src/ai.ts → subpath entry for stitchTools()
Generated tool definitionspackages/sdk/generated/src/tool-definitions.ts → JSON Schema for each tool
Tool client methodspackages/sdk/src/client.ts
Error codespackages/sdk/src/spec/errors.ts → StitchErrorCode
Config optionspackages/sdk/src/spec/client.ts → StitchConfigSchema
Proxy configpackages/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 → getHtml

Show 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:

  1. Listing and iterating over existing projects/screens
  2. Editing a screen and generating variants
  3. Tool access via singleton (stitch.listTools(), stitch.callTool()) — zero setup
  4. Explicit configuration via StitchToolClient (custom API key, base URL)
  5. AI SDK integration via stitchTools() — import from @google/stitch-sdk/ai, show generateText with tools: stitchTools() and stepCountIs

Rules for this section:

  • No setup first. One line mentioning STITCH_API_KEY is enough before the first example.
  • Dual install paths. Show npm install @google/stitch-sdk first (core SDK, standalone). Then show npm install @google/stitch-sdk ai for AI SDK users. The ai package 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.

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-patternWhy it fails
Leading with badges, logos, or status shieldsVisual noise before the reader knows what the library does
"Getting Started" as the first sectionForces setup before demonstrating value
Feature bullet lists without codeTells instead of shows
"Easy to use", "simple", "just works"Self-congratulatory claims that invite skepticism
Long install/config blocks before any usageAsks for investment before demonstrating return
Collapsible sections hiding core API docsBuries the content committed readers came for
Hard-coding the API in docs without sourcingGoes stale when tools are added

來自 google-labs-code 的更多技能

typed-service-contracts
google-labs-code
使用「Spec and Handler」模式建構穩健、型別安全的 TypeScript 服務之架構標準。適用於建置 CLI、函式庫或複雜…
stitch::code-to-design
google-labs-code
將前端程式碼(Vite、React 等)轉換為 Stitch Design,透過鏈式提取靜態 HTML、設計系統及檔案上傳。**務必**使用此…
react-vite-dashboard
google-labs-code
將Stitch設計轉換為生產級React + Vite儀表板,搭配TanStack Query、來自DESIGN.md的可存取token,以及Web3就緒模式(ethers/viem)。
stitch::extract-design-md
google-labs-code
從前端原始碼中直接提取全面的設計系統(DESIGN.md)——支援 React、Vue、Svelte、Angular、純 HTML/CSS 或任何網頁框架。
remotion
google-labs-code
使用 Remotion 從 Stitch 應用程式設計中建立專業的逐步解說影片,包含流暢的轉場與文字疊加。從 Stitch 專案中擷取畫面,並將其編排成 Remotion 影片組合,支援縮放效果、淡入淡出轉場及情境文字疊加。支援模組化元件架構,包含 ScreenSlide 與 WalkthroughComposition 元件,以及互動式熱點與旁白整合等進階功能。產生畫面清單、下載...
ink
google-labs-code
用於 json-render 的 Ink 終端渲染器,可將 JSON 規格轉換為互動式終端 UI。適用於使用 @json-render/ink 從…構建終端 UI 時。
tdd-red-green-refactor
google-labs-code
此技能實作了一個結構化框架,用於AI輔助程式設計,確保每一行程式碼都可驗證、具型別且有意義。
automate-github-issues
google-labs-code
使用並行的 Jules 編碼代理設置自動化的 GitHub 問題分類與解決。