Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
AIOZ UI V3 is a React design system with its own component library, design tokens, typography utilities, and icon set. This skill maps Figma MCP node output, including color tokens, variant strings, and typography labels, to the correct React components, props, and import paths. It covers form fields, tables, charts, modals, and more.
Eliminates token and class name guessing by providing exact lookup tables from Figma MCP slash-path output to component imports and props.
When to use it
- Converting a Figma button node with variant string to a typed React component
- Building a dashboard page with LineChart and BarChart from @aioz-ui/core/components
- Picking the right on-surface text token to pair with a background token
- Importing the correct icon from @aioz-ui/icon-react by transforming a Figma icon layer name
- Translating a Figma Fields node into an Input component with the right size and state props
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: translate this Figma node — name: 'Type=Primary, Size=Medium, Icon Only=False, Shape=Square, State=Default', fills: [{token: 'Sf/Pri/Pri'}], typography: 'Button/01'
- 1Identify node as a Button component from the 'Type=' prefix in the variant string
- 2Map 'Type=Primary' to variant="primary", 'Size=Medium' to size="md", 'Shape=Square' to shape="square"
- 3Confirm 'State=Default' requires no prop
- 4Import Button from '@aioz-ui/core-v3/components' per the Component Map
- 5Omit manual color and typography classes since Button handles them internally
<Button variant="primary" size="md" shape="square">Label</Button>