Requirements
- Target platform
- OpenClaw
- Install method
- Manual import
- Extraction
- Extract archive
- Prerequisites
- OpenClaw
- Primary doc
- SKILL.md
Tencent SkillHub Β· Developer Tools
AIOZ UI Skills
Build UI components and pages using AIOZ UI V3 design system. Use this skill whenever the user wants to create, edit, or style React components using AIOZ UI...
skill openclawclawhub Free
Build UI components and pages using AIOZ UI V3 design system. Use this skill whenever the user wants to create, edit, or style React components using AIOZ UI...
β¬ 0 downloads β
0 stars Unverified but indexed
Install for OpenClaw
Quick setup
- Download the package from Yavira.
- Extract the archive and review SKILL.md first.
- Import or place the package into your OpenClaw setup.
Package facts
- Download mode
- Yavira redirect
- Package format
- ZIP package
- Source platform
- Tencent SkillHub
- What's included
- SKILL.md, references/chart.md, references/typography.md, references/icons.md, references/setup.md, references/colors.md
Validation
- Use the Yavira download entry.
- Review SKILL.md after the package is downloaded.
- Confirm the extracted package contains the expected setup assets.
Install with your agent
Agent handoff
Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.
- 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.
New install
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
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.
Trust & source
Release facts
- Source
- Tencent SkillHub
- Verification
- Indexed source record
- Version
- 1.0.1
Provenance
- Publisher
- datnguyen26730
- Source page
- View original listing
- Canonical URL
- Open canonical page
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
Category context
Code helpers, APIs, CLIs, browser automation, testing, and developer operations.
Source: Tencent SkillHub
Largest current source with strong distribution and engagement signals.
Package contents
Included in package
6 Docs
- SKILL.md
- references/chart.md
- references/colors.md
- references/icons.md
- references/setup.md
- references/typography.md