Official Verified

aioz-ui-v3

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 tokens, Tailwind classes, color tokens, typography utilities, icons from @aioz-ui/icon-react, or chart components (LineChart, AreaChart, BarChart, DonutChart). Trigger on any task involving AIOZ UI components, design tokens like --sf-neu-block or --text-neu-bold, brand colors, typography classes (text-title-01, text-body-02), icon imports, data visualization, or translating Figma MCP output into production-ready code.

skill-install — Terminal

Install via CLI (Recommended)

clawhub install openclaw/skills/skills/datnguyen26730/aioz-ui-skills

Download Source Code (.zip)

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 Type	Figma MCP Example	Action
Color / fill	`Onsf/Error/Default`, `Sf/Pri/Pri`	→ Look up in `references/colors.md`
Typography	`Button/01`, `Body/02`, `Subheadline/01`	→ Look up in `references/typography.md`
Icon layer	`icon/24px/outline/wallet-01`	→ Look up in `references/icons.md`
Component name	`Button/Primary`, `Badge/Success`, `Fields/Default`	→ See Component Map below
Variant string	`Type=Primary, Size=Medium, Shape=Square`	→ See Variant → Prop Map below
Variable value	`"Onsf/Bra/Default": "#121212"`	Slash-path format, never CSS `--var`
Setup / config	Project 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

Read Full Documentation on GitHub

Metadata

Author@datnguyen26730

Stars2387

Updated2026-03-09

View Author Profile

AI Skill Finder

Not sure this is the right skill?

Describe what you want to build — we'll match you to the best skill from 16,000+ options.

Find the right skill

Add to Configuration

Paste this into your clawhub.json to enable this plugin.

{
  "plugins": {
    "official-datnguyen26730-aioz-ui-skills": {
      "enabled": true,
      "auto_update": true
    }
  }
}

Safety NoteClawKit audits metadata but not runtime behavior. Use with caution.

Related Skills

aioz-ui-v3

datnguyen26730 2387