chore: add connect-component-to-figma Claude Code skill#2385
Draft
frankensteinke wants to merge 2 commits into
Draft
chore: add connect-component-to-figma Claude Code skill#2385frankensteinke wants to merge 2 commits into
frankensteinke wants to merge 2 commits into
Conversation
Captures the conventions and gotchas from the batch 1-5 Figma Code Connect rollout (#2373) as an installable skill, so future .figma.tsx additions follow the same patterns without re-deriving them from the existing examples.
Pin the skill's intended model in frontmatter as a signal of intent — the task is mechanical enough that Opus is overkill. The harness may not act on this field today, but it documents what to run the skill on.
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new Claude Code skill document to guide contributors through connecting Cauldron React components to Figma via Code Connect, capturing rollout conventions/gotchas referenced in issue #2373.
Changes:
- Introduces a new
.claude/skills/connect-component-to-figma/SKILL.mdskill with a template, workflow, conventions, and troubleshooting guidance for authoring.figma.tsxmappings.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+47
to
+52
| 4. **Lint + parse**: | ||
| ```bash | ||
| npx eslint packages/react/src/components/<Component>/<Component>.figma.tsx | ||
| cd packages/react && npm run figma:parse | ||
| ``` | ||
| `.figma.tsx` is excluded from `tsconfig.json`, so `tsc` won't see it — `figma connect parse` is the real validator. |
Comment on lines
+66
to
+72
| | Figma type | Code Connect call | Notes | | ||
| | ---------------------------------------- | ----------------------------------------------------------------------- | ---------------------------------------------------- | | ||
| | VARIANT (enum, incl. `"True"/"False"`) | `figma.enum('Name', { True: true })` | Pseudo-booleans are VARIANTs, not BOOLEANs. | | ||
| | BOOLEAN (real toggle) | `figma.boolean('Name', { true: X, false: undefined })` | Use `undefined` for "off" so the prop drops. | | ||
| | Text layer | `figma.textContent('Label')` | Layer name, not property name. | | ||
| | Nested instance prop (e.g. `_Icon Type`) | `figma.nestedProps('_Icon Type', { name: figma.string('Icon') })` | See IconButton/Icon for the pattern. | | ||
| | Multiple Figma variants → one component | Multiple `figma.connect(C, URL, { variant: { Type: 'X' }, ... })` calls | E.g. ActionMenu with Button vs Icon Button triggers. | |
| }; | ||
| ``` | ||
| - **Inverted booleans matter.** ExpandCollapsePanel maps `Collapsed=False` to `open=true` (the React prop is the opposite of the Figma variant). Read the React prop semantics before mapping. | ||
| - **Tooltip placement has no React default** — every Figma `Direction` value must map, even `Right`, otherwise the snippet renders without `placement` and floating-ui picks. |
Contributor
|
This pull request has been open for 30 days with no activity. If no further activity occurs, it will be closed in 14 days. |
github-actions
Bot
added
the
stale
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
.claude/skills/connect-component-to-figma/SKILL.md— a Claude Code skill that captures the conventions and gotchas from the batch 1–5 Figma Code Connect rollout..figma.tsxfile for a Cauldron component: confirming the Figma node id, verifying the React API, writing the file, and validating withnpm run figma:parse..figma.tsxexamples inpackages/react/src/components/and the parent issue's checklist — no rules invented.Related to #2373.
Test plan
.figma.tsxfiles.npm run figma:parseis the correct validation command (tsconfig.jsonexcludes*.figma.tsx, sotscdoes not validate these files).cp -r .claude/skills/connect-component-to-figma ~/.claude/skills/) and use it to add a.figma.tsxfor a not-yet-connected component to sanity-check the workflow end-to-end.