Skill

figma

Compare the current screen implementation against its Figma design and fix visual discrepancies. Use after a significant UI change, new screen, redesign, or design handoff — not for every small tweak.

Install

npx claudepluginhub ksairi/claude --plugin expo-rn-plugin

Tool Access

This skill uses the workspace's default tool permissions.

Preview

Run a Figma design sync for the current screen using the Figma MCP.

SKILL.md

Similar Skills

payload

11 files

Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.

payload

41.6k

data-engineer

Builds scalable data pipelines, modern data warehouses, and real-time streaming architectures using Spark, dbt, Airflow, Kafka, and cloud platforms like Snowflake, BigQuery.

antigravity-bundle-data-engineering

32.8k

airflow-dag-patterns

1 file

Builds production Apache Airflow DAGs with best practices for operators, sensors, testing, and deployment. For data pipelines, workflow orchestration, and batch job scheduling.

antigravity-bundle-data-engineering

32.8k

Stats

Parent Repo Stars0

Parent Repo Forks0

Last CommitApr 21, 2026

Actions

View Source View Plugin View on GitHub View README

Run a Figma design sync for the current screen using the Figma MCP.

When to use

Only invoke this after a significant UI change — a new screen, a redesign, or after a design handoff. Do not run on every small tweak.

Steps

Get the Figma design — use mcp__figma__get_figma_data with $ARGUMENTS as the node URL or ID to fetch the design spec
Identify the implementation file — find the screen component that corresponds to the Figma frame (use get_routes if unsure which file to look at)
Compare — list the visual differences between the Figma spec and the current implementation: spacing, typography, colors, layout, component usage
Fix — apply corrections using Tamagui design tokens from src/theme/:
- Never use raw hex or rgba — use $token references
- Check src/theme/themes.ts for valid token names before using one
- Use get_components to find existing components before creating new ones
Download assets if needed — use mcp__figma__download_figma_images for icons or images that need exporting
Report — summarise what was changed and what (if anything) could not be matched due to missing tokens or components

Rules

Do not redesign — match the Figma spec as closely as possible, don't improve it
If a Figma token has no equivalent in src/theme/, flag it to the user instead of approximating
Run tsc --noEmit after changes to confirm no type errors