# Send AIOZ UI Skills to your agent
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
## Fast path
- 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.
## Suggested prompts
### New install

```text
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.
```
### Upgrade existing

```text
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.
```
## Machine-readable fields
```json
{
  "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": {
    "downloadUrl": "/downloads/aioz-ui-skills",
    "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=aioz-ui-skills",
    "sourcePlatform": "tencent",
    "targetPlatform": "OpenClaw",
    "packageFormat": "ZIP package",
    "primaryDoc": "SKILL.md",
    "includedAssets": [
      "SKILL.md",
      "references/chart.md",
      "references/typography.md",
      "references/icons.md",
      "references/setup.md",
      "references/colors.md"
    ],
    "downloadMode": "redirect",
    "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."
      ]
    }
  },
  "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"
  }
}
```
## Documentation

### AIOZ UI V3 — Figma MCP → Code Mapping Skill

This skill defines exactly how to translate Figma MCP output into production React code using the AIOZ UI V3 design system.

Rule #1: Never guess token names or class names. Always follow the mapping tables below.

### How Figma MCP Returns Data

When the Figma MCP agent inspects a node, it returns values in these formats:

Data 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

⚠️ 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.

### ⚠️ Two Import Paths — Never Mix Them

// Charts — @aioz-ui/core/components
import {
  LineChart,
  AreaChart,
  BarChart,
  DonutChart,
  CustomLegend,
  Separator,
  useSeriesVisibility,
} from '@aioz-ui/core/components'

// All other UI components — @aioz-ui/core-v3/components
import {
  Button,
  Input,
  Badge,
  Table,
  Header,
  Body,
  Row,
  HeadCell,
  Cell,
} from '@aioz-ui/core-v3/components'

// Icons — @aioz-ui/icon-react (always PascalCase + "Icon" suffix)
import { Search01Icon, Plus01Icon, Wallet01Icon } from '@aioz-ui/icon-react'

### Component Map

Input: Figma MCP name field on a symbol/instance node
Output: React component to use

Figma 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'

### Variant → Prop Map

Figma MCP encodes variants as comma-separated Key=Value pairs in the node name:

"Type=Primary, Size=Medium, Icon Only=False, Shape=Square, Danger=False, State=Hover"

Figma 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

### Full Translation Example

Given this Figma MCP output:

{
  "name": "Type=Primary, Size=Medium, Icon Only=False, Shape=Square, Danger=False, State=Default",
  "fills": [{ "token": "Sf/Pri/Pri" }],
  "textColor": "Onsf/Bra/Default",
  "typography": "Button/01"
}

Translate to:

import { Button } from '@aioz-ui/core-v3/components'
;<Button variant="primary" size="md" shape="square">
  Label
</Button>

Colors and typography are handled by Button internally. Apply color/typography classes manually only when building custom layouts outside of component primitives.

### Core Rules

Token-first — Never use raw Tailwind colors or sizing.
❌  text-gray-500   bg-white   border-gray-200   text-sm font-medium
✅  text-content-sec   bg-sf-screen   border-border-neutral   text-body-02



Component-first — Use design system primitives over custom divs. See Component Map above.


Typography is atomic — Each text-* class already encodes font-size, line-height, weight, and font-family. Never stack additional font utilities on top.


Icons only from @aioz-ui/icon-react — Never SVG literals, emoji, or other libraries.
import { Search01Icon } from '@aioz-ui/icon-react'
;<Search01Icon size={16} className="text-icon-neutral" />



On-surface text — Text on a bg-sf-* surface must use the matching text-onsf-* class:
bg-sf-pri        →  text-onsf-text-pri
bg-sf-error-sec  →  text-onsf-text-error
bg-sf-neutral    →  text-onsf-text-neutral



Charts — 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.

### Reference Files

Open the relevant file for deep-dive API docs, full token lists, and component examples:

FileOpen 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
## Trust
- Source: tencent
- Verification: Indexed source record
- Publisher: datnguyen26730
- Version: 1.0.1
## Source health
- Status: healthy
- Source download looks usable.
- Yavira can redirect you to the upstream package for this source.
- Health scope: source
- Reason: direct_download_ok
- Checked at: 2026-04-23T16:43:11.935Z
- Expires at: 2026-04-30T16:43:11.935Z
- Recommended action: Download for OpenClaw
## Links
- [Detail page](https://openagent3.xyz/skills/aioz-ui-skills)
- [Send to Agent page](https://openagent3.xyz/skills/aioz-ui-skills/agent)
- [JSON manifest](https://openagent3.xyz/skills/aioz-ui-skills/agent.json)
- [Markdown brief](https://openagent3.xyz/skills/aioz-ui-skills/agent.md)
- [Download page](https://openagent3.xyz/downloads/aioz-ui-skills)