# Figma Plugin Build

> Build, typecheck, and validate a Figma plugin project. Runs TypeScript checking, esbuild bundling, and manifest validation. Use when: building a Figma plugin, running /figma-build, checking for errors, or when user says build plugin, check plugin, or validate plugin.

- **Type:** Skill
- **Install:** `agentstack add skill-ikusmart-claude-figma-skills-figma-plugin-build`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ikusmart](https://agentstack.voostack.com/s/ikusmart)
- **Installs:** 0
- **Category:** [Content & Media](https://agentstack.voostack.com/c/content-and-media)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [ikusmart](https://github.com/ikusmart)
- **Source:** https://github.com/ikusmart/claude.figma.skills/tree/main/.claude/skills/figma-plugin-build

## Install

```sh
agentstack add skill-ikusmart-claude-figma-skills-figma-plugin-build
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Build & Validate Figma Plugin

## Self-Documentation

When invoked WITHOUT clear context (no plugin project in current directory):

1. Display the Quick Help block below
2. Search for the nearest manifest.json to identify the project

When invoked WITH a clear project context — skip help and proceed to Step 1.

## Quick Help

**What I do:** Run the full build pipeline for a Figma plugin — TypeScript checking, esbuild bundling, and manifest validation. Reports errors and warnings.

**What gets checked:**

- TypeScript types (zero errors required)
- esbuild bundling (dist/code.js + dist/ui.html)
- manifest.json validity (required fields, file references)

**Example prompts:**

- `Build the plugin`
- `Check for errors in the plugin`
- `Validate the Figma plugin`

**Prerequisites:** A Figma plugin project with manifest.json. Create one with `/figma-new`.

**Expected output:**

```
=== Build Report ===
TypeScript: OK
Build:      OK
Output:     dist/code.js (12 KB), dist/ui.html (3 KB)
Manifest:   OK
====================
```

---

## Step 1: Locate Project

Find the nearest `manifest.json` with a `"main"` field (Figma plugin manifest).
If not found in the current directory, check parent directories up to 3 levels.

## Step 2: TypeScript Check

```bash
pnpm typecheck
```

If `pnpm` is not available, use `npx tsc --noEmit`.

Report any TypeScript errors. If there are errors, stop and report them.

## Step 3: Build

```bash
pnpm build
```

If `pnpm` is not available, use `node esbuild.config.js`.

## Step 4: Validate Build Output

Check that the expected output files exist:

- `dist/code.js` — main plugin bundle (required)
- `dist/ui.html` — UI bundle (only if manifest has `"ui"` field)

## Step 5: Validate Manifest

Read `manifest.json` and verify:

- `name` is not empty
- `id` is not the placeholder `"000000000000000000"` (warn if it is)
- `api` is `"1.0.0"`
- `main` points to an existing file
- `ui` points to an existing file (if present)
- `editorType` is a non-empty array
- `documentAccess` is `"dynamic-page"`

## Step 6: Report

Output a summary:

```
=== Build Report ===
TypeScript: OK / X errors
Build:      OK / FAILED
Output:     dist/code.js (X KB), dist/ui.html (X KB)
Manifest:   OK / X warnings
====================
```

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [ikusmart](https://github.com/ikusmart)
- **Source:** [ikusmart/claude.figma.skills](https://github.com/ikusmart/claude.figma.skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-ikusmart-claude-figma-skills-figma-plugin-build
- Seller: https://agentstack.voostack.com/s/ikusmart
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.