---
name: anima-deploy-integration
description: '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 with: "deploy anima", "anima service deploy", "anima serverless".

  '
allowed-tools: Read, Write, Edit, Bash(vercel:*), Bash(gcloud:*), Bash(docker:*)
version: 2.0.0
argument-hint: "[deployment-target]"
model: inherit
effort: high
license: MIT
author: Jeremy Longshore <jeremy@intentsolutions.io>
tags:
- saas
- design
- figma
- anima
- deployment
compatibility: Requires Node.js 20+, approved Anima API access, current Anima SDK documentation, and authorized Figma or website source access
---
# Anima Deploy Integration

## Overview

Deploy the Anima SDK as a backend service. The SDK is server-side only, so deploy it behind an API endpoint that accepts Figma file/node references and returns generated code.

## Prerequisites

- A private or authenticated service boundary with an allowlisted design-file
  registry; do not expose arbitrary `fileKey` and `nodesId` generation to the
  public internet.
- Managed Anima and Figma secrets, separate staging/production credentials,
  request limits, and an audit trail that excludes token values and design
  content.
- An approved generated-output path, validation pipeline, and rollback target
  for every deployment revision.

## Instructions

### Step 1: Express API Wrapper

```typescript
// src/server.ts
import express from 'express';
import { Anima } from '@animaapp/anima-sdk';

const app = express();
app.use(express.json());

const anima = new Anima({ auth: { token: process.env.ANIMA_TOKEN! } });

app.post('/api/generate', async (req, res) => {
  const { fileKey, nodesId, settings } = req.body;

  if (!fileKey || !nodesId?.length) {
    return res.status(400).json({ error: 'fileKey and nodesId required' });
  }

  try {
    const { files } = await anima.generateCode({
      fileKey,
      figmaToken: process.env.FIGMA_TOKEN!,
      nodesId,
      settings: settings || { language: 'typescript', framework: 'react', styling: 'tailwind' },
    });
    res.json({ files, count: Object.keys(files).length });
  } catch (err: any) {
    res.status(502).json({ error: 'Generation failed', requestId: req.id });
  }
});

app.get('/health', (_req, res) => res.json({ status: 'ok' }));
app.listen(3000, () => console.log('Anima service on :3000'));
```

### Step 2: Vercel Serverless Function

```typescript
// api/generate.ts
import { Anima } from '@animaapp/anima-sdk';

const anima = new Anima({ auth: { token: process.env.ANIMA_TOKEN! } });

export default async function handler(req: any, res: any) {
  if (req.method !== 'POST') return res.status(405).end();

  const { fileKey, nodesId, settings } = req.body;
  const { files } = await anima.generateCode({
    fileKey, figmaToken: process.env.FIGMA_TOKEN!, nodesId,
    settings: settings || { language: 'typescript', framework: 'react', styling: 'tailwind' },
  });
  res.json({ files });
}
```

### Step 3: Deploy Commands

```bash
# Vercel
vercel secrets add anima_token "$ANIMA_TOKEN"
vercel secrets add figma_token "$FIGMA_TOKEN"
vercel --prod

# Cloud Run
gcloud run deploy anima-service \
  --source . \
  --set-secrets=ANIMA_TOKEN=anima-token:latest,FIGMA_TOKEN=figma-token:latest \
  --region us-central1 --no-allow-unauthenticated
```

## Tool Discipline

Use Read and Grep to inspect the existing integration and generated diff before changing anything. Use Write or Edit only inside the approved generated-code, test, or configuration paths. Use the declared Bash commands only for the explicit install, validation, or diagnostic steps in this workflow; never print tokens, source designs, generated source, or private website captures.

## Output

- Express API wrapping Anima SDK for internal design tooling
- Vercel serverless function for lightweight deployment
- Cloud Run deployment with Secret Manager

## Examples

Deploy the service to a staging environment behind the organization’s existing
identity proxy and invoke `/api/generate` with one allowlisted file/node pair.
Verify the request is authorized, output remains in the approved generated-code
location, logs contain only request metadata, and generated files pass the
downstream formatter and test gate before a human reviews them. If an unauthenticated
caller, unknown node, or secret-binding error reaches the service, reject the
request, alert the operator, and keep the prior revision active rather than
opening broad access or embedding credentials in the client.

## Error Handling

| Failure | Response |
|---------|----------|
| Caller is not authenticated or file/node is not allowlisted | Reject before contacting Anima or Figma. |
| Managed secret is unavailable | Fail closed and repair the deployment binding; never use a plaintext fallback. |
| Generation or validation fails | Return a sanitized failure, preserve the prior revision, and quarantine the output. |
| Rate limit or repeated bad requests occur | Apply bounded throttling and alert the owning service team. |

## Resources

- [Anima API](https://docs.animaapp.com/docs/anima-api)
- [Anima SDK Example Server](https://github.com/AnimaApp/anima-sdk)


---
Source attribution: jeremylongshore
Original project: https://github.com/jeremylongshore/claude-code-plugins-plus-skills/blob/ab85a061f7bcc039dac13ee193de7a4cd4388571/plugins/saas-packs/anima-pack/skills/anima-deploy-integration/SKILL.md
License: MIT
License information: https://opensource.org/license/mit
Original upstream instructions; downloaded from Mega AI Hub.

## Upstream license notice

MIT License

Copyright (c) 2025 Jeremy Longshore

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.



# Mega AI Hub resource metadata

Creator / publisher: jeremylongshore
Original project: https://github.com/jeremylongshore/claude-code-plugins-plus-skills/blob/ab85a061f7bcc039dac13ee193de7a4cd4388571/plugins/saas-packs/anima-pack/skills/anima-deploy-integration/SKILL.md
Attribution basis: Source repository record

Fields of work: Design, Development & Engineering, Product Management
Roles: Design System Lead, Frontend Developer, Product Designer, Product Manager, UX Designer
Specialties: API, Backend, DevOps
Tools: Docker, Figma, Vercel
Country applicability: Country not specified
Classification basis: Source catalog labels
Instruction SHA-256: cf5f87d01dcb81bcaa10386bdfd83309826fa9c5e9a899bfad8bb62933d675ca