// Examines a Figma Code Connect mapping file and provides a report on the mapping's accuracy and completeness
| name | figma.audit-connect |
| description | Examines a Figma Code Connect mapping file and provides a report on the mapping's accuracy and completeness |
| model | claude-sonnet-4-6 |
| argument-hint | ["Component name or path to component's code connect mapping file"] |
| disable-model-invocation | true |
Audit the specified Figma Code Connect mapping file.
Before starting, load the figma.connect-best-practices SKILL — it contains the canonical rules for every property mapping type (figma.boolean, figma.enum, figma.string, figma.textContent, figma.instance, figma.children, figma.nestedProps) and common pitfalls. Do not duplicate that guidance here; refer to it.
You will be provided with a name or path to a Figma Code Connect mapping file.
Code Connect files (.figma.tsx) are colocated with their corresponding components in this repo, typically within the component's local __figma__ directory.
Search for the mapping file and end your task if you cannot find it.
Within the current mapping file:
props: { ... } of each figma.connect() callvariant: { ... })Retrieve Figma component data
Call the Figma MCP get_context_for_code_connect tool with the fileKey and nodeId from the Figma URL in the mapping file. This is the primary tool for Code Connect authoring. It returns:
BOOLEAN, VARIANT, TEXT), and keyVARIANT propertiesThis output is the ground truth for your audit. Use it to understand:
↳ prefix indicates nested/exposed properties)Optional: get_design_context for visual context
If you need to visually inspect what the component looks like (e.g. to understand a variant you're unsure about), call get_design_context with disableCodeConnect: true. This returns a screenshot and reference code. It is not a substitute for get_context_for_code_connect — it does not return structured property metadata — but it can help when the property names alone aren't enough to understand the design intent.
Secondary checks with get_metadata
Use get_metadata only as a targeted follow-up for specific layer-type verification — not as a general overview tool. The specific case where it's needed:
For every figma.textContent('LayerName') in the mapping file: call get_metadata on that layer's node ID (found in the descendants of the get_context_for_code_connect output). Confirm the response shows <text ...>. If it shows <instance>, <frame>, <symbol>, or any other non-text type, figma.textContent() will fail silently at runtime — flag this as an error and suggest a hardcoded placeholder string instead.
Read the React component source
Analyze Property Coverage
Using the get_context_for_code_connect output as your source of truth, create a mapping analysis table where each row is a Figma property:
| Figma Property | Type | Related React Prop(s) | Mapped? | Mapping Method | Notes |
|---|
For each Figma property, indicate:
Also check variant coverage: does the mapping file have a figma.connect() call for every combination of VARIANT properties? Missing variant connects will cause Figma to show the wrong snippet for some design states.
Check for common mistakes (reference figma.connect-best-practices for full detail)
figma.string('propName') used on a TEXT property that doesn't appear in the component's formal variant names — this passes TypeScript but fails publish with "property does not exist"figma.textContent('LayerName') used on a layer that is an <instance> not a <text> nodefigma.children('LayerName') where the layer name differs across variants — needs split figma.connect() calls with variant: { ... } filters↳ prefix mapped directly with figma.string() instead of figma.nestedProps()figma.boolean('disabled') when disabled is actually a value of a state enum, not its own propertyshow3rd: figma.boolean('show 3rd step') where show3rd is not a React prop. These should be assembled into a real prop value using figma.boolean() branching insteadexample function with a body — an example that builds intermediate variables before returning JSX is a sign that the props design needs refactoring. The example should almost always be a direct JSX return. Note: figma.boolean() returns an opaque descriptor, not a JS boolean — figma.boolean('x') ? a : b always evaluates as truthy and cannot be used for conditional logic outside figma.boolean()'s own true/false branchesGenerate Report
Provide a summary with:
figma.connect() callsBack-port a specific commit from master to a release branch via cherry-pick. Creates a dedicated backport branch, attempts the cherry-pick, pushes it, and opens a PR by default. Returns to the original branch when done (success or failure). If there are merge conflicts, diagnoses the root cause without attempting an autonomous resolution. Use when asked to "backport", "cherry-pick to release", or "port a fix to a release branch".
Guidelines for writing Figma Code Connect property mappings. Use this skill when working on Figma Code Connect files, which typically end in .figma.tsx.
Creates a new Figma Code Connect mapping file for a CDS component
Use when a CDS change in **cds-web**, **cds-common**, **cds-mobile**, **web-visualization**, or **mobile-visualization** needs a **jscodeshift** migration in `packages/migrator` to update callers or mitigate breaking API or import moves (add or change a transform, tests, or preset entry).
Guidelines writing styles API (styles, classNames, and static classNames) for a CDS component. Use this skill when adding customization options to a React component via `styles` or `classNames` props or when needing to update the docsite with component styles documentation.
Guidelines for creating or updating documentation for a CDS component on the docsite (apps/docs/). Use this skill after creating or making updates to a CDS React component to write high quality documentaiton in the CDS docsite.