[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6QZMSR52PGTYD45EZ7YVPCY":3,"skill-same:01M6QZMSR52PGTYD45EZ7YVPCY":94},{"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":32,"publishedAt":53,"linkOnly":54,"markdownContent":55,"markdownBody":56,"frontMatter":57,"refName":58,"commitSha":59,"skillDirectory":60,"forksCount":61,"repositoryHtmlUrl":62,"repositoryHomepageUrl":6,"ownerHtmlUrl":63,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":64,"install":65,"resources":78},"01M6QZMSR52PGTYD45EZ7YVPCY","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.","Mishit18\u002Fclaude-code-templates","Mishit18","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F244127857?v=4","01M6QXBYKWM76HSKYDNWSKKE41","Mishit Sharma","01M6QXBYRJ0CAVM51S1RTEKTZZ",1,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdesign-to-code\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdesign-to-code\u002FSKILL.md",[19,24,29],{"categoryNo":20,"categoryName":21,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":25,"categoryName":26,"taxonomyType":27,"taxonomyTypeDesc":28},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":30,"categoryName":31,"taxonomyType":27,"taxonomyTypeDesc":28},"01JBSEEDCAT000000000000032","设计师",[33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52],"code","design to code","design","ready","features","production-ready","visual fidelity","helper","error","visual","pixel","figma to react","conversion","vite","checkpoint","execution","figma","react","typescript","tailwindcss","2026-11-10 10:12:30",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\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\n",{"name":5,"description":7},"main","015422534a7457348a313b6381f0255d3364eb8c","cli-tool\u002Fcomponents\u002Fskills\u002Fdesign-to-code",0,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates","https:\u002F\u002Fgithub.com\u002FMishit18","2026-11-11 17:58:24",{"source":8,"skillName":5,"commands":66,"prompt":76,"zipAvailable":77},[67,70,73],{"tool":68,"command":69},"npx","npx skills add Mishit18\u002Fclaude-code-templates --skill design-to-code",{"tool":71,"command":72},"bunx","bunx skills add Mishit18\u002Fclaude-code-templates --skill design-to-code",{"tool":74,"command":75},"pnpm","pnpm dlx skills add Mishit18\u002Fclaude-code-templates --skill design-to-code","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdesign-to-code\u002FSKILL.md",true,[79,84,90],{"path":80,"resourceType":81,"resourceTypeDesc":82,"sizeBytes":83,"sourceHtmlUrl":16},"LICENSE.txt","LICENSE","许可证",10881,{"path":85,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":88,"sourceHtmlUrl":89},"scripts\u002Fcoderio-skill.mjs","SCRIPT","脚本",13060,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdesign-to-code\u002Fscripts\u002Fcoderio-skill.mjs",{"path":91,"resourceType":86,"resourceTypeDesc":87,"sizeBytes":92,"sourceHtmlUrl":93},"scripts\u002Fpackage.json",123,"https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fdesign-to-code\u002Fscripts\u002Fpackage.json",[95,125,151,179,206,231],{"skillNo":96,"name":97,"nameZh":6,"description":98,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":99,"sourceHtmlUrl":100,"categories":101,"keywords":105,"publishedAt":53},"01M6R4ARN4W2VZRDERDTMN1KP0","web-artifacts-builder","Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn\u002Fui). Use for complex artifacts requiring state management, routing, or shadcn\u002Fui components - not for simple single-file HTML\u002FJSX artifacts.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Futilities\u002Fweb-artifacts-builder\u002FSKILL.md",[102],{"categoryNo":103,"categoryName":104,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000009","前端开发",[106,107,108,109,110,111,112,113,50,114,115,116,117,118,119,120,121,122,123,124],"web artifacts builder","web","artifacts","artifacts builder","builder","frontend","css","components","routing","state management","state","file","Tailwind","use","single-file","ui components","multi","for","single",{"skillNo":126,"name":127,"nameZh":6,"description":128,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":129,"sourceHtmlUrl":130,"categories":131,"keywords":136,"publishedAt":53},"01M6R45GXREM5DP8T08MAC788H","webapp-testing","Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fsecurity\u002Fwebapp-testing\u002FSKILL.md",[132,135],{"categoryNo":133,"categoryName":134,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":103,"categoryName":104,"taxonomyType":22,"taxonomyTypeDesc":23},[137,138,139,111,140,141,107,142,143,144,145,146,147,148,149,150,123],"testing","webapp testing","webapp","screenshots","playwright","debugging","toolkit","browser","ui","logs","applications","behavior","local","with",{"skillNo":152,"name":153,"nameZh":6,"description":154,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":155,"licenseFileUrl":156,"sourceHtmlUrl":157,"categories":158,"keywords":159,"publishedAt":53},"01M6R2GYJ470X8EB7R58V0B68K","think-tank","Run a Virtual Think Tank — a structured multi-persona debate — before planning or making architectural\u002Fdesign\u002Fstrategic decisions. Use this skill whenever the user is about to plan a system, make a technology choice, evaluate trade-offs, decide on an approach, or faces any decision where multiple perspectives would sharpen the outcome. Also trigger when the user says \"think tank\", \"debate this\", \"perspectives on\", \"trade-offs\", \"should I use X or Y\", \"help me decide\", \"before we plan\", or asks for pros\u002Fcons of competing approaches. This skill should run BEFORE any implementation planning begins — it produces a structured analysis that feeds into better plans.","MIT","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fthink-tank\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fthink-tank\u002FSKILL.md",[],[160,161,35,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178],"think tank","think","run","feeds","analysis","persona","plan","sharpen","virtual","decision","choice","decide","perspectives","outcome","me","debate","make","trade-offs","when",{"skillNo":180,"name":181,"nameZh":6,"description":182,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":183,"sourceHtmlUrl":184,"categories":185,"keywords":189,"publishedAt":53},"01M6R2FSR55AVRFA9YZ8SC2GZG","skill-creator","Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fskill-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fskill-creator\u002FSKILL.md",[186],{"categoryNo":187,"categoryName":188,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000023","Skill与智能体开发",[190,191,192,193,194,195,196,197,198,199,200,201,202,203,150,123,204,178,205],"skill creator","creator","workflows","create","update","capabilities","knowledge","tool","integrations","specialized","guide","new skill","existing skill","users","Existing","new",{"skillNo":207,"name":208,"nameZh":6,"description":209,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":155,"licenseFileUrl":6,"sourceHtmlUrl":210,"categories":211,"keywords":212,"publishedAt":53},"01M6R2FK42ZZ4HJTJVVK9WJBBP","ship-learn-next","Transform learning content (like YouTube transcripts, articles, tutorials) into actionable implementation plans using the Ship-Learn-Next framework. Use when user wants to turn advice, lessons, or educational content into concrete action steps, reps, or a learning quest.","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fproductivity\u002Fship-learn-next\u002FSKILL.md",[],[213,214,215,216,217,218,219,220,119,221,222,223,224,225,226,227,228,229,230,178],"learn","ship learn next","ship","next","framework","learning","read","write","advice","implementation","youtube","plans","quest","transform","actionable","action","lessons","youtube transcripts",{"skillNo":232,"name":233,"nameZh":6,"description":234,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":235,"sourceHtmlUrl":236,"categories":237,"keywords":244,"publishedAt":53},"01M6R2088G1RHDA5MDX16HASRB","slack-gif-creator","Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users request animated GIFs for Slack like \"make me a GIF of X doing Y for Slack.\"","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fenterprise-communication\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002FMishit18\u002Fclaude-code-templates\u002Fblob\u002Fmain\u002Fcli-tool\u002Fcomponents\u002Fskills\u002Fenterprise-communication\u002Fslack-gif-creator\u002FSKILL.md",[238,241],{"categoryNo":239,"categoryName":240,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":242,"categoryName":243,"taxonomyType":22,"taxonomyTypeDesc":23},"01JBSEEDCAT000000000000016","图像与多媒体",[245,246,247,191,248,249,250,251,196,119,174,203,176,252,253,123,254,178],"slack gif creator","slack","gif","validation","Tools","constraints","Animation","Utilities","concepts","request"]