[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JCBK4AYRKKPARFKVGSYC9V":3,"skill-same:01M6JCBK4AYRKKPARFKVGSYC9V":70},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":15,"categories":16,"keywords":25,"publishedAt":36,"linkOnly":37,"markdownContent":38,"markdownBody":39,"frontMatter":40,"refName":42,"commitSha":43,"skillDirectory":44,"forksCount":45,"repositoryHtmlUrl":46,"repositoryHomepageUrl":47,"ownerHtmlUrl":48,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":49,"install":50,"resources":63},"01M6JCBK4AYRKKPARFKVGSYC9V","thumbnails",null,"Generate branded YouTube thumbnails using approved photo assets, brand guidelines, and HTML thumbnail templates.","S3YED\u002Fappie-kit","S3YED","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F62743867?v=4","01M6JBKBRRVP6KMS0VWZ27T3R6","01M6JBKBX0KG30284PW1DBYJT1",14,"MIT","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcontent\u002Fthumbnails\u002FSKILL.md",[17,22],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000023","Skill与智能体开发",[5,26,27,28,29,30,31,32,33,34,35],"brand guidelines","guidelines","generate","content","templates","assets","brand","html","youtube","thumbnail","2026-11-10 10:12:30",false,"---\nname: thumbnails\ndescription: \"Generate branded YouTube thumbnails using approved photo assets, brand guidelines, and HTML thumbnail templates.\"\nversion: 1.0.0\ncategory: content\n---\n\n# SKILL.md - YouTube Thumbnail Generator\n\nGenerate YouTube thumbnails from approved portrait assets, HTML templates, and the project brand guidelines.\n\n## Assets Location\n- **Approved portraits:** `$THUMBNAIL_PHOTO_DIR`\n  - `closeup.jpg` - Close-up face shot, best for thumbnails\n  - `speaking.jpg` - Speaking\u002Fpresenting pose\n  - `frame-01.jpg` - source video frame\n  - `frame-02.jpg` - source video frame\n  - `webcam.png` - webcam screenshot\n- **HTML templates:** `$THUMBNAIL_TEMPLATE_DIR`\n  - `client-success.html` - For client story videos (revenue numbers + face)\n  - `interview.html` - For interview\u002Fconversation videos\n  - `educational.html` - For tutorial\u002Fhow-to videos\n- **Generator script:** `$THUMBNAIL_GENERATOR`\n- **Full brand system:** `$THUMBNAIL_BRAND_SYSTEM`\n\n## How to Generate a Thumbnail\n\n### Method 1: Puppeteer Script (Preferred)\n```bash\ncd \"$THUMBNAIL_WORKDIR\"\nchmod +x generate-thumbnail.sh\n.\u002Fgenerate-thumbnail.sh \u003Ctemplate> \u003Coutput> --text-main \"TEXT\" --text-sub \"TEXT\" --face \"$THUMBNAIL_FACE_IMAGE\"\n```\n\n**Examples:**\n```bash\n# Client success story\n.\u002Fgenerate-thumbnail.sh client-success .\u002Foutput\u002Fnew-thumb.jpg \\\n  --text-main '$0 to $8K' --text-sub 'IN 30 DAYS' \\\n  --face $THUMBNAIL_FACE_IMAGE\n\n# Interview thumbnail\n.\u002Fgenerate-thumbnail.sh interview .\u002Foutput\u002Finterview.jpg \\\n  --text-main 'How I Built 3 AI Agents' --text-sub 'LIVE DEMO' \\\n  --face $THUMBNAIL_FACE_IMAGE\n\n# Educational tutorial\n.\u002Fgenerate-thumbnail.sh educational .\u002Foutput\u002Ftutorial.jpg \\\n  --text-main 'n8n + AI' --text-sub 'FULL TUTORIAL' \\\n  --face $THUMBNAIL_FACE_IMAGE\n```\n\n### Method 2: AI Image Generation\nWhen the Puppeteer script isn't enough (custom layouts, special effects), use the image_generate tool:\n\n**Prompt formula:**\n```\nYouTube thumbnail, 1280x720, [SCENE DESCRIPTION].\nLeft side: photo of the approved presenter portrait,\nwearing [OUTFIT]. Right side: bold white text \"[3-5 WORDS]\" on dark green\nbackground (#031D16). Gold accent (#DFB771) highlight on key word.\nBottom right: small \"\u003CBRAND>\" text in gold. High contrast, professional,\nclean composition. No em dashes.\n```\n\n## Brand Rules (MANDATORY)\n- **Font:** Rethink Sans (800 for headlines, 700 for sub)\n- **Colors:** Dark green #031D16, Gold #DFB771, White #F6FEFC, Emerald #247459\n- **Face size:** Minimum 40% of frame height\n- **Text:** 3-5 words max, 100-200px font size\n- **\u003CBRAND> watermark:** Bottom-right, gold, Rethink Sans 600\n- **Safe zone:** Nothing in bottom-right 200x40px (YouTube timestamp)\n- **NO EM DASHES. EVER.**\n\n## Thumbnail Categories\n\n### 1. Client Success Stories (Most Important)\n- Template: `client-success`\n- Formula: Revenue number + client face\u002Fthe presenter face + name\n- Example text: \"$0 to $8K\", \"IN 30 DAYS\"\n- Always include the revenue metric\n\n### 2. Interviews \u002F Conversations\n- Template: `interview`\n- Formula: Key insight + both faces (or the presenter alone)\n- Example text: \"$50K to $1M+\", \"ROSLAN\"\n\n### 3. Tutorials \u002F Educational\n- Template: `educational`\n- Formula: Tool name + benefit + the presenter face\n- Example text: \"n8n + AI\", \"AUTOMATE EVERYTHING\"\n\n### 4. Vlog \u002F Personal\n- Use AI image generation for custom layouts\n- More creative freedom, but keep brand colors\n\n## Quick Checklist Before Delivering\n- [ ] 1280x720 exactly\n- [ ] Under 2MB file size\n- [ ] Face visible and large (40%+ of frame)\n- [ ] Text readable on mobile (phone-sized preview)\n- [ ] Gold accent (#DFB771) on at least one element\n- [ ] \u003CBRAND> watermark present\n- [ ] No em dashes anywhere\n- [ ] JPG quality 85-90%\n\n## Dependencies\nMake sure Puppeteer is installed:\n```bash\nnpm install -g puppeteer\n# or if it fails:\napt-get install -y chromium-browser\nnpm install puppeteer\n```\n","# SKILL.md - YouTube Thumbnail Generator\n\nGenerate YouTube thumbnails from approved portrait assets, HTML templates, and the project brand guidelines.\n\n## Assets Location\n- **Approved portraits:** `$THUMBNAIL_PHOTO_DIR`\n  - `closeup.jpg` - Close-up face shot, best for thumbnails\n  - `speaking.jpg` - Speaking\u002Fpresenting pose\n  - `frame-01.jpg` - source video frame\n  - `frame-02.jpg` - source video frame\n  - `webcam.png` - webcam screenshot\n- **HTML templates:** `$THUMBNAIL_TEMPLATE_DIR`\n  - `client-success.html` - For client story videos (revenue numbers + face)\n  - `interview.html` - For interview\u002Fconversation videos\n  - `educational.html` - For tutorial\u002Fhow-to videos\n- **Generator script:** `$THUMBNAIL_GENERATOR`\n- **Full brand system:** `$THUMBNAIL_BRAND_SYSTEM`\n\n## How to Generate a Thumbnail\n\n### Method 1: Puppeteer Script (Preferred)\n```bash\ncd \"$THUMBNAIL_WORKDIR\"\nchmod +x generate-thumbnail.sh\n.\u002Fgenerate-thumbnail.sh \u003Ctemplate> \u003Coutput> --text-main \"TEXT\" --text-sub \"TEXT\" --face \"$THUMBNAIL_FACE_IMAGE\"\n```\n\n**Examples:**\n```bash\n# Client success story\n.\u002Fgenerate-thumbnail.sh client-success .\u002Foutput\u002Fnew-thumb.jpg \\\n  --text-main '$0 to $8K' --text-sub 'IN 30 DAYS' \\\n  --face $THUMBNAIL_FACE_IMAGE\n\n# Interview thumbnail\n.\u002Fgenerate-thumbnail.sh interview .\u002Foutput\u002Finterview.jpg \\\n  --text-main 'How I Built 3 AI Agents' --text-sub 'LIVE DEMO' \\\n  --face $THUMBNAIL_FACE_IMAGE\n\n# Educational tutorial\n.\u002Fgenerate-thumbnail.sh educational .\u002Foutput\u002Ftutorial.jpg \\\n  --text-main 'n8n + AI' --text-sub 'FULL TUTORIAL' \\\n  --face $THUMBNAIL_FACE_IMAGE\n```\n\n### Method 2: AI Image Generation\nWhen the Puppeteer script isn't enough (custom layouts, special effects), use the image_generate tool:\n\n**Prompt formula:**\n```\nYouTube thumbnail, 1280x720, [SCENE DESCRIPTION].\nLeft side: photo of the approved presenter portrait,\nwearing [OUTFIT]. Right side: bold white text \"[3-5 WORDS]\" on dark green\nbackground (#031D16). Gold accent (#DFB771) highlight on key word.\nBottom right: small \"\u003CBRAND>\" text in gold. High contrast, professional,\nclean composition. No em dashes.\n```\n\n## Brand Rules (MANDATORY)\n- **Font:** Rethink Sans (800 for headlines, 700 for sub)\n- **Colors:** Dark green #031D16, Gold #DFB771, White #F6FEFC, Emerald #247459\n- **Face size:** Minimum 40% of frame height\n- **Text:** 3-5 words max, 100-200px font size\n- **\u003CBRAND> watermark:** Bottom-right, gold, Rethink Sans 600\n- **Safe zone:** Nothing in bottom-right 200x40px (YouTube timestamp)\n- **NO EM DASHES. EVER.**\n\n## Thumbnail Categories\n\n### 1. Client Success Stories (Most Important)\n- Template: `client-success`\n- Formula: Revenue number + client face\u002Fthe presenter face + name\n- Example text: \"$0 to $8K\", \"IN 30 DAYS\"\n- Always include the revenue metric\n\n### 2. Interviews \u002F Conversations\n- Template: `interview`\n- Formula: Key insight + both faces (or the presenter alone)\n- Example text: \"$50K to $1M+\", \"ROSLAN\"\n\n### 3. Tutorials \u002F Educational\n- Template: `educational`\n- Formula: Tool name + benefit + the presenter face\n- Example text: \"n8n + AI\", \"AUTOMATE EVERYTHING\"\n\n### 4. Vlog \u002F Personal\n- Use AI image generation for custom layouts\n- More creative freedom, but keep brand colors\n\n## Quick Checklist Before Delivering\n- [ ] 1280x720 exactly\n- [ ] Under 2MB file size\n- [ ] Face visible and large (40%+ of frame)\n- [ ] Text readable on mobile (phone-sized preview)\n- [ ] Gold accent (#DFB771) on at least one element\n- [ ] \u003CBRAND> watermark present\n- [ ] No em dashes anywhere\n- [ ] JPG quality 85-90%\n\n## Dependencies\nMake sure Puppeteer is installed:\n```bash\nnpm install -g puppeteer\n# or if it fails:\napt-get install -y chromium-browser\nnpm install puppeteer\n```\n",{"name":5,"version":41,"category":29,"description":7},"1.0.0","master","8ec37df6d71fb664ea19d32c079e7d3ff931a8e0","skills\u002Fcontent\u002Fthumbnails",3,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit","https:\u002F\u002Fweblyfe.ai","https:\u002F\u002Fgithub.com\u002FS3YED","2026-08-27 01:54:02",{"source":8,"skillName":5,"commands":51,"prompt":61,"zipAvailable":62},[52,55,58],{"tool":53,"command":54},"npx","npx skills add S3YED\u002Fappie-kit --skill thumbnails",{"tool":56,"command":57},"bunx","bunx skills add S3YED\u002Fappie-kit --skill thumbnails",{"tool":59,"command":60},"pnpm","pnpm dlx skills add S3YED\u002Fappie-kit --skill thumbnails","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcontent\u002Fthumbnails\u002FSKILL.md",true,[64],{"path":65,"resourceType":66,"resourceTypeDesc":67,"sizeBytes":68,"sourceHtmlUrl":69},"generate-thumbnail.sh","SCRIPT","脚本",2743,"https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fcontent\u002Fthumbnails\u002Fgenerate-thumbnail.sh",[71,103,135,161,192,217],{"skillNo":72,"name":73,"nameZh":6,"description":74,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":75,"categories":76,"keywords":84,"publishedAt":36},"01M6JFD4M6N4DSGC7TXEJ5R3J2","ai-music","AI music generation and audio tools: HeartMuLa lyrics-to-music generation, songwriting craft (+ Suno prompts), and audio spectrogram\u002Ffeature visualization.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fwethlete\u002Fai-music\u002FSKILL.md",[77,80,83],{"categoryNo":78,"categoryName":79,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000013","分析与可视化",{"categoryNo":81,"categoryName":82,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000016","图像与多媒体",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102],"music","ai music","humanizer","visualization","Tools","Audio","hermes","hermes agent","songwriting","suno","lyrics","prompts","heartmula","craft","generation","feature","ai music generation","music generation",{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":115,"publishedAt":36},"01M6JFCZE4XNFQFMNZDHKHT5V5","agentic-webdesign-design-system-ingestion","Use v0 Design Systems 2.0, Bolt Design System Agents, or Lovable to generate production UI from a client's real design system components — not generic Tailwind. Use when building a client website where brand consistency matters.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-design-system-ingestion\u002FSKILL.md",[109,110],{"categoryNo":18,"categoryName":19,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":111,"categoryName":112,"taxonomyType":113,"taxonomyTypeDesc":114},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[116,117,118,119,120,121,122,123,28,124,125,126,127,128,129,130,131,132,133,134],"design","agentic","design system","system","ingestion","webdesign","agentic webdesign design system ingestion","components","design systems","website","ui","Tailwind","bolt","lovable","v0","design-system","wed","design system components","appie",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":143,"publishedAt":36},"01M6JFCVPX3913CFAS6QQJ33ZB","agentic-webdesign-agent-elements","Use 21st.dev Agent Elements — 25 shadcn\u002Fui components purpose-built for AI agent UIs. Tool cards (Bash, Edit, Search, Plan, Subagent, MCP), chat, input, streaming. Open source, shadcn-registry install, no runtime lock-in.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fweb-design\u002Fagentic-webdesign-agent-elements\u002FSKILL.md",[141,142],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},{"categoryNo":111,"categoryName":112,"taxonomyType":113,"taxonomyTypeDesc":114},[117,144,121,145,146,147,123,148,149,150,151,152,153,154,155,156,157,158,159,160],"elements","agentic webdesign agent elements","MCP","ai agent","registry","search","streaming","open source","open","Bash","plan","subagent","edit","install","input","lock","source",{"skillNo":162,"name":163,"nameZh":6,"description":164,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":165,"categories":166,"keywords":171,"publishedAt":36},"01M6JFCQC7H65M9QJ6TRE71BS1","vercel-deployment","Deploy static sites and frontends to Vercel — handles both CLI and REST API paths, including the CLI token sanitization workaround.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fvercel-deployment\u002FSKILL.md",[167,170],{"categoryNo":168,"categoryName":169,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000011","运维与部署",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191],"deployment","vercel deployment","vercel","macos","cli","linux","windows","deploy","vercel deploy","REST","api","site","deploy to vercel","token","rest api","host","sites","paths","sanitization","static site",{"skillNo":193,"name":194,"nameZh":6,"description":195,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":196,"categories":197,"keywords":199,"publishedAt":36},"01M6JFCM4SMTXBM5A01BK2YQG1","software-quality-workflows","Umbrella workflow for TDD, debugging, code simplification, spikes, pre-commit review, and debugger-assisted investigation.","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Fsoftware-quality-workflows\u002FSKILL.md",[198],{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216],"workflows","quality","software","software quality workflows","review","tdd","workflow","commit","debugging","code","debugger","pre-commit","investigation","code simplification","user","simplification","for",{"skillNo":218,"name":219,"nameZh":6,"description":220,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":6,"repositoryNo":12,"starsCount":13,"licenseSpdxId":14,"licenseFileUrl":6,"sourceHtmlUrl":221,"categories":222,"keywords":230,"publishedAt":36},"01M6JFCGD0M6CEATY01W7YN6DB","react-component-refactoring","Safely refactor large React components into smaller, maintainable pieces using proven patterns","https:\u002F\u002Fgithub.com\u002FS3YED\u002Fappie-kit\u002Fblob\u002Fmaster\u002Fskills\u002Fsoftware-development\u002Freact-component-refactoring\u002FSKILL.md",[223,226,229],{"categoryNo":224,"categoryName":225,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":227,"categoryName":228,"taxonomyType":20,"taxonomyTypeDesc":21},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":23,"categoryName":24,"taxonomyType":20,"taxonomyTypeDesc":21},[231,232,233,234,235,236,237,238,175,239,240,123,241,178,242,209,243,244,245,246],"react","component","refactoring","component refactoring","react component","react component refactoring","frontend","writing","safe","typescript","react components","modular","refactor","simplify","patterns","test-driven-development"]