[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6QQ893GAQD2YNKYY0FBSNFA":3,"skill-same:01M6QQ893GAQD2YNKYY0FBSNFA":65},{"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":18,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":44,"commitSha":45,"skillDirectory":46,"forksCount":47,"repositoryHtmlUrl":48,"repositoryHomepageUrl":6,"ownerHtmlUrl":49,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":50,"install":51,"resources":64},"01M6QQ893GAQD2YNKYY0FBSNFA","dnd-kit",null,"Add drag-and-drop functionality with @dnd-kit. Use whenever the user wants to reorder items, sort a list, build a kanban board, or any drag-to-rearrange interaction. For reordering\u002Fsorting use dnd-kit; for free-drag\u002Fswipe gestures (drag a card around, swipe-to-dismiss) use the animations skill.","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\u002Fagent-config\u002Fskills\u002Fdnd-kit\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"dnd kit","kit","dnd","card","animations","for","sort","with","sorting","drag","swipe","gestures","interaction","free","drop","build","kanban","use","list","board","2026-11-10 10:12:30",false,"---\nname: dnd-kit\ndescription: Add drag-and-drop functionality with @dnd-kit. Use whenever the user wants to reorder items, sort a list, build a kanban board, or any drag-to-rearrange interaction. For reordering\u002Fsorting use dnd-kit; for free-drag\u002Fswipe gestures (drag a card around, swipe-to-dismiss) use the animations skill.\n---\n\n# dnd-kit — Drag and Drop\n\n## Sortable list (most common pattern)\n\n```tsx\nimport { DndContext, closestCenter, type DragEndEvent } from \"@dnd-kit\u002Fcore\"\nimport { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from \"@dnd-kit\u002Fsortable\"\nimport { CSS } from \"@dnd-kit\u002Futilities\"\nimport { GripVertical } from \"lucide-react\"\n\ninterface Item { id: string; title: string }\n\nfunction SortableItem({ item }: { item: Item }) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item.id })\n  const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.5 : 1 }\n\n  return (\n    \u003Cdiv ref={setNodeRef} style={style} className=\"flex items-center gap-2 rounded-lg border bg-card p-3\">\n      \u003Cbutton {...attributes} {...listeners} className=\"cursor-grab active:cursor-grabbing text-muted-foreground\">\n        \u003CGripVertical className=\"h-4 w-4\" \u002F>\n      \u003C\u002Fbutton>\n      \u003Cspan>{item.title}\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  )\n}\n\nfunction SortableList() {\n  const [items, setItems] = useState\u003CItem[]>([\n    { id: \"1\", title: \"First\" },\n    { id: \"2\", title: \"Second\" },\n    { id: \"3\", title: \"Third\" },\n  ])\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (over && active.id !== over.id) {\n      setItems((prev) => {\n        const oldIndex = prev.findIndex((i) => i.id === active.id)\n        const newIndex = prev.findIndex((i) => i.id === over.id)\n        return arrayMove(prev, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    \u003CDndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>\n      \u003CSortableContext items={items} strategy={verticalListSortingStrategy}>\n        \u003Cdiv className=\"space-y-2\">\n          {items.map((item) => \u003CSortableItem key={item.id} item={item} \u002F>)}\n        \u003C\u002Fdiv>\n      \u003C\u002FSortableContext>\n    \u003C\u002FDndContext>\n  )\n}\n```\n\n## Kanban board (multiple columns)\n\nColumns are droppable zones (`useDroppable`); cards are the `SortableItem` from above. `over.id` on drop is either a column id (dropped on empty space) or a card id (dropped on another card) — resolve both to a column, then move the card.\n\n```tsx\nimport { DndContext, type DragEndEvent, DragOverlay, type DragStartEvent, useDroppable } from \"@dnd-kit\u002Fcore\"\nimport { SortableContext, verticalListSortingStrategy } from \"@dnd-kit\u002Fsortable\"\n\ntype ColumnId = \"todo\" | \"doing\" | \"done\"\ntype Columns = Record\u003CColumnId, Item[]>\n\nconst COLUMN_TITLES: Record\u003CColumnId, string> = { todo: \"To Do\", doing: \"In Progress\", done: \"Done\" }\n\nfunction Column({ id, items }: { id: ColumnId; items: Item[] }) {\n  const { setNodeRef, isOver } = useDroppable({ id })\n  return (\n    \u003Cdiv className=\"flex-1\">\n      \u003Ch3 className=\"mb-2 text-sm font-medium text-muted-foreground\">{COLUMN_TITLES[id]}\u003C\u002Fh3>\n      \u003CSortableContext items={items} strategy={verticalListSortingStrategy}>\n        \u003Cdiv\n          ref={setNodeRef}\n          className={cn(\"min-h-24 space-y-2 rounded-lg border p-2\", isOver && \"bg-muted\u002F50\")}\n        >\n          {items.map((item) => \u003CSortableItem key={item.id} item={item} \u002F>)}\n        \u003C\u002Fdiv>\n      \u003C\u002FSortableContext>\n    \u003C\u002Fdiv>\n  )\n}\n\nfunction KanbanBoard() {\n  const [columns, setColumns] = useState\u003CColumns>({\n    todo: [{ id: \"1\", title: \"First\" }, { id: \"2\", title: \"Second\" }],\n    doing: [{ id: \"3\", title: \"Third\" }],\n    done: [],\n  })\n  const [activeId, setActiveId] = useState\u003Cstring | null>(null)\n\n  const columnIds = Object.keys(columns) as ColumnId[]\n  const findColumn = (id: string): ColumnId | undefined =>\n    columnIds.find((col) => columns[col].some((item) => item.id === id))\n  const findItem = (id: string): Item | undefined =>\n    columnIds.flatMap((col) => columns[col]).find((item) => item.id === id)\n\n  function handleDragStart(event: DragStartEvent) {\n    setActiveId(event.active.id as string)\n  }\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    setActiveId(null)\n    if (!over) return\n\n    const activeItemId = active.id as string\n    const overId = over.id as string\n    const from = findColumn(activeItemId)\n    const to = columnIds.includes(overId as ColumnId) ? (overId as ColumnId) : findColumn(overId)\n    if (!from || !to || from === to) return\n\n    setColumns((prev) => {\n      const item = prev[from].find((i) => i.id === activeItemId)\n      if (!item) return prev\n      return {\n        ...prev,\n        [from]: prev[from].filter((i) => i.id !== activeItemId),\n        [to]: [...prev[to], item],\n      }\n    })\n  }\n\n  const activeItem = activeId ? findItem(activeId) : undefined\n\n  return (\n    \u003CDndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>\n      \u003Cdiv className=\"flex gap-4\">\n        {columnIds.map((id) => \u003CColumn key={id} id={id} items={columns[id]} \u002F>)}\n      \u003C\u002Fdiv>\n      \u003CDragOverlay>{activeItem ? \u003CSortableItem item={activeItem} \u002F> : null}\u003C\u002FDragOverlay>\n    \u003C\u002FDndContext>\n  )\n}\n```\n\nThis moves a card only between different columns; to also reorder within a column, add an `arrayMove` branch when `from === to` (see the sortable list above). `useDroppable`, `cn`, and `useState` are imported from `@dnd-kit\u002Fcore`, `@\u002Flib\u002Futils`, and `react` respectively.\n\n## Key rules\n\n- Every draggable item needs a unique string `id`\n- Use `arrayMove` from `@dnd-kit\u002Fsortable` to reorder arrays\n- `useSortable` hook provides `attributes`, `listeners`, `setNodeRef`, `transform`, `transition`\n- Apply `CSS.Transform.toString(transform)` as inline style\n- Use `DragOverlay` for a floating preview during drag\n","# dnd-kit — Drag and Drop\n\n## Sortable list (most common pattern)\n\n```tsx\nimport { DndContext, closestCenter, type DragEndEvent } from \"@dnd-kit\u002Fcore\"\nimport { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from \"@dnd-kit\u002Fsortable\"\nimport { CSS } from \"@dnd-kit\u002Futilities\"\nimport { GripVertical } from \"lucide-react\"\n\ninterface Item { id: string; title: string }\n\nfunction SortableItem({ item }: { item: Item }) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: item.id })\n  const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.5 : 1 }\n\n  return (\n    \u003Cdiv ref={setNodeRef} style={style} className=\"flex items-center gap-2 rounded-lg border bg-card p-3\">\n      \u003Cbutton {...attributes} {...listeners} className=\"cursor-grab active:cursor-grabbing text-muted-foreground\">\n        \u003CGripVertical className=\"h-4 w-4\" \u002F>\n      \u003C\u002Fbutton>\n      \u003Cspan>{item.title}\u003C\u002Fspan>\n    \u003C\u002Fdiv>\n  )\n}\n\nfunction SortableList() {\n  const [items, setItems] = useState\u003CItem[]>([\n    { id: \"1\", title: \"First\" },\n    { id: \"2\", title: \"Second\" },\n    { id: \"3\", title: \"Third\" },\n  ])\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    if (over && active.id !== over.id) {\n      setItems((prev) => {\n        const oldIndex = prev.findIndex((i) => i.id === active.id)\n        const newIndex = prev.findIndex((i) => i.id === over.id)\n        return arrayMove(prev, oldIndex, newIndex)\n      })\n    }\n  }\n\n  return (\n    \u003CDndContext collisionDetection={closestCenter} onDragEnd={handleDragEnd}>\n      \u003CSortableContext items={items} strategy={verticalListSortingStrategy}>\n        \u003Cdiv className=\"space-y-2\">\n          {items.map((item) => \u003CSortableItem key={item.id} item={item} \u002F>)}\n        \u003C\u002Fdiv>\n      \u003C\u002FSortableContext>\n    \u003C\u002FDndContext>\n  )\n}\n```\n\n## Kanban board (multiple columns)\n\nColumns are droppable zones (`useDroppable`); cards are the `SortableItem` from above. `over.id` on drop is either a column id (dropped on empty space) or a card id (dropped on another card) — resolve both to a column, then move the card.\n\n```tsx\nimport { DndContext, type DragEndEvent, DragOverlay, type DragStartEvent, useDroppable } from \"@dnd-kit\u002Fcore\"\nimport { SortableContext, verticalListSortingStrategy } from \"@dnd-kit\u002Fsortable\"\n\ntype ColumnId = \"todo\" | \"doing\" | \"done\"\ntype Columns = Record\u003CColumnId, Item[]>\n\nconst COLUMN_TITLES: Record\u003CColumnId, string> = { todo: \"To Do\", doing: \"In Progress\", done: \"Done\" }\n\nfunction Column({ id, items }: { id: ColumnId; items: Item[] }) {\n  const { setNodeRef, isOver } = useDroppable({ id })\n  return (\n    \u003Cdiv className=\"flex-1\">\n      \u003Ch3 className=\"mb-2 text-sm font-medium text-muted-foreground\">{COLUMN_TITLES[id]}\u003C\u002Fh3>\n      \u003CSortableContext items={items} strategy={verticalListSortingStrategy}>\n        \u003Cdiv\n          ref={setNodeRef}\n          className={cn(\"min-h-24 space-y-2 rounded-lg border p-2\", isOver && \"bg-muted\u002F50\")}\n        >\n          {items.map((item) => \u003CSortableItem key={item.id} item={item} \u002F>)}\n        \u003C\u002Fdiv>\n      \u003C\u002FSortableContext>\n    \u003C\u002Fdiv>\n  )\n}\n\nfunction KanbanBoard() {\n  const [columns, setColumns] = useState\u003CColumns>({\n    todo: [{ id: \"1\", title: \"First\" }, { id: \"2\", title: \"Second\" }],\n    doing: [{ id: \"3\", title: \"Third\" }],\n    done: [],\n  })\n  const [activeId, setActiveId] = useState\u003Cstring | null>(null)\n\n  const columnIds = Object.keys(columns) as ColumnId[]\n  const findColumn = (id: string): ColumnId | undefined =>\n    columnIds.find((col) => columns[col].some((item) => item.id === id))\n  const findItem = (id: string): Item | undefined =>\n    columnIds.flatMap((col) => columns[col]).find((item) => item.id === id)\n\n  function handleDragStart(event: DragStartEvent) {\n    setActiveId(event.active.id as string)\n  }\n\n  function handleDragEnd(event: DragEndEvent) {\n    const { active, over } = event\n    setActiveId(null)\n    if (!over) return\n\n    const activeItemId = active.id as string\n    const overId = over.id as string\n    const from = findColumn(activeItemId)\n    const to = columnIds.includes(overId as ColumnId) ? (overId as ColumnId) : findColumn(overId)\n    if (!from || !to || from === to) return\n\n    setColumns((prev) => {\n      const item = prev[from].find((i) => i.id === activeItemId)\n      if (!item) return prev\n      return {\n        ...prev,\n        [from]: prev[from].filter((i) => i.id !== activeItemId),\n        [to]: [...prev[to], item],\n      }\n    })\n  }\n\n  const activeItem = activeId ? findItem(activeId) : undefined\n\n  return (\n    \u003CDndContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>\n      \u003Cdiv className=\"flex gap-4\">\n        {columnIds.map((id) => \u003CColumn key={id} id={id} items={columns[id]} \u002F>)}\n      \u003C\u002Fdiv>\n      \u003CDragOverlay>{activeItem ? \u003CSortableItem item={activeItem} \u002F> : null}\u003C\u002FDragOverlay>\n    \u003C\u002FDndContext>\n  )\n}\n```\n\nThis moves a card only between different columns; to also reorder within a column, add an `arrayMove` branch when `from === to` (see the sortable list above). `useDroppable`, `cn`, and `useState` are imported from `@dnd-kit\u002Fcore`, `@\u002Flib\u002Futils`, and `react` respectively.\n\n## Key rules\n\n- Every draggable item needs a unique string `id`\n- Use `arrayMove` from `@dnd-kit\u002Fsortable` to reorder arrays\n- `useSortable` hook provides `attributes`, `listeners`, `setNodeRef`, `transform`, `transition`\n- Apply `CSS.Transform.toString(transform)` as inline style\n- Use `DragOverlay` for a floating preview during drag\n",{"name":5,"description":7},"main","c54d8e35f50ac35b3b2c7ba8d4fca2205a740cb9","agent-config\u002Fskills\u002Fdnd-kit",9,"https:\u002F\u002Fgithub.com\u002FSimaDevelopment\u002Fopsiforce","https:\u002F\u002Fgithub.com\u002FSimaDevelopment","2026-11-05 06:13:10",{"source":8,"skillName":5,"commands":52,"prompt":62,"zipAvailable":63},[53,56,59],{"tool":54,"command":55},"npx","npx skills add SimaDevelopment\u002Fopsiforce --skill dnd-kit",{"tool":57,"command":58},"bunx","bunx skills add SimaDevelopment\u002Fopsiforce --skill dnd-kit",{"tool":60,"command":61},"pnpm","pnpm dlx skills add SimaDevelopment\u002Fopsiforce --skill dnd-kit","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FSimaDevelopment\u002Fopsiforce\u002Fblob\u002Fmain\u002Fagent-config\u002Fskills\u002Fdnd-kit\u002FSKILL.md",true,[],[66,105,124,145,155,181],{"skillNo":67,"name":68,"nameZh":6,"description":69,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":70,"categories":71,"keywords":85,"publishedAt":39},"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",[72,77,82],{"categoryNo":73,"categoryName":74,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000023","Skill与智能体开发","SCENARIO","使用场景",{"categoryNo":78,"categoryName":79,"taxonomyType":80,"taxonomyTypeDesc":81},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",{"categoryNo":83,"categoryName":84,"taxonomyType":80,"taxonomyTypeDesc":81},"01JBSEEDCAT000000000000032","设计师",[86,87,36,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104],"figma use","figma","components","create","delete","tool","read","write","edit","context","auto","structure","tokens","bind","Variables","you","inspect","variants","invoke",{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":109,"categories":110,"keywords":116,"publishedAt":39},"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",[111,114,115],{"categoryNo":112,"categoryName":113,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":73,"categoryName":74,"taxonomyType":75,"taxonomyTypeDesc":76},{"categoryNo":83,"categoryName":84,"taxonomyType":80,"taxonomyTypeDesc":81},[86,87,117,118,36,119,91,95,120,121,122,24,123],"figma use slides","slides","MCP","false","which","can","figma mcp",{"skillNo":125,"name":126,"nameZh":6,"description":127,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":128,"categories":129,"keywords":132,"publishedAt":39},"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",[130,131],{"categoryNo":73,"categoryName":74,"taxonomyType":75,"taxonomyTypeDesc":76},{"categoryNo":83,"categoryName":84,"taxonomyType":80,"taxonomyTypeDesc":81},[86,87,133,36,134,119,135,91,136,137,95,138,139,140,120,141,142,143,144,24],"figma use motion","motion","Animation","node","editing","Nodes","task","keyframes","via","styles","manual","load",{"skillNo":146,"name":147,"nameZh":6,"description":148,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":149,"categories":150,"keywords":153,"publishedAt":39},"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",[151,152],{"categoryNo":73,"categoryName":74,"taxonomyType":75,"taxonomyTypeDesc":76},{"categoryNo":83,"categoryName":84,"taxonomyType":80,"taxonomyTypeDesc":81},[86,87,154,36,119,91,95,120,121,122,24,123],"figma use figjam",{"skillNo":156,"name":157,"nameZh":6,"description":158,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":159,"categories":160,"keywords":162,"publishedAt":39},"01M6QQJ7NEHXPE33VRVHYYM7YE","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 \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.","https:\u002F\u002Fgithub.com\u002FSimaDevelopment\u002Fopsiforce\u002Fblob\u002Fmain\u002Ffrontend\u002Fopencode\u002Fpackages\u002Fplugins\u002Ffigma\u002Fskills\u002Ffigma-swiftui\u002FSKILL.md",[161],{"categoryNo":83,"categoryName":84,"taxonomyType":80,"taxonomyTypeDesc":81},[87,163,164,165,166,167,168,169,170,171,172,173,174,175,120,176,177,178,179,180],"figma swiftui","swiftui","design","swift","code","push","doc","files","translation","back","either","iphone","ipad","screen","direction","URL","my","path",{"skillNo":182,"name":183,"nameZh":6,"description":184,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":185,"categories":186,"keywords":188,"publishedAt":39},"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",[187],{"categoryNo":83,"categoryName":84,"taxonomyType":80,"taxonomyTypeDesc":81},[189,87,190,191,89,192,193,194,195,36,196,197,120,198,144,199,200,201,202],"shaders","figma shaders","change","update","effect","user","fix","shader","calling","procedural","fill","iterate","custom","author"]