Claude Code Agent Development
anthropics/claude-plugins-official
Explains how to write agents for Claude Code plugins: the markdown file with YAML frontmatter, trigger descriptions, model and color settings, and system prompt design.
Subagent for figma-from-code Phase 5. An agent skill from bitovi/ai-enablement-prompts.
Install Figma From Code Validate
$ npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-validate -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install bitovi/ai-enablement-prompts figma-from-code-validate --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/figma-from-code/skills/figma-from-code/9-validate .claude/skills/figma-from-code-validate && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "figma-from-code-validate" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/figma-from-code/skills/figma-from-code/9-validate into .claude/skills/figma-from-code-validate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-from-code-validate", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/figma-from-code/skills/figma-from-code/9-validateType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-validate -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install bitovi/ai-enablement-prompts figma-from-code-validate --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/figma-from-code/skills/figma-from-code/9-validate .agents/skills/figma-from-code-validate && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "figma-from-code-validate" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/figma-from-code/skills/figma-from-code/9-validate into .agents/skills/figma-from-code-validate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-from-code-validate", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-validate -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install bitovi/ai-enablement-prompts figma-from-code-validate --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/figma-from-code/skills/figma-from-code/9-validate .cursor/skills/figma-from-code-validate && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "figma-from-code-validate" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/figma-from-code/skills/figma-from-code/9-validate into .cursor/skills/figma-from-code-validate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-from-code-validate", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/bitovi/ai-enablement-prompts.git --path plugins/figma-from-code/skills/figma-from-code/9-validate--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-validate -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install bitovi/ai-enablement-prompts figma-from-code-validate --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/figma-from-code/skills/figma-from-code/9-validate .gemini/skills/figma-from-code-validate && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "figma-from-code-validate" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/figma-from-code/skills/figma-from-code/9-validate into .gemini/skills/figma-from-code-validate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-from-code-validate", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install bitovi/ai-enablement-prompts figma-from-code-validateInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-validate -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/figma-from-code/skills/figma-from-code/9-validate .github/skills/figma-from-code-validate && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "figma-from-code-validate" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/figma-from-code/skills/figma-from-code/9-validate into .github/skills/figma-from-code-validate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-from-code-validate", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-validate -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install bitovi/ai-enablement-prompts figma-from-code-validate --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/bitovi/ai-enablement-prompts.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/figma-from-code/skills/figma-from-code/9-validate .opencode/skills/figma-from-code-validate && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "figma-from-code-validate" agent skill from https://github.com/bitovi/ai-enablement-prompts/tree/main/plugins/figma-from-code/skills/figma-from-code/9-validate into .opencode/skills/figma-from-code-validate/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "figma-from-code-validate", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
figma-from-code-validate- GitHub stars
- 121
- Token cost
- ~1.9k tokens
- SKILL.md length
- 467 words
- Files
- 2
- Skills in repo
- 40
- Repo updated
- First seen
- Licence
- MIT
At a glance
Subagent for figma-from-code Phase 5. An agent skill from bitovi/ai-enablement-prompts.
- Works in 5 steps: Validate screens (full-page comparisons… → Clean up Components page layout → Stop the Playwright server → …
- Tasks that involve Subagents
- SKILL.md covers When to Use, Required Inputs, Output Files and Workflow, plus 2 more sections
- Calls node
What it does
Figma From Code Validate is an agent skill from bitovi/ai-enablement-prompts. Subagent for figma-from-code Phase 5. Validates the completed Figma rebuild by comparing assembled screen frames against app screenshots. Runs fix loops on mismatched screens and produces a structured report.
Its SKILL.md is about 1.9k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `README.md`).
It sits in Agent Workflows, covering Subagents. It works with Figma. The repository describes itself as: Prompts Bitovi uses for software development. The licence is MIT.
When your agent uses it
- Tasks that involve Subagents
Example prompts
- “/figma-from-code-validate”
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit df229b1. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
node
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Figma From Code Validate loads about 1.9k tokens when it runs. Until then it costs about 58 tokens; SKILL.md has 467 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from bitovi/ai-enablement-prompts at commit df229b1, republished under its MIT licence (© bitovi). 467 words, ~1,855 tokens.
Download SKILL.mdSave it as
.claude/skills/figma-from-code-validate/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.- name
- figma-from-code-validate
- description
- Subagent for figma-from-code Phase 5. Validates the completed Figma rebuild by comparing assembled screen frames against app screenshots. Runs fix loops on mismatched screens and produces a structured report.
- model
- claude-sonnet-4-5
Skill: Validate + Fix (Phase 5)
Validates the completed Figma rebuild by comparing full-page screen frames against app screenshots. Instead of re-validating every individual component (which already passed during Phase 3's build loop), this phase checks the assembled screens as a whole — verifying that components compose correctly and that nothing was lost during screen assembly. Runs fix loops on mismatched screens and produces a structured report. Runs as a subagent dispatched by the orchestrator.
When to Use
- When
figma-from-codeorchestrator reaches Phase 5 - Standalone to validate assembled screens after a rebuild
Required Inputs
| Input | Description | Source |
|---|---|---|
fileKey | Figma file key | State ledger |
builtComponents | Map of {name: nodeId} for all built components | state.json -> builtComponents |
figmaNodes | All page and frame node IDs | state.json -> figmaNodes |
buildOrder | Tiered component list | state.json -> buildOrder |
devServerUrl | URL of the running dev server | state.json → config.devServerUrl (default http://localhost:5173) |
precaptureScreens | Screen manifest from Phase 2.5 | .temp/figma-from-code/precapture-screens.json |
Output Files
| File | Contents | Consumed by |
|---|---|---|
.temp/figma-validation/report.md | Full validation report with per-screen comparisons | User review |
.temp/figma-from-code/validation-summary.json | Small summary for the orchestrator | Orchestrator only |
Workflow
Placeholders like
{devServerUrl}and{skillRoot}resolve fromstate.json → config.
1. Validate screens (full-page comparisons only)
For each screen built in Phase 4 (read from .temp/figma-from-code/build-results/screens/):
- Read the screen result — get the screen's Figma node ID from
build-results/screens/{screenName}.json - Capture a fresh Figma screenshot —
get_screenshot(fileKey, screenNodeId)atscale: 1 - Compare against the app screenshot — the pre-captured full-page screenshot from Phase 2.5:
bash node {skillRoot}/scripts/compare.js \ ".temp/figma-from-code/screenshots/screens/{screenName}/app.png" \ ".temp/figma-validation/screenshots/{screenName}/figma.png" \ ".temp/figma-validation/screenshots/{screenName}/" - Record the verdict — thresholds:
matchPct ≥ 85%→ match,70-85%→ minor_diff,< 70%→ mismatch (screen thresholds are slightly lower than component thresholds because full pages have more variation in dynamic content)
Fix loop for mismatched screens: For screens with verdict: "mismatch" or "minor_diff", run up to 2 fix iterations:
- Diagnose from
diff.png— identify which region/component is off - Apply targeted fix via
use_figma(adjust instance position, swap variant, fix spacing) - Re-screenshot and re-compare
- If after 2 iterations the screen still doesn't pass, record as
partial_match
Pre-existing screens (in state.json → preExistingScreens) are compared read-only — screenshot and record the verdict, but do NOT run the fix loop. Surface mismatches for user review.
Show full SKILL.md (129 more words)Show less
2. Clean up Components page layout
After validation, clean up any misplaced components on the Components page. Subagents sometimes create their own frames instead of using the designated tier frames.
const componentsPage = figma.root.children.find((p) => p.name.includes('Components'));
await figma.setCurrentPageAsync(componentsPage);
const tierFrameIds = new Set([
iconsFrameId,
tier1FrameId,
tier2FrameId,
// ... all tier frames from figmaNodes
]);
const strayFrames = componentsPage.children.filter((c) => !tierFrameIds.has(c.id));
// For each stray frame, move its children to the correct tier frame
// based on which tier the component belongs to (from buildOrder.tiers)
// Then delete the empty stray frame
// Re-stack all tier frames vertically with 80px gaps
const frameOrder = [iconsFrameId, tier1FrameId, tier2FrameId /* ... */];
let yPos = 0;
const gap = 80;
for (const id of frameOrder) {
const frame = figma.getNodeById(id);
frame.x = 0;
frame.y = yPos;
yPos += Math.round(frame.height) + gap;
}3. Stop the Playwright server
kill $(cat .temp/figma-from-code/pw-server.pid 2>/dev/null) 2>/dev/null
rm -f .temp/figma-from-code/pw-endpoint.txt4. Write validation summary
Parse the results and write a concise summary for the orchestrator:
{
"screensCompared": 8,
"match": 6,
"minorDiff": 1,
"mismatch": 0,
"fixedDuringValidation": 1,
"averageMatchPct": 89.7,
"overallVerdict": "PASS",
"preExistingFlagged": [],
"screenResults": [
{ "name": "CasesPage", "matchPct": 92.1, "verdict": "match" },
{ "name": "CreateCasePage", "matchPct": 87.3, "verdict": "match" }
],
"reportPath": ".temp/figma-validation/report.md"
}Write to .temp/figma-from-code/validation-summary.json.
Overall verdict: PASS if >= 75% of compared screens are match. Otherwise FAIL.
5. Report
Phase 5 complete:
- {screensCompared} screens validated (full-page comparison)
- {match} match, {minorDiff} minor diff, {mismatch} mismatch
- {fixedDuringValidation} fixed during validation
- Average match: {averageMatchPct}%
- Overall verdict: {overallVerdict}
- Individual components already validated during Phase 3 build loop (not re-checked)Skip / Resume
Skip if .temp/figma-from-code/validation-summary.json exists and state.json -> phases.phase5 is complete.
Error Handling
| Scenario | Action |
|---|---|
| Validator skill fails | Report error; partial results may exist in .temp/figma-validation/ |
Cleanup use_figma fails | Report error; cleanup is non-critical — the components are already validated |
| Playwright server already stopped | Ignore the kill failure |
| Dev server not running | Halt validation and tell the user to start the dev server |
© bitovi, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 1 other file in plugins/figma-from-code/skills/figma-from-code/9-validate of bitovi/ai-enablement-prompts.
- SKILL.md
- README.md
Open the folder on GitHubat commit df229b1
Compare with similar skills
Figma From Code Validate next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Figma From Code Validate this skillbitovi/ai-enablement-prompts | 121 | — | ~1.9k | Automated safety check: Pass | MIT | |
| Claude Code Agent Developmentanthropics/claude-plugins-official | 38k | 8 repos | ~2.8k | Automated safety check: Pass | Apache-2.0 | |
| Subagent Driven DevelopmentAsvarox/allkaraoke | 261 | 38 repos | ~1.2k | Automated safety check: Pass | None | |
| Dispatching Parallel Agentsultralisp/ultralisp | 258 | 41 repos | ~1.5k | Automated safety check: Pass | None | |
| Paseo Advisor Second Opiniongetpaseo/paseo | 20k | 1 repos | ~756 | Automated safety check: Pass | Custom licence | |
| Task Observerrebelytics/one-skill-to-rule-them-all | 3.2k | 1 repos | ~12k | Automated safety check: Pass | CC-BY-4.0 |
Similar skills
- Official
Subagent Driven Development
Asvarox/allkaraoke
A skill your agent uses when executing implementation plans with independent tasks in the current session
Dispatching Parallel Agents
ultralisp/ultralisp
A skill your agent uses when facing 2+ independent tasks that can be worked on without shared state or sequential dependencies
Paseo Advisor Second Opinion
getpaseo/paseo
Launches one separate agent through Paseo to give a second opinion on the current task, with a self-contained briefing and no permission to edit files.
Task Observer
rebelytics/one-skill-to-rule-them-all
Monitors task execution for skill improvement opportunities.
O2 Review Loop
openobserve/openobserve
Splits a change into planner, coder and independent reviewer roles: you confirm a spec, a subagent implements it, and a separate reviewer checks each round's local WIP commit.
More from bitovi/ai-enablement-prompts
All 40 skills in this repoComponent Registry
bitovi/ai-enablement-prompts
Track reusable UI components and unextracted patterns. An agent skill from bitovi/ai-enablement-prompts.
Computed Styles
bitovi/ai-enablement-prompts
Extract and compare computed CSS styles between a baseline URL and a dev/Storybook URL using Playwright MCP evaluate calls.
Create Plugin
bitovi/ai-enablement-prompts
A skill your agent uses when the user asks to "create a plugin", "add a plugin", "make a new plugin", "build a plugin", or wants to package skills into an installable plugin for this marketplace.
Create React Modlet
bitovi/ai-enablement-prompts
Create React components, hooks, or utilities following the modlet pattern.
Create Skill
bitovi/ai-enablement-prompts
A skill your agent uses when the user asks to "create a skill", "add a skill", "make a new skill", "build a skill", or wants to automate a repeated workflow into a reusable prompt.
Create Skill
bitovi/ai-enablement-prompts
Create new Agent Skills for this project. An agent skill from bitovi/ai-enablement-prompts.
Related
Works with
Categories
Questions about Figma From Code Validate
What does Figma From Code Validate do?
Subagent for figma-from-code Phase 5. An agent skill from bitovi/ai-enablement-prompts. Figma From Code Validate is an agent skill from bitovi/ai-enablement-prompts. Subagent for figma-from-code Phase 5.
When should I use Figma From Code Validate?
Figma From Code Validate fits situations like: tasks that involve Subagents.
How do I install Figma From Code Validate in Claude Code?
Run `npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-validate -a claude-code`. Or copy the skill folder (plugins/figma-from-code/skills/figma-from-code/9-validate in bitovi/ai-enablement-prompts) into .claude/skills/figma-from-code-validate in your project. Claude Code loads it when a task matches its description.
How do I install Figma From Code Validate in Codex?
Run `npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-validate -a codex`. Or copy the skill folder (plugins/figma-from-code/skills/figma-from-code/9-validate in bitovi/ai-enablement-prompts) into .agents/skills/figma-from-code-validate in your project. Codex loads it when a task matches its description.
Can I use Figma From Code Validate in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add bitovi/ai-enablement-prompts --skill figma-from-code-validate -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/figma-from-code-validate, .gemini/skills/figma-from-code-validate, .github/skills/figma-from-code-validate and .opencode/skills/figma-from-code-validate in your project.
What does Figma From Code Validate need to run?
Going by SKILL.md and its folder, Figma From Code Validate needs the command-line tools its instructions call (node).
Does Figma From Code Validate access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Figma From Code Validate safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Figma From Code Validate use?
Figma From Code Validate is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Figma From Code Validate use?
About 1.9k tokens (SKILL.md is roughly 7.4k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Figma From Code Validate?
Skills that share tags, products or a category with Figma From Code Validate: Claude Code Agent Development (anthropics/claude-plugins-official, 38k stars), Subagent Driven Development (Asvarox/allkaraoke, 261 stars), Dispatching Parallel Agents (ultralisp/ultralisp, 258 stars) and Paseo Advisor Second Opinion (getpaseo/paseo, 20k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Figma From Code Validate?
bitovi (a GitHub organization) maintains it in bitovi/ai-enablement-prompts, which has 121 GitHub stars. The repository holds 40 skills in this directory. The repository was last updated on September 11, 2026.
Source: bitovi/ai-enablement-prompts on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.