rk-designsystem 1.1.67 → 1.1.69

package/dist/componentlibrary.es.js

@@ -2535,7 +2535,7 @@ Gi meg en oversikt over hva som er korrekt satt opp og hva som eventuelt må fik
         step0_5ClaudeMcpIntro: "For å aktivere Claude Code til å lese Figma-design direkte, må du legge til Figma MCP-serveren. Dette er et avgjørende steg for at arbeidsflyten skal fungere ordentlig.",
         step0_5ClaudeMcpStep1: "Åpne Claude Code terminal",
         step0_5ClaudeMcpStep2: "Kjør denne kommandoen for å legge til Figma MCP-serveren:",
-        step0_5ClaudeMcpCommand: "claude mcp add figma --transport sse --url http://127.0.0.1:3845/sse",
+        step0_5ClaudeMcpCommand: "claude mcp add --transport sse figma http://127.0.0.1:3845/sse",
         step0_5ClaudeMcpStep3: "Sørg for at du har Figma MCP-serveren kjørende lokalt på port 3845. Hvis du ikke har satt den opp ennå, må du starte den først ved å bruke:",
         step0_5ClaudeMcpServerCommand: "npx -y @modelcontextprotocol/server-figma",
         step0_5ClaudeMcpStep4: "Sett FIGMA_ACCESS_TOKEN miljøvariabelen før du starter serveren:",
@@ -3515,7 +3515,7 @@ Give me an overview of what is correctly set up and what might need to be fixed.
         step0_5ClaudeMcpIntro: "To enable Claude Code to read Figma designs directly, you need to add the Figma MCP server. This is a crucial step for the workflow to work properly.",
         step0_5ClaudeMcpStep1: "Open Claude Code terminal",
         step0_5ClaudeMcpStep2: "Run this command to add the Figma MCP server:",
-        step0_5ClaudeMcpCommand: "claude mcp add figma --transport sse --url http://127.0.0.1:3845/sse",
+        step0_5ClaudeMcpCommand: "claude mcp add --transport sse figma http://127.0.0.1:3845/sse",
         step0_5ClaudeMcpStep3: "Make sure you have the Figma MCP server running locally on port 3845. If you haven't set it up yet, you'll need to start it first using:",
         step0_5ClaudeMcpServerCommand: "npx -y @modelcontextprotocol/server-figma",
         step0_5ClaudeMcpStep4: "Set the FIGMA_ACCESS_TOKEN environment variable before starting the server:",

package/dist/componentlibrary.umd.js

@@ -5,7 +5,7 @@
 3. At alle nødvendige pakker er installert (rk-designsystem, @digdir/designsystemet-css, rk-design-tokens)
 4. At prosjektstrukturen matcher anbefalingene i guiden
 
-Gi meg en oversikt over hva som er korrekt satt opp og hva som eventuelt må fikses.`,step0_5ClaudeSetupNote:"Du trenger ikke gjøre dette manuelt - be Claude om å gjøre det. Dette steget sikrer at prosjektet er riktig konfigurert før du begynner å konvertere Figma-design. Uten korrekt oppsett kan komponenter og design tokens ikke fungere som forventet.",step0_5ClaudeUsageTitle:"Bruk av guiden i Claude:",step0_5ClaudeUsageText:"Etter at guiden er lastet ned, referer til den i dine prompts:",step0_5ClaudeUsageExample:'"Using the AI_DESIGN_SYSTEM_GUIDE.md file and this Figma link [paste link], create a React component..."',step0_5ClaudeMcpTitle:"Sette opp Figma MCP i Claude Code:",step0_5ClaudeMcpIntro:"For å aktivere Claude Code til å lese Figma-design direkte, må du legge til Figma MCP-serveren. Dette er et avgjørende steg for at arbeidsflyten skal fungere ordentlig.",step0_5ClaudeMcpStep1:"Åpne Claude Code terminal",step0_5ClaudeMcpStep2:"Kjør denne kommandoen for å legge til Figma MCP-serveren:",step0_5ClaudeMcpCommand:"claude mcp add figma --transport sse --url http://127.0.0.1:3845/sse",step0_5ClaudeMcpStep3:"Sørg for at du har Figma MCP-serveren kjørende lokalt på port 3845. Hvis du ikke har satt den opp ennå, må du starte den først ved å bruke:",step0_5ClaudeMcpServerCommand:"npx -y @modelcontextprotocol/server-figma",step0_5ClaudeMcpStep4:"Sett FIGMA_ACCESS_TOKEN miljøvariabelen før du starter serveren:",step0_5ClaudeMcpEnvVar:"export FIGMA_ACCESS_TOKEN=your_token_here",step0_5ClaudeMcpUsageTitle:"Bruke Figma MCP i Claude:",step0_5ClaudeMcpUsageText:"Når MCP-serveren er konfigurert, kan du bruke Figma-lenker direkte i dine prompts:",step0_5ClaudeMcpUsageExample:'"Using this Figma design [paste Figma link], create a React component following the design system guidelines from AI_DESIGN_SYSTEM_GUIDE.md"',step0_5ClaudeMcpNote:"MCP-serveren lar Claude automatisk lese Figma node-egenskaper, dimensjoner og design tokens, noe som gjør konverteringen fra design til kode mye mer nøyaktig.",step0_5CursorTitle:"For Cursor:",step0_5CursorIntro:"I Cursor kan du hente guiden på flere måter:",step0_5CursorMethod1Title:"Metode 1: Hent via terminal",step0_5CursorMethod1Step1:"Åpne terminalen i Cursor (Ctrl + ` eller Cmd + `)",step0_5CursorMethod1Step2:"Kjør denne kommandoen:",step0_5CursorMethod1Command:"curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step0_5CursorMethod2Title:"Metode 2: Referer direkte i chat (Alternativ)",step0_5CursorMethod2Text:"Du kan også referere til guiden direkte i Cursor-chatten uten å laste den ned først:",step0_5CursorMethod2Example:"@AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step0_5CursorMethod2Note:"Merk: Dette krever internettforbindelse hver gang. curl (Metode 1) er anbefalt for bedre ytelse og offline-tilgang.",step0_5CursorMethod3Title:"Metode 3: Via .cursorrules (Anbefalt for automatisk workflow)",step0_5CursorMethod3Text:"Hvis du bruker .cursorrules, legg til instruksjonen om å hente guiden der (se Steg 2, Alternativ B). Dette sikrer at guiden alltid lastes ned automatisk.",step0_5CursorUsageTitle:"Bruk av guiden i Cursor:",step0_5CursorUsageText:"Etter at guiden er tilgjengelig, referer til den i chatten:",step0_5CursorUsageExample1:'Hvis lastet ned lokalt: "@AI_DESIGN_SYSTEM_GUIDE.md implement a component based on this Figma design [link]"',step0_5CursorUsageExample2:'Hvis referert direkte: "Using the AI guide from @https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md, create..."',step0_5WhyTitle:"Hvorfor trenger jeg denne guiden?",step0_5WhyText:"AI Design System Guide inneholder:",step0_5WhyItem1:"Komplett liste over alle tilgjengelige komponenter med props og eksempler",step0_5WhyItem2:"Alle design tokens (farger, spacing, typografi, etc.) med korrekte CSS-variabler",step0_5WhyItem3:"Komponentmapping fra Figma-elementer til React-komponenter",step0_5WhyItem4:"Beste praksis for tilgjengelighet, TypeScript, og CSS Modules",step0_5WhyItem5:"Troubleshooting-guide for vanlige problemer",step1Title:"Steg 1: Hent presis lenke i Figma",step1Description:"For best resultat bør du isolere seksjonen du jobber med.",step1Item1:"Marker rammen (Frame), komponenten eller gruppen du vil implementere.",step1Item2:"Høyreklikk og velg Copy link to selection (Snarvei: Ctrl + L).",step1Item3:"NB: Bruk denne funksjonen fremfor å kopiere URL-en fra nettleseren.",step1ImageCaption:"",step2Title:"Steg 2: Gi kontekst (To metoder)",step2Description:"For at AI-en skal følge designsystemet vårt, må den vite hvor reglene finnes. Du kan velge mellom manuell eller automatisert metode.",step2AltATitle:"Alternativ A: Manuell kontekst (Raskt og enkelt)",step2AltADescription:"Bruk dette for engangstilfeller eller hvis du tester nye dokumentasjonskilder. Dette må gjøres manuelt med hver eneste prompt.",step2AltAItem1:"I Composer (Chat): Skriv @ og lim inn URL-ene til dokumentasjonen. Du må inkludere:",step2AltAItem1Sub1:"@https://norwegianredcross.github.io/design-tokens/theme.css",step2AltAItem1Sub2:"@https://norwegianredcross.github.io/DesignSystem/storybook/metadata.json",step2AltAItem2:"Lim inn Figma-lenken: Lim inn lenken fra steg 1.",step2AltAItem3:"VIKTIG - Hent AI-guiden: Før du starter, hent AI Design System Guide ved å kjøre denne kommandoen i terminalen:",step2AltAItem3Command:"curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step2AltAItem3Note:'Denne guiden inneholder komplett dokumentasjon om alle komponenter, design tokens, og beste praksis. Referer til den i din prompt: "Using AI_DESIGN_SYSTEM_GUIDE.md, implement..."',step2AltAImageCaption:"",step2AltBTitle:"Alternativ B: Automatisert med .cursorrules (Anbefalt)",step2AltBDescription:"Bruk dette for å slippe å legge ved dokumentasjon hver gang. Med en .cursorrules-fil i roten av prosjektet, vet AI-en alltid hvilke regler som gjelder.",step2AltBSetupTitle:"1. Oppsett (Gjøres én gang per prosjekt):",step2AltBSetupText:"Opprett en fil som heter .cursorrules i prosjektets rotmappe og gi kontekst ved å lime inn dette:",step2AltBCodeBlock:`You are an expert Frontend Developer implementing designs from Figma.
+Gi meg en oversikt over hva som er korrekt satt opp og hva som eventuelt må fikses.`,step0_5ClaudeSetupNote:"Du trenger ikke gjøre dette manuelt - be Claude om å gjøre det. Dette steget sikrer at prosjektet er riktig konfigurert før du begynner å konvertere Figma-design. Uten korrekt oppsett kan komponenter og design tokens ikke fungere som forventet.",step0_5ClaudeUsageTitle:"Bruk av guiden i Claude:",step0_5ClaudeUsageText:"Etter at guiden er lastet ned, referer til den i dine prompts:",step0_5ClaudeUsageExample:'"Using the AI_DESIGN_SYSTEM_GUIDE.md file and this Figma link [paste link], create a React component..."',step0_5ClaudeMcpTitle:"Sette opp Figma MCP i Claude Code:",step0_5ClaudeMcpIntro:"For å aktivere Claude Code til å lese Figma-design direkte, må du legge til Figma MCP-serveren. Dette er et avgjørende steg for at arbeidsflyten skal fungere ordentlig.",step0_5ClaudeMcpStep1:"Åpne Claude Code terminal",step0_5ClaudeMcpStep2:"Kjør denne kommandoen for å legge til Figma MCP-serveren:",step0_5ClaudeMcpCommand:"claude mcp add --transport sse figma http://127.0.0.1:3845/sse",step0_5ClaudeMcpStep3:"Sørg for at du har Figma MCP-serveren kjørende lokalt på port 3845. Hvis du ikke har satt den opp ennå, må du starte den først ved å bruke:",step0_5ClaudeMcpServerCommand:"npx -y @modelcontextprotocol/server-figma",step0_5ClaudeMcpStep4:"Sett FIGMA_ACCESS_TOKEN miljøvariabelen før du starter serveren:",step0_5ClaudeMcpEnvVar:"export FIGMA_ACCESS_TOKEN=your_token_here",step0_5ClaudeMcpUsageTitle:"Bruke Figma MCP i Claude:",step0_5ClaudeMcpUsageText:"Når MCP-serveren er konfigurert, kan du bruke Figma-lenker direkte i dine prompts:",step0_5ClaudeMcpUsageExample:'"Using this Figma design [paste Figma link], create a React component following the design system guidelines from AI_DESIGN_SYSTEM_GUIDE.md"',step0_5ClaudeMcpNote:"MCP-serveren lar Claude automatisk lese Figma node-egenskaper, dimensjoner og design tokens, noe som gjør konverteringen fra design til kode mye mer nøyaktig.",step0_5CursorTitle:"For Cursor:",step0_5CursorIntro:"I Cursor kan du hente guiden på flere måter:",step0_5CursorMethod1Title:"Metode 1: Hent via terminal",step0_5CursorMethod1Step1:"Åpne terminalen i Cursor (Ctrl + ` eller Cmd + `)",step0_5CursorMethod1Step2:"Kjør denne kommandoen:",step0_5CursorMethod1Command:"curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step0_5CursorMethod2Title:"Metode 2: Referer direkte i chat (Alternativ)",step0_5CursorMethod2Text:"Du kan også referere til guiden direkte i Cursor-chatten uten å laste den ned først:",step0_5CursorMethod2Example:"@AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step0_5CursorMethod2Note:"Merk: Dette krever internettforbindelse hver gang. curl (Metode 1) er anbefalt for bedre ytelse og offline-tilgang.",step0_5CursorMethod3Title:"Metode 3: Via .cursorrules (Anbefalt for automatisk workflow)",step0_5CursorMethod3Text:"Hvis du bruker .cursorrules, legg til instruksjonen om å hente guiden der (se Steg 2, Alternativ B). Dette sikrer at guiden alltid lastes ned automatisk.",step0_5CursorUsageTitle:"Bruk av guiden i Cursor:",step0_5CursorUsageText:"Etter at guiden er tilgjengelig, referer til den i chatten:",step0_5CursorUsageExample1:'Hvis lastet ned lokalt: "@AI_DESIGN_SYSTEM_GUIDE.md implement a component based on this Figma design [link]"',step0_5CursorUsageExample2:'Hvis referert direkte: "Using the AI guide from @https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md, create..."',step0_5WhyTitle:"Hvorfor trenger jeg denne guiden?",step0_5WhyText:"AI Design System Guide inneholder:",step0_5WhyItem1:"Komplett liste over alle tilgjengelige komponenter med props og eksempler",step0_5WhyItem2:"Alle design tokens (farger, spacing, typografi, etc.) med korrekte CSS-variabler",step0_5WhyItem3:"Komponentmapping fra Figma-elementer til React-komponenter",step0_5WhyItem4:"Beste praksis for tilgjengelighet, TypeScript, og CSS Modules",step0_5WhyItem5:"Troubleshooting-guide for vanlige problemer",step1Title:"Steg 1: Hent presis lenke i Figma",step1Description:"For best resultat bør du isolere seksjonen du jobber med.",step1Item1:"Marker rammen (Frame), komponenten eller gruppen du vil implementere.",step1Item2:"Høyreklikk og velg Copy link to selection (Snarvei: Ctrl + L).",step1Item3:"NB: Bruk denne funksjonen fremfor å kopiere URL-en fra nettleseren.",step1ImageCaption:"",step2Title:"Steg 2: Gi kontekst (To metoder)",step2Description:"For at AI-en skal følge designsystemet vårt, må den vite hvor reglene finnes. Du kan velge mellom manuell eller automatisert metode.",step2AltATitle:"Alternativ A: Manuell kontekst (Raskt og enkelt)",step2AltADescription:"Bruk dette for engangstilfeller eller hvis du tester nye dokumentasjonskilder. Dette må gjøres manuelt med hver eneste prompt.",step2AltAItem1:"I Composer (Chat): Skriv @ og lim inn URL-ene til dokumentasjonen. Du må inkludere:",step2AltAItem1Sub1:"@https://norwegianredcross.github.io/design-tokens/theme.css",step2AltAItem1Sub2:"@https://norwegianredcross.github.io/DesignSystem/storybook/metadata.json",step2AltAItem2:"Lim inn Figma-lenken: Lim inn lenken fra steg 1.",step2AltAItem3:"VIKTIG - Hent AI-guiden: Før du starter, hent AI Design System Guide ved å kjøre denne kommandoen i terminalen:",step2AltAItem3Command:"curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step2AltAItem3Note:'Denne guiden inneholder komplett dokumentasjon om alle komponenter, design tokens, og beste praksis. Referer til den i din prompt: "Using AI_DESIGN_SYSTEM_GUIDE.md, implement..."',step2AltAImageCaption:"",step2AltBTitle:"Alternativ B: Automatisert med .cursorrules (Anbefalt)",step2AltBDescription:"Bruk dette for å slippe å legge ved dokumentasjon hver gang. Med en .cursorrules-fil i roten av prosjektet, vet AI-en alltid hvilke regler som gjelder.",step2AltBSetupTitle:"1. Oppsett (Gjøres én gang per prosjekt):",step2AltBSetupText:"Opprett en fil som heter .cursorrules i prosjektets rotmappe og gi kontekst ved å lime inn dette:",step2AltBCodeBlock:`You are an expert Frontend Developer implementing designs from Figma.
 
 ALWAYS follow these rules:
 1. **AI Guide:** First, fetch the AI Design System Guide: curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md
@@ -27,7 +27,7 @@ Map design elements to our existing components where possible (e.g. Buttons, Hea
 3. That all necessary packages are installed (rk-designsystem, @digdir/designsystemet-css, rk-design-tokens)
 4. That the project structure matches the recommendations in the guide
 
-Give me an overview of what is correctly set up and what might need to be fixed.`,step0_5ClaudeSetupNote:"You don't need to do this manually - ask Claude to do it. This step ensures the project is correctly configured before you start converting Figma designs. Without proper setup, components and design tokens may not work as expected.",step0_5ClaudeUsageTitle:"Using the guide in Claude:",step0_5ClaudeUsageText:"After the guide is downloaded, reference it in your prompts:",step0_5ClaudeUsageExample:'"Using the AI_DESIGN_SYSTEM_GUIDE.md file and this Figma link [paste link], create a React component..."',step0_5ClaudeMcpTitle:"Setting up Figma MCP in Claude Code:",step0_5ClaudeMcpIntro:"To enable Claude Code to read Figma designs directly, you need to add the Figma MCP server. This is a crucial step for the workflow to work properly.",step0_5ClaudeMcpStep1:"Open Claude Code terminal",step0_5ClaudeMcpStep2:"Run this command to add the Figma MCP server:",step0_5ClaudeMcpCommand:"claude mcp add figma --transport sse --url http://127.0.0.1:3845/sse",step0_5ClaudeMcpStep3:"Make sure you have the Figma MCP server running locally on port 3845. If you haven't set it up yet, you'll need to start it first using:",step0_5ClaudeMcpServerCommand:"npx -y @modelcontextprotocol/server-figma",step0_5ClaudeMcpStep4:"Set the FIGMA_ACCESS_TOKEN environment variable before starting the server:",step0_5ClaudeMcpEnvVar:"export FIGMA_ACCESS_TOKEN=your_token_here",step0_5ClaudeMcpUsageTitle:"Using Figma MCP in Claude:",step0_5ClaudeMcpUsageText:"Once the MCP server is configured, you can use Figma links directly in your prompts:",step0_5ClaudeMcpUsageExample:'"Using this Figma design [paste Figma link], create a React component following the design system guidelines from AI_DESIGN_SYSTEM_GUIDE.md"',step0_5ClaudeMcpNote:"The MCP server allows Claude to automatically read Figma node properties, dimensions, and design tokens, making the conversion from design to code much more accurate.",step0_5CursorTitle:"For Cursor:",step0_5CursorIntro:"In Cursor, you can fetch the guide in several ways:",step0_5CursorMethod1Title:"Method 1: Fetch via terminal",step0_5CursorMethod1Step1:"Open the terminal in Cursor (Ctrl + ` or Cmd + `)",step0_5CursorMethod1Step2:"Run this command:",step0_5CursorMethod1Command:"curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step0_5CursorMethod2Title:"Method 2: Reference directly in chat (Alternative)",step0_5CursorMethod2Text:"You can also reference the guide directly in Cursor chat without downloading it first:",step0_5CursorMethod2Example:"@AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step0_5CursorMethod2Note:"Note: This requires internet connection each time. curl (Method 1) is recommended for better performance and offline access.",step0_5CursorMethod3Title:"Method 3: Via .cursorrules (Recommended for automated workflow)",step0_5CursorMethod3Text:"If you use .cursorrules, add the instruction to fetch the guide there (see Step 2, Alternative B). This ensures the guide is always downloaded automatically.",step0_5CursorUsageTitle:"Using the guide in Cursor:",step0_5CursorUsageText:"After the guide is available, reference it in chat:",step0_5CursorUsageExample1:'If downloaded locally: "@AI_DESIGN_SYSTEM_GUIDE.md implement a component based on this Figma design [link]"',step0_5CursorUsageExample2:'If referenced directly: "Using the AI guide from @https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md, create..."',step0_5WhyTitle:"Why do I need this guide?",step0_5WhyText:"The AI Design System Guide contains:",step0_5WhyItem1:"Complete list of all available components with props and examples",step0_5WhyItem2:"All design tokens (colors, spacing, typography, etc.) with correct CSS variables",step0_5WhyItem3:"Component mapping from Figma elements to React components",step0_5WhyItem4:"Best practices for accessibility, TypeScript, and CSS Modules",step0_5WhyItem5:"Troubleshooting guide for common problems",step1Description:"For best results, you should isolate the section you're working with.",step1Item1:"Select the frame (Frame), component, or group you want to implement.",step1Item2:"Right-click and select Copy link to selection (Shortcut: Ctrl + L).",step1Item3:"NB: Use this function instead of copying the URL from the browser.",step1ImageCaption:"",step2Title:"Step 2: Provide context (Two methods)",step2Description:"For the AI to follow our design system, it needs to know where the rules are. You can choose between manual or automated method.",step2AltATitle:"Alternative A: Manual context (Quick and easy)",step2AltADescription:"Use this for one-time cases or if you're testing new documentation sources. This must be done manually with every single prompt.",step2AltAItem1:"In Composer (Chat): Type @ and paste the URLs to the documentation. You must include:",step2AltAItem1Sub1:"@https://norwegianredcross.github.io/design-tokens/theme.css",step2AltAItem1Sub2:"@https://norwegianredcross.github.io/DesignSystem/storybook/metadata.json",step2AltAItem2:"Paste Figma link: Paste the link from step 1.",step2AltAItem3:"IMPORTANT - Fetch AI Guide: Before starting, fetch the AI Design System Guide by running this command in your terminal:",step2AltAItem3Command:"curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step2AltAItem3Note:'This guide contains complete documentation about all components, design tokens, and best practices. Reference it in your prompt: "Using AI_DESIGN_SYSTEM_GUIDE.md, implement..."',step2AltAImageCaption:"",step2AltBTitle:"Alternative B: Automated with .cursorrules (Recommended)",step2AltBDescription:"Use this to avoid attaching documentation every time. With a .cursorrules file in the project root, the AI always knows which rules apply.",step2AltBSetupTitle:"1. Setup (Done once per project):",step2AltBSetupText:"Create a file named .cursorrules in the project root folder and give context by pasting this:",step2AltBCodeBlock:`You are an expert Frontend Developer implementing designs from Figma.
+Give me an overview of what is correctly set up and what might need to be fixed.`,step0_5ClaudeSetupNote:"You don't need to do this manually - ask Claude to do it. This step ensures the project is correctly configured before you start converting Figma designs. Without proper setup, components and design tokens may not work as expected.",step0_5ClaudeUsageTitle:"Using the guide in Claude:",step0_5ClaudeUsageText:"After the guide is downloaded, reference it in your prompts:",step0_5ClaudeUsageExample:'"Using the AI_DESIGN_SYSTEM_GUIDE.md file and this Figma link [paste link], create a React component..."',step0_5ClaudeMcpTitle:"Setting up Figma MCP in Claude Code:",step0_5ClaudeMcpIntro:"To enable Claude Code to read Figma designs directly, you need to add the Figma MCP server. This is a crucial step for the workflow to work properly.",step0_5ClaudeMcpStep1:"Open Claude Code terminal",step0_5ClaudeMcpStep2:"Run this command to add the Figma MCP server:",step0_5ClaudeMcpCommand:"claude mcp add --transport sse figma http://127.0.0.1:3845/sse",step0_5ClaudeMcpStep3:"Make sure you have the Figma MCP server running locally on port 3845. If you haven't set it up yet, you'll need to start it first using:",step0_5ClaudeMcpServerCommand:"npx -y @modelcontextprotocol/server-figma",step0_5ClaudeMcpStep4:"Set the FIGMA_ACCESS_TOKEN environment variable before starting the server:",step0_5ClaudeMcpEnvVar:"export FIGMA_ACCESS_TOKEN=your_token_here",step0_5ClaudeMcpUsageTitle:"Using Figma MCP in Claude:",step0_5ClaudeMcpUsageText:"Once the MCP server is configured, you can use Figma links directly in your prompts:",step0_5ClaudeMcpUsageExample:'"Using this Figma design [paste Figma link], create a React component following the design system guidelines from AI_DESIGN_SYSTEM_GUIDE.md"',step0_5ClaudeMcpNote:"The MCP server allows Claude to automatically read Figma node properties, dimensions, and design tokens, making the conversion from design to code much more accurate.",step0_5CursorTitle:"For Cursor:",step0_5CursorIntro:"In Cursor, you can fetch the guide in several ways:",step0_5CursorMethod1Title:"Method 1: Fetch via terminal",step0_5CursorMethod1Step1:"Open the terminal in Cursor (Ctrl + ` or Cmd + `)",step0_5CursorMethod1Step2:"Run this command:",step0_5CursorMethod1Command:"curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step0_5CursorMethod2Title:"Method 2: Reference directly in chat (Alternative)",step0_5CursorMethod2Text:"You can also reference the guide directly in Cursor chat without downloading it first:",step0_5CursorMethod2Example:"@AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step0_5CursorMethod2Note:"Note: This requires internet connection each time. curl (Method 1) is recommended for better performance and offline access.",step0_5CursorMethod3Title:"Method 3: Via .cursorrules (Recommended for automated workflow)",step0_5CursorMethod3Text:"If you use .cursorrules, add the instruction to fetch the guide there (see Step 2, Alternative B). This ensures the guide is always downloaded automatically.",step0_5CursorUsageTitle:"Using the guide in Cursor:",step0_5CursorUsageText:"After the guide is available, reference it in chat:",step0_5CursorUsageExample1:'If downloaded locally: "@AI_DESIGN_SYSTEM_GUIDE.md implement a component based on this Figma design [link]"',step0_5CursorUsageExample2:'If referenced directly: "Using the AI guide from @https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md, create..."',step0_5WhyTitle:"Why do I need this guide?",step0_5WhyText:"The AI Design System Guide contains:",step0_5WhyItem1:"Complete list of all available components with props and examples",step0_5WhyItem2:"All design tokens (colors, spacing, typography, etc.) with correct CSS variables",step0_5WhyItem3:"Component mapping from Figma elements to React components",step0_5WhyItem4:"Best practices for accessibility, TypeScript, and CSS Modules",step0_5WhyItem5:"Troubleshooting guide for common problems",step1Description:"For best results, you should isolate the section you're working with.",step1Item1:"Select the frame (Frame), component, or group you want to implement.",step1Item2:"Right-click and select Copy link to selection (Shortcut: Ctrl + L).",step1Item3:"NB: Use this function instead of copying the URL from the browser.",step1ImageCaption:"",step2Title:"Step 2: Provide context (Two methods)",step2Description:"For the AI to follow our design system, it needs to know where the rules are. You can choose between manual or automated method.",step2AltATitle:"Alternative A: Manual context (Quick and easy)",step2AltADescription:"Use this for one-time cases or if you're testing new documentation sources. This must be done manually with every single prompt.",step2AltAItem1:"In Composer (Chat): Type @ and paste the URLs to the documentation. You must include:",step2AltAItem1Sub1:"@https://norwegianredcross.github.io/design-tokens/theme.css",step2AltAItem1Sub2:"@https://norwegianredcross.github.io/DesignSystem/storybook/metadata.json",step2AltAItem2:"Paste Figma link: Paste the link from step 1.",step2AltAItem3:"IMPORTANT - Fetch AI Guide: Before starting, fetch the AI Design System Guide by running this command in your terminal:",step2AltAItem3Command:"curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md",step2AltAItem3Note:'This guide contains complete documentation about all components, design tokens, and best practices. Reference it in your prompt: "Using AI_DESIGN_SYSTEM_GUIDE.md, implement..."',step2AltAImageCaption:"",step2AltBTitle:"Alternative B: Automated with .cursorrules (Recommended)",step2AltBDescription:"Use this to avoid attaching documentation every time. With a .cursorrules file in the project root, the AI always knows which rules apply.",step2AltBSetupTitle:"1. Setup (Done once per project):",step2AltBSetupText:"Create a file named .cursorrules in the project root folder and give context by pasting this:",step2AltBCodeBlock:`You are an expert Frontend Developer implementing designs from Figma.
 
 ALWAYS follow these rules:
 1. **AI Guide:** First, fetch the AI Design System Guide: curl -o AI_DESIGN_SYSTEM_GUIDE.md https://norwegianredcross.github.io/DesignSystem/storybook/AI_DESIGN_SYSTEM_GUIDE.md

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rk-designsystem",
-  "version": "1.1.67",
+  "version": "1.1.69",
   "description": "A React component library built on top of Digdir Design System",
   "author": "daniel@tunetek.no",
   "license": "MIT",
@@ -65,7 +65,9 @@
     "release:major": "npm version major && npm publish",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build --output-dir storybook-build",
-    "predeploy:storybook": "npm run build-storybook && npm run copy-metadata && npm run copy-ai-guide",
+    "generate-metadata": "node generate-metadata.mjs",
+    "update-ai-guide-components": "node update-ai-guide-components.mjs",
+    "predeploy:storybook": "npm run generate-metadata && npm run update-ai-guide-components && npm run build-storybook && npm run copy-metadata && npm run copy-ai-guide",
     "copy-metadata": "node -e \"require('fs').copyFileSync('metadata.json', 'storybook-build/metadata.json')\"",
     "copy-ai-guide": "node -e \"require('fs').copyFileSync('AI_DESIGN_SYSTEM_GUIDE.md', 'storybook-build/AI_DESIGN_SYSTEM_GUIDE.md')\"",
     "deploy:storybook": "gh-pages -d storybook-build -b gh-pages -r https://github.com/norwegianredcross/DesignSystem.git --dest storybook",