feat: CodeConnect

[LinKCoding]

Overview

• Adds a code-connect folder in /packages
• Moves CLI generated Code Connect files inside the code-connect
• Adds a MCP section to storybook and includes stories for Figma MCP and code connect usage

PR Checklist

• Related to designs:
• Related to JIRA ticket: GM-1194
• I have run this code to verify it works
• This PR includes unit tests for the code change
• This PR includes testing instructions tests for the code change
• The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Testing Instructions

Don't make me tap the sign.

1. Go to Meta/About /?path=/docs/meta-about--docs
2. Click on the MCP card (and see that it links to the right page)
3. Check the info
4. Click on the new Figma MCP and Code Connect pages
5. Check that the info is correct
6. (Optionally) Go to Gamut Figma page
7. Click around in Atoms and see that code connect looks (mostly?) accurate
8. ...
9. Finish and do a celebratory dance

—-
Would love feedback on:

1. Organization of CodeConnect Atoms in particular
2. Rules used for Cursor + Copilot
3. Thoughts on the info provided in docs (anything else come to mind that we should add?)
4. If certain files aren't necessary, e.g. the landing page example benchmarks

PR Links and Envs

N/A any changes are reflected in Storybook.
The code-connect directory isn't part of the gamut-kit package.

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 81def92

---

☁️ Nx Cloud last updated this comment at 2026-01-15 21:55:43 UTC

[codecademydev]

📬Published Alpha Packages:

@codecademy/[email protected]

[codecademydev]

🚀 Styleguide deploy preview ready!

https://68e9276f1825da5b51a208a3--gamut-preview.netlify.app

Deploy Logs

[dreamwasp]

this all looks great to me minus my comments on the CodeConnected sections - i honestly am hoping other people's access tokens don't even work to push changes

The Figma implementation looks great for the connected code, even with the more complicated components like List 🔥

[dreamwasp]

oh - we prob wanna add a backlog ticket to convert this to a proper nx package (more for CI than anything else)

[codecademydev]

📬 Published Alpha Packages:

@codecademy/[email protected]

[github-actions]

🚀 Styleguide deploy preview ready!

Preview URL: https://6969630a46313fa7a30ddf74--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/6969630a46313fa7a30ddf74