figma-code-connect
Overview
Create parserless Code Connect template files (.figma.js) that map Figma components to code snippets. Given a Figma URL, follow the steps below to create a template.
Note: This project may also contain parser-based
.figma.tsxfiles (usingfigma.connect(), published via CLI). This skill covers parserless templates only —.figma.jsfiles that use the MCP tools to fetch component context from Figma.
Prerequisites
- Figma MCP server must be connected — verify that Figma MCP tools (e.g.,
get_code_connect_suggestions) are available before proceeding. If not, guide the user to enable the Figma MCP server and restart their MCP client. - Components must be published — Code Connect only works with components published to a Figma team library. If a component is not published, inform the user and stop.
- Organization or Enterprise plan required — Code Connect is not available on Free or Professional plans.
- URL must include
node-id— the Figma URL must contain thenode-idquery parameter.
Step 1: Parse the Figma URL
Extract fileKey and nodeId from the URL:
| URL Format | fileKey | nodeId |
|---|
More from openai/plugins
plugin-creator
Create and scaffold plugin directories for Codex with a required `.codex-plugin/plugin.json`, optional plugin folders/files, and baseline placeholders you can edit before publishing or testing. Use when Codex needs to create a new personal plugin, add optional plugin structure, or generate or update personal or repo-root `.agents/plugins/marketplace.json` entries for plugin ordering and availability metadata.
71swiftui-liquid-glass
Implement, review, or improve SwiftUI features using the iOS 26+ Liquid Glass API. Use when asked to adopt Liquid Glass in new SwiftUI UI, refactor an existing feature to Liquid Glass, or review Liquid Glass usage for correctness, performance, and design alignment.
29swiftui-ui-patterns
Best practices and example-driven guidance for building SwiftUI views and components, including navigation hierarchies, custom view modifiers, and responsive layouts with stacks and grids. Use when creating or refactoring SwiftUI UI, designing tab architecture with TabView, composing screens with VStack/HStack, managing @State or @Binding, building declarative iOS interfaces, or needing component-specific patterns and examples.
27ios-debugger-agent
Use XcodeBuildMCP to build, run, launch, and debug the current iOS project on a booted simulator. Trigger when asked to run an iOS app, interact with the simulator UI, inspect on-screen state, capture logs/console output, or diagnose runtime behavior using XcodeBuildMCP tools.
27swiftui-view-refactor
Refactor and review SwiftUI view files with strong defaults for small dedicated subviews, MV-over-MVVM data flow, stable view trees, explicit dependency injection, and correct Observation usage. Use when cleaning up a SwiftUI view, splitting long bodies, removing inline actions or side effects, reducing computed `some View` helpers, or standardizing `@Observable` and view model initialization patterns.
27swiftui-performance-audit
Audit and improve SwiftUI runtime performance from code review and architecture. Use for requests to diagnose slow rendering, janky scrolling, high CPU/memory usage, excessive view updates, or layout thrash in SwiftUI apps, and to provide guidance for user-run Instruments profiling when code review alone is insufficient.
27