anima-hello-world

Anima Hello World

Overview

Generate reviewable React or HTML from one approved Figma node with the backend-only @animaapp/anima-sdk. Keep credentials server-side and treat every generated file as untrusted output until its path, dependencies, build, and visual result pass review.

Prerequisites

Completed anima-install-auth setup
A Figma file with at least one frame/component
Know your file key and node ID

Instructions

Step 1: Generate React + Tailwind Code

// src/hello-world.ts
import { Anima } from '@animaapp/anima-sdk';
import fs from 'fs';
import path from 'path';

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

async function generateReactComponent() {
  const { files } = await anima.generateCode({
    fileKey: process.env.FIGMA_FILE_KEY!,     // From Figma URL
    figmaToken: process.env.FIGMA_TOKEN!,
    nodesId: [process.env.FIGMA_NODE_ID!],    // e.g., '1:2'
    settings: {
      language: 'typescript',
      framework: 'react',
      styling: 'tailwind',
      // Omit uiLibrary for vanilla React, or select a supported library.
    },
  });

  // Write generated files to disk
  const outputDir = './generated';
  fs.mkdirSync(outputDir, { recursive: true });

  for (const [fileName, file] of Object.entries(files)) {
    const filePath = path.resolve(outputDir, fileName);
    if (!filePath.startsWith(`${path.resolve(outputDir)}${path.sep}`)) {
      throw new Error(`Refusing output path: ${fileName}`);
    }
    if (file.isBinary) throw new Error(`Handle binary output separately: ${fileName}`);
    fs.mkdirSync(path.dirname(filePath), { recursive: true });
    fs.writeFileSync(filePath, file.content, { flag: 'wx' });
    console.log(`Generated: ${fileName} (${file.content.length} chars)`);
  }

  return files;
}

generateReactComponent().catch(() => {
  console.error({ failureClass: 'generation-failed' });
  process.exitCode = 1;
});

Step 2: Try Supported Output Settings

// Generate HTML with the SDK's plain_css setting.
const htmlFiles = await anima.generateCode({
  fileKey: process.env.FIGMA_FILE_KEY!,
  figmaToken: process.env.FIGMA_TOKEN!,
  nodesId: ['1:2'],
  settings: {
    language: 'javascript',
    framework: 'html',
    styling: 'plain_css',
  },
});

// Generate React + shadcn/ui
const shadcnFiles = await anima.generateCode({
  fileKey: process.env.FIGMA_FILE_KEY!,
  figmaToken: process.env.FIGMA_TOKEN!,
  nodesId: ['1:2'],
  settings: {
    language: 'typescript',
    framework: 'react',
    styling: 'tailwind',
    uiLibrary: 'shadcn',
  },
});

Step 3: Inspect Generated Output

// `files` is a record keyed by relative filename.
type GeneratedFiles = Record<string, { content: string; isBinary: boolean }>;

// Example output structure for React + Tailwind:
// generated/
// ├── HeroSection.tsx       # React component with Tailwind classes
// ├── Button.tsx            # Child components
// └── types.ts              # TypeScript interfaces (if applicable)

Step 4: Integrate into Existing Project

# Review before copying; do not execute generated package scripts.
npm run format -- --check generated
npm run typecheck

Settings Reference

Setting	Options	Default
`language`	`typescript`, `javascript`	`typescript`
`framework`	`react`, `html`	Required
`styling`	`plain_css`, `tailwind`, `inline_styles`	Required
`uiLibrary`	`mui`, `antd`, `radix`, `shadcn`, `clean_react`, `custom_design_system`	Omit for vanilla React

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

A contained React or HTML generation result from one approved Figma node
A filename/content manifest and rejected-path report
Formatter, type-check, dependency, and visual-review receipts

Examples

Create a small staging Figma frame with an approved button and heading, store the Anima/Figma credentials in a local ignored environment file, and generate only that node into ./generated. Confirm each filename resolves under the output directory, inspect the component for expected labels and styles, then run the project formatter and type check before copying it into a feature branch. If the node cannot be found, output is empty, or the generation writes an unexpected path, stop and correct the Figma link or output mapping; do not use a broader file token or copy unreviewed generated code directly to main.

Error Handling

Error	Cause	Solution
`File not found`	Wrong Figma file key	Extract key from URL after `/file/`
`Node not found`	Wrong node ID	Use Figma's "Copy link" on the frame
Empty `files` array	Node has no renderable content	Select a frame/component, not a page
Malformed output	Complex nested auto-layout	Simplify Figma structure; use components

About this skill