[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M7BHFEK9ANJY2ABH1VSWWVJS":3,"skill-same:01M7BHFEK9ANJY2ABH1VSWWVJS":60},{"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":16,"sourceHtmlUrl":17,"categories":18,"keywords":19,"publishedAt":20,"linkOnly":21,"markdownContent":22,"markdownBody":23,"frontMatter":24,"refName":25,"commitSha":26,"skillDirectory":27,"forksCount":14,"repositoryHtmlUrl":28,"repositoryHomepageUrl":6,"ownerHtmlUrl":29,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":30,"install":31,"resources":44},"01M7BHFEK9ANJY2ABH1VSWWVJS","design-to-code",null,"Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust error handling, checkpoint recovery, and streamlined execution via helper script.","origin-labs-ai\u002Fcode","origin-labs-ai","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F347654492?v=4","01M7B0MAD1JMVZ6ME9891AYYYG","Origin","01M7B0MADP3AZS42R4NEF1JTS8",0,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fpayloads\u002Fskills\u002Fdesign-to-code\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fpayloads\u002Fskills\u002Fdesign-to-code\u002FSKILL.md",[],[],"2026-11-15 14:19:17",false,"---\nname: design-to-code\ndescription: Pixel-perfect Figma to React conversion using coderio. Generates production-ready code (TypeScript, Vite, TailwindCSS V4) with high visual fidelity. Features robust error handling, checkpoint recovery, and streamlined execution via helper script.\n---\n\n# Design to Code\n\nHigh-fidelity UI restoration from Figma designs to production-ready React + TypeScript components.\nThis SKILL uses a **robust helper script** to minimize manual errors and ensure pixel-perfect results.\n\n## Prerequisites\n\n1.  **Figma API Token**: Get from Figma → Settings → Personal Access Tokens\n2.  **Node.js**: Version 18+\n3.  **coderio**: Installed in `scripts\u002F` folder (handled by Setup phase)\n\n## Workflow Overview\n\n```\nPhase 0: SETUP    → Create helper script and script environment\nPhase 1: PROTOCOL → Generate design protocol (Structure & Props)\nPhase 2: CODE     → Generate components and assets\n```\n\n---\n\n# Phase 0: Setup\n\n## Step 0.1: Initialize Helper Script\n\n**User Action**: Run these commands to create the execution helper and isolate its dependencies.\n\n```bash\nmkdir -p scripts\n\n# 1. Copy script files\n# Note: Ensure you have the 'skills\u002Fdesign-to-code\u002Fscripts' directory available\ncp skills\u002Fdesign-to-code\u002Fscripts\u002Fpackage.json scripts\u002Fpackage.json\ncp skills\u002Fdesign-to-code\u002Fscripts\u002Fcoderio-skill.mjs scripts\u002Fcoderio-skill.mjs\n\n# 2. Install coderio in scripts directory (adjust version if needed)\ncd scripts && pnpm install && cd ..\n```\n\n## Step 0.2: Scaffold Project (Optional)\n\nIf starting a new project:\n\n1.  Run: `node scripts\u002Fcoderio-skill.mjs scaffold-prompt \"MyApp\"`\n2.  **AI Task**: Follow the instructions output by the command to create files.\n\n---\n\n# Phase 1: Protocol Generation\n\n## Step 1.1: Fetch Data\n\n```bash\n# Replace with your URL and Token\nnode scripts\u002Fcoderio-skill.mjs fetch-figma \"https:\u002F\u002Ffigma.com\u002Ffile\u002F...\" \"figd_...\"\n```\n\n**Verify**: `process\u002Fthumbnail.png` should exist.\n\n## Step 1.2: Generate Structure\n\n1.  **Generate Prompt**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs structure-prompt > scripts\u002Fstructure-prompt.md\n    ```\n\n2.  **AI Task (Structure)**:\n    - **ATTACH**: `process\u002Fthumbnail.png` (MANDATORY)\n    - **READ**: `scripts\u002Fstructure-prompt.md`\n    - **INSTRUCTION**: \"Generate the component structure JSON based on the prompt and the attached thumbnail. Focus on visual grouping. **Use text content to name components accurately (e.g. 'SafeProducts', not 'FAQ').**\"\n    - **SAVE**: Paste the JSON result into `scripts\u002Fstructure-output.json`.\n\n3.  **Process Result**:\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs save-structure\n    ```\n\n## Step 1.3: Extract Props (Iterative)\n\n1.  **List Components**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs list-components\n    ```\n\n2.  **For EACH component in the list**:\n\n    a. **Generate Prompt**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs props-prompt \"ComponentName\" > scripts\u002Fcurrent-props-prompt.md\n    ```\n\n    b. **AI Task (Props)**:\n    - **ATTACH**: `process\u002Fthumbnail.png` (MANDATORY)\n    - **READ**: `scripts\u002Fcurrent-props-prompt.md`\n    - **INSTRUCTION**: \"Extract props and state data. Be pixel-perfect with text and image paths.\"\n    - **SAVE**: Paste the JSON result into `scripts\u002FComponentName-props.json`.\n\n    c. **Save & Validate**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs save-props \"ComponentName\"\n    # If this fails, re-do step 'b' with better attention to the thumbnail\n    ```\n\n---\n\n# Phase 2: Code Generation\n\n## Step 2.1: Plan Tasks\n\n```bash\nnode scripts\u002Fcoderio-skill.mjs list-gen-tasks\n```\n\nThis outputs a list of tasks with indices (0, 1, 2...).\n\n## Step 2.2: Generate Components (Iterative)\n\n**For EACH task index (starting from 0)**:\n\n1.  **Generate Prompt**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs code-prompt 0 > scripts\u002Fcode-prompt.md\n    # Replace '0' with current task index\n    ```\n\n2.  **AI Task (Code)**:\n    - **ATTACH**: `process\u002Fthumbnail.png` (MANDATORY)\n    - **READ**: `scripts\u002Fcode-prompt.md`\n    - **INSTRUCTION**: \"Generate the React component code. Match the thumbnail EXACTLY. **Use STRICT text content from input data, do not hallucinate.**\"\n    - **SAVE**: Paste the code block into `scripts\u002Fcode-output.txt`.\n\n3.  **Save Code**:\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs save-code 0\n    # Replace '0' with current task index\n    ```\n\n## Step 2.3: Final Integration\n\nInject the root component into `App.tsx`. Use the path found in the last task of Phase 2.1.\n\n---\n\n# Troubleshooting\n\n- **\"Props validation failed\"**: The AI generated empty props. Check if `process\u002Fthumbnail.png` was attached and visible to the AI. Retry the props generation step.\n- **\"Module not found\"**: Ensure `node scripts\u002Fcoderio-skill.mjs save-code` was run for the child component before the parent component. Phase 2 must be done in order (0, 1, 2...).\n- **\"Visuals don't match\"**: Did you attach the thumbnail? The AI relies on it for spacing and layout nuances not present in the raw data.\n","# Design to Code\n\nHigh-fidelity UI restoration from Figma designs to production-ready React + TypeScript components.\nThis SKILL uses a **robust helper script** to minimize manual errors and ensure pixel-perfect results.\n\n## Prerequisites\n\n1.  **Figma API Token**: Get from Figma → Settings → Personal Access Tokens\n2.  **Node.js**: Version 18+\n3.  **coderio**: Installed in `scripts\u002F` folder (handled by Setup phase)\n\n## Workflow Overview\n\n```\nPhase 0: SETUP    → Create helper script and script environment\nPhase 1: PROTOCOL → Generate design protocol (Structure & Props)\nPhase 2: CODE     → Generate components and assets\n```\n\n---\n\n# Phase 0: Setup\n\n## Step 0.1: Initialize Helper Script\n\n**User Action**: Run these commands to create the execution helper and isolate its dependencies.\n\n```bash\nmkdir -p scripts\n\n# 1. Copy script files\n# Note: Ensure you have the 'skills\u002Fdesign-to-code\u002Fscripts' directory available\ncp skills\u002Fdesign-to-code\u002Fscripts\u002Fpackage.json scripts\u002Fpackage.json\ncp skills\u002Fdesign-to-code\u002Fscripts\u002Fcoderio-skill.mjs scripts\u002Fcoderio-skill.mjs\n\n# 2. Install coderio in scripts directory (adjust version if needed)\ncd scripts && pnpm install && cd ..\n```\n\n## Step 0.2: Scaffold Project (Optional)\n\nIf starting a new project:\n\n1.  Run: `node scripts\u002Fcoderio-skill.mjs scaffold-prompt \"MyApp\"`\n2.  **AI Task**: Follow the instructions output by the command to create files.\n\n---\n\n# Phase 1: Protocol Generation\n\n## Step 1.1: Fetch Data\n\n```bash\n# Replace with your URL and Token\nnode scripts\u002Fcoderio-skill.mjs fetch-figma \"https:\u002F\u002Ffigma.com\u002Ffile\u002F...\" \"figd_...\"\n```\n\n**Verify**: `process\u002Fthumbnail.png` should exist.\n\n## Step 1.2: Generate Structure\n\n1.  **Generate Prompt**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs structure-prompt > scripts\u002Fstructure-prompt.md\n    ```\n\n2.  **AI Task (Structure)**:\n    - **ATTACH**: `process\u002Fthumbnail.png` (MANDATORY)\n    - **READ**: `scripts\u002Fstructure-prompt.md`\n    - **INSTRUCTION**: \"Generate the component structure JSON based on the prompt and the attached thumbnail. Focus on visual grouping. **Use text content to name components accurately (e.g. 'SafeProducts', not 'FAQ').**\"\n    - **SAVE**: Paste the JSON result into `scripts\u002Fstructure-output.json`.\n\n3.  **Process Result**:\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs save-structure\n    ```\n\n## Step 1.3: Extract Props (Iterative)\n\n1.  **List Components**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs list-components\n    ```\n\n2.  **For EACH component in the list**:\n\n    a. **Generate Prompt**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs props-prompt \"ComponentName\" > scripts\u002Fcurrent-props-prompt.md\n    ```\n\n    b. **AI Task (Props)**:\n    - **ATTACH**: `process\u002Fthumbnail.png` (MANDATORY)\n    - **READ**: `scripts\u002Fcurrent-props-prompt.md`\n    - **INSTRUCTION**: \"Extract props and state data. Be pixel-perfect with text and image paths.\"\n    - **SAVE**: Paste the JSON result into `scripts\u002FComponentName-props.json`.\n\n    c. **Save & Validate**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs save-props \"ComponentName\"\n    # If this fails, re-do step 'b' with better attention to the thumbnail\n    ```\n\n---\n\n# Phase 2: Code Generation\n\n## Step 2.1: Plan Tasks\n\n```bash\nnode scripts\u002Fcoderio-skill.mjs list-gen-tasks\n```\n\nThis outputs a list of tasks with indices (0, 1, 2...).\n\n## Step 2.2: Generate Components (Iterative)\n\n**For EACH task index (starting from 0)**:\n\n1.  **Generate Prompt**:\n\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs code-prompt 0 > scripts\u002Fcode-prompt.md\n    # Replace '0' with current task index\n    ```\n\n2.  **AI Task (Code)**:\n    - **ATTACH**: `process\u002Fthumbnail.png` (MANDATORY)\n    - **READ**: `scripts\u002Fcode-prompt.md`\n    - **INSTRUCTION**: \"Generate the React component code. Match the thumbnail EXACTLY. **Use STRICT text content from input data, do not hallucinate.**\"\n    - **SAVE**: Paste the code block into `scripts\u002Fcode-output.txt`.\n\n3.  **Save Code**:\n    ```bash\n    node scripts\u002Fcoderio-skill.mjs save-code 0\n    # Replace '0' with current task index\n    ```\n\n## Step 2.3: Final Integration\n\nInject the root component into `App.tsx`. Use the path found in the last task of Phase 2.1.\n\n---\n\n# Troubleshooting\n\n- **\"Props validation failed\"**: The AI generated empty props. Check if `process\u002Fthumbnail.png` was attached and visible to the AI. Retry the props generation step.\n- **\"Module not found\"**: Ensure `node scripts\u002Fcoderio-skill.mjs save-code` was run for the child component before the parent component. Phase 2 must be done in order (0, 1, 2...).\n- **\"Visuals don't match\"**: Did you attach the thumbnail? The AI relies on it for spacing and layout nuances not present in the raw data.\n",{"name":5,"description":7},"main","1e72c52e0f3ffd72fbc6ba994fda0f4a6d63911a","payloads\u002Fskills\u002Fdesign-to-code","https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode","https:\u002F\u002Fgithub.com\u002Forigin-labs-ai","2026-11-14 20:35:25",{"source":8,"skillName":5,"commands":32,"prompt":42,"zipAvailable":43},[33,36,39],{"tool":34,"command":35},"npx","npx skills add origin-labs-ai\u002Fcode --skill design-to-code",{"tool":37,"command":38},"bunx","bunx skills add origin-labs-ai\u002Fcode --skill design-to-code",{"tool":40,"command":41},"pnpm","pnpm dlx skills add origin-labs-ai\u002Fcode --skill design-to-code","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fpayloads\u002Fskills\u002Fdesign-to-code\u002FSKILL.md",true,[45,50,56],{"path":46,"resourceType":47,"resourceTypeDesc":48,"sizeBytes":49,"sourceHtmlUrl":16},"LICENSE.txt","LICENSE","许可证",10880,{"path":51,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":54,"sourceHtmlUrl":55},"scripts\u002Fcoderio-skill.mjs","SCRIPT","脚本",13059,"https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fpayloads\u002Fskills\u002Fdesign-to-code\u002Fscripts\u002Fcoderio-skill.mjs",{"path":57,"resourceType":52,"resourceTypeDesc":53,"sizeBytes":58,"sourceHtmlUrl":59},"scripts\u002Fpackage.json",122,"https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fpayloads\u002Fskills\u002Fdesign-to-code\u002Fscripts\u002Fpackage.json",[61,70,78,86,94,102],{"skillNo":62,"name":63,"nameZh":6,"description":64,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":65,"licenseFileUrl":66,"sourceHtmlUrl":67,"categories":68,"keywords":69,"publishedAt":20},"01M7BP6Z7NBQXMB8Y5ZRR7PGCF","web-search","Implement web search capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to search for real-time information from the web, retrieve up-to-date content beyond the knowledge cutoff, or find the latest news and data. Returns structured search results with URLs, snippets, and metadata.","MIT","https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fwindows\u002Fsonar\u002Fmerger\u002Fcode-fusion-dead-20261101\u002Fskills\u002Fweb-search\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fwindows\u002Fsonar\u002Fmerger\u002Fcode-fusion-dead-20261101\u002Fskills\u002Fweb-search\u002FSKILL.md",[],[],{"skillNo":71,"name":72,"nameZh":6,"description":73,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":65,"licenseFileUrl":74,"sourceHtmlUrl":75,"categories":76,"keywords":77,"publishedAt":20},"01M7BP6T13CWYHZSHGYG0RT885","web-reader","Implement web page content extraction capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to scrape web pages, extract article content, retrieve page metadata, or build applications that process web content. Supports automatic content extraction with title, HTML, and publication time retrieval.","https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fwindows\u002Fsonar\u002Fmerger\u002Fcode-fusion-dead-20261101\u002Fskills\u002Fweb-reader\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fwindows\u002Fsonar\u002Fmerger\u002Fcode-fusion-dead-20261101\u002Fskills\u002Fweb-reader\u002FSKILL.md",[],[],{"skillNo":79,"name":80,"nameZh":6,"description":81,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":65,"licenseFileUrl":82,"sourceHtmlUrl":83,"categories":84,"keywords":85,"publishedAt":20},"01M7BP6GM9Z301PPT4ZRV049AN","video-understand","Implement specialized video understanding capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to analyze video content, understand motion and temporal sequences, extract information from video frames, describe video scenes, or perform video-based AI analysis. Optimized for MP4, AVI, MOV, and other common video formats.","https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fwindows\u002Fsonar\u002Fmerger\u002Fcode-fusion-dead-20261101\u002Fskills\u002Fvideo-understand\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fwindows\u002Fsonar\u002Fmerger\u002Fcode-fusion-dead-20261101\u002Fskills\u002Fvideo-understand\u002FSKILL.md",[],[],{"skillNo":87,"name":88,"nameZh":6,"description":89,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":65,"licenseFileUrl":90,"sourceHtmlUrl":91,"categories":92,"keywords":93,"publishedAt":20},"01M7BP6ANRHQ1K7PVS11RBZCC7","Video Generation","Implement AI-powered video generation capabilities using the z-ai-web-dev-sdk. Use this skill when the user needs to generate videos from text prompts or images, create video content programmatically, or build applications that produce video outputs. Supports asynchronous task management with status polling and result retrieval.","https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fwindows\u002Fsonar\u002Fmerger\u002Fcode-fusion-dead-20261101\u002Fskills\u002Fvideo-generation\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fwindows\u002Fsonar\u002Fmerger\u002Fcode-fusion-dead-20261101\u002Fskills\u002Fvideo-generation\u002FSKILL.md",[],[],{"skillNo":95,"name":96,"nameZh":6,"description":97,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":98,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":20},"01M7BP56W5SX2MMJWKMJVC66F0","skill-creator","Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, edit, or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.","https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fwindows\u002Fsonar\u002Fmerger\u002Fcode-fusion-dead-20261101\u002Fskills\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fwindows\u002Fsonar\u002Fmerger\u002Fcode-fusion-dead-20261101\u002Fskills\u002Fskill-creator\u002FSKILL.md",[],[],{"skillNo":103,"name":104,"nameZh":6,"description":105,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":106,"categories":107,"keywords":108,"publishedAt":20},"01M7BP503HPG0DBCN4K0JKCA88","seo-content-writer","Use when the user asks to \"write SEO content\", \"create a blog post\", \"write an article\", \"content writing\", \"draft optimized content\", \"write me an article\", \"create a blog post about\", \"help me write SEO content\", or \"draft content for\". Creates high-quality, SEO-optimized content that ranks in search engines. Applies on-page SEO best practices, keyword optimization, and content structure for maximum visibility and engagement. For AI citation optimization, see geo-content-optimizer. For updating existing content, see content-refresher.","https:\u002F\u002Fgithub.com\u002Forigin-labs-ai\u002Fcode\u002Fblob\u002Fmain\u002Fwindows\u002Fsonar\u002Fmerger\u002Fcode-fusion-dead-20261101\u002Fskills\u002Fseo-content-writer\u002FSKILL.md",[],[]]