CtrlK
BlogDocsLog inGet started
Tessl Logo

figma-swiftui

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.

75

Quality

94%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

The canonical home for this skill is figma-swiftui in figma/mcp-server-guide

SKILL.md
Quality
Evals
Security

Quality

Content

92%Weight 40%Scale 1-5

Reviews the quality of instructions and guidance provided to agents. Good implementation is clear, handles edge cases, and produces reliable results.

An exemplary router-style SKILL.md: unambiguous direction selection with an explicit ambiguity checkpoint, dense non-obvious shared context (tool args, URL parsing, SF Symbols, semantic colors, pattern recognition), and verified one-level-deep references. The only trim opportunity is the redundant References table duplicating links already in the direction table.

Suggestions

Drop the trailing 'References' table (or fold its 'When to load' wording into the 'Pick the direction' table) — both tables list the same two files, and removing the duplication tightens the body further.

If keeping both tables, merge them into one table with Direction, Trigger, and Reference columns to eliminate the repeated links.

DimensionReasoningScore

Conciseness

The body is lean router content — no concept explanations Claude already knows, and the six shared-context points are dense non-obvious operational knowledge (tool args, URL parsing, SF Symbol handling). Not a 5 only because the bottom "References" table ("references/design-to-code.md... Translating a Figma design / frame into SwiftUI") duplicates the two links already given in the "Pick the direction" table — a minor redundancy that could be trimmed.

4 / 5

Actionability

Fully concrete, executable guidance: exact tool arguments ("Pass `clientLanguages: "swift"` and `clientFrameworks: "swiftui""), a precise URL-parsing recipe ("figma.com/design/:fileKey/:fileName?node-id=:nodeId → use fileKey, replace - with : in nodeId"), a specific API call ("call `figma.util.getSfSymbolCharacter(name)`"), and exact color token mappings ("map to `Color(.systemBackground)`, `Color.secondary`, `Color(.separator)`"). Specific guidance covers the common cases for a router file.

5 / 5

Workflow Clarity

The routing workflow is unambiguous: a decision table for direction, an explicit disambiguation checkpoint ("If the request is ambiguous... ask the user which direction before loading a reference"), and explicit loading rules for companion skills ("Always load figma-use before any use_figma call"). No destructive or batch operations, so no validation checkpoint is required for this single-purpose router.

5 / 5

Progressive Disclosure

Clear overview with well-signaled one-level-deep references: the direction table maps each case to a specific doc with 'When to load' conditions, and both referenced files (references/design-to-code.md and references/code-to-design.md) exist in the bundle as real one-level-deep targets. Content is appropriately split — deep translation detail lives in the references, not inlined here.

5 / 5

Total

19

/

20

Passed

Description

96%Weight 40%Scale 1-5

Based on the skill's description, can an agent find and select it at the right time? Clear, specific descriptions lead to better discovery.

A strong description: it states both directions of translation concretely, gives explicit natural-language trigger phrases plus file-extension triggers, and describes routing behavior. The only weakness is a slightly over-broad trigger on any Swift/SwiftUI/iOS mention, which risks firing when Figma is not involved.

Suggestions

Tighten the 'when' clause so a Figma context is required (e.g. 'Use when translating between Figma designs and SwiftUI code' plus the current trigger phrases) rather than triggering on any Swift, SwiftUI, iOS, iPhone, or iPad mention alone.

Consider scoping the trigger phrases so it's clear the skill only applies when a Figma file/URL or design-translation intent is present, reducing conflict with general iOS development skills.

DimensionReasoningScore

Specificity

Multiple concrete, specific actions with comprehensive coverage of the domain: "translating a Figma design into SwiftUI (design → code)" and "pushing SwiftUI views / screens / tokens back into a Figma file (code → design)". Not a level below (4), because coverage of both directions plus routing behavior is complete rather than having minor gaps.

5 / 5

Completeness

Explicitly answers both questions: what ("SwiftUI ↔ Figma translation... in EITHER direction") and when ("Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad", "Triggers on phrases like..."). Both are concrete and explicit, matching the anchor-5 example structure exactly.

5 / 5

Trigger Term Quality

Comprehensive natural terms including synonyms and file extensions: "Swift, SwiftUI, iOS, iPhone, or iPad", "`.swift` files / an `.xcodeproj`", "a Figma URL", plus natural user phrases like "'implement this Figma design in SwiftUI'" and "'push this SwiftUI view to Figma'". This matches the anchor-5 example's pattern (domain terms + natural phrasings + file extensions).

5 / 5

Distinctiveness Conflict Risk

Mostly a distinct niche (SwiftUI ↔ Figma specifically), but "Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad" is broad enough to fire on general SwiftUI/iOS questions with no Figma involvement — minor overlap risk with generic iOS-development skills. Not a 3, because the Figma-translation framing and URL/file-extension triggers still make the core niche clear.

4 / 5

Total

19

/

20

Passed

Validation

93%

Checks the skill against the spec for correct structure and formatting. All validation checks must pass before discovery and implementation can be scored.

Validation — 15 / 16 Passed

Validation for skill structure

CriteriaDescriptionResult

relative_links

Relative link issues: 3 suspicious

Warning

Total

15

/

16

Passed

Repository
openai/plugins
Reviewed

Table of Contents

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.