agentsclimarketplace

Figma code connect react

Skill kjuhwa/skills-hub/skills/frontend/figma-code-connect-react

Self-correcting knowledge corpus for Claude Code — 9 stable shape clusters, bias-correction pipeline baked into contribution flow. 47 papers, 45 techniques, 1.1k skills.

Install
npx -y skills add kjuhwa/skills-hub --skill figma-code-connect-react

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

  • 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Map Figma component variants to React props using @figma/code-connect with co-located *.figma.tsx files

SKILL.md

1.2 KB, as published. Nobody here has run it

Figma Code Connect for React

Bridge Figma component variants to React code using @figma/code-connect.

When to use

  • Team uses Figma for design and React for implementation
  • Want Figma Dev Mode to show real component code snippets
  • Components have variant props that map to Figma enum properties

Steps

  1. Install — @figma/code-connect package
  2. Configure — figma.config.json at project root with parser: "react" and include/exclude globs
  3. Create *.figma.tsx — Co-locate with the component, one file per Figma component node
  4. Map variants — Use figma.enum(), figma.string(), figma.boolean(), figma.instance() for prop mapping
  5. Multiple connections — Use variant filter in figma.connect() for different states (e.g., icon-only vs text button)

Key patterns

See content.md for file structure and mapping examples.

Gives 0 of the 12 instructions most images graphics skills give

Counted across 371 of the 372 authors here whose files we hold, read 2026-08-06

  • create a complete brand world in one imagein 19 of 371, across 5 files
  • infer the brand strategy before generatingin 19 of 371, across 5 files
  • use a clean presentation gridin 19 of 371, across 5 files
  • confirm connection status is activein 19 of 371, across 4 files
  • base the visual system on meaningin 17 of 371, across 3 files
  • use very little textin 17 of 371, across 3 files
  • make every panel feel connectedin 17 of 371, across 3 files
  • call RUBE_SEARCH_TOOLS firstin 17 of 371, across 3 files
  • convert dash-format node IDs to colon formatin 17 of 371, across 5 files
  • match reference quality and rhythm if providedin 16 of 371, across 2 files
  • narrow scope or reduce depth to avoid oversized payloadsin 16 of 371, across 4 files
  • generate a simple and memorable logoin 15 of 371, across 1 file

Said here and by no other author read

  • install the code connect package
  • configure figma config json at project root
  • co locate figma tsx files with components
  • create one figma tsx file per component node
  • map variants using figma helper functions
  • use variant filters for multiple connections

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once.

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.