moliboy5000/figma-swiftui
plugins/cache/claude-plugins-official/figma/2.2.78/skills/figma-swiftui/SKILL.md
SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside `.swift` files / an `.xcodeproj`. Routes to a direction-specific reference doc; loads alongside `figma-use` for the code → design path.
development
Updated Jul 13, 2026
$ install --global
skillsauthnpx skillsauth add moliboy5000/.claude figma-swiftuiInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jun 9, 2026, 2:53 AM258.0s3 files scanned
SKILL.md
- name:
- figma-swiftui
- description:
- SwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside `.swift` files / an `.xcodeproj`. Routes to a direction-specific reference doc; loads alongside `figma-use` for the code → design path.
- disable-model-invocation:
- false
Figma ↔ SwiftUI
Translation between Figma designs and SwiftUI code, both directions. This file is a router — actual guidance lives in the references below.
Pick the direction
| Direction | Trigger | Reference | |---|---|---| | Design → code | User wants SwiftUI in their iOS project from a Figma file/frame | references/design-to-code.md | | Code → design | User wants to push SwiftUI views / screens / tokens into a Figma file | references/code-to-design.md |
If the request is ambiguous — a Figma URL and .swift files both present, no verb makes it clear — ask the user which direction before loading a reference.
Shared context (applies to both directions)
These points hold regardless of direction; the direction-specific references assume them.
get_design_contextis the read tool for Figma. PassclientLanguages: "swift"andclientFrameworks: "swiftui"so the response is framed as Swift. URL → tool args:figma.com/design/:fileKey/:fileName?node-id=:nodeId→ usefileKey, replace-with:innodeId. Forfigma.com/design/:fileKey/branch/:branchKey/:fileName, usebranchKeyasfileKey.- The React+Tailwind in
get_design_contextoutput is a structural reference, not a literal source. It approximates the visual. Never transliterateposition: absolute/ pixel frames /mix-blend-modestacks into SwiftUI or into Figma — the screenshot is the source of truth in both directions. - iOS HIG semantic colors are tokens, not hex.
var(--backgrounds/primary, …),var(--labels/secondary, …),var(--separators/non-opaque, …)etc. map toColor(.systemBackground),Color.secondary,Color(.separator)in SwiftUI, and to variables in a semantic collection in Figma. Keep the mapping; drop the literal RGBA. - SF Symbols round-trip by name in both directions — never by codepoint. Design → code:
get_design_contextsubstitutes Figma's SF Symbol glyph runs back into<SFSymbol>{Image(systemName: "...")}</SFSymbol>wrappers in the response. Use those names verbatim. Code → design: callfigma.util.getSfSymbolCharacter(name)insideuse_figmato convert a symbol name to the matching character — never look up codepoints by hand. - Recognize the underlying iOS pattern, not the literal node / view name. The same patterns recur in both directions: large title + back chevron + trailing action =
NavigationStackchrome; bottom row of icon+label pairs =TabView; repeating same-height rows with leading/trailing chrome =List. Match those system patterns rather than rebuilding them from primitives. - For code → design,
use_figmais the API. Always loadfigma-usebefore anyuse_figmacall. If the task involves building a full screen, also loadfigma-generate-design; if it involves building components or a design system, also loadfigma-generate-library.
References
| Doc | When to load | |---|---| | references/design-to-code.md | Translating a Figma design / frame into SwiftUI | | references/code-to-design.md | Pushing SwiftUI views / screens / tokens into Figma |
Related Skills
moliboy5000/figma-generate-diagram
tools
VerifiedTrustedCommunity
MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. NEVER call `generate_diagram` directly without loading this skill first. Trigger whenever the user asks to create, generate, draw, render, sketch, or build a diagram — flowchart, architecture diagram, sequence diagram, ERD or entity-relationship diagram, state diagram or state machine, gantt chart, or timeline. Also trigger when the user mentions Mermaid syntax or wants a system architecture, decision tree, dependency graph, API call flow, auth handshake, schema, or pipeline visualized in FigJam. Routes to type-specific guidance, sets universal Mermaid constraints, and tells you when to use a different diagram type or skip the tool entirely (mindmaps, pie charts, class diagrams, etc.).
SKILL.mdUpdated Jul 26, 2026
moliboy5000/codex-orchestrator
development
VerifiedTrustedCommunity
DEFAULT PIPELINE for all tasks requiring execution. You (Claude) are the strategic orchestrator. Codex agents are your implementation army - hyper-focused coding specialists. Trigger on ANY task involving code, file modifications, codebase research, multi-step work, or implementation. This is NOT optional - Codex agents are the default for all execution work. Only skip if the user explicitly asks you to do something yourself.
SKILL.mdUpdated Jul 13, 2026
moliboy5000/video-interaction-mapper
development
VerifiedTrustedCommunity
This skill should be used when the user asks to analyze a UI screen recording and map interaction states into Figma. Trigger for requests such as "put video frames in Figma", "extract states from my recording", "map interactions from video to Figma", "analyze this screen recording", "create a storyboard from my video", "deconstruct this interaction in Figma", "annotate the UI states in my recording", or "pull the key moments from this video into Figma". Also trigger when the user references a video file (.mp4, .mov, .webm, .avi) together with Figma, design review, interaction analysis, prototypes, or UI states. The skill extracts key visual moments from a video, infers interaction triggers, and builds an annotated Figma Design storyboard using native Figma annotations and uploaded screenshot assets.
SKILL.mdUpdated Jul 13, 2026
moliboy5000/generate-project-plan
development
VerifiedTrustedCommunity
Generate a FigJam project plan board from a PRD plus codebase context. Interactive flow: research → propose sections → per-section deep research → per-section content + block-shape proposal → create FigJam → skeleton → fill → diagrams → wrap. Each content block (section, nested section, intro callout, table, multi-column text, sticky column, diagram section, metadata strip) has its own subskill reference file. Use when the user asks for 'project plan in FigJam', 'interactive project plan', '/generate-project-plan', or provides a PRD and wants per-section confirmation on content + rendering.
SKILL.mdUpdated Jul 13, 2026