Agent skills for Claude Desktop

Generate structured developer handoff annotations for a Figma screen or component.

Connect Figma design components to code components using Code Connect so design-system updates flow into the codebase automatically.

Audit a Figma component library for consistency, coverage gaps, and naming issues.

Generate project-specific design system rules for Figma-to-code workflows.

Create a new blank Figma Design or FigJam file.

Runs a PM-perspective design critique focused on product outcomes and user goals, not aesthetics.

Figma-to-code design handoff patterns including Figma Variables to design tokens pipeline, component spec extraction, Dev Mode inspection…

Runs a pre-handoff QA checklist on a Figma design before it goes to engineering.

Runs a structured PM design review against product requirements.

REQUIRED reading before using figma_execute.

Every Figma endpoint, plus codegen-ready frame extracts, comments audit, orphans finder, tokens diff Trigger phrases: `extract a figma…

Production readiness checklist for Figma REST API integrations.

Plan prototype interactions and flows for user testing in Figma.

Design a spacing and layout token system for a Figma design system.

Overlay a matching Figma design on a local webpage target.

Extract Figma designs and generate production-ready React/Next.js components with TypeScript, Tailwind CSS, and pixel-perfect accuracy.

Run Figma Plugin API scripts for canvas writes, inspections, variables, and design-system work.

Define component variants and states systematically for Figma.

Apply figure-ground separation specifically for overlays — modals, dialogs, drawers, popovers, dropdowns, toasts.

Use when designing the figures, tables, framework diagrams, and maps for a Global Environmental Change (GEC) manuscript, plus the required…

Use when building figures, tables, and the mandatory Table of Contents (TOC)/abstract graphic for an Environmental Science & Technology…