[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JQ7CTB3DNZWPE404VT3HWT":3,"skill-same:01M6JQ7CTB3DNZWPE404VT3HWT":120},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":37,"linkOnly":38,"markdownContent":39,"markdownBody":40,"frontMatter":41,"refName":47,"commitSha":48,"skillDirectory":49,"forksCount":50,"repositoryHtmlUrl":51,"repositoryHomepageUrl":52,"ownerHtmlUrl":53,"ownerBlogUrl":54,"ownerDescription":6,"updatedAt":55,"install":56,"resources":69},"01M6JQ7CTB3DNZWPE404VT3HWT","react:components",null,"Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.","LongLeo287\u002FOmniClaw","LongLeo287","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F141803367?v=4","01M6JK75C62VCNZKR5BRZ386YV","LongLeo","01M6JK75GQ78TSP1ZPXNKK3MCH",9,"MIT","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Freact_components\u002Fpayload\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发","SCENARIO","使用场景",[24,25,5,26,27,28,29,30,31,32,33,34,35,36],"components","react","react components","modular","core","networking","validation","team","system","ast","vite","stitch","active","2026-11-10 10:12:30",false,"---\nid: react-components\nname: react:components\nversion: 1.0.0\ntier: 1\nstatus: active\nauthor: OmniClaw Core Team\nupdated: 2026-04-02\ndescription: Converts Stitch designs into modular Vite and React components using system-level networking and AST-based validation.\nallowed-tools: \n---\n\n# Stitch to React Components\n\nYou are a frontend engineer focused on transforming designs into clean React code. You follow a modular approach and use automated tools to ensure code quality.\n\n## Retrieval and networking\n1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls.\n2. **Metadata fetch**: Call `[prefix]:get_screen` to retrieve the design JSON.\n3. **Check for existing designs**: Before downloading, check if `.stitch\u002Fdesigns\u002F{page}.html` and `.stitch\u002Fdesigns\u002F{page}.png` already exist:\n   - **If files exist**: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. Only re-download if the user confirms.\n   - **If files do not exist**: Proceed to step 4.\n4. **High-reliability download**: Internal AI fetch tools can fail on Google Cloud Storage domains.\n   - **HTML**: `bash scripts\u002Ffetch_stitch.sh \"[htmlCode.downloadUrl]\" \".stitch\u002Fdesigns\u002F{page}.html\"`\n    - **Screenshot**: Append `=w{width}` to the screenshot URL first, where `{width}` is the `width` value from the screen metadata (Google CDN serves low-res thumbnails by default). Then run: `bash scripts\u002Ffetch_stitch.sh \"[screenshot.downloadUrl]=w{width}\" \".stitch\u002Fdesigns\u002F{page}.png\"`\n   - This script handles the necessary redirects and security handshakes.\n5. **Visual audit**: Review the downloaded screenshot (`.stitch\u002Fdesigns\u002F{page}.png`) to confirm design intent and layout details.\n\n## Architectural rules\n* **Modular components**: Break the design into independent files. Avoid large, single-file outputs.\n* **Logic isolation**: Move event handlers and business logic into custom hooks in `src\u002Fhooks\u002F`.\n* **Data decoupling**: Move all static text, image URLs, and lists into `src\u002Fdata\u002FmockData.ts`.\n* **Type safety**: Every component must include a `Readonly` TypeScript interface named `[ComponentName]Props`.\n* **Project specific**: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.\n* **Style mapping**:\n    * Extract the `tailwind.config` from the HTML `\u003Chead>`.\n    * Sync these values with `resources\u002Fstyle-guide.json`.\n    * Use theme-mapped Tailwind classes instead of arbitrary hex codes.\n\n## Execution steps\n1. **Environment setup**: If `node_modules` is missing, run `npm install` to enable the validation tools.\n2. **Data layer**: Create `src\u002Fdata\u002FmockData.ts` based on the design content.\n3. **Component drafting**: Use `resources\u002Fcomponent_template.tsx` as a base. Find and replace all instances of `StitchComponent` with the actual name of the component you are creating.\n4. **Application wiring**: Update the project entry point (like `App.tsx`) to render the new components.\n5. **Quality check**:\n    * Run `npm run validate \u003Cfile_path>` for each component.\n    * Verify the final output against the `resources\u002Farchitecture-checklist.md`.\n    * Start the dev server with `npm run dev` to verify the live result.\n\n## Troubleshooting\n* **Fetch errors**: Ensure the URL is quoted in the bash command to prevent shell errors.\n* **Validation errors**: Review the AST report and fix any missing interfaces or hardcoded styles.","# Stitch to React Components\n\nYou are a frontend engineer focused on transforming designs into clean React code. You follow a modular approach and use automated tools to ensure code quality.\n\n## Retrieval and networking\n1. **Namespace discovery**: Run `list_tools` to find the Stitch MCP prefix. Use this prefix (e.g., `stitch:`) for all subsequent calls.\n2. **Metadata fetch**: Call `[prefix]:get_screen` to retrieve the design JSON.\n3. **Check for existing designs**: Before downloading, check if `.stitch\u002Fdesigns\u002F{page}.html` and `.stitch\u002Fdesigns\u002F{page}.png` already exist:\n   - **If files exist**: Ask the user whether to refresh the designs from the Stitch project using the MCP, or reuse the existing local files. Only re-download if the user confirms.\n   - **If files do not exist**: Proceed to step 4.\n4. **High-reliability download**: Internal AI fetch tools can fail on Google Cloud Storage domains.\n   - **HTML**: `bash scripts\u002Ffetch_stitch.sh \"[htmlCode.downloadUrl]\" \".stitch\u002Fdesigns\u002F{page}.html\"`\n    - **Screenshot**: Append `=w{width}` to the screenshot URL first, where `{width}` is the `width` value from the screen metadata (Google CDN serves low-res thumbnails by default). Then run: `bash scripts\u002Ffetch_stitch.sh \"[screenshot.downloadUrl]=w{width}\" \".stitch\u002Fdesigns\u002F{page}.png\"`\n   - This script handles the necessary redirects and security handshakes.\n5. **Visual audit**: Review the downloaded screenshot (`.stitch\u002Fdesigns\u002F{page}.png`) to confirm design intent and layout details.\n\n## Architectural rules\n* **Modular components**: Break the design into independent files. Avoid large, single-file outputs.\n* **Logic isolation**: Move event handlers and business logic into custom hooks in `src\u002Fhooks\u002F`.\n* **Data decoupling**: Move all static text, image URLs, and lists into `src\u002Fdata\u002FmockData.ts`.\n* **Type safety**: Every component must include a `Readonly` TypeScript interface named `[ComponentName]Props`.\n* **Project specific**: Focus on the target project's needs and constraints. Leave Google license headers out of the generated React components.\n* **Style mapping**:\n    * Extract the `tailwind.config` from the HTML `\u003Chead>`.\n    * Sync these values with `resources\u002Fstyle-guide.json`.\n    * Use theme-mapped Tailwind classes instead of arbitrary hex codes.\n\n## Execution steps\n1. **Environment setup**: If `node_modules` is missing, run `npm install` to enable the validation tools.\n2. **Data layer**: Create `src\u002Fdata\u002FmockData.ts` based on the design content.\n3. **Component drafting**: Use `resources\u002Fcomponent_template.tsx` as a base. Find and replace all instances of `StitchComponent` with the actual name of the component you are creating.\n4. **Application wiring**: Update the project entry point (like `App.tsx`) to render the new components.\n5. **Quality check**:\n    * Run `npm run validate \u003Cfile_path>` for each component.\n    * Verify the final output against the `resources\u002Farchitecture-checklist.md`.\n    * Start the dev server with `npm run dev` to verify the live result.\n\n## Troubleshooting\n* **Fetch errors**: Ensure the URL is quoted in the bash command to prevent shell errors.\n* **Validation errors**: Review the AST report and fix any missing interfaces or hardcoded styles.",{"id":42,"name":5,"tier":43,"author":44,"status":36,"updated":45,"version":46,"description":7,"allowed-tools":6},"react-components",1,"OmniClaw Core Team",1775088000000,"1.0.0","main","c173cdffe08e788a99b91928a831b476b8434838","ecosystem\u002Fskills\u002Freact_components\u002Fpayload",0,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw","https:\u002F\u002Fportfolio-longleo.vercel.app\u002Flabs\u002Fomniclaw.html","https:\u002F\u002Fgithub.com\u002FLongLeo287","https:\u002F\u002Fwww.facebook.com\u002FResourceRookie2023","2026-09-30 00:58:05",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add LongLeo287\u002FOmniClaw --skill \"react:components\"",{"tool":62,"command":63},"bunx","bunx skills add LongLeo287\u002FOmniClaw --skill \"react:components\"",{"tool":65,"command":66},"pnpm","pnpm dlx skills add LongLeo287\u002FOmniClaw --skill \"react:components\"","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Freact_components\u002Fpayload\u002FSKILL.md",true,[70,76,80,86,90,94,98,102,106,112,116],{"path":71,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":75},"_DIR_IDENTITY.md","REFERENCE","参考文档",235,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Freact_components\u002Fpayload\u002F_DIR_IDENTITY.md",{"path":77,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":78,"sourceHtmlUrl":79},"examples\u002F_DIR_IDENTITY.md",212,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Freact_components\u002Fpayload\u002Fexamples\u002F_DIR_IDENTITY.md",{"path":81,"resourceType":82,"resourceTypeDesc":83,"sizeBytes":84,"sourceHtmlUrl":85},"examples\u002Fgold_standard_card.tsx","OTHER","其他",2590,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Freact_components\u002Fpayload\u002Fexamples\u002Fgold_standard_card.tsx",{"path":87,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":88,"sourceHtmlUrl":89},"package_lock.json",7204,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Freact_components\u002Fpayload\u002Fpackage_lock.json",{"path":91,"resourceType":82,"resourceTypeDesc":83,"sizeBytes":92,"sourceHtmlUrl":93},"package.json.knowledge",355,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Freact_components\u002Fpayload\u002Fpackage.json.knowledge",{"path":95,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":96,"sourceHtmlUrl":97},"resources\u002F_DIR_IDENTITY.md",217,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Freact_components\u002Fpayload\u002Fresources\u002F_DIR_IDENTITY.md",{"path":99,"resourceType":82,"resourceTypeDesc":83,"sizeBytes":100,"sourceHtmlUrl":101},"resources\u002Fcomponent_template.tsx",1049,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Freact_components\u002Fpayload\u002Fresources\u002Fcomponent_template.tsx",{"path":103,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":104,"sourceHtmlUrl":105},"resources\u002Fstyle_guide.json",496,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Freact_components\u002Fpayload\u002Fresources\u002Fstyle_guide.json",{"path":107,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":110,"sourceHtmlUrl":111},"scripts\u002F_DIR_IDENTITY.md","SCRIPT","脚本",207,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Freact_components\u002Fpayload\u002Fscripts\u002F_DIR_IDENTITY.md",{"path":113,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":114,"sourceHtmlUrl":115},"scripts\u002Ffetch_stitch.sh",1009,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Freact_components\u002Fpayload\u002Fscripts\u002Ffetch_stitch.sh",{"path":117,"resourceType":108,"resourceTypeDesc":109,"sizeBytes":118,"sourceHtmlUrl":119},"scripts\u002Fvalidate.js",2376,"https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Freact_components\u002Fpayload\u002Fscripts\u002Fvalidate.js",[121,160,180,205,221,248],{"skillNo":122,"name":123,"nameZh":6,"description":124,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":125,"categories":126,"keywords":141,"publishedAt":37},"01M6JR0KQP4MHT32TN40D9CBFX","UI-UX Pro Max","Advanced UI\u002FUX analysis and generation skills with data-driven patterns. Python scripts (core.py, search.py) for systematic UI pattern extraction, design system generation, and component search from curated data sources.","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fui_components\u002Fui_ux_pro_max\u002FSKILL.md",[127,130,133,138],{"categoryNo":128,"categoryName":129,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":131,"categoryName":132,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":134,"categoryName":135,"taxonomyType":136,"taxonomyTypeDesc":137},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",{"categoryNo":139,"categoryName":140,"taxonomyType":136,"taxonomyTypeDesc":137},"01JBSEEDCAT000000000000033","数据分析师",[142,143,144,145,146,147,148,149,150,151,31,152,153,36,154,155,156,157,158,159],"ux","ui","ui ux pro max","max","pro","ui ux","design","component","search","analysis","rd","ui-ux","systematic","scripts","pattern extraction","sources","advanced","data-driven",{"skillNo":161,"name":162,"nameZh":6,"description":163,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":164,"categories":165,"keywords":167,"publishedAt":37},"01M6JR0EF5AEQHP2FSTB57H05P","shadcn-ui","Expert guidance for integrating and building applications with shadcn\u002Fui components, including component discovery, installation, customization, and best practices.","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fui_components\u002Fshadcn_ui\u002FSKILL.md",[166],{"categoryNo":134,"categoryName":135,"taxonomyType":136,"taxonomyTypeDesc":137},[168,143,169,24,149,28,170,171,172,31,173,174,175,36,176,177,178,179],"shadcn","shadcn ui","best practices","applications","discovery","customization","guidance","expert","installation","ui components","with","for",{"skillNo":181,"name":182,"nameZh":6,"description":183,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":184,"categories":185,"keywords":187,"publishedAt":37},"01M6JR08F51BEN17RHFYX65WVE","zustand_store_ts","Create Zustand stores with TypeScript, subscribeWithSelector middleware, and proper state\u002Faction separation. Use when building React state management, creating global stores, or implementing reactive state patterns with Zustand.","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fzustand_store_ts\u002FSKILL.md",[186],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[188,189,190,191,192,25,193,194,195,196,197,198,199,200,201,202,178,203,204],"zustand store ts","zustand","store","typescript","microsoft","create","state management","state","react state management","management","global","use","patterns","separation","middleware","action","implementing",{"skillNo":206,"name":189,"nameZh":6,"description":207,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":208,"categories":209,"keywords":210,"publishedAt":37},"01M6JR00TDMVAFFCZXZ04AN7Q7","Zustand state management guide. Use when working with store code (src\u002Fstore\u002F**), implementing actions, managing state, or creating slices. Triggers on Zustand store development, state management questions, or action implementation.","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fzustand\u002FSKILL.md",[],[189,211,194,212,195,213,214,197,215,199,216,217,218,190,178,219,220,203,204],"development","code","actions","src","guide","implementation","zustand state","triggers","questions","zustand state management",{"skillNo":222,"name":223,"nameZh":6,"description":224,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":225,"categories":226,"keywords":231,"publishedAt":37},"01M6JQZSWV4KWJP112G6XHEP44","youtube_summarizer","Automatically fetch YouTube video transcripts, generate structured summaries, and send full transcripts to messaging platforms. Detects YouTube URLs and provides metadata, key insights, and downloadable transcripts.","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fyoutube_summarizer\u002FSKILL.md",[227,230],{"categoryNo":228,"categoryName":229,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":131,"categoryName":132,"taxonomyType":21,"taxonomyTypeDesc":22},[232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247],"youtube","youtube summarizer","summarizer","generate","metadata","messaging","Video","fetch","telegram","transcription","summarization","structured","full","insights","transcripts","summaries",{"skillNo":249,"name":250,"nameZh":6,"description":251,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":252,"categories":253,"keywords":254,"publishedAt":37},"01M6JQZN3QJB6B77JGKJD62DQT","youtube_clipper","YouTube 视频智能剪辑工具。下载视频和字幕，AI 分析生成精细章节（几分钟级别）， 用户选择片段后自动剪辑、翻译字幕为中英双语、烧录字幕到视频，并生成总结文案。 使用场景：当用户需要剪辑 YouTube 视频、生成短视频片段、制作双语字幕版本时。 关键词：视频剪辑、YouTube、字幕翻译、双语字幕、视频下载、clip video","https:\u002F\u002Fgithub.com\u002FLongLeo287\u002FOmniClaw\u002Fblob\u002Fmain\u002Fecosystem\u002Fskills\u002Fyoutube_clipper\u002FSKILL.md",[],[232,255,256,238,257,258,259,260,261,262,263,264,265,266,267,268,269],"clipper","youtube clipper","Bash","下载","视频","生成","关键词","翻译","read","write","clip","总结","工具","文案","sonnet"]