[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6F6T0VM4C85AXFF7A1PF2R5":3,"skill-same:01M6F6T0VM4C85AXFF7A1PF2R5":92},{"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":34,"publishedAt":55,"linkOnly":56,"markdownContent":57,"markdownBody":58,"frontMatter":59,"refName":69,"commitSha":70,"skillDirectory":71,"forksCount":72,"repositoryHtmlUrl":73,"repositoryHomepageUrl":74,"ownerHtmlUrl":75,"ownerBlogUrl":6,"ownerDescription":76,"updatedAt":77,"install":78,"resources":91},"01M6F6T0VM4C85AXFF7A1PF2R5","anima-ci-integration",null,"Configure CI\u002FCD pipeline for automated Figma-to-code generation with Anima.\nUse when automating design-to-code in GitHub Actions, setting up PR-based\ncomponent generation, or integrating Anima into design handoff workflows.\nTrigger: \"anima CI\", \"anima GitHub Actions\", \"anima automated generation\".","ComeOnOliver\u002Fskillshub","ComeOnOliver","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F43215937?v=4","01M6E5JNFECJAAVFE0W7SMWWD2","Haoran Shu","01M6E5JNNDQS7AJZDYFQ8TPZCK",67,"MIT","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fjeremylongshore\u002Fclaude-code-plugins-plus-skills\u002Fanima-ci-integration\u002FSKILL.md",[18,23,26,31],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000011","运维与部署","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":27,"categoryName":28,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":32,"categoryName":33,"taxonomyType":29,"taxonomyTypeDesc":30},"01JBSEEDCAT000000000000032","设计师",[35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54],"anima ci integration","integration","ci","pipeline","CI\u002FCD","io","up","edit","write","read","configure","Bash","design","Code Generation","github actions","actions","figma","code","component","workflows","2026-11-10 10:12:30",false,"---\nname: anima-ci-integration\ndescription: |\n  Configure CI\u002FCD pipeline for automated Figma-to-code generation with Anima.\n  Use when automating design-to-code in GitHub Actions, setting up PR-based\n  component generation, or integrating Anima into design handoff workflows.\n  Trigger: \"anima CI\", \"anima GitHub Actions\", \"anima automated generation\".\nallowed-tools: Read, Write, Edit, Bash(npm:*), Grep\nversion: 1.0.0\nlicense: MIT\nauthor: Jeremy Longshore \u003Cjeremy@intentsolutions.io>\ntags: [saas, design, figma, anima, ci-cd]\ncompatible-with: claude-code\n---\n\n# Anima CI Integration\n\n## Instructions\n\n### Step 1: GitHub Actions Workflow\n\n```yaml\n# .github\u002Fworkflows\u002Fdesign-sync.yml\nname: Design-to-Code Sync\n\non:\n  schedule:\n    - cron: '0 9 * * 1-5'  # Weekdays at 9am\n  workflow_dispatch:         # Manual trigger\n\njobs:\n  generate:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\u002Fcheckout@v4\n      - uses: actions\u002Fsetup-node@v4\n        with: { node-version: '20' }\n      - run: npm ci\n      - name: Generate components from Figma\n        env:\n          ANIMA_TOKEN: ${{ secrets.ANIMA_TOKEN }}\n          FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}\n          FIGMA_FILE_KEY: ${{ secrets.FIGMA_FILE_KEY }}\n        run: npx tsx scripts\u002Fgenerate-components.ts\n      - name: Lint generated code\n        run: npx eslint src\u002Fcomponents\u002Fgenerated\u002F --fix\n      - name: Check for changes\n        id: changes\n        run: |\n          if git diff --quiet src\u002Fcomponents\u002Fgenerated\u002F; then\n            echo \"changed=false\" >> $GITHUB_OUTPUT\n          else\n            echo \"changed=true\" >> $GITHUB_OUTPUT\n          fi\n      - name: Create PR with generated components\n        if: steps.changes.outputs.changed == 'true'\n        run: |\n          git checkout -b design-sync\u002F$(date +%Y%m%d)\n          git add src\u002Fcomponents\u002Fgenerated\u002F\n          git commit -m \"chore: sync generated components from Figma\"\n          git push -u origin HEAD\n          gh pr create --title \"Design sync: updated generated components\" \\\n            --body \"Auto-generated from Figma via Anima SDK\"\n        env:\n          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n```\n\n### Step 2: Generation Script for CI\n\n```typescript\n\u002F\u002F scripts\u002Fgenerate-components.ts\nimport { Anima } from '@animaapp\u002Fanima-sdk';\nimport fs from 'fs';\n\nconst anima = new Anima({ auth: { token: process.env.ANIMA_TOKEN! } });\n\nconst COMPONENTS = [\n  { nodeId: '1:2', name: 'Hero' },\n  { nodeId: '3:4', name: 'Card' },\n  { nodeId: '5:6', name: 'Navigation' },\n];\n\nasync function main() {\n  const outputDir = 'src\u002Fcomponents\u002Fgenerated';\n  fs.mkdirSync(outputDir, { recursive: true });\n\n  for (const comp of COMPONENTS) {\n    const { files } = await anima.generateCode({\n      fileKey: process.env.FIGMA_FILE_KEY!,\n      figmaToken: process.env.FIGMA_TOKEN!,\n      nodesId: [comp.nodeId],\n      settings: { language: 'typescript', framework: 'react', styling: 'tailwind', uiLibrary: 'shadcn' },\n    });\n\n    for (const file of files) {\n      fs.writeFileSync(`${outputDir}\u002F${file.fileName}`, file.content);\n    }\n    console.log(`Generated: ${comp.name}`);\n    await new Promise(r => setTimeout(r, 6000)); \u002F\u002F Rate limit\n  }\n}\n\nmain().catch(err => { console.error(err); process.exit(1); });\n```\n\n## Output\n\n- Scheduled GitHub Actions workflow for design-to-code sync\n- Auto-PR creation when generated code changes\n- ESLint auto-fix on generated output\n- Rate-limited generation script for CI\n\n## Resources\n\n- [Anima API](https:\u002F\u002Fdocs.animaapp.com\u002Fdocs\u002Fanima-api)\n- [GitHub Actions Secrets](https:\u002F\u002Fdocs.github.com\u002Fen\u002Factions\u002Fsecurity-guides\u002Fencrypted-secrets)\n\n## Next Steps\n\nFor deployment, see `anima-deploy-integration`.\n\n","# Anima CI Integration\n\n## Instructions\n\n### Step 1: GitHub Actions Workflow\n\n```yaml\n# .github\u002Fworkflows\u002Fdesign-sync.yml\nname: Design-to-Code Sync\n\non:\n  schedule:\n    - cron: '0 9 * * 1-5'  # Weekdays at 9am\n  workflow_dispatch:         # Manual trigger\n\njobs:\n  generate:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions\u002Fcheckout@v4\n      - uses: actions\u002Fsetup-node@v4\n        with: { node-version: '20' }\n      - run: npm ci\n      - name: Generate components from Figma\n        env:\n          ANIMA_TOKEN: ${{ secrets.ANIMA_TOKEN }}\n          FIGMA_TOKEN: ${{ secrets.FIGMA_TOKEN }}\n          FIGMA_FILE_KEY: ${{ secrets.FIGMA_FILE_KEY }}\n        run: npx tsx scripts\u002Fgenerate-components.ts\n      - name: Lint generated code\n        run: npx eslint src\u002Fcomponents\u002Fgenerated\u002F --fix\n      - name: Check for changes\n        id: changes\n        run: |\n          if git diff --quiet src\u002Fcomponents\u002Fgenerated\u002F; then\n            echo \"changed=false\" >> $GITHUB_OUTPUT\n          else\n            echo \"changed=true\" >> $GITHUB_OUTPUT\n          fi\n      - name: Create PR with generated components\n        if: steps.changes.outputs.changed == 'true'\n        run: |\n          git checkout -b design-sync\u002F$(date +%Y%m%d)\n          git add src\u002Fcomponents\u002Fgenerated\u002F\n          git commit -m \"chore: sync generated components from Figma\"\n          git push -u origin HEAD\n          gh pr create --title \"Design sync: updated generated components\" \\\n            --body \"Auto-generated from Figma via Anima SDK\"\n        env:\n          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n```\n\n### Step 2: Generation Script for CI\n\n```typescript\n\u002F\u002F scripts\u002Fgenerate-components.ts\nimport { Anima } from '@animaapp\u002Fanima-sdk';\nimport fs from 'fs';\n\nconst anima = new Anima({ auth: { token: process.env.ANIMA_TOKEN! } });\n\nconst COMPONENTS = [\n  { nodeId: '1:2', name: 'Hero' },\n  { nodeId: '3:4', name: 'Card' },\n  { nodeId: '5:6', name: 'Navigation' },\n];\n\nasync function main() {\n  const outputDir = 'src\u002Fcomponents\u002Fgenerated';\n  fs.mkdirSync(outputDir, { recursive: true });\n\n  for (const comp of COMPONENTS) {\n    const { files } = await anima.generateCode({\n      fileKey: process.env.FIGMA_FILE_KEY!,\n      figmaToken: process.env.FIGMA_TOKEN!,\n      nodesId: [comp.nodeId],\n      settings: { language: 'typescript', framework: 'react', styling: 'tailwind', uiLibrary: 'shadcn' },\n    });\n\n    for (const file of files) {\n      fs.writeFileSync(`${outputDir}\u002F${file.fileName}`, file.content);\n    }\n    console.log(`Generated: ${comp.name}`);\n    await new Promise(r => setTimeout(r, 6000)); \u002F\u002F Rate limit\n  }\n}\n\nmain().catch(err => { console.error(err); process.exit(1); });\n```\n\n## Output\n\n- Scheduled GitHub Actions workflow for design-to-code sync\n- Auto-PR creation when generated code changes\n- ESLint auto-fix on generated output\n- Rate-limited generation script for CI\n\n## Resources\n\n- [Anima API](https:\u002F\u002Fdocs.animaapp.com\u002Fdocs\u002Fanima-api)\n- [GitHub Actions Secrets](https:\u002F\u002Fdocs.github.com\u002Fen\u002Factions\u002Fsecurity-guides\u002Fencrypted-secrets)\n\n## Next Steps\n\nFor deployment, see `anima-deploy-integration`.\n\n",{"name":5,"tags":60,"author":64,"license":15,"version":65,"description":66,"allowed-tools":67,"compatible-with":68},[61,47,51,62,63],"saas","anima","ci-cd","Jeremy Longshore \u003Cjeremy@intentsolutions.io>","1.0.0","Configure CI\u002FCD pipeline for automated Figma-to-code generation with Anima.\nUse when automating design-to-code in GitHub Actions, setting up PR-based\ncomponent generation, or integrating Anima into design handoff workflows.\nTrigger: \"anima CI\", \"anima GitHub Actions\", \"anima automated generation\".\n","Read, Write, Edit, Bash(npm:*), Grep","claude-code","main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fjeremylongshore\u002Fclaude-code-plugins-plus-skills\u002Fanima-ci-integration",24,"https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub","https:\u002F\u002Fskillshub.wtf","https:\u002F\u002Fgithub.com\u002FComeOnOliver","AI & Blockchain Engineer\r\n","2026-06-24 22:07:19",{"source":8,"skillName":5,"commands":79,"prompt":89,"zipAvailable":90},[80,83,86],{"tool":81,"command":82},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill anima-ci-integration",{"tool":84,"command":85},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill anima-ci-integration",{"tool":87,"command":88},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill anima-ci-integration","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fjeremylongshore\u002Fclaude-code-plugins-plus-skills\u002Fanima-ci-integration\u002FSKILL.md",true,[],[93,105,115,124,130,137],{"skillNo":94,"name":95,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":96,"categories":97,"keywords":101,"publishedAt":55},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[98],{"categoryNo":99,"categoryName":100,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[102,103,104],"model","model hierarchy","model hierarchy skill",{"skillNo":106,"name":107,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":108,"categories":109,"keywords":111,"publishedAt":55},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[110],{"categoryNo":99,"categoryName":100,"taxonomyType":21,"taxonomyTypeDesc":22},[112,113,114],"MCP","zoom","zoom mcp",{"skillNo":116,"name":117,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":120,"publishedAt":55},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[121,122,123,113],"sdk","zoom apps sdk","apps",{"skillNo":125,"name":126,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":127,"categories":128,"keywords":129,"publishedAt":55},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[126],{"skillNo":131,"name":132,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":133,"categories":134,"keywords":136,"publishedAt":55},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[135],{"categoryNo":99,"categoryName":100,"taxonomyType":21,"taxonomyTypeDesc":22},[132],{"skillNo":138,"name":139,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":140,"categories":141,"keywords":142,"publishedAt":55},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[139]]