Generate React, Vue, or HTML code from Figma designs using Anima SDK, automate pipelines with CI/CD via GitHub Actions, optimize API costs and performance with caching and throttling, debug errors, secure tokens, set up local dev loops with Vite previews, and deploy serverless APIs to Vercel or GCP.
npx claudepluginhub jeremylongshore/claude-code-plugins-plus-skills --plugin anima-packApply production-ready patterns for the Anima SDK design-to-code pipeline. Use when building reusable Anima client wrappers, implementing output caching, or establishing team standards for design-to-code automation. Trigger: "anima SDK patterns", "anima best practices", "anima code patterns".
Secure Anima and Figma tokens for design-to-code pipelines. Use when protecting API credentials, restricting Figma access scope, or hardening CI/CD design automation pipelines. Trigger: "anima security", "anima token safety", "figma token security".
Upgrade @animaapp/anima-sdk versions and handle API changes. Use when upgrading SDK versions, migrating from the Figma plugin workflow to SDK-based automation, or adapting to new Anima API features. Trigger: "anima upgrade", "anima migration", "anima SDK update".
Use Figma webhooks to trigger automatic Anima code generation on design changes. Use when building event-driven design-to-code pipelines, auto-generating components when Figma files change, or integrating design updates into CI. Trigger: "anima webhook", "figma webhook", "anima auto-generate on change".
Configure CI/CD pipeline for automated Figma-to-code generation with Anima. Use when automating design-to-code in GitHub Actions, setting up PR-based component generation, or integrating Anima into design handoff workflows. Trigger: "anima CI", "anima GitHub Actions", "anima automated generation".
Diagnose and fix common Anima SDK design-to-code errors. Use when encountering Figma token errors, code generation failures, node not found issues, or output quality problems. Trigger: "anima error", "anima not working", "anima debug", "figma to code error".
Implement reference architecture for Anima design-to-code automation. Use when designing a design system automation pipeline, structuring a Figma-to-React project, or planning team-scale design handoff. Trigger: "anima architecture", "design-to-code architecture", "anima project structure", "figma automation architecture".
Build automated Figma-to-React pipeline with the Anima SDK. Use when automating design handoff, building CI/CD design-to-code workflows, or creating a design system code generator from Figma components. Trigger: "anima design pipeline", "figma to react pipeline", "automated design handoff", "anima component generator".
Clone websites to React/HTML code and customize Anima output with AI. Use when converting live websites to code, customizing generated components, or building design-system-aware code from URL screenshots. Trigger: "anima website to code", "anima URL clone", "anima AI customization", "website to react", "clone website to code".
Optimize Anima API costs through caching, incremental generation, and tier selection. Use when managing Anima API usage, reducing unnecessary code generations, or right-sizing your Anima plan for team size. Trigger: "anima cost", "anima pricing", "anima budget", "anima API usage".
Collect Anima SDK debug evidence for support tickets and troubleshooting. Use when filing Anima support requests, debugging code generation issues, or collecting diagnostic data for the Anima team. Trigger: "anima debug bundle", "anima support ticket", "anima diagnostics".
Deploy Anima design-to-code service as a backend API endpoint. Use when building a design-to-code microservice, deploying Anima SDK as a serverless function, or creating an internal design tool API. Trigger: "deploy anima", "anima service deploy", "anima serverless".
Generate React/Vue/HTML code from a Figma design using the Anima SDK. Use when testing design-to-code conversion, learning Anima's code output format, or building your first automated design-to-code pipeline. Trigger: "anima hello world", "anima example", "figma to react", "figma to code", "anima generate code".
Install the Anima SDK and configure authentication for Figma-to-code generation. Use when setting up design-to-code automation, configuring Figma token access, or initializing the @animaapp/anima-sdk for server-side code generation. Trigger: "install anima", "setup anima", "anima auth", "anima figma token".
Set up iterative design-to-code development loop with Anima SDK. Use when rapidly iterating on Figma-to-code output, comparing framework outputs, or building a local preview server for generated components. Trigger: "anima local dev", "anima dev loop", "anima preview", "anima iteration".
Optimize Anima code generation performance with caching, parallelism, and output tuning. Use when reducing generation latency, optimizing batch component generation, or improving generated code quality for production use. Trigger: "anima performance", "anima slow", "anima optimization", "anima caching".
Production readiness checklist for Anima design-to-code pipelines. Use when deploying automated design-to-code services, preparing CI/CD Figma-to-code automation, or validating output quality before production. Trigger: "anima production", "anima go-live", "anima prod checklist".
Implement rate limiting for Anima API code generation requests. Use when batching component generation, handling rate limit errors, or optimizing API throughput for large design systems. Trigger: "anima rate limit", "anima throttling", "anima batch generation".
Claude Code skill pack for Figma (30 skills)
Share bugs, ideas, or general feedback.
37 specialist skills for coding agents — orchestrator, backend, frontend, QA, security, deploy, detective-spec (reverse engineering for legacy), static-analysis (semgrep+codeql), skill-author (meta-skill with eval), web-asset-generator (favicons/OG/PWA), tdd-engineer (red-green-refactor enforced), architecture-deepener (deep modules) and more. Two pipeline flows: /pipeline (classic) and /pipeline-discovery (with grill-me + PRD + issues + TDD). Includes model routing policy, vertical-slices policy, writing-clarity policy, lifecycle hooks, and full .bot/ install via /devkit-install-fv.
Select semantically appropriate icons for websites using Lucide, Heroicons, or Phosphor. Covers concept-to-icon mapping, React/HTML templates, and tree-shaking patterns. Use when: building feature sections, service grids, contact info, navigation, or any UI needing icons. Prevents emoji usage, ensures consistency.
Advanced frontend design plugin with interactive wizard, trend research, moodboard creation, color/typography selection, and browser-based inspiration analysis
Frontend component development with accessibility and responsive design
Complete PR workflow from commit to production with validation