{
  "schemaVersion": "1.0",
  "item": {
    "slug": "aioz-ui-skills",
    "name": "AIOZ UI Skills",
    "source": "tencent",
    "type": "skill",
    "category": "开发工具",
    "sourceUrl": "https://clawhub.ai/datnguyen26730/aioz-ui-skills",
    "canonicalUrl": "https://clawhub.ai/datnguyen26730/aioz-ui-skills",
    "targetPlatform": "OpenClaw"
  },
  "install": {
    "downloadMode": "redirect",
    "downloadUrl": "/downloads/aioz-ui-skills",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=aioz-ui-skills",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "installMethod": "Manual import",
    "extraction": "Extract archive",
    "prerequisites": [
      "OpenClaw"
    ],
    "packageFormat": "ZIP package",
    "includedAssets": [
      "SKILL.md",
      "references/chart.md",
      "references/typography.md",
      "references/icons.md",
      "references/setup.md",
      "references/colors.md"
    ],
    "primaryDoc": "SKILL.md",
    "quickSetup": [
      "Download the package from Yavira.",
      "Extract the archive and review SKILL.md first.",
      "Import or place the package into your OpenClaw setup."
    ],
    "agentAssist": {
      "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
      "steps": [
        "Download the package from Yavira.",
        "Extract it into a folder your agent can access.",
        "Paste one of the prompts below and point your agent at the extracted folder."
      ],
      "prompts": [
        {
          "label": "New install",
          "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
        },
        {
          "label": "Upgrade existing",
          "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
        }
      ]
    },
    "sourceHealth": {
      "source": "tencent",
      "status": "healthy",
      "reason": "direct_download_ok",
      "recommendedAction": "download",
      "checkedAt": "2026-04-23T16:43:11.935Z",
      "expiresAt": "2026-04-30T16:43:11.935Z",
      "httpStatus": 200,
      "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
      "contentType": "application/zip",
      "probeMethod": "head",
      "details": {
        "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=4claw-imageboard",
        "contentDisposition": "attachment; filename=\"4claw-imageboard-1.0.1.zip\"",
        "redirectLocation": null,
        "bodySnippet": null
      },
      "scope": "source",
      "summary": "Source download looks usable.",
      "detail": "Yavira can redirect you to the upstream package for this source.",
      "primaryActionLabel": "Download for OpenClaw",
      "primaryActionHref": "/downloads/aioz-ui-skills"
    },
    "validation": {
      "installChecklist": [
        "Use the Yavira download entry.",
        "Review SKILL.md after the package is downloaded.",
        "Confirm the extracted package contains the expected setup assets."
      ],
      "postInstallChecks": [
        "Confirm the extracted package includes the expected docs or setup files.",
        "Validate the skill or prompts are available in your target agent workspace.",
        "Capture any manual follow-up steps the agent could not complete."
      ]
    },
    "downloadPageUrl": "https://openagent3.xyz/downloads/aioz-ui-skills",
    "agentPageUrl": "https://openagent3.xyz/skills/aioz-ui-skills/agent",
    "manifestUrl": "https://openagent3.xyz/skills/aioz-ui-skills/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/aioz-ui-skills/agent.md"
  },
  "agentAssist": {
    "summary": "Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.",
    "steps": [
      "Download the package from Yavira.",
      "Extract it into a folder your agent can access.",
      "Paste one of the prompts below and point your agent at the extracted folder."
    ],
    "prompts": [
      {
        "label": "New install",
        "body": "I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete."
      },
      {
        "label": "Upgrade existing",
        "body": "I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run."
      }
    ]
  },
  "documentation": {
    "source": "clawhub",
    "primaryDoc": "SKILL.md",
    "sections": [
      {
        "title": "AIOZ UI V3 — Figma MCP → Code Mapping Skill",
        "body": "This skill defines exactly how to translate Figma MCP output into production React code using the AIOZ UI V3 design system.\n\nRule #1: Never guess token names or class names. Always follow the mapping tables below."
      },
      {
        "title": "How Figma MCP Returns Data",
        "body": "When the Figma MCP agent inspects a node, it returns values in these formats:\n\nData TypeFigma MCP ExampleActionColor / fillOnsf/Error/Default, Sf/Pri/Pri→ Look up in references/colors.mdTypographyButton/01, Body/02, Subheadline/01→ Look up in references/typography.mdIcon layericon/24px/outline/wallet-01→ Look up in references/icons.mdComponent nameButton/Primary, Badge/Success, Fields/Default→ See Component Map belowVariant stringType=Primary, Size=Medium, Shape=Square→ See Variant → Prop Map belowVariable value\"Onsf/Bra/Default\": \"#121212\"Slash-path format, never CSS --varSetup / configProject configuration questions→ Look up in references/setup.md\n\n⚠️ Figma MCP always returns token names with slash separators like Onsf/Error/Default.\nIt does NOT return CSS custom property format like --onsf-error-default."
      },
      {
        "title": "⚠️ Two Import Paths — Never Mix Them",
        "body": "// Charts — @aioz-ui/core/components\nimport {\n  LineChart,\n  AreaChart,\n  BarChart,\n  DonutChart,\n  CustomLegend,\n  Separator,\n  useSeriesVisibility,\n} from '@aioz-ui/core/components'\n\n// All other UI components — @aioz-ui/core-v3/components\nimport {\n  Button,\n  Input,\n  Badge,\n  Table,\n  Header,\n  Body,\n  Row,\n  HeadCell,\n  Cell,\n} from '@aioz-ui/core-v3/components'\n\n// Icons — @aioz-ui/icon-react (always PascalCase + \"Icon\" suffix)\nimport { Search01Icon, Plus01Icon, Wallet01Icon } from '@aioz-ui/icon-react'"
      },
      {
        "title": "Component Map",
        "body": "Input: Figma MCP name field on a symbol/instance node\nOutput: React component to use\n\nFigma Node Name PatternReact ComponentImportButton/*Buttonimport { Button } from '@aioz-ui/core-v3/components'Fields/*Inputimport { Input } from '@aioz-ui/core-v3/components'Badge/*Badgeimport { Badge } from '@aioz-ui/core-v3/components'Tag/*Tagimport { Tag } from '@aioz-ui/core-v3/components'Card/*Cardimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@aioz-ui/core-v3/components'Toggle/*Switchimport { Switch } from '@aioz-ui/core-v3/components'Checkbox/*Checkboximport { Checkbox } from '@aioz-ui/core-v3/components'Tooltips/*Tooltipimport { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from '@aioz-ui/core-v3/components'Tabs/*Tabsimport { Tabs, TabsList, TabsTrigger, TabsContent } from '@aioz-ui/core-v3/components'Table/*Tableimport { Table, Header, Body, Row, HeadCell, Cell } from '@aioz-ui/core-v3/components'Separator/*Separatorimport { Separator } from '@aioz-ui/core-v3/components'Pagination item/*PaginationGroupimport { PaginationGroup } from '@aioz-ui/core-v3/components'Progress bar/*Progressimport { Progress } from '@aioz-ui/core-v3/components'Slider/*Sliderimport { Slider } from '@aioz-ui/core-v3/components'Upload file/*UploadFileimport { UploadFile } from '@aioz-ui/core-v3/components'Menu item/*MenuItemimport { MenuItem } from '@aioz-ui/core-v3/components'Dropdown item/*DropdownMenuimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@aioz-ui/core-v3/components'Modal/*Dialogimport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from '@aioz-ui/core-v3/components'Block/*Blockimport { Block } from '@aioz-ui/core-v3/components'IconBadge/*IconBadgeimport { IconBadge } from '@aioz-ui/core-v3/components'Message/*Messageimport { Message } from '@aioz-ui/core-v3/components'Breadcrumb/*Breadcrumbimport { Breadcrumb } from '@aioz-ui/core-v3/components'Date picker/*DatePickerimport { DatePicker } from '@aioz-ui/core-v3/components'"
      },
      {
        "title": "Variant → Prop Map",
        "body": "Figma MCP encodes variants as comma-separated Key=Value pairs in the node name:\n\n\"Type=Primary, Size=Medium, Icon Only=False, Shape=Square, Danger=False, State=Hover\"\n\nFigma VariantReact PropNotesType=Primaryvariant=\"primary\"Type=Secondaryvariant=\"secondary\"Type=Neutralvariant=\"neutral\"Type=Textvariant=\"text\"Type=Danger / Danger=Truevariant=\"danger\"Size=Largesize=\"lg\"Size=Mediumsize=\"md\"Size=Smallsize=\"sm\"Shape=Circleshape=\"circle\"Shape=Squareshape=\"square\"Shape=Defaultshape=\"default\"State=Default(no prop)Default render stateState=Hover(no prop)CSS handles itState=Focused(no prop)CSS handles itState=Pressed(no prop)CSS handles itState=DisableddisabledState=LoadingloadingIcon Only=Truesize=\"icon\"Button only"
      },
      {
        "title": "Full Translation Example",
        "body": "Given this Figma MCP output:\n\n{\n  \"name\": \"Type=Primary, Size=Medium, Icon Only=False, Shape=Square, Danger=False, State=Default\",\n  \"fills\": [{ \"token\": \"Sf/Pri/Pri\" }],\n  \"textColor\": \"Onsf/Bra/Default\",\n  \"typography\": \"Button/01\"\n}\n\nTranslate to:\n\nimport { Button } from '@aioz-ui/core-v3/components'\n;<Button variant=\"primary\" size=\"md\" shape=\"square\">\n  Label\n</Button>\n\nColors and typography are handled by Button internally. Apply color/typography classes manually only when building custom layouts outside of component primitives."
      },
      {
        "title": "Core Rules",
        "body": "Token-first — Never use raw Tailwind colors or sizing.\n❌  text-gray-500   bg-white   border-gray-200   text-sm font-medium\n✅  text-content-sec   bg-sf-screen   border-border-neutral   text-body-02\n\n\n\nComponent-first — Use design system primitives over custom divs. See Component Map above.\n\n\nTypography is atomic — Each text-* class already encodes font-size, line-height, weight, and font-family. Never stack additional font utilities on top.\n\n\nIcons only from @aioz-ui/icon-react — Never SVG literals, emoji, or other libraries.\nimport { Search01Icon } from '@aioz-ui/icon-react'\n;<Search01Icon size={16} className=\"text-icon-neutral\" />\n\n\n\nOn-surface text — Text on a bg-sf-* surface must use the matching text-onsf-* class:\nbg-sf-pri        →  text-onsf-text-pri\nbg-sf-error-sec  →  text-onsf-text-error\nbg-sf-neutral    →  text-onsf-text-neutral\n\n\n\nCharts — Always import from @aioz-ui/core/components (not -v3). Always wrap in the card shell. Always provide both categories and overwriteCategories. Read references/charts.md before writing any chart code."
      },
      {
        "title": "Reference Files",
        "body": "Open the relevant file for deep-dive API docs, full token lists, and component examples:\n\nFileOpen Whenreferences/colors.mdFull token → Tailwind class tables for text, background, and border tokensreferences/typography.mdFull text-* class list with font-size, weight, and line-height specsreferences/icons.mdIcon name transformation rule, size guide, and common icon import listreferences/components.mdFull props, all variants, and ready-to-use code examples for every componentreferences/charts.mdLineChart, AreaChart, BarChart, DonutChart — APIs, variants, legend, hidden-series"
      }
    ],
    "body": "AIOZ UI V3 — Figma MCP → Code Mapping Skill\n\nThis skill defines exactly how to translate Figma MCP output into production React code using the AIOZ UI V3 design system.\n\nRule #1: Never guess token names or class names. Always follow the mapping tables below.\n\nHow Figma MCP Returns Data\n\nWhen the Figma MCP agent inspects a node, it returns values in these formats:\n\nData Type\tFigma MCP Example\tAction\nColor / fill\tOnsf/Error/Default, Sf/Pri/Pri\t→ Look up in references/colors.md\nTypography\tButton/01, Body/02, Subheadline/01\t→ Look up in references/typography.md\nIcon layer\ticon/24px/outline/wallet-01\t→ Look up in references/icons.md\nComponent name\tButton/Primary, Badge/Success, Fields/Default\t→ See Component Map below\nVariant string\tType=Primary, Size=Medium, Shape=Square\t→ See Variant → Prop Map below\nVariable value\t\"Onsf/Bra/Default\": \"#121212\"\tSlash-path format, never CSS --var\nSetup / config\tProject configuration questions\t→ Look up in references/setup.md\n\n⚠️ Figma MCP always returns token names with slash separators like Onsf/Error/Default. It does NOT return CSS custom property format like --onsf-error-default.\n\n⚠️ Two Import Paths — Never Mix Them\n// Charts — @aioz-ui/core/components\nimport {\n  LineChart,\n  AreaChart,\n  BarChart,\n  DonutChart,\n  CustomLegend,\n  Separator,\n  useSeriesVisibility,\n} from '@aioz-ui/core/components'\n\n// All other UI components — @aioz-ui/core-v3/components\nimport {\n  Button,\n  Input,\n  Badge,\n  Table,\n  Header,\n  Body,\n  Row,\n  HeadCell,\n  Cell,\n} from '@aioz-ui/core-v3/components'\n\n// Icons — @aioz-ui/icon-react (always PascalCase + \"Icon\" suffix)\nimport { Search01Icon, Plus01Icon, Wallet01Icon } from '@aioz-ui/icon-react'\n\nComponent Map\n\nInput: Figma MCP name field on a symbol/instance node Output: React component to use\n\nFigma Node Name Pattern\tReact Component\tImport\nButton/*\tButton\timport { Button } from '@aioz-ui/core-v3/components'\nFields/*\tInput\timport { Input } from '@aioz-ui/core-v3/components'\nBadge/*\tBadge\timport { Badge } from '@aioz-ui/core-v3/components'\nTag/*\tTag\timport { Tag } from '@aioz-ui/core-v3/components'\nCard/*\tCard\timport { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@aioz-ui/core-v3/components'\nToggle/*\tSwitch\timport { Switch } from '@aioz-ui/core-v3/components'\nCheckbox/*\tCheckbox\timport { Checkbox } from '@aioz-ui/core-v3/components'\nTooltips/*\tTooltip\timport { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from '@aioz-ui/core-v3/components'\nTabs/*\tTabs\timport { Tabs, TabsList, TabsTrigger, TabsContent } from '@aioz-ui/core-v3/components'\nTable/*\tTable\timport { Table, Header, Body, Row, HeadCell, Cell } from '@aioz-ui/core-v3/components'\nSeparator/*\tSeparator\timport { Separator } from '@aioz-ui/core-v3/components'\nPagination item/*\tPaginationGroup\timport { PaginationGroup } from '@aioz-ui/core-v3/components'\nProgress bar/*\tProgress\timport { Progress } from '@aioz-ui/core-v3/components'\nSlider/*\tSlider\timport { Slider } from '@aioz-ui/core-v3/components'\nUpload file/*\tUploadFile\timport { UploadFile } from '@aioz-ui/core-v3/components'\nMenu item/*\tMenuItem\timport { MenuItem } from '@aioz-ui/core-v3/components'\nDropdown item/*\tDropdownMenu\timport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@aioz-ui/core-v3/components'\nModal/*\tDialog\timport { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from '@aioz-ui/core-v3/components'\nBlock/*\tBlock\timport { Block } from '@aioz-ui/core-v3/components'\nIconBadge/*\tIconBadge\timport { IconBadge } from '@aioz-ui/core-v3/components'\nMessage/*\tMessage\timport { Message } from '@aioz-ui/core-v3/components'\nBreadcrumb/*\tBreadcrumb\timport { Breadcrumb } from '@aioz-ui/core-v3/components'\nDate picker/*\tDatePicker\timport { DatePicker } from '@aioz-ui/core-v3/components'\nVariant → Prop Map\n\nFigma MCP encodes variants as comma-separated Key=Value pairs in the node name:\n\n\"Type=Primary, Size=Medium, Icon Only=False, Shape=Square, Danger=False, State=Hover\"\n\nFigma Variant\tReact Prop\tNotes\nType=Primary\tvariant=\"primary\"\t\nType=Secondary\tvariant=\"secondary\"\t\nType=Neutral\tvariant=\"neutral\"\t\nType=Text\tvariant=\"text\"\t\nType=Danger / Danger=True\tvariant=\"danger\"\t\nSize=Large\tsize=\"lg\"\t\nSize=Medium\tsize=\"md\"\t\nSize=Small\tsize=\"sm\"\t\nShape=Circle\tshape=\"circle\"\t\nShape=Square\tshape=\"square\"\t\nShape=Default\tshape=\"default\"\t\nState=Default\t(no prop)\tDefault render state\nState=Hover\t(no prop)\tCSS handles it\nState=Focused\t(no prop)\tCSS handles it\nState=Pressed\t(no prop)\tCSS handles it\nState=Disabled\tdisabled\t\nState=Loading\tloading\t\nIcon Only=True\tsize=\"icon\"\tButton only\nFull Translation Example\n\nGiven this Figma MCP output:\n\n{\n  \"name\": \"Type=Primary, Size=Medium, Icon Only=False, Shape=Square, Danger=False, State=Default\",\n  \"fills\": [{ \"token\": \"Sf/Pri/Pri\" }],\n  \"textColor\": \"Onsf/Bra/Default\",\n  \"typography\": \"Button/01\"\n}\n\n\nTranslate to:\n\nimport { Button } from '@aioz-ui/core-v3/components'\n;<Button variant=\"primary\" size=\"md\" shape=\"square\">\n  Label\n</Button>\n\n\nColors and typography are handled by Button internally. Apply color/typography classes manually only when building custom layouts outside of component primitives.\n\nCore Rules\n\nToken-first — Never use raw Tailwind colors or sizing.\n\n❌  text-gray-500   bg-white   border-gray-200   text-sm font-medium\n✅  text-content-sec   bg-sf-screen   border-border-neutral   text-body-02\n\n\nComponent-first — Use design system primitives over custom divs. See Component Map above.\n\nTypography is atomic — Each text-* class already encodes font-size, line-height, weight, and font-family. Never stack additional font utilities on top.\n\nIcons only from @aioz-ui/icon-react — Never SVG literals, emoji, or other libraries.\n\nimport { Search01Icon } from '@aioz-ui/icon-react'\n;<Search01Icon size={16} className=\"text-icon-neutral\" />\n\n\nOn-surface text — Text on a bg-sf-* surface must use the matching text-onsf-* class:\n\nbg-sf-pri        →  text-onsf-text-pri\nbg-sf-error-sec  →  text-onsf-text-error\nbg-sf-neutral    →  text-onsf-text-neutral\n\n\nCharts — Always import from @aioz-ui/core/components (not -v3). Always wrap in the card shell. Always provide both categories and overwriteCategories. Read references/charts.md before writing any chart code.\n\nReference Files\n\nOpen the relevant file for deep-dive API docs, full token lists, and component examples:\n\nFile\tOpen When\nreferences/colors.md\tFull token → Tailwind class tables for text, background, and border tokens\nreferences/typography.md\tFull text-* class list with font-size, weight, and line-height specs\nreferences/icons.md\tIcon name transformation rule, size guide, and common icon import list\nreferences/components.md\tFull props, all variants, and ready-to-use code examples for every component\nreferences/charts.md\tLineChart, AreaChart, BarChart, DonutChart — APIs, variants, legend, hidden-series"
  },
  "trust": {
    "sourceLabel": "tencent",
    "provenanceUrl": "https://clawhub.ai/datnguyen26730/aioz-ui-skills",
    "publisherUrl": "https://clawhub.ai/datnguyen26730/aioz-ui-skills",
    "owner": "datnguyen26730",
    "version": "1.0.1",
    "license": null,
    "verificationStatus": "Indexed source record"
  },
  "links": {
    "detailUrl": "https://openagent3.xyz/skills/aioz-ui-skills",
    "downloadUrl": "https://openagent3.xyz/downloads/aioz-ui-skills",
    "agentUrl": "https://openagent3.xyz/skills/aioz-ui-skills/agent",
    "manifestUrl": "https://openagent3.xyz/skills/aioz-ui-skills/agent.json",
    "briefUrl": "https://openagent3.xyz/skills/aioz-ui-skills/agent.md"
  }
}