google-labs-code/stitch-skills
14 skills338k installs110k starsGitHub
Install
npx skills add https://github.com/google-labs-code/stitch-skillsSkills in this repo
1Design Mddesign-md is a Google Labs Stitch skill that inspects technical assets from Stitch projects and writes a DESIGN.md file capturing semantic design rules and color values. Stitch reads DESIGN.md as the single source of truth for consistent screen generation.56.1kinstalls2Enhance PromptEnhance-prompt is a Stitch utility skill that transforms vague UI ideas into polished, Stitch-optimized prompts with UI/UX keywords. It works within the Google Stitch design system to improve design generation quality and enforce consistent design standards.50.9kinstalls3React:Componentsreact:components is a frontend engineering skill that transforms Stitch designs into clean, modular Vite and React components.50.5kinstalls4Stitch LoopThis skill collection for Google Stitch provides agent-driven design workflows across three plugin categories: design (code-to-design, screen generation, design system management), build (React/React Native component generation, Remotion videos), and utilities (DESIGN.md generation, prompt enhancement). It is compatible with coding agents including Claude Code, Cursor, Codex, and Antigravity.49.4kinstalls5Shadcn UiExpert guidance for integrating shadcn/ui components into React and Next applications. Provides component discovery, installation, customization, and best practices. Developers use this to build production UIs with accessible, reusable components.46.3kinstalls6RemotionThe remotion skill from Google Labs Stitch creates walkthrough videos by combining Stitch screen retrieval with Remotion programmatic video generation. Prerequisites include Stitch MCP, Remotion MCP or CLI, Node.js, and a Stitch project with designed screens. The workflow discovers MCP server prefixes, lists projects and screens, downloads screenshots and optional HTML code, stages assets under assets/screens, and builds a screens.json manifest with titles, dimensions, and durations. Remotion setup checks for remotion.config.ts or scaffolds a blank TypeScript video project with @remotion/transitions and @remotion/animated-emoji. Architecture uses ScreenSlide.tsx for per-screen zoom and fade, WalkthroughComposition.tsx for sequenced transitions, and config.ts for fps and dimensions. Execution covers Remotion Studio preview, timing adjustments, and npx remotion render output. Advanced sections add interactive hotspots, voiceover sync, and HTML text extraction for automatic callouts on buttons and headings.35.1kinstalls7Taste DesignTaste Design is a skill for Claude Code, Cursor, and Codex that generates DESIGN.md files enforcing premium, anti-generic UI standards. It runs fifty-seven slop-test gates plus self-critique before handing back designs. Developers use it when they need design systems that refuse the on-distribution defaults every LLM was trained into.14.7kinstalls8Stitch::Generate DesignThe stitch::generate-design skill >-. Generate Design Create new design screens from text descriptions, images, or mockups, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. [!NOTE] Refer to your system prompt for instruction on handling MCP tool prefixes for all tools mentioned in this skill (e.g., list_projects , generate_screen_from_text , edit_screens ). 🎨 Prompt Enhancement Pipeline Before calling any Stitch generation or editing tool, you MUST enhance the user's prompt. Analyze Context - Project : Use list_projects to find the correct projectId . If no suitable project exists, create one using create_project . - Design System : Check if a design system exists for the project via list_design_systems . If one exists, design tokens (colors, fonts, roundness) are already applied at the project level - do NOT include any color, font, or theme instructions in the generation prompt. Use it when developers need stitch::generate design tasks covered in the upstream ECC or community skill documentation with concrete commands, prerequisites, and workflow steps rather5.5kinstalls9Stitch::Extract Design MdThe stitch-extract-design-md skill >-. Extract Design System from Frontend Code Analyze frontend source code to extract a comprehensive design system document (DESIGN.md) that captures the project's visual language — colors, typography, spacing, component patterns, and layout principles — directly from the source files, without needing to build or render the application. Why This Exists The `design-md` skill works from rendered HTML. But often you have a codebase and want to understand its design system before you can even run the app — maybe dependencies are missing, the build is broken, or you just want Agents should read SKILL.md quick start steps, verify required binaries and environment variables, and follow reference files for exact parameters before calling tools. The workflow includes decision gates, anti-patterns, and cross-links to sibling skills so agents stay aligned with upstream documentation rather than improvising.5.3kinstalls10Stitch::Manage Design SystemThe stitch-manage-design-system skill >-. Design-System Create a "source of truth" for your project's design language to ensure consistency across all future screens. > [!NOTE] > Refer to your system prompt for instruction on handling MCP tool prefixes for > all tools mentioned in this skill (e.g., `get_screen`, > `create_design_system_from_design_md`, `apply_design_system`). 📥 Retrieval To analyze a Stitch project, you must retrieve metadata and assets using the Stitch MCP tools: 1. **Project lookup**: Use `list_projects` to find the target `projectId`. 2. **Screen lookup**: Use `list_screens` for that `projectId` to find representative screens (e.g., "Home", "Main Dashboard"). Agents should read SKILL.md quick start steps, verify required binaries and environment variables, and follow reference files for exact parameters before calling tools. The workflow includes decision gates, anti-patterns, and cross-links to sibling skills so agents stay aligned with upstream documentation rather than improvising.5.2kinstalls11Stitch::Code To DesignThe remotion skill Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays. Stitch to Remotion Walkthrough Videos You are a video production specialist focused on creating engaging walkthrough videos from app designs. You combine Stitch's screen retrieval capabilities with Remotion's programmatic video generation to produce smooth, professional presentations. Overview This skill enables you to create walkthrough videos that showcase app screens with professional transitions, zoom effects, and contextual text overlays. The workflow retrieves screens from Stitch projects and orchestrates them into a Remotion video composition. Prerequisites **Required:** - Access to the Stitch MCP Server - Access to the Remotion MCP Server (or Agents should read SKILL.md quick start steps, verify required binaries and environment variables, and follow reference files for exact parameters before calling tools.5.1kinstalls12Stitch::Upload To StitchStitch::upload-to-stitch bypasses MCP tool base64 token limits by sending local design assets directly over HTTP to a Stitch project. Developers use this skill when uploading images, mockups, extracted HTML pages, or design markdown files to Stitch fails through standard MCP calls due to token constraints. The workflow requires identifying the target project, extracting the Stitch API key from local MCP config files (Antigravity, Gemini CLI, or Claude Code), presenting files for user confirmation, then executing a Python upload script with project ID, file path, and API credentials. Supports PNG, JPEG, WebP, HTML, and Markdown formats with auto-detected MIME types and optional metadata like screen title and generation source. Bypasses MCP base64 token limits using direct HTTP file upload instead of model output encoding Supports PNG, JPEG, WebP, HTML, and Markdown5kinstalls13Stitch::Extract Static HtmlThis skill extracts fully rendered static HTML from any locally running web application by inlining all CSS stylesheets and converting images to base64 data URIs. It offers two strategies: Strategy A uses Puppeteer to snapshot the DOM with computed styles (recommended, zero setup), while Strategy B uses a browser subagent for pages requiring interaction before capture. The workflow involves starting the local dev server, confirming it renders correctly, then running the snapshot script with configurable viewport, wait times, and optional class/styling overrides. Useful for capturing specific UI states, creating shareable HTML versions, or preparing assets for Stitch integration without maintaining a live server. Puppeteer-based snapshot captures fully computed styles and inlines all CSS - no MockPage needed Automatically converts images and srcset entries to base64; removes broken URLs gracefully Framework-agnostic5kinstalls14Stitch::React NativeStitch React Native transforms Stitch web HTML designs into production-ready React Native code using MCP tools, reliable GCS downloads, and strict HTML-to-native mapping rules. Retrieval starts with list_tools to discover the Stitch MCP prefix, get_screen for design JSON, and optional reuse of local .stitch/designs HTML and PNG files unless the user requests a refresh. High-reliability fetch-stitch.sh downloads HTML and width-parameterized screenshots because internal AI fetch fails on Google Cloud Storage redirects. HTML elements map to View, Text, Image, Pressable, TextInput, ScrollView, FlatList, SectionList, and react-native-svg primitives with SafeAreaView wrappers for notch safety. CSS and Tailwind classes convert to StyleSheet.create with column-default flexbox, numeric dimensions, platform-specific shadow via Platform.select, and theme.ts color tokens extracted from the HTML head Tailwind config. Architectural rules enforce atomic design folders, custom hooks for logic, mockData.ts for static content, readonly TypeScript Props interfaces, React Navigation screen typing, and accessibilityLabel on every interactive element. Execution validates with npm run validate plus arch.3.8kinstalls