Figma Code Connect Components
Skill AktivConnects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.
To streamline the design-to-code workflow by enabling efficient and accurate mapping of Figma components to their code counterparts, ensuring design-code consistency.
Funktionen
- Identify unmapped Figma components
- Search codebase for matching code components
- Present mapping suggestions to the user
- Create Code Connect mappings via tool calls
- Handle different Figma URL and desktop selections
Anwendungsfälle
- Connecting a specific Figma component (e.g., a button) to its code implementation
- Mapping multiple components within a Figma frame to code
- Creating new code components based on Figma designs
- Maintaining design-code synchronization through automated linking
Nicht-Ziele
- Writing directly to the Figma canvas using Plugin API scripts
- Generating full-page Figma designs from code or descriptions
- Implementing product code from Figma designs (beyond mapping)
Trust
- warning:Issues AttentionOpen issues (30) are significantly higher than closed issues (6) in the last 90 days, indicating slow response times or a backlog.
Versioning
- warning:Release ManagementThere is no explicit versioning declared in the frontmatter, `package.json`, or GitHub release tags, and install instructions reference `main`.
Install
- info:Installation instructionInstallation instructions are provided in the main README, but there are no specific copy-paste invocation examples for this skill itself within the skill's documentation.
Installation
npx skills add openai/skillsFührt das Vercel skills CLI (skills.sh) via npx aus — benötigt Node.js lokal und mindestens einen installierten skills-kompatiblen Agent (Claude Code, Cursor, Codex, …). Setzt voraus, dass das Repo dem agentskills.io-Format folgt.
Qualitätspunktzahl
Vertrauenssignale
Ähnliche Erweiterungen
Figma Code Connect
98Erstellt und pflegt Figma Code Connect-Vorlagendateien, die Figma-Komponenten mit Code-Snippets verknüpfen. Verwenden Sie dies, wenn der Benutzer Code Connect, die Zuordnung von Figma-Komponenten, die Design-zu-Code-Übersetzung erwähnt oder darum bittet, `.figma.ts`- oder `.figma.js`-Dateien zu erstellen/aktualisieren.
Generate Project Plan
98Generiert ein FigJam-Projektplan-Board aus einem PRD plus Codebase-Kontext. Interaktiver Ablauf: Recherche → Abschnitte vorschlagen → tiefgehende Recherche pro Abschnitt → Vorschlag für Inhalt + Blockstruktur pro Abschnitt → FigJam erstellen → Skelett → füllen → Diagramme → abschließen. Jeder Inhaltsblock (Abschnitt, verschachtelter Abschnitt, Einführungsaufruf, Tabelle, mehrspaltiger Text, Sticky-Spalte, Diagrammabschnitt, Metadatenleiste) hat seine eigene Unterfertigkeits-Referenzdatei. Verwenden Sie dies, wenn der Benutzer nach 'Projektplan in FigJam', 'interaktiver Projektplan', '/generate-project-plan' fragt oder ein PRD bereitstellt und eine Bestätigung pro Abschnitt für Inhalt + Rendering wünscht.
Typescript Advanced Types
100Master TypeScript's advanced type system including generics, conditional types, mapped types, template literals, and utility types for building type-safe applications. Use when implementing complex type logic, creating reusable type utilities, or ensuring compile-time type safety in TypeScript projects.
Validate Plugin
100Validate a Claude Code plugin structure, frontmatter, and MCP tool references
Migrate Validate
100Validate pending migrations for foreign key consistency, rollback safety, and best practices
Lean Ctx
100Context Runtime für KI-Agenten — 59 MCP-Tools, 10 Lesemodi, über 95 Shell-Muster, Tree-sitter AST für 18 Sprachen. Komprimiert LLM-Kontext um bis zu 99%. Verwenden Sie es beim Lesen von Dateien, Ausführen von Shell-Befehlen, Suchen von Code oder Erkunden von Verzeichnissen. Automatische Installation, falls nicht vorhanden.