Imported from jeremylongshore/tons-of-skills-marketplace (skills/.curated/anima-deploy-integration/SKILL.md). Install upstream with npx skills add jeremylongshore/tons-of-skills-marketplace --skill anima-deploy-integration. Copyright stays with the author (MIT).

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

// 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: files.length });
  } catch (err: any) {
    res.status(500).json({ error: err.message });
  }
});

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

Step 2: Vercel Serverless Function

// 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

# 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 --allow-unauthenticated

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

Resources

• Anima API
• Anima SDK Example Server

Next Steps

For webhook integration, see anima-webhooks-events.