[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6F6V3GJYY6P04PVE92DYV7R":3,"skill-same:01M6F6V3GJYY6P04PVE92DYV7R":90},{"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":67,"commitSha":68,"skillDirectory":69,"forksCount":70,"repositoryHtmlUrl":71,"repositoryHomepageUrl":72,"ownerHtmlUrl":73,"ownerBlogUrl":6,"ownerDescription":74,"updatedAt":75,"install":76,"resources":89},"01M6F6V3GJYY6P04PVE92DYV7R","anima-install-auth",null,"Install the Anima SDK and configure authentication for Figma-to-code generation.\nUse when setting up design-to-code automation, configuring Figma token access,\nor initializing the @animaapp\u002Fanima-sdk for server-side code generation.\nTrigger: \"install anima\", \"setup anima\", \"anima auth\", \"anima figma token\".","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-install-auth\u002FSKILL.md",[18,23,26,31],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"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],"auth","anima install auth","install","write","design","anima","io","token","code-generation","up","code","edit","authentication","read","configure","access","Bash","Code Generation","server","figma","2026-11-10 10:12:30",false,"---\nname: anima-install-auth\ndescription: |\n  Install the Anima SDK and configure authentication for Figma-to-code generation.\n  Use when setting up design-to-code automation, configuring Figma token access,\n  or initializing the @animaapp\u002Fanima-sdk for server-side code generation.\n  Trigger: \"install anima\", \"setup anima\", \"anima auth\", \"anima figma token\".\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, code-generation]\ncompatible-with: claude-code\n---\n\n# Anima Install & Auth\n\n## Overview\n\nInstall `@animaapp\u002Fanima-sdk` and configure authentication tokens. Anima converts Figma designs into production-ready React, Vue, or HTML code with Tailwind, MUI, AntD, or shadcn styling. The SDK runs server-side only.\n\n## Prerequisites\n\n- Node.js 18+ (SDK is server-side only)\n- Figma account with API access\n- Anima API token (request at [animaapp.com](https:\u002F\u002Fwww.animaapp.com))\n- Figma Personal Access Token\n\n## Instructions\n\n### Step 1: Install the Anima SDK\n\n```bash\nnpm install @animaapp\u002Fanima-sdk\n```\n\n### Step 2: Get Your Tokens\n\n```bash\n# 1. Figma Personal Access Token:\n#    Figma > Settings > Account > Personal Access Tokens > Generate\n\n# 2. Anima API Token:\n#    Request from Anima team (currently limited partner access)\n#    https:\u002F\u002Fdocs.animaapp.com\u002Fdocs\u002Fanima-api\n\n# Store securely\ncat > .env \u003C\u003C 'EOF'\nANIMA_TOKEN=your-anima-api-token\nFIGMA_TOKEN=your-figma-personal-access-token\nEOF\n\necho \".env\" >> .gitignore\nchmod 600 .env\n```\n\n### Step 3: Initialize and Verify\n\n```typescript\n\u002F\u002F src\u002Fanima-client.ts\nimport { Anima } from '@animaapp\u002Fanima-sdk';\n\nconst anima = new Anima({\n  auth: {\n    token: process.env.ANIMA_TOKEN!,\n  },\n});\n\n\u002F\u002F Verify connection by generating code from a known Figma file\nasync function verifySetup() {\n  try {\n    const { files } = await anima.generateCode({\n      fileKey: 'your-figma-file-key',     \u002F\u002F From Figma URL: figma.com\u002Ffile\u002F{fileKey}\u002F...\n      figmaToken: process.env.FIGMA_TOKEN!,\n      nodesId: ['1:2'],                    \u002F\u002F Specific node to convert\n      settings: {\n        language: 'typescript',\n        framework: 'react',\n        styling: 'tailwind',\n      },\n    });\n\n    console.log(`Generated ${files.length} files`);\n    for (const file of files) {\n      console.log(`  ${file.fileName} (${file.content.length} chars)`);\n    }\n    return true;\n  } catch (error) {\n    console.error('Setup verification failed:', error);\n    return false;\n  }\n}\n\nverifySetup();\n```\n\n### Step 4: Get Your Figma File Key\n\n```\nFigma URL format:\nhttps:\u002F\u002Fwww.figma.com\u002Ffile\u002FABC123xyz\u002FMy-Design?node-id=1:2\n\nFile Key: ABC123xyz\nNode ID: 1:2 (from the URL query parameter)\n```\n\n## Output\n\n- `@animaapp\u002Fanima-sdk` installed\n- Anima token and Figma token configured in `.env`\n- Verified code generation from a Figma design\n- Understanding of file key and node ID extraction\n\n## Error Handling\n\n| Error | Cause | Solution |\n|-------|-------|----------|\n| `Invalid Anima token` | Token not provisioned | Request token from Anima team |\n| `Invalid Figma token` | PAT expired or wrong | Generate new PAT in Figma Settings |\n| `File not found` | Wrong file key | Extract key from Figma URL correctly |\n| `Node not found` | Invalid node ID | Use Figma Dev Mode to get node IDs |\n| `SDK not for browser` | Used in client-side code | SDK is server-side only |\n\n## Resources\n\n- [Anima API Docs](https:\u002F\u002Fdocs.animaapp.com\u002Fdocs\u002Fanima-api)\n- [Anima SDK GitHub](https:\u002F\u002Fgithub.com\u002FAnimaApp\u002Fanima-sdk)\n- [Figma API Auth](https:\u002F\u002Fwww.figma.com\u002Fdevelopers\u002Fapi#access-tokens)\n- [Anima npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@animaapp\u002Fanima-sdk)\n\n## Next Steps\n\nProceed to `anima-hello-world` for your first design-to-code conversion.\n\n","# Anima Install & Auth\n\n## Overview\n\nInstall `@animaapp\u002Fanima-sdk` and configure authentication tokens. Anima converts Figma designs into production-ready React, Vue, or HTML code with Tailwind, MUI, AntD, or shadcn styling. The SDK runs server-side only.\n\n## Prerequisites\n\n- Node.js 18+ (SDK is server-side only)\n- Figma account with API access\n- Anima API token (request at [animaapp.com](https:\u002F\u002Fwww.animaapp.com))\n- Figma Personal Access Token\n\n## Instructions\n\n### Step 1: Install the Anima SDK\n\n```bash\nnpm install @animaapp\u002Fanima-sdk\n```\n\n### Step 2: Get Your Tokens\n\n```bash\n# 1. Figma Personal Access Token:\n#    Figma > Settings > Account > Personal Access Tokens > Generate\n\n# 2. Anima API Token:\n#    Request from Anima team (currently limited partner access)\n#    https:\u002F\u002Fdocs.animaapp.com\u002Fdocs\u002Fanima-api\n\n# Store securely\ncat > .env \u003C\u003C 'EOF'\nANIMA_TOKEN=your-anima-api-token\nFIGMA_TOKEN=your-figma-personal-access-token\nEOF\n\necho \".env\" >> .gitignore\nchmod 600 .env\n```\n\n### Step 3: Initialize and Verify\n\n```typescript\n\u002F\u002F src\u002Fanima-client.ts\nimport { Anima } from '@animaapp\u002Fanima-sdk';\n\nconst anima = new Anima({\n  auth: {\n    token: process.env.ANIMA_TOKEN!,\n  },\n});\n\n\u002F\u002F Verify connection by generating code from a known Figma file\nasync function verifySetup() {\n  try {\n    const { files } = await anima.generateCode({\n      fileKey: 'your-figma-file-key',     \u002F\u002F From Figma URL: figma.com\u002Ffile\u002F{fileKey}\u002F...\n      figmaToken: process.env.FIGMA_TOKEN!,\n      nodesId: ['1:2'],                    \u002F\u002F Specific node to convert\n      settings: {\n        language: 'typescript',\n        framework: 'react',\n        styling: 'tailwind',\n      },\n    });\n\n    console.log(`Generated ${files.length} files`);\n    for (const file of files) {\n      console.log(`  ${file.fileName} (${file.content.length} chars)`);\n    }\n    return true;\n  } catch (error) {\n    console.error('Setup verification failed:', error);\n    return false;\n  }\n}\n\nverifySetup();\n```\n\n### Step 4: Get Your Figma File Key\n\n```\nFigma URL format:\nhttps:\u002F\u002Fwww.figma.com\u002Ffile\u002FABC123xyz\u002FMy-Design?node-id=1:2\n\nFile Key: ABC123xyz\nNode ID: 1:2 (from the URL query parameter)\n```\n\n## Output\n\n- `@animaapp\u002Fanima-sdk` installed\n- Anima token and Figma token configured in `.env`\n- Verified code generation from a Figma design\n- Understanding of file key and node ID extraction\n\n## Error Handling\n\n| Error | Cause | Solution |\n|-------|-------|----------|\n| `Invalid Anima token` | Token not provisioned | Request token from Anima team |\n| `Invalid Figma token` | PAT expired or wrong | Generate new PAT in Figma Settings |\n| `File not found` | Wrong file key | Extract key from Figma URL correctly |\n| `Node not found` | Invalid node ID | Use Figma Dev Mode to get node IDs |\n| `SDK not for browser` | Used in client-side code | SDK is server-side only |\n\n## Resources\n\n- [Anima API Docs](https:\u002F\u002Fdocs.animaapp.com\u002Fdocs\u002Fanima-api)\n- [Anima SDK GitHub](https:\u002F\u002Fgithub.com\u002FAnimaApp\u002Fanima-sdk)\n- [Figma API Auth](https:\u002F\u002Fwww.figma.com\u002Fdevelopers\u002Fapi#access-tokens)\n- [Anima npm](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@animaapp\u002Fanima-sdk)\n\n## Next Steps\n\nProceed to `anima-hello-world` for your first design-to-code conversion.\n\n",{"name":5,"tags":60,"author":62,"license":15,"version":63,"description":64,"allowed-tools":65,"compatible-with":66},[61,39,54,40,43],"saas","Jeremy Longshore \u003Cjeremy@intentsolutions.io>","1.0.0","Install the Anima SDK and configure authentication for Figma-to-code generation.\nUse when setting up design-to-code automation, configuring Figma token access,\nor initializing the @animaapp\u002Fanima-sdk for server-side code generation.\nTrigger: \"install anima\", \"setup anima\", \"anima auth\", \"anima figma token\".\n","Read, Write, Edit, Bash(npm:*), Grep","claude-code","main","def8531e65114c0fca8fb8551c1871ee0eed705c","skills\u002Fjeremylongshore\u002Fclaude-code-plugins-plus-skills\u002Fanima-install-auth",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":77,"prompt":87,"zipAvailable":88},[78,81,84],{"tool":79,"command":80},"npx","npx skills add ComeOnOliver\u002Fskillshub --skill anima-install-auth",{"tool":82,"command":83},"bunx","bunx skills add ComeOnOliver\u002Fskillshub --skill anima-install-auth",{"tool":85,"command":86},"pnpm","pnpm dlx skills add ComeOnOliver\u002Fskillshub --skill anima-install-auth","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fjeremylongshore\u002Fclaude-code-plugins-plus-skills\u002Fanima-install-auth\u002FSKILL.md",true,[],[91,101,111,120,126,133],{"skillNo":92,"name":93,"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":94,"categories":95,"keywords":97,"publishedAt":55},"01M6FKJN13GMG4KY57J3QD8GY5","model-hierarchy-skill","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzscole\u002Fmodel-hierarchy-skill\u002Fmodel-hierarchy-skill\u002FSKILL.md",[96],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[98,99,100],"model","model hierarchy","model hierarchy skill",{"skillNo":102,"name":103,"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":104,"categories":105,"keywords":107,"publishedAt":55},"01M6FKJJJ6GCAMR4PPPRD12M5X","zoom-mcp","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-mcp\u002FSKILL.md",[106],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[108,109,110],"MCP","zoom","zoom mcp",{"skillNo":112,"name":113,"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":114,"categories":115,"keywords":116,"publishedAt":55},"01M6FKJE3KYT3KPEZMEEHYKA6K","zoom-apps-sdk","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fzoom-apps-sdk\u002FSKILL.md",[],[117,118,119,109],"sdk","zoom apps sdk","apps",{"skillNo":121,"name":122,"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":123,"categories":124,"keywords":125,"publishedAt":55},"01M6FKJ9EDH9Q5VWDF8HAJRSP0","windows","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwindows\u002FSKILL.md",[],[122],{"skillNo":127,"name":128,"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":129,"categories":130,"keywords":132,"publishedAt":55},"01M6FKJ666BEEFC3AE9GJ72Q93","whiteboard","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwhiteboard\u002FSKILL.md",[131],{"categoryNo":24,"categoryName":25,"taxonomyType":21,"taxonomyTypeDesc":22},[128],{"skillNo":134,"name":135,"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":136,"categories":137,"keywords":138,"publishedAt":55},"01M6FKJ21WFCDGTJQ2Q91T9DVW","websockets","https:\u002F\u002Fgithub.com\u002FComeOnOliver\u002Fskillshub\u002Fblob\u002Fmain\u002Fskills\u002Fzoom\u002Fskills\u002Fwebsockets\u002FSKILL.md",[],[135]]