Agent skills for Claude Code

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…

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…

Generate deterministic publication-quality architecture, workflow, and pipeline diagrams from structured JSON (FigureSpec) into editable…

Create FilamentPHP v4 forms with fields, validation, sections, tabs, and relationships

Generate FilamentPHP v4 resources with form, table, relation managers, and actions

Create FilamentPHP v4 tables with columns, filters, sorting, search, and bulk actions

Create, run, and publish single-file C# programs without project files.

Reads local files and uploads an index to a remote search service