Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
Version History
**AIOZ UI V3 skill introduces chart components and major skill mapping updates.** - Added support for chart components: `LineChart`, `AreaChart`, `BarChart`, `DonutChart` and related utilities. - Updated references: new `chart.md`, `components.md`, and `setup.md` files for improved documentation. - Expanded component and prop mapping guidance for Figma MCP → React code translation. - Clarified import paths: charts are now imported from `@aioz-ui/core/components`; all other UI from `@aioz-ui/core-v3/components`. - Removed deprecated usage guide, integrated documentation into new reference files.
What This Skill Does
Maps Figma MCP output to production React code using the AIOZ UI V3 design system. Covers component imports, design token translation, typography utilities, icon usage, and chart components across two separate package paths.
Eliminates guesswork around token names and import paths by providing explicit lookup tables for every Figma MCP data format.
When to use it
- Translating Figma designs into AIOZ UI React components
- Picking the correct import path for charts vs UI primitives
- Mapping Figma variant strings to React props
- Using AIOZ color and typography tokens instead of raw Tailwind classes
- Building data visualization pages with LineChart, BarChart, or DonutChart
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: convert this Figma button node — Type=Primary, Size=Medium, Shape=Square, State=Default
- 1Reads the node name and identifies it as a Button/* component
- 2Looks up variant mappings: Type=Primary → variant="primary", Size=Medium → size="md", Shape=Square → shape="square"
- 3Imports Button from @aioz-ui/core-v3/components
- 4Skips manual color and typography props since Button handles them internally
- 5Renders <Button variant="primary" size="md" shape="square">Label</Button>
Production-ready Button component with correct props, no raw Tailwind colors or custom styles
Requirements
Accounts, API keys, or tools you or your AI assistant may need to set up while using this skill.