Kl hack mcp

.cursor/rules/figma-rules.mdc

@@ -0,0 +1,30 @@
+---
+description:
+globs:
+alwaysApply: true
+---
+
+---
+description: Figma Dev Mode MCP rules
+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: 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 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`
+  - 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
+  - Use the tokens from `packages/gamut-styles/src/variables`
+  - Use the CodeConnect implementation

.gitignore

@@ -1,4 +1,5 @@
 .DS_Store
+.env
 
 # Logs
 logs

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.

figma.config.json

@@ -0,0 +1,7 @@
+{
+  "codeConnect": {
+    "include": ["packages/gamut/src/**/*.{tsx,jsx}"],
+    "label": "React",
+    "interactiveSetupFigmaFileUrl": "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=23-5&p=f&m=dev"
+  }
+}

packages/gamut/src/Anchor/index.figma.tsx

@@ -0,0 +1,40 @@
+import figma from "@figma/code-connect"
+import React from "react"
+
+import { Anchor } from "./index"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Anchor,
+  "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=19220%3A21856",
+  {
+    props: {
+      label: figma.string("✏️ label"),
+      trailingIcon: figma.boolean("👁 trailing icon"),
+      trailingIcon: figma.instance("↳ trailing icon"),
+      leadingIcon: figma.boolean("👁 leading icon"),
+      leadingIcon: figma.instance("↳ leading icon"),
+      variant: figma.enum("variant", {
+        Inline: "inline",
+        Interface: "interface",
+        Standard: "standard",
+        "Standard-secondary": "standard-secondary",
+      }),
+      state: figma.enum("state", {
+        Default: "default",
+        Hover: "hover",
+        Active: "active",
+        Focus: "focus",
+        Disabled: "disabled",
+      }),
+    },
+    example: (props) => <Anchor />,
+  },
+)

packages/gamut/src/Badge/BadgeFigmaInstanceExample.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import { Badge } from './index';
+
+export const BadgeFigmaInstanceExample: React.FC = () => (
+  <Badge variant="tertiaryFill">Badge Text</Badge>
+);
+
+export const BadgeFunExample: React.FC = () => (
+  <Badge variant="fun">Fun Badge</Badge>
+);
+
+export default BadgeFigmaInstanceExample;

packages/gamut/src/Badge/index.figma.tsx

@@ -0,0 +1,35 @@
+import figma from "@figma/code-connect"
+import React from "react"
+
+import { Badge } from "./index"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Badge,
+  "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=8200%3A8349",
+  {
+    props: {
+      label: figma.string("✏️ label"),
+      icon: figma.instance("↳ icon"),
+      variant: figma.enum("variant", {
+        primary: "primary",
+        secondary: "secondary",
+        tertiary: "tertiary",
+        "tertiaryFill": "tertiaryFill",
+        accent: "accent",
+      }),
+      size: figma.enum("size", {
+        base: "base",
+        sm: "sm",
+      }),
+    },
+    example: (props) => <Badge  {...props} />,
+  },
+)

packages/gamut/src/Badge/index.tsx

@@ -52,6 +52,10 @@ const colorVariants = variant({
     custom: {
       textColor: 'text',
     },
+    fun: {
+      bg: 'interface',
+      textColor: 'primary-inverse',
+    },
   },
 });
 
@@ -82,7 +86,7 @@ const badgeProps = variance.compose(
 type StandardBadgeProps = {
   background?: never;
   bg?: never;
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'tertiaryFill' | 'accent';
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'tertiaryFill' | 'accent' | 'fun';
 };
 
 type CustomBadgeBackgroundProps = {

packages/gamut/src/Breadcrumbs/index.figma.tsx

@@ -0,0 +1,29 @@
+import React from "react"
+import { Breadcrumb } from "./index"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Breadcrumb,
+  "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=54229%3A24977",
+  {
+    props: {
+      currenttitle: figma.string("current-title"),
+      crumb2: figma.boolean("crumb-2"),
+      crumb1: figma.boolean("crumb-1"),
+      crumb3: figma.boolean("crumb-3"),
+      anchorVariant: figma.enum("anchor variant", {
+        interface: "interface",
+        standard: "standard",
+      }),
+    },
+    example: (props) => <Breadcrumb />,
+  },
+)

packages/gamut/src/Button/CTAButton.figma.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { CTAButton } from "./CTAButton"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  CTAButton,
+  "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1615%3A1914",
+  {
+    props: {
+      leadingIcon: figma.boolean("👁 leading icon"),
+      trailingIcon: figma.boolean("👁 trailing icon"),
+      leadingIcon: figma.instance("↳ leading icon"),
+      trailingIcon: figma.instance("↳ trailing icon"),
+      label: figma.string("✏️ label"),
+      state: figma.enum("state", {
+        default: "default",
+        hover: "hover",
+        active: "active",
+        focus: "focus",
+        disabled: "disabled",
+      }),
+    },
+    example: (props) => <CTAButton />,
+  },
+)

packages/gamut/src/Button/FillButton.figma.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import { FillButton } from "./FillButton"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  FillButton,
+  "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1106%3A7",
+  {
+    props: {
+      leadingIcon: figma.boolean("👁 leading icon"),
+      trailingIcon: figma.boolean("👁 trailing icon"),
+      leadingIcon: figma.instance("↳ leading icon"),
+      trailingIcon: figma.instance("↳ trailing icon"),
+      label: figma.string("✏️ label"),
+      variant: figma.enum("variant", {
+        primary: "primary",
+        secondary: "secondary",
+        danger: "danger",
+      }),
+      size: figma.enum("size", {
+        normal: "normal",
+        small: "small",
+        large: "large",
+      }),
+      state: figma.enum("state", {
+        default: "default",
+        hover: "hover",
+        active: "active",
+        focus: "focus",
+        disabled: "disabled",
+      }),
+    },
+    example: (props) => <FillButton />,
+  },
+)

packages/gamut/src/Button/IconButton.figma.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import { IconButton } from "./IconButton"
+import figma from "@figma/code-connect"
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  IconButton,
+  "https://www.figma.com/design/ReGfRNillGABAj5SlITalN/%F0%9F%93%90-Gamut?node-id=1106%3A90",
+  {
+    props: {
+      iconmini: figma.instance("icon-mini"),
+      icon: figma.instance("icon"),
+      variant: figma.enum("variant", {
+        primary: "primary",
+        secondary: "secondary",
+        danger: "danger",
+      }),
+      size: figma.enum("size", {
+        normal: "normal",
+        small: "small",
+        large: "large",
+      }),
+      state: figma.enum("state", {
+        default: "default",
+        hover: "hover",
+        active: "active",
+        focus: "focus",
+        disabled: "disabled",
+        "disabled + hover": "disabled---hover",
+      }),
+    },
+    example: (props) => <IconButton />,
+  },
+)