Agent-Skills.md

Agent Skills: VibeFigma - Figma to React Converter

Convert Figma designs to production-ready React components with Tailwind CSS. Use when user provides a Figma URL, asks to convert Figma designs to React/code, wants to extract components from Figma, or mentions "vibefigma". Requires a Figma access token (via --token flag, FIGMA_TOKEN env var, or .env file).

UncategorizedID: vibeflowing-inc/vibe_figma/vibefigma

Repository

vibeflowing-inc/vibe_figma
vibeflowing-incLicense: AGPL-3.0
52849

Install this agent skill to your local

pnpm dlx add-skill https://github.com/vibeflowing-inc/vibe_figma/tree/HEAD/skills/vibefigma

Skill Files

Browse the full folder contents for vibefigma.

Download Skill

Loading file tree…

skills/vibefigma/SKILL.md

Skill Metadata

Name
vibefigma
Description
Convert Figma designs to production-ready React components with Tailwind CSS. Use when user provides a Figma URL, asks to convert Figma designs to React/code, wants to extract components from Figma, or mentions "vibefigma". Requires a Figma access token (via --token flag, FIGMA_TOKEN env var, or .env file).

VibeFigma - Figma to React Converter

Convert Figma designs into React components with Tailwind CSS using the vibefigma CLI.

Usage

Interactive Mode (Recommended for first-time users)

npx vibefigma --interactive

Prompts for Figma URL, access token, and output paths.

Direct Command

npx vibefigma "https://www.figma.com/design/FILE_ID?node-id=X-Y" --token FIGMA_TOKEN

With Environment Variable

export FIGMA_TOKEN=your_token
npx vibefigma "https://www.figma.com/design/FILE_ID?node-id=X-Y"

Using .env File

The user can add their Figma access token to a .env file in their project root:

FIGMA_TOKEN=your_token_here

Then run:

npx vibefigma "https://www.figma.com/design/FILE_ID?node-id=X-Y"

Note: If the token is not configured, vibefigma will throw an error. Only then inform the user about the token requirement.

Common Options

| Option | Description | |--------|-------------| | -t, --token <token> | Figma access token | | -c, --component <path> | Output path (default: ./src/components/[Name].tsx) | | -a, --assets <dir> | Assets directory (default: ./public) | | -f, --force | Overwrite existing files without confirmation | | --no-tailwind | Generate regular CSS instead |

Getting a Figma Access Token

  1. Go to Figma Account Settings
  2. Scroll to Personal Access Tokens
  3. Click Generate new token → name it → copy immediately
  4. Store it securely in a .env file or pass via --token flag

Workflow

  1. Get Figma URL with specific node selected (frame/component to convert)
  2. Check if output file already exists at the target path (default: ./src/components/[Name].tsx or user-specified path)
  3. If file exists, ask the user for confirmation before overwriting, then use the --force flag
  4. Run: npx vibefigma "<URL>" -c <output-path> (add --force if overwriting confirmed)
    • User configures token in .env or via --token flag
  5. If vibefigma throws a token error, inform the user about the token requirement
  6. Review generated component
  7. If code needs cleanup, see references/responsive-cleanup.md for making code responsive and production-ready

Output

VibeFigma generates:

  • React component (.tsx) with Tailwind CSS classes
  • Assets (images/icons) in the assets directory

Notes

  • Always select a specific node/frame in Figma URL for best results
  • Generated code may need manual cleanup for production use
  • See references/responsive-cleanup.md for responsive design patterns