Skillshub anima-hello-world

install

source · Clone the upstream repo

git clone https://github.com/ComeOnOliver/skillshub

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ComeOnOliver/skillshub "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/jeremylongshore/claude-code-plugins-plus-skills/anima-hello-world" ~/.claude/skills/comeonoliver-skillshub-anima-hello-world && rm -rf "$T"

manifest: skills/jeremylongshore/claude-code-plugins-plus-skills/anima-hello-world/SKILL.md

Anima Hello World

Overview

Generate production-ready React, Vue, or HTML code from a Figma design using the

@animaapp/anima-sdk

. This example converts a Figma component into clean TypeScript React with Tailwind CSS.

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',
      uiLibrary: 'none',  // or 'mui', 'antd', 'shadcn'
    },
  });

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

  for (const file of files) {
    const filePath = path.join(outputDir, file.fileName);
    fs.writeFileSync(filePath, file.content);
    console.log(`Generated: ${filePath} (${file.content.length} chars)`);
  }

  return files;
}

generateReactComponent().catch(console.error);

Step 2: Try Different Framework Outputs

// Generate Vue + Tailwind
const vueFiles = await anima.generateCode({
  fileKey: process.env.FIGMA_FILE_KEY!,
  figmaToken: process.env.FIGMA_TOKEN!,
  nodesId: ['1:2'],
  settings: {
    language: 'typescript',
    framework: 'vue',
    styling: 'tailwind',
  },
});

// Generate HTML + CSS (no framework)
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: '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

// The generated files array contains:
interface GeneratedFile {
  fileName: string;    // e.g., 'HeroSection.tsx', 'styles.css'
  content: string;     // Full file content
  type: string;        // 'component', 'style', 'asset'
}

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

# Copy generated files into your project
cp -r generated/components/* src/components/design/

# Install any missing dependencies
npm install  # Anima generates standard React/Vue code — no special deps

Settings Reference

Setting	Options	Default
`language`	`typescript` , `javascript`	`typescript`
`framework`	`react` , `vue` , `html`	`react`
`styling`	`tailwind` , `css` , `styled-components`	`tailwind`
`uiLibrary`	`none` , `mui` , `antd` , `shadcn`	`none`

Output

Generated React/Vue/HTML files from Figma design
Clean TypeScript with Tailwind CSS classes
Files ready to drop into existing project
Multiple framework outputs compared

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

Resources

Next Steps

Proceed to

anima-local-dev-loop

for iterative design-to-code development.