From 3ef612a1f25f1be480a443160d9cca9e33283ae4 Mon Sep 17 00:00:00 2001 From: dreamwasp Date: Mon, 23 Jun 2025 12:25:44 -0400 Subject: [PATCH 1/6] a robot made this --- .cursor/rules/figma-rules.mdc | 25 +++++ FIGMA_SETUP.md | 92 +++++++++++++++++++ .../src/lib/Molecules/Modals/Modal/Modal.mdx | 2 +- .../Molecules/Modals/Modal/Modal.stories.tsx | 50 ++++++++++ 4 files changed, 168 insertions(+), 1 deletion(-) create mode 100644 .cursor/rules/figma-rules.mdc create mode 100644 FIGMA_SETUP.md diff --git a/.cursor/rules/figma-rules.mdc b/.cursor/rules/figma-rules.mdc new file mode 100644 index 00000000000..62b008a2771 --- /dev/null +++ b/.cursor/rules/figma-rules.mdc @@ -0,0 +1,25 @@ +--- +description: +globs: +alwaysApply: true +--- + +--- +description: Figma Dev Mode MCP rules +globs: +alwaysApply: true +--- + - The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets + - IMPORTANT: If the Figma Dev Mode MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly + - IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload + - IMPORTANT: do NOT use or create placeholders if a localhost source is provided + - IMPORTANT: Always use components from `/packages` whenever possible + - Prioritize using semantic tokens and component props over Figma fidelity + - Avoid hardcoded values, use semantic design tokens from Figma whenever possible + - Follow WCAG requirements for accessibility + - Add component documentation + - Place UI components in `/package/gamut`; avoid inline styles unless truly necessary + - Add Best Practices blah blah blah + + + diff --git a/FIGMA_SETUP.md b/FIGMA_SETUP.md new file mode 100644 index 00000000000..84d99867758 --- /dev/null +++ b/FIGMA_SETUP.md @@ -0,0 +1,92 @@ +# Figma Dev Mode MCP Server Setup + +This repository is configured to use the Figma Dev Mode MCP server locally. This allows you to extract designs, code, and assets directly from Figma within Cursor. + +## Setup Instructions + +### 1. Install Dependencies + +```bash +yarn install +``` + +This will install the `@figma/mcp-server` package that's configured in the `devDependencies`. + +### 2. Get Your Figma Access Token + +1. Go to [Figma Settings > Personal Access Tokens](https://www.figma.com/developers/api#access-tokens) +2. Click "Create new personal access token" +3. Give it a descriptive name (e.g., "Gamut Repository MCP") +4. Copy the generated token + +### 3. Configure the Token + +You have two options to provide your Figma access token: + +#### Option A: Environment Variable (Recommended) + +Set the environment variable in your shell: + +```bash +export FIGMA_ACCESS_TOKEN="your_figma_access_token_here" +``` + +Or add it to your shell profile (`~/.zshrc`, `~/.bashrc`, etc.): + +```bash +echo 'export FIGMA_ACCESS_TOKEN="your_figma_access_token_here"' >> ~/.zshrc +source ~/.zshrc +``` + +#### Option B: Update MCP Configuration + +Edit `.cursor/mcp.json` and replace the empty token: + +```json +{ + "mcpServers": { + "figma": { + "command": "npx", + "args": ["@figma/mcp-server"], + "env": { + "FIGMA_ACCESS_TOKEN": "your_figma_access_token_here" + } + } + } +} +``` + +### 4. Restart Cursor + +After configuring the token, restart Cursor to load the MCP server. + +## Usage + +Once configured, you can: + +1. **Extract designs from Figma**: Select elements in Figma and use the MCP tools to get code +2. **Get design specifications**: Extract colors, spacing, typography from Figma designs +3. **Generate components**: Create React components based on Figma designs + +The MCP server will be available in Cursor's chat interface when working in this repository. + +## Troubleshooting + +### MCP Server Not Loading + +- Ensure your Figma access token is valid +- Check that the token has the necessary permissions +- Restart Cursor after making configuration changes + +### Token Issues + +- Verify the token is correctly set in the environment or configuration +- Make sure there are no extra spaces or quotes in the token +- Generate a new token if the current one isn't working + +## Configuration Files + +- `.cursor/mcp.json` - Local MCP server configuration for this repository +- `package.json` - Contains the `@figma/mcp-server` dependency + +This setup is local to this repository and won't affect your global Cursor configuration. diff --git a/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.mdx b/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.mdx index 3a1d9630839..c3067243ae2 100644 --- a/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.mdx +++ b/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.mdx @@ -32,7 +32,7 @@ Use a Modal to create a dialog on sits on top of a full screen overlay. Setting the `size` to `'fluid'` will make the width of the Modal fit its content. - + ### Large diff --git a/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.stories.tsx b/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.stories.tsx index 2176b405f98..f41f8c4c00e 100644 --- a/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.stories.tsx +++ b/packages/styleguide/src/lib/Molecules/Modals/Modal/Modal.stories.tsx @@ -1,6 +1,7 @@ import { Box, Checkbox, + Dialog, FillButton, FlexBox, Modal, @@ -345,3 +346,52 @@ export const MultipleViewsDisabled: React.FC = () => { ); }; + +const ImagePlaceholder = () => { + return ( + + + Replace with any image + + 16:9 + + ); +}; + +export const ARobotMadeThis: React.FC = () => { + const [isOpen, setIsOpen] = useState(false); + + return ( + <> + setIsOpen(true)}>Open Figma Dialog + setIsOpen(false), + }} + confirmCta={{ + children: 'Primary action', + onClick: () => setIsOpen(false), + }} + image={} + isOpen={isOpen} + size="small" + title="Headline" + onRequestClose={() => setIsOpen(false)} + > + + Optional 1-2 lines of explanation that provides relevant details. + Lorem ipsum cras nulla massa odio ligula. + + + + ); +}; From e588376d7dc3fd2962d42adcdce32264e84f4595 Mon Sep 17 00:00:00 2001 From: dreamwasp Date: Mon, 23 Jun 2025 16:35:25 -0400 Subject: [PATCH 2/6] new roolz --- .cursor/rules/figma-rules.mdc | 11 +++++++---- .vscode/settings.json | 12 +++++++++++- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/.cursor/rules/figma-rules.mdc b/.cursor/rules/figma-rules.mdc index 62b008a2771..386d862bfa4 100644 --- a/.cursor/rules/figma-rules.mdc +++ b/.cursor/rules/figma-rules.mdc @@ -16,10 +16,13 @@ alwaysApply: true - IMPORTANT: Always use components from `/packages` whenever possible - Prioritize using semantic tokens and component props over Figma fidelity - Avoid hardcoded values, use semantic design tokens from Figma whenever possible + - Do not use inline styles, use emotion and the css-in-js utilities from `/packages/gamut-styles` - Follow WCAG requirements for accessibility - - Add component documentation - - Place UI components in `/package/gamut`; avoid inline styles unless truly necessary - - Add Best Practices blah blah blah - + - Follow best practices in `/packages/styleguide/src/lib/Meta/Best Practices.mdx` + - All patterns should come from `/packages/gamut-patterns` + - All icons should come from `/packages/gamut-icons` + - Check if the Figma component name matches a Gamut component name and use that component + - Avoid using the Box component, use more specific components whenever possible. + - Use the tokens from `packages/gamut-styles/src/variables` diff --git a/.vscode/settings.json b/.vscode/settings.json index 13c37b8648a..dddd024c3ca 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -41,5 +41,15 @@ }, "storyExplorer.storiesGlobs": "packages/styleguide/stories/**/*.stories.mdx", "jest.jestCommandLine": "node_modules/.bin/jest", - "nxConsole.generateAiAgentRules": true + "nxConsole.generateAiAgentRules": true, + "chat.mcp.discovery.enabled": true + // "mcp": { + // "servers": { + // "Figma Dev Mode MCP": { + // "type": "sse", + // "url": "http://127.0.0.1:3845/sse" + // } + // } + // }, + // "chat.agent.enabled": true } From e3794f7ee185e0496df92a4049eea50065a325af Mon Sep 17 00:00:00 2001 From: dreamwasp Date: Tue, 24 Jun 2025 09:23:51 -0400 Subject: [PATCH 3/6] add more colormode rules --- .cursor/rules/figma-rules.mdc | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/.cursor/rules/figma-rules.mdc b/.cursor/rules/figma-rules.mdc index 386d862bfa4..3a1cfc04d0f 100644 --- a/.cursor/rules/figma-rules.mdc +++ b/.cursor/rules/figma-rules.mdc @@ -1,12 +1,12 @@ --- -description: -globs: +description: +globs: alwaysApply: true --- - + --- description: Figma Dev Mode MCP rules -globs: +globs: alwaysApply: true --- - The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets @@ -14,15 +14,15 @@ alwaysApply: true - IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload - IMPORTANT: do NOT use or create placeholders if a localhost source is provided - IMPORTANT: Always use components from `/packages` whenever possible - - Prioritize using semantic tokens and component props over Figma fidelity + - Prioritize using semantic tokens and component props over Figma fidelity - Avoid hardcoded values, use semantic design tokens from Figma whenever possible - Do not use inline styles, use emotion and the css-in-js utilities from `/packages/gamut-styles` - Follow WCAG requirements for accessibility - - Follow best practices in `/packages/styleguide/src/lib/Meta/Best Practices.mdx` + - Always follow best practices from `/packages/styleguide/src/lib/Meta/Best Practices.mdx` - All patterns should come from `/packages/gamut-patterns` - All icons should come from `/packages/gamut-icons` - Check if the Figma component name matches a Gamut component name and use that component - - Avoid using the Box component, use more specific components whenever possible. - - Use the tokens from `packages/gamut-styles/src/variables` - - + - Avoid using the `Box` component, use more specific components whenever possible + - Use the tokens from `packages/gamut-styles/src/variables` + - When creating forms, use ConnectedForm from `packages/gamut/src/ConnectedForm` or GridForm from `packages/gamut/src/GridFrom` whenever possible. Documentation for these components is at `packages/styleguide/src/lib/Organisms/ConnectedForm` and `packages/styleguide/src/lib/Organisms/ConnectedForm` + - When designs are on a dark background, use the `Background` component from `packages/gamut-styles/src/Background.tsx`and follow ColorMode documentation from `packages/styleguide/src/lib/Foundations/ColorMode` From 29661d9317a61fbd7ae5d181bf64c948e828e60f Mon Sep 17 00:00:00 2001 From: dreamwasp Date: Tue, 24 Jun 2025 13:28:43 -0400 Subject: [PATCH 4/6] better rules --- .cursor/rules/figma-rules.mdc | 23 +++++++---------------- 1 file changed, 7 insertions(+), 16 deletions(-) diff --git a/.cursor/rules/figma-rules.mdc b/.cursor/rules/figma-rules.mdc index 3a1cfc04d0f..336d2671213 100644 --- a/.cursor/rules/figma-rules.mdc +++ b/.cursor/rules/figma-rules.mdc @@ -4,25 +4,16 @@ globs: alwaysApply: true --- ---- -description: Figma Dev Mode MCP rules -globs: -alwaysApply: true ---- - - The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG assets - - IMPORTANT: If the Figma Dev Mode MCP Server returns a localhost source for an image or an SVG, use that image or SVG source directly - - IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload + @@ -15,14 +15,12 @@ alwaysApply: true - IMPORTANT: do NOT use or create placeholders if a localhost source is provided - IMPORTANT: Always use components from `/packages` whenever possible - Prioritize using semantic tokens and component props over Figma fidelity - - Avoid hardcoded values, use semantic design tokens from Figma whenever possible - - Do not use inline styles, use emotion and the css-in-js utilities from `/packages/gamut-styles` - - Follow WCAG requirements for accessibility + - Avoid hardcoded values, use semantic design tokens whenever possible. The Background component is the exception - use color token names (i.e, navy, white, etc) and not a semantic token + - IMPORTANT: Do not use inline styles, whenever possible use emotion and the css-in-js utilities from `/packages/gamut-styles`. Follow the rules from `packages/styleguide/src/lib/Foundations/System` + - IMPORTANT: Follow WCAG requirements for accessibility - Always follow best practices from `/packages/styleguide/src/lib/Meta/Best Practices.mdx` - - All patterns should come from `/packages/gamut-patterns` - - All icons should come from `/packages/gamut-icons` + - IMPORTANT: All patterns should come from `/packages/gamut-patterns` - match the Figma component name to the pattern component + - IMPORTANT: All icons should come from `/packages/gamut-icons` - match the Figma component name to the icon component - Check if the Figma component name matches a Gamut component name and use that component - - Avoid using the `Box` component, use more specific components whenever possible - Use the tokens from `packages/gamut-styles/src/variables` - - When creating forms, use ConnectedForm from `packages/gamut/src/ConnectedForm` or GridForm from `packages/gamut/src/GridFrom` whenever possible. Documentation for these components is at `packages/styleguide/src/lib/Organisms/ConnectedForm` and `packages/styleguide/src/lib/Organisms/ConnectedForm` - - When designs are on a dark background, use the `Background` component from `packages/gamut-styles/src/Background.tsx`and follow ColorMode documentation from `packages/styleguide/src/lib/Foundations/ColorMode` + - Use the CodeConnect implementation From 4ed5fe280eafbf3002f53dd6652540657bef3bd0 Mon Sep 17 00:00:00 2001 From: dreamwasp Date: Tue, 24 Jun 2025 13:32:22 -0400 Subject: [PATCH 5/6] better rules --- .cursor/rules/figma-rules.mdc | 1 - FIGMA_SETUP.md | 92 ----------------------------------- 2 files changed, 93 deletions(-) delete mode 100644 FIGMA_SETUP.md diff --git a/.cursor/rules/figma-rules.mdc b/.cursor/rules/figma-rules.mdc index 336d2671213..cbb9f63b3a0 100644 --- a/.cursor/rules/figma-rules.mdc +++ b/.cursor/rules/figma-rules.mdc @@ -4,7 +4,6 @@ globs: alwaysApply: true --- - @@ -15,14 +15,12 @@ alwaysApply: true - IMPORTANT: do NOT use or create placeholders if a localhost source is provided - IMPORTANT: Always use components from `/packages` whenever possible - Prioritize using semantic tokens and component props over Figma fidelity diff --git a/FIGMA_SETUP.md b/FIGMA_SETUP.md deleted file mode 100644 index 84d99867758..00000000000 --- a/FIGMA_SETUP.md +++ /dev/null @@ -1,92 +0,0 @@ -# Figma Dev Mode MCP Server Setup - -This repository is configured to use the Figma Dev Mode MCP server locally. This allows you to extract designs, code, and assets directly from Figma within Cursor. - -## Setup Instructions - -### 1. Install Dependencies - -```bash -yarn install -``` - -This will install the `@figma/mcp-server` package that's configured in the `devDependencies`. - -### 2. Get Your Figma Access Token - -1. Go to [Figma Settings > Personal Access Tokens](https://www.figma.com/developers/api#access-tokens) -2. Click "Create new personal access token" -3. Give it a descriptive name (e.g., "Gamut Repository MCP") -4. Copy the generated token - -### 3. Configure the Token - -You have two options to provide your Figma access token: - -#### Option A: Environment Variable (Recommended) - -Set the environment variable in your shell: - -```bash -export FIGMA_ACCESS_TOKEN="your_figma_access_token_here" -``` - -Or add it to your shell profile (`~/.zshrc`, `~/.bashrc`, etc.): - -```bash -echo 'export FIGMA_ACCESS_TOKEN="your_figma_access_token_here"' >> ~/.zshrc -source ~/.zshrc -``` - -#### Option B: Update MCP Configuration - -Edit `.cursor/mcp.json` and replace the empty token: - -```json -{ - "mcpServers": { - "figma": { - "command": "npx", - "args": ["@figma/mcp-server"], - "env": { - "FIGMA_ACCESS_TOKEN": "your_figma_access_token_here" - } - } - } -} -``` - -### 4. Restart Cursor - -After configuring the token, restart Cursor to load the MCP server. - -## Usage - -Once configured, you can: - -1. **Extract designs from Figma**: Select elements in Figma and use the MCP tools to get code -2. **Get design specifications**: Extract colors, spacing, typography from Figma designs -3. **Generate components**: Create React components based on Figma designs - -The MCP server will be available in Cursor's chat interface when working in this repository. - -## Troubleshooting - -### MCP Server Not Loading - -- Ensure your Figma access token is valid -- Check that the token has the necessary permissions -- Restart Cursor after making configuration changes - -### Token Issues - -- Verify the token is correctly set in the environment or configuration -- Make sure there are no extra spaces or quotes in the token -- Generate a new token if the current one isn't working - -## Configuration Files - -- `.cursor/mcp.json` - Local MCP server configuration for this repository -- `package.json` - Contains the `@figma/mcp-server` dependency - -This setup is local to this repository and won't affect your global Cursor configuration. From 63a67b559439761c8343f965d93e2aa3e788e891 Mon Sep 17 00:00:00 2001 From: dreamwasp Date: Tue, 24 Jun 2025 13:40:47 -0400 Subject: [PATCH 6/6] figma mcp --- .cursor/rules/figma-rules.mdc | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.cursor/rules/figma-rules.mdc b/.cursor/rules/figma-rules.mdc index cbb9f63b3a0..822c23400f1 100644 --- a/.cursor/rules/figma-rules.mdc +++ b/.cursor/rules/figma-rules.mdc @@ -3,7 +3,7 @@ description: globs: alwaysApply: true --- - + - The Figma Dev Mode MCP Server provides an assets endpoint which can serve image and SVG asset - IMPORTANT: do NOT use or create placeholders if a localhost source is provided - IMPORTANT: Always use components from `/packages` whenever possible - Prioritize using semantic tokens and component props over Figma fidelity