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.

มาตราส่วนการให้คะแนนสำหรับการประเมินว่า CLI ได้รับการออกแบบมาสำหรับเอเจนต์ AI ดีเพียงใด โดยอิงตามหลักการ "Rewrite Your CLI for AI Agents

ตั้งค่าระบบคัดแยกและแก้ไขปัญหา GitHub อัตโนมัติโดยใช้เอเจนต์การเขียนโค้ด Jules แบบขนาน

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...

วิเคราะห์โครงการออกแบบ Stitch และสร้างไฟล์ DESIGN.md เชิงความหมายเพื่อเป็นแหล่งความจริงสำหรับการเขียน prompt ดึงข้อมูลเมตาหน้าจอ, ซอร์ส HTML/CSS และทรัพยากรการออกแบบจากโครงการ Stitch ผ่านเครื่องมือ MCP Server เพื่อแยกโทเค็นการออกแบบและรูปแบบภาพ สังเคราะห์ผลลัพธ์เป็นไฟล์ DESIGN.md ที่มีโครงสร้างครอบคลุมบรรยากาศ, จานสีพร้อมรหัส hex, การพิมพ์, การจัดสไตล์คอมโพเนนต์ และหลักการจัดวาง แปลงค่าทางเทคนิค (คลาส Tailwind, border-radius, เงา) เป็น...

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...

แปลงแนวคิด UI ที่คลุมเครือให้เป็นพรอมต์ที่สมบูรณ์แบบและปรับให้เหมาะสมกับ Stitch พร้อมบริบทของระบบการออกแบบ ประเมินองค์ประกอบที่ขาดหายไป (แพลตฟอร์ม ประเภทหน้า สไตล์ภาพ สี ส่วนประกอบ) และเติมเต็มช่องว่างอย่างเป็นระบบ ตรวจสอบและรวมไฟล์ DESIGN.md เพื่อให้แน่ใจว่ามีความสอดคล้องกันในโครงการหลายหน้า ใช้เทคนิคการปรับปรุงรวมถึงความเฉพาะเจาะจงของคำสำคัญ UI/UX การเพิ่มอารมณ์ การจัดโครงสร้างหน้า และการจัดรูปแบบสีที่เหมาะสม ส่งออกพรอมต์ที่มีโครงสร้างพร้อมสำหรับ Stitch...

ทักษะนี้ทำการ "อ่านเชิงลึก" ของ repository โดยหลีกเลี่ยงการแสดงรายการแบบผิวเผิน โดยเริ่มจากการทำความเข้าใจสถาปัตยกรรมของโปรเจกต์ จากนั้นจึงประเมินรายการที่เปิดอยู่ตามบริบทนั้น

โปรแกรมเรนเดอร์เทอร์มินัลสำหรับ json-render ที่แปลงสเปก JSON เป็น UI เทอร์มินัลแบบโต้ตอบ ใช้เมื่อทำงานกับ @json-render/ink สร้าง UI เทอร์มินัลจาก...

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…

ตั้งค่ารีโพสิทอรีสำหรับการตรวจสอบ GitHub Actions ในเครื่องโดยใช้ act เพื่อให้ Jules สามารถตรวจสอบ CI ก่อนพุช

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

react:components — ทักษะที่สามารถติดตั้งได้สำหรับเอเจนต์ AI เผยแพร่โดย google-labs-code/stitch-skills

สร้างวิดีโอแนะนำแบบมืออาชีพจากดีไซน์แอป Stitch โดยใช้ Remotion พร้อมทรานซิชันที่ราบรื่นและข้อความซ้อนทับ ดึงภาพหน้าจอจากโปรเจกต์ Stitch และจัดเรียงเป็นองค์ประกอบวิดีโอ Remotion พร้อมเอฟเฟกต์ซูม ทรานซิชันแบบเฟด และข้อความซ้อนทับตามบริบท รองรับสถาปัตยกรรมโมดูลาร์ของคอมโพเนนต์ด้วย ScreenSlide และ WalkthroughComposition พร้อมฟีเจอร์ขั้นสูง เช่น จุดโต้ตอบและการรวมเสียงพากย์ สร้างรายการหน้าจอ ดาวน์โหลด...

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...

คำแนะนำจากผู้เชี่ยวชาญในการค้นหา ติดตั้ง และปรับแต่งคอมโพเนนต์ shadcn/ui ในโปรเจกต์ของคุณ shadcn/ui คือชุดคอมโพเนนต์แบบคัดลอกและวาง ไม่ใช่ไลบรารี—คอมโพเนนต์จะอยู่ในโค้ดเบสของคุณเพื่อความเป็นเจ้าของและการปรับแต่งอย่างเต็มที่โดยไม่ถูกล็อกด้วยเวอร์ชัน ประกอบด้วยคอมโพเนนต์ที่สร้างไว้ล่วงหน้ากว่า 50 รายการที่เข้าถึงได้ (ปุ่ม ไดอะล็อก ฟอร์ม ตาราง ฯลฯ) สร้างบนพื้นฐาน Radix UI หรือ Base UI พร้อมสไตล์ Tailwind CSS รองรับการปรับแต่งธีมผ่านตัวแปร CSS รูปแบบคอมโพเนนต์ที่หลากหลายด้วย...

จุดเริ่มต้นระบบการออกแบบแบบรวมศูนย์สำหรับการสร้างและแก้ไขหน้าจอ UI ความละเอียดสูงด้วย Stitch MCP เปลี่ยนแนวคิดการออกแบบคร่าวๆ ให้เป็นพรอมต์ที่มีโครงสร้างโดยใช้คำศัพท์ UI/UX ระดับมืออาชีพและบริบทของระบบการออกแบบ สังเคราะห์โปรเจกต์ Stitch ที่มีอยู่ให้เป็นเอกสาร .stitch/DESIGN.md "แหล่งความจริง" เพื่อความสอดคล้องกันระหว่างหน้าจอต่างๆ จัดเส้นทางคำขออย่างชาญฉลาดระหว่างการสร้างการออกแบบจากข้อความ การแก้ไขหน้าจอ และเวิร์กโฟลว์เอกสารระบบการออกแบบ จัดการทรัพย์สินโดยอัตโนมัติโดย...

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...

โปรแกรมสร้างเว็บไซต์อัตโนมัติที่ใช้การสร้าง Stitch แบบวนซ้ำพร้อมการประสานงานแบบส่งต่อ ใช้รูปแบบรีเลย์ที่แต่ละรอบของเอเจนต์จะอ่านงานจาก .stitch/next-prompt.md สร้างหน้าผ่าน Stitch MCP รวมเข้ากับเว็บไซต์ และเขียนงานถัดไปเพื่อดำเนินการต่อ จัดการสถานะโปรเจกต์ Stitch ผ่าน .stitch/metadata.json โดยคงรหัสโปรเจกต์ ข้อมูลเมตาของหน้าจอ และธีมการออกแบบในแต่ละรอบ ต้องมี .stitch/DESIGN.md (ระบบการออกแบบภาพ) และ...

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

ค้นหาบั๊กใน Stitch SDK โดยใช้คีย์ API จริง ครอบคลุมขอบฟังก์ชันมาตรฐานและสถานการณ์ที่ซับซ้อน

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

พัฒนา Stitch SDK ครอบคลุมไปป์ไลน์การสร้าง โหมดคู่ (เอเจนต์กับ SDK) การจัดการข้อผิดพลาด และการใช้งาน Traffic Light (แดง-เขียว-เหลือง)…

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…

ออกแบบโมเดลโดเมนสำหรับ Stitch SDK ใช้เมื่อแมปเครื่องมือ MCP ไปยังคลาสโดเมนและ bindings ใน domain-map.json นี่คือขั้นตอนที่ 2 ของการสร้าง…

รันไปป์ไลน์การสร้าง Stitch SDK แบบเต็ม ใช้เมื่อมีการเพิ่มเครื่องมือใหม่ หรือจำเป็นต้องสร้าง SDK ใหม่ตั้งแต่ต้นจนจบ

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

สร้างหรืออัปเดต README สำหรับ Stitch SDK ใช้โครงสร้าง Bookstore Test และดึง API ปัจจุบันจาก codebase ใช้เมื่อ README ต้องการ...

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 — ทักษะที่สามารถติดตั้งได้สำหรับเอเจนต์ AI เผยแพร่โดย google-labs-code/stitch-sdk

แปลงโค้ด frontend (Vite, React ฯลฯ) เป็น Stitch Design โดยการเชื่อมโยงการแยก HTML แบบ static, การแยกระบบดีไซน์ และการอัปโหลดไฟล์ **ควรใช้สิ่งนี้เสมอ…**

แยกชุดระบบการออกแบบที่ครอบคลุม (DESIGN.md) ออกจากซอร์สโค้ดส่วนหน้าโดยตรง — React, Vue, Svelte, Angular, HTML/CSS ธรรมดา หรือเว็บเฟรมเวิร์กใดๆ…

แยก HTML แบบคงที่แบบสมบูรณ์จากเว็บแอปพลิเคชันที่สร้างขึ้นหรือคอมโพเนนต์ React โดยการรวม CSS และรูปภาพเข้าไว้ด้วยกัน ใช้สกิลนี้เมื่อคุณต้องการบันทึก...

สร้างหน้าจอใหม่จากข้อความหรือรูปภาพ แก้ไขหน้าจอที่มีอยู่ด้วยข้อความและโทเค็นระบบการออกแบบ และสร้างรูปแบบการออกแบบที่แตกต่างโดยใช้ Stitch MCP…

จัดการระบบดีไซน์ใน Stitch โดยใช้เครื่องมือ MCP รวมถึงการดึงข้อมูลแอสเซท การสร้าง/อัปเดตระบบดีไซน์ใน Stitch และการนำไปใช้กับหน้าจอ

แปลงการออกแบบ Stitch เป็นโมดูลาร์ Vite และ React components หรือซิงค์/อัปเดต React components ที่มีอยู่ให้สอดคล้องกับการออกแบบ Stitch ล่าสุด โดยใช้…

แปลงการออกแบบ HTML ของ Stitch เป็นคอมโพเนนต์ React Native หรือซิงค์/อัปเดตคอมโพเนนต์เนทีฟที่มีอยู่ให้สอดคล้องกับการออกแบบ Stitch ล่าสุด โดยใช้ StyleSheet

อัปโหลดทรัพยากรในเครื่อง (รูปภาพ ต้นแบบ HTML ที่แยกออกมา มาร์กดาวน์การออกแบบ) ไปยังโปรเจกต์ Stitch ใช้ทักษะนี้เสมอเมื่อคุณต้องการอัปโหลดทรัพยากรภาพ 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...

ทักษะระบบการออกแบบเชิงความหมายสำหรับ Google Stitch สร้างไฟล์ DESIGN.md ที่เป็นมิตรกับเอเจนต์ ซึ่งบังคับใช้มาตรฐาน UI ระดับพรีเมียมและไม่ซ้ำซาก — การจัดวางตัวอักษรที่เคร่งครัด…

ทักษะ

ทักษะนี้ใช้กรอบโครงสร้างสำหรับการเขียนโปรแกรมที่ได้รับความช่วยเหลือจาก AI เพื่อให้แน่ใจว่าทุกบรรทัดของโค้ดสามารถตรวจสอบได้ มีการกำหนดชนิดข้อมูล และมีจุดประสงค์ที่ชัดเจน

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…

มาตรฐานสถาปัตยกรรมสำหรับการสร้างบริการ TypeScript ที่แข็งแกร่งและปลอดภัยต่อชนิดข้อมูล โดยใช้รูปแบบ "Spec and Handler" ใช้เมื่อสร้าง CLI, ไลบรารี หรือระบบที่ซับซ้อน…