Skills Google Labs Code

A scoring scale for evaluating how well a CLI is designed for AI agents, based on the "Rewrite Your CLI for AI Agents" principles.

Một thang điểm để đánh giá mức độ thiết kế CLI phù hợp cho các tác nhân AI, dựa trên các nguyên tắc "Viết lại CLI của bạn cho các tác nhân AI".

Thiết lập phân loại và giải quyết vấn đề GitHub tự động bằng cách sử dụng các tác nhân mã hóa Jules song song

Analyze Stitch design projects and generate semantic DESIGN.md files as prompting source of truth. Retrieves screen metadata, HTML/CSS source, and design assets from Stitch projects via MCP Server tools to extract design tokens and visual patterns Synthesizes findings into structured DESIGN.md files covering atmosphere, color palette with hex codes, typography, component styling, and layout principles Translates technical values (Tailwind classes, border-radius, shadows) into evocative...

Phân tích các dự án thiết kế Stitch và tạo ra các tệp DESIGN.md ngữ nghĩa làm nguồn chân lý cho việc tạo prompt. Truy xuất siêu dữ liệu màn hình, mã nguồn HTML/CSS và tài sản thiết kế từ các dự án Stitch thông qua các công cụ MCP Server để trích xuất token thiết kế và mẫu hình trực quan. Tổng hợp các phát hiện thành các tệp DESIGN.md có cấu trúc bao gồm bầu không khí, bảng màu với mã hex, kiểu chữ, kiểu dáng thành phần và nguyên tắc bố cục. Dịch các giá trị kỹ thuật (các lớp Tailwind, border-radius, shadow) thành các mô tả gợi cảm...

Transforms vague UI ideas into polished, Stitch-optimized prompts with design system context. Assesses missing elements (platform, page type, visual style, colors, components) and fills gaps systematically Checks for and integrates DESIGN.md files to ensure consistency across multi-page projects Applies enhancement techniques including UI/UX keyword specificity, mood amplification, page structure organization, and proper color formatting Outputs structured prompts ready for Stitch...

Chuyển đổi các ý tưởng giao diện mơ hồ thành các prompt tối ưu cho Stitch, có trau chuốt và bối cảnh hệ thống thiết kế. Đánh giá các yếu tố còn thiếu (nền tảng, loại trang, phong cách hình ảnh, màu sắc, thành phần) và điền vào các khoảng trống một cách có hệ thống. Kiểm tra và tích hợp các tệp DESIGN.md để đảm bảo tính nhất quán giữa các dự án nhiều trang. Áp dụng các kỹ thuật nâng cao bao gồm độ đặc hiệu từ khóa UI/UX, khuếch đại tâm trạng, tổ chức cấu trúc trang và định dạng màu sắc phù hợp. Xuất ra các prompt có cấu trúc sẵn sàng cho Stitch

Kỹ năng này thực hiện "đọc sâu" một kho lưu trữ. Nó tránh các danh sách hời hợt bằng cách trước tiên hiểu kiến trúc của dự án, sau đó đánh giá các mục mở dựa trên bối cảnh đó.

Trình kết xuất terminal Ink cho json-render, chuyển đổi các đặc tả JSON thành giao diện terminal tương tác. Sử dụng khi làm việc với @json-render/ink, xây dựng giao diện terminal từ…

Ink terminal renderer for json-render that turns JSON specs into interactive terminal UIs. Use when working with @json-render/ink, building terminal UIs from…

Thiết lập một kho lưu trữ để xác minh GitHub Actions cục bộ bằng act, giúp Jules có thể kiểm tra CI trước khi đẩy lên

Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).

react:components — một kỹ năng có thể cài đặt cho các tác nhân AI, được xuất bản bởi google-labs-code/stitch-skills.

Tạo video hướng dẫn chuyên nghiệp từ thiết kế ứng dụng Stitch bằng Remotion với hiệu ứng chuyển cảnh mượt mà và lớp phủ văn bản. Lấy màn hình từ các dự án Stitch và sắp xếp chúng thành các tổng hợp video Remotion với hiệu ứng thu phóng, chuyển tiếp mờ dần và lớp phủ văn bản theo ngữ cảnh. Hỗ trợ kiến trúc thành phần mô-đun với các thành phần ScreenSlide và WalkthroughComposition, cùng các tính năng nâng cao như điểm tương tác nóng và tích hợp lồng tiếng. Tạo bản kê khai màn hình, tải xuống...

Create professional walkthrough videos from Stitch app designs using Remotion with smooth transitions and text overlays. Retrieves screens from Stitch projects and orchestrates them into Remotion video compositions with zoom effects, fade transitions, and contextual text overlays Supports modular component architecture with ScreenSlide and WalkthroughComposition components, plus advanced features like interactive hotspots and voiceover integration Generates screen manifests, downloads...

Expert guidance for discovering, installing, and customizing shadcn/ui components in your project. shadcn/ui is a copy-paste component collection, not a library—components live in your codebase for full ownership and customization without version lock-in Includes 50+ accessible, pre-built components (buttons, dialogs, forms, tables, etc.) built on Radix UI or Base UI primitives with Tailwind CSS styling Supports theme customization via CSS variables, component variants with...

Hướng dẫn chuyên sâu để khám phá, cài đặt và tùy chỉnh các thành phần shadcn/ui trong dự án của bạn. shadcn/ui là bộ sưu tập thành phần dạng sao chép-dán, không phải thư viện—các thành phần nằm trực tiếp trong mã nguồn của bạn để bạn toàn quyền sở hữu và tùy chỉnh mà không bị khóa phiên bản. Bao gồm hơn 50 thành phần dựng sẵn, hỗ trợ tiếp cận (nút, hộp thoại, biểu mẫu, bảng, v.v.) được xây dựng trên các nguyên thủy Radix UI hoặc Base UI với kiểu dáng Tailwind CSS. Hỗ trợ tùy chỉnh giao diện qua biến CSS, biến thể thành phần với...

Điểm vào hệ thống thiết kế thống nhất để tạo và chỉnh sửa màn hình UI có độ trung thực cao với Stitch MCP. Chuyển đổi ý tưởng thiết kế thô thành các prompt có cấu trúc bằng thuật ngữ UI/UX chuyên nghiệp và ngữ cảnh hệ thống thiết kế. Tổng hợp các dự án Stitch hiện có thành tài liệu "nguồn chân lý" .stitch/DESIGN.md để đảm bảo tính nhất quán giữa các màn hình. Định tuyến yêu cầu một cách thông minh giữa các quy trình tạo thiết kế từ văn bản, chỉnh sửa màn hình và tài liệu hệ thống thiết kế. Tự động quản lý tài sản bằng...

Autonomous website builder using iterative Stitch generation with baton-passing loop coordination. Implements a relay pattern where each agent iteration reads a task from .stitch/next-prompt.md , generates a page via Stitch MCP, integrates it into the site, and writes the next task for continuation Manages Stitch project state through .stitch/metadata.json , persisting project IDs, screen metadata, and design theme across iterations Requires .stitch/DESIGN.md (visual design system) and...

Trình xây dựng trang web tự động sử dụng phương pháp tạo Stitch lặp đi lặp lại với cơ chế phối hợp vòng lặp chuyển giao. Triển khai mẫu chuyển tiếp nơi mỗi lần lặp agent đọc một tác vụ từ .stitch/next-prompt.md, tạo một trang qua Stitch MCP, tích hợp nó vào trang web, và ghi tác vụ tiếp theo để tiếp tục. Quản lý trạng thái dự án Stitch thông qua .stitch/metadata.json, lưu trữ ID dự án, siêu dữ liệu màn hình và chủ đề thiết kế qua các lần lặp. Yêu cầu .stitch/DESIGN.md (hệ thống thiết kế trực quan) và...

Find bugs in the Stitch SDK using a real API key. Covers standard functional edges and tricky situations.

Tìm lỗi trong Stitch SDK bằng cách sử dụng khóa API thực. Bao gồm các trường hợp chức năng tiêu chuẩn và các tình huống phức tạp.

Develop the Stitch SDK. Covers the generation pipeline, dual modality (agent vs SDK), error handling, and Traffic Light (Red-Green-Yellow) implementation…

Phát triển Stitch SDK. Bao gồm quy trình tạo, hai chế độ (agent và SDK), xử lý lỗi và triển khai Đèn Giao Thông (Đỏ-Xanh-Vàng)…

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…

Thiết kế mô hình miền cho Stitch SDK. Sử dụng khi ánh xạ các công cụ MCP sang các lớp miền và ràng buộc trong domain-map.json. Đây là Giai đoạn 2 của quá trình tạo…

Chạy toàn bộ pipeline tạo Stitch SDK. Sử dụng khi có công cụ mới được thêm vào, hoặc SDK cần được tạo lại từ đầu đến cuối.

Run the full Stitch SDK generation pipeline. Use when a new tool is added, or the SDK needs to be regenerated end-to-end.

Tạo hoặc cập nhật README cho Stitch SDK. Sử dụng cấu trúc Bookstore Test và lấy API hiện tại từ mã nguồn. Sử dụng khi README cần…

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…

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

stitch-sdk-usage — một kỹ năng có thể cài đặt cho các tác nhân AI, được phát hành bởi google-labs-code/stitch-sdk.

Chuyển đổi mã frontend (Vite, React, v.v.) thành một Stitch Design bằng cách kết nối trích xuất HTML tĩnh, trích xuất hệ thống thiết kế và tải tệp lên. **LUÔN** sử dụng điều này…

Trích xuất hệ thống thiết kế toàn diện (DESIGN.md) trực tiếp từ mã nguồn frontend — React, Vue, Svelte, Angular, HTML/CSS thuần, hoặc bất kỳ framework web nào.…

Trích xuất HTML tĩnh độc lập từ một ứng dụng web đã được xây dựng hoặc các thành phần React bằng cách nhúng CSS và hình ảnh trực tiếp. Sử dụng kỹ năng này bất cứ khi nào bạn cần chụp lại một…

Tạo màn hình mới từ văn bản hoặc hình ảnh, chỉnh sửa màn hình hiện có bằng lời nhắc và token hệ thống thiết kế, đồng thời tạo các biến thể thiết kế bằng Stitch MCP.…

Quản lý hệ thống thiết kế trong Stitch bằng công cụ MCP. Bao gồm truy xuất tài sản, tạo/cập nhật hệ thống thiết kế trong Stitch và áp dụng chúng vào màn hình.

Chuyển đổi các thiết kế Stitch thành các thành phần Vite và React mô-đun, hoặc đồng bộ/cập nhật các thành phần React hiện có để phù hợp với các thiết kế Stitch mới nhất, sử dụng…

Chuyển đổi các thiết kế HTML của Stitch thành các thành phần React Native, hoặc đồng bộ/cập nhật các thành phần native hiện có để phù hợp với thiết kế Stitch mới nhất, sử dụng StyleSheet.

Tải tài sản cục bộ (hình ảnh, bản mô phỏng, HTML đã trích xuất, markdown thiết kế) lên một dự án Stitch. LUÔN sử dụng kỹ năng này khi bạn cần tải lên tài sản trực quan, HTML…

Generates semantic design system files that enforce premium, anti-generic UI standards for Google Stitch screen generation. Produces DESIGN.md files encoding visual atmosphere, color calibration, typography rules, component behaviors, layout principles, and motion philosophy in Stitch-native semantic language Enforces strict anti-patterns: bans generic fonts (Inter, Times New Roman), neon aesthetics, overlapping elements, centered Hero sections, fabricated metrics, and AI copywriting clichés...

Kỹ năng Hệ thống Thiết kế Ngữ nghĩa cho Google Stitch. Tạo ra các tệp DESIGN.md thân thiện với tác nhân, thực thi các tiêu chuẩn giao diện người dùng cao cấp, chống chung chung — kiểu chữ nghiêm ngặt,…

Kỹ năng này triển khai một khung cấu trúc cho lập trình có hỗ trợ AI nhằm đảm bảo mọi dòng mã đều có thể kiểm chứng, được định kiểu và có mục đích.

Kỹ năng này triển khai một khung cấu trúc cho lập trình có hỗ trợ AI để đảm bảo mọi dòng mã đều có thể kiểm chứng, được định kiểu và có mục đích.

Architecture standard for building robust, type-safe TypeScript services using the "Spec and Handler" pattern. Use when building CLIs, libraries, or complex…

Architecture standard for building robust, type-safe TypeScript services using the "Spec and Handler" pattern. Use when building CLIs, libraries, or complex…

Tiêu chuẩn kiến trúc để xây dựng các dịch vụ TypeScript mạnh mẽ, an toàn kiểu dữ liệu bằng cách sử dụng mẫu "Spec and Handler". Sử dụng khi xây dựng CLI, thư viện hoặc các hệ thống phức tạp…