[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6QQJ7NEHXPE33VRVHYYM7YE":3,"skill-same:01M6QQJ7NEHXPE33VRVHYYM7YE":80},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":49,"commitSha":50,"skillDirectory":51,"forksCount":52,"repositoryHtmlUrl":53,"repositoryHomepageUrl":6,"ownerHtmlUrl":54,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":55,"install":56,"resources":69},"01M6QQJ7NEHXPE33VRVHYYM7YE","figma-swiftui",null,"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 \u002F screens \u002F 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 \u002F an `.xcodeproj`. Routes to a direction-specific reference doc; loads alongside `figma-use` for the code → design path.","SimaDevelopment\u002Fopsiforce","SimaDevelopment","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F153810655?v=4","01M6QQ054MKBDSS43AND3FNHDK","Opsima","01M6QQ058VFT6EY7HCBVN49G8Z",42,"AGPL-3.0","https:\u002F\u002Fgithub.com\u002FSimaDevelopment\u002Fopsiforce\u002Fblob\u002Fmain\u002Ffrontend\u002Fopencode\u002Fpackages\u002Fplugins\u002Ffigma\u002Fskills\u002Ffigma-swiftui\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"figma","figma swiftui","swiftui","back","path","my","URL","direction","screen","false","ipad","iphone","either","design","translation","files","doc","push","code","swift","2026-11-10 10:12:30",false,"---\nname: figma-swiftui\ndescription: \"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 \u002F screens \u002F 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 \u002F an `.xcodeproj`. Routes to a direction-specific reference doc; loads alongside `figma-use` for the code → design path.\"\ndisable-model-invocation: false\n---\n\n# Figma ↔ SwiftUI\n\nTranslation between Figma designs and SwiftUI code, both directions. This file is a router — actual guidance lives in the references below.\n\n## Pick the direction\n\n| Direction | Trigger | Reference |\n|---|---|---|\n| **Design → code** | User wants SwiftUI in their iOS project from a Figma file\u002Fframe | [references\u002Fdesign-to-code.md](references\u002Fdesign-to-code.md) |\n| **Code → design** | User wants to push SwiftUI views \u002F screens \u002F tokens into a Figma file | [references\u002Fcode-to-design.md](references\u002Fcode-to-design.md) |\n\nIf 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.\n\n## Shared context (applies to both directions)\n\nThese points hold regardless of direction; the direction-specific references assume them.\n\n1. **`get_design_context` is the read tool for Figma.** Pass `clientLanguages: \"swift\"` and `clientFrameworks: \"swiftui\"` so the response is framed as Swift. URL → tool args: `figma.com\u002Fdesign\u002F:fileKey\u002F:fileName?node-id=:nodeId` → use `fileKey`, replace `-` with `:` in `nodeId`. For `figma.com\u002Fdesign\u002F:fileKey\u002Fbranch\u002F:branchKey\u002F:fileName`, use `branchKey` as `fileKey`.\n2. **The React+Tailwind in `get_design_context` output is a structural reference, not a literal source.** It approximates the visual. Never transliterate `position: absolute` \u002F pixel frames \u002F `mix-blend-mode` stacks into SwiftUI or into Figma — the screenshot is the source of truth in both directions.\n3. **iOS HIG semantic colors are tokens, not hex.** `var(--backgrounds\u002Fprimary, …)`, `var(--labels\u002Fsecondary, …)`, `var(--separators\u002Fnon-opaque, …)` etc. map to `Color(.systemBackground)`, `Color.secondary`, `Color(.separator)` in SwiftUI, and to variables in a semantic collection in Figma. Keep the mapping; drop the literal RGBA.\n4. **SF Symbols round-trip by name in both directions — never by codepoint.** Design → code: `get_design_context` substitutes Figma's SF Symbol glyph runs back into `\u003CSFSymbol>{Image(systemName: \"...\")}\u003C\u002FSFSymbol>` wrappers in the response. Use those names verbatim. Code → design: call `figma.util.getSfSymbolCharacter(name)` inside `use_figma` to convert a symbol name to the matching character — never look up codepoints by hand.\n5. **Recognize the underlying iOS pattern, not the literal node \u002F view name.** The same patterns recur in both directions: large title + back chevron + trailing action = `NavigationStack` chrome; bottom row of icon+label pairs = `TabView`; repeating same-height rows with leading\u002Ftrailing chrome = `List`. Match those system patterns rather than rebuilding them from primitives.\n6. **For code → design, `use_figma` is the API.** Always load [`figma-use`](..\u002Ffigma-use\u002FSKILL.md) before any `use_figma` call. If the task involves building a full screen, also load [`figma-generate-design`](..\u002Ffigma-generate-design\u002FSKILL.md); if it involves building components or a design system, also load [`figma-generate-library`](..\u002Ffigma-generate-library\u002FSKILL.md).\n\n## References\n\n| Doc | When to load |\n|---|---|\n| [references\u002Fdesign-to-code.md](references\u002Fdesign-to-code.md) | Translating a Figma design \u002F frame into SwiftUI |\n| [references\u002Fcode-to-design.md](references\u002Fcode-to-design.md) | Pushing SwiftUI views \u002F screens \u002F tokens into Figma |\n","# Figma ↔ SwiftUI\n\nTranslation between Figma designs and SwiftUI code, both directions. This file is a router — actual guidance lives in the references below.\n\n## Pick the direction\n\n| Direction | Trigger | Reference |\n|---|---|---|\n| **Design → code** | User wants SwiftUI in their iOS project from a Figma file\u002Fframe | [references\u002Fdesign-to-code.md](references\u002Fdesign-to-code.md) |\n| **Code → design** | User wants to push SwiftUI views \u002F screens \u002F tokens into a Figma file | [references\u002Fcode-to-design.md](references\u002Fcode-to-design.md) |\n\nIf 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.\n\n## Shared context (applies to both directions)\n\nThese points hold regardless of direction; the direction-specific references assume them.\n\n1. **`get_design_context` is the read tool for Figma.** Pass `clientLanguages: \"swift\"` and `clientFrameworks: \"swiftui\"` so the response is framed as Swift. URL → tool args: `figma.com\u002Fdesign\u002F:fileKey\u002F:fileName?node-id=:nodeId` → use `fileKey`, replace `-` with `:` in `nodeId`. For `figma.com\u002Fdesign\u002F:fileKey\u002Fbranch\u002F:branchKey\u002F:fileName`, use `branchKey` as `fileKey`.\n2. **The React+Tailwind in `get_design_context` output is a structural reference, not a literal source.** It approximates the visual. Never transliterate `position: absolute` \u002F pixel frames \u002F `mix-blend-mode` stacks into SwiftUI or into Figma — the screenshot is the source of truth in both directions.\n3. **iOS HIG semantic colors are tokens, not hex.** `var(--backgrounds\u002Fprimary, …)`, `var(--labels\u002Fsecondary, …)`, `var(--separators\u002Fnon-opaque, …)` etc. map to `Color(.systemBackground)`, `Color.secondary`, `Color(.separator)` in SwiftUI, and to variables in a semantic collection in Figma. Keep the mapping; drop the literal RGBA.\n4. **SF Symbols round-trip by name in both directions — never by codepoint.** Design → code: `get_design_context` substitutes Figma's SF Symbol glyph runs back into `\u003CSFSymbol>{Image(systemName: \"...\")}\u003C\u002FSFSymbol>` wrappers in the response. Use those names verbatim. Code → design: call `figma.util.getSfSymbolCharacter(name)` inside `use_figma` to convert a symbol name to the matching character — never look up codepoints by hand.\n5. **Recognize the underlying iOS pattern, not the literal node \u002F view name.** The same patterns recur in both directions: large title + back chevron + trailing action = `NavigationStack` chrome; bottom row of icon+label pairs = `TabView`; repeating same-height rows with leading\u002Ftrailing chrome = `List`. Match those system patterns rather than rebuilding them from primitives.\n6. **For code → design, `use_figma` is the API.** Always load [`figma-use`](..\u002Ffigma-use\u002FSKILL.md) before any `use_figma` call. If the task involves building a full screen, also load [`figma-generate-design`](..\u002Ffigma-generate-design\u002FSKILL.md); if it involves building components or a design system, also load [`figma-generate-library`](..\u002Ffigma-generate-library\u002FSKILL.md).\n\n## References\n\n| Doc | When to load |\n|---|---|\n| [references\u002Fdesign-to-code.md](references\u002Fdesign-to-code.md) | Translating a Figma design \u002F frame into SwiftUI |\n| [references\u002Fcode-to-design.md](references\u002Fcode-to-design.md) | Pushing SwiftUI views \u002F screens \u002F tokens into Figma |\n",{"name":5,"description":7,"disable-model-invocation":45},"main","c54d8e35f50ac35b3b2c7ba8d4fca2205a740cb9","frontend\u002Fopencode\u002Fpackages\u002Fplugins\u002Ffigma\u002Fskills\u002Ffigma-swiftui",9,"https:\u002F\u002Fgithub.com\u002FSimaDevelopment\u002Fopsiforce","https:\u002F\u002Fgithub.com\u002FSimaDevelopment","2026-11-05 06:13:10",{"source":8,"skillName":5,"commands":57,"prompt":67,"zipAvailable":68},[58,61,64],{"tool":59,"command":60},"npx","npx skills add SimaDevelopment\u002Fopsiforce --skill figma-swiftui",{"tool":62,"command":63},"bunx","bunx skills add SimaDevelopment\u002Fopsiforce --skill figma-swiftui",{"tool":65,"command":66},"pnpm","pnpm dlx skills add SimaDevelopment\u002Fopsiforce --skill figma-swiftui","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FSimaDevelopment\u002Fopsiforce\u002Fblob\u002Fmain\u002Ffrontend\u002Fopencode\u002Fpackages\u002Fplugins\u002Ffigma\u002Fskills\u002Ffigma-swiftui\u002FSKILL.md",true,[70,76],{"path":71,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":74,"sourceHtmlUrl":75},"references\u002Fcode-to-design.md","REFERENCE","参考文档",18991,"https:\u002F\u002Fgithub.com\u002FSimaDevelopment\u002Fopsiforce\u002Fblob\u002Fmain\u002Ffrontend\u002Fopencode\u002Fpackages\u002Fplugins\u002Ffigma\u002Fskills\u002Ffigma-swiftui\u002Freferences\u002Fcode-to-design.md",{"path":77,"resourceType":72,"resourceTypeDesc":73,"sizeBytes":78,"sourceHtmlUrl":79},"references\u002Fdesign-to-code.md",37329,"https:\u002F\u002Fgithub.com\u002FSimaDevelopment\u002Fopsiforce\u002Fblob\u002Fmain\u002Ffrontend\u002Fopencode\u002Fpackages\u002Fplugins\u002Ffigma\u002Fskills\u002Ffigma-swiftui\u002Freferences\u002Fdesign-to-code.md",[81,116,135,156,166,188],{"skillNo":82,"name":83,"nameZh":6,"description":84,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":96,"publishedAt":44},"01M6QQKHZFGFB6A111RW2A9WC0","figma-use","**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create\u002Fedit\u002Fdelete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.","https:\u002F\u002Fgithub.com\u002FSimaDevelopment\u002Fopsiforce\u002Fblob\u002Fmain\u002Ffrontend\u002Fopencode\u002Fpackages\u002Fplugins\u002Ffigma\u002Fskills\u002Ffigma-use\u002FSKILL.md",[87,92,95],{"categoryNo":88,"categoryName":89,"taxonomyType":90,"taxonomyTypeDesc":91},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",{"categoryNo":93,"categoryName":94,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000030","开发工程师",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[97,24,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115],"figma use","use","components","create","delete","tool","read","write","edit","context","auto","structure","tokens","bind","Variables","you","inspect","variants","invoke",{"skillNo":117,"name":118,"nameZh":6,"description":119,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":120,"categories":121,"keywords":127,"publishedAt":44},"01M6QQK1AMA90K6DFAVANYQ9X3","figma-use-slides","This skill helps agents use Figma's use_figma MCP tool in the Slides context. Can be used alongside figma-use which has foundational context for using the use_figma tool.","https:\u002F\u002Fgithub.com\u002FSimaDevelopment\u002Fopsiforce\u002Fblob\u002Fmain\u002Ffrontend\u002Fopencode\u002Fpackages\u002Fplugins\u002Ffigma\u002Fskills\u002Ffigma-use-slides\u002FSKILL.md",[122,125,126],{"categoryNo":123,"categoryName":124,"taxonomyType":90,"taxonomyTypeDesc":91},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":88,"categoryName":89,"taxonomyType":90,"taxonomyTypeDesc":91},{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[97,24,128,129,98,130,102,106,33,131,132,133,134],"figma use slides","slides","MCP","which","can","for","figma mcp",{"skillNo":136,"name":137,"nameZh":6,"description":138,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":139,"categories":140,"keywords":143,"publishedAt":44},"01M6QQJTR9QYK297WQ1X792D63","figma-use-motion","Motion \u002F animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node.","https:\u002F\u002Fgithub.com\u002FSimaDevelopment\u002Fopsiforce\u002Fblob\u002Fmain\u002Ffrontend\u002Fopencode\u002Fpackages\u002Fplugins\u002Ffigma\u002Fskills\u002Ffigma-use-motion\u002FSKILL.md",[141,142],{"categoryNo":88,"categoryName":89,"taxonomyType":90,"taxonomyTypeDesc":91},{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[97,24,144,98,145,130,146,102,147,148,106,149,150,151,33,152,153,154,155,133],"figma use motion","motion","Animation","node","editing","Nodes","task","keyframes","via","styles","manual","load",{"skillNo":157,"name":158,"nameZh":6,"description":159,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":160,"categories":161,"keywords":164,"publishedAt":44},"01M6QQJNZ067ZRXZ6A0QB9M6SB","figma-use-figjam","This skill helps agents use Figma's use_figma MCP tool in the FigJam context. Can be used alongside figma-use which has foundational context for using the use_figma tool.","https:\u002F\u002Fgithub.com\u002FSimaDevelopment\u002Fopsiforce\u002Fblob\u002Fmain\u002Ffrontend\u002Fopencode\u002Fpackages\u002Fplugins\u002Ffigma\u002Fskills\u002Ffigma-use-figjam\u002FSKILL.md",[162,163],{"categoryNo":88,"categoryName":89,"taxonomyType":90,"taxonomyTypeDesc":91},{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[97,24,165,98,130,102,106,33,131,132,133,134],"figma use figjam",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":173,"publishedAt":44},"01M6QQJ3WZ3M90BZQ5TD305PKN","figma-shaders","**MANDATORY prerequisite** — load this skill before calling `create_shader` or `update_shader`. Use when the user asks to create, author, change, fix, or iterate on a shader effect, shader fill, custom effect, custom fill, or procedural shader in Figma.","https:\u002F\u002Fgithub.com\u002FSimaDevelopment\u002Fopsiforce\u002Fblob\u002Fmain\u002Ffrontend\u002Fopencode\u002Fpackages\u002Fplugins\u002Ffigma\u002Fskills\u002Ffigma-shaders\u002FSKILL.md",[172],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[174,24,175,176,100,177,178,179,180,98,181,182,33,183,155,184,185,186,187],"shaders","figma shaders","change","update","effect","user","fix","shader","calling","procedural","fill","iterate","custom","author",{"skillNo":189,"name":190,"nameZh":6,"description":191,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":192,"categories":193,"keywords":198,"publishedAt":44},"01M6QQHYJWPNPNXP7HW2XRX0RS","figma-implement-motion","Translates Figma motion and animations into production-ready application code. Use when implementing animation\u002Fmotion from a Figma design — user mentions \"implement this motion\", \"add animation from Figma\", \"animate this component\", provides a Figma URL whose node is animated, or when `get_design_context` returns motion data or instructs you to call `get_motion_context`.","https:\u002F\u002Fgithub.com\u002FSimaDevelopment\u002Fopsiforce\u002Fblob\u002Fmain\u002Ffrontend\u002Fopencode\u002Fpackages\u002Fplugins\u002Ffigma\u002Fskills\u002Ffigma-implement-motion\u002FSKILL.md",[194,197],{"categoryNo":195,"categoryName":196,"taxonomyType":90,"taxonomyTypeDesc":91},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},[199,24,200,145,37,201,42,202,146,203,147,106,204,205,33,206,30,112,207,208],"implement","figma implement motion","component","data","returns","ready","get","add","production-ready","implementing"]