skills.rest
MerzoukeMansouri
MerzoukeMansouriCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

mozaic-icons

Search Mozaic Design System icons and generate Vue or React code.

4|Updated Dec 12, 2025
Search Tags:#code generation#search#icons#ui design#mozaic
One-click install
npx skills add https://github.com/MerzoukeMansouri/adeo-mozaic-mcp --skill mozaic-icons
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: mozaic-icons
Source: https://github.com/MerzoukeMansouri/adeo-mozaic-mcp/tree/main/skills/mozaic-icons
Command: npx skills add https://github.com/MerzoukeMansouri/adeo-mozaic-mcp --skill mozaic-icons

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill solves the problem of manually searching for and integrating Mozaic Design System icons into Vue or React applications.

Core Features & Use Cases

  • Icon Search: Quick search and integration of icons based on keyword, type, or size.
  • Code Generation: Automatically generate code for Vue or React based on selected icon and size.
  • Preview Icons: View multiple sizes and descriptions for easy selection.
  • SVG Access: Access raw SVG for custom use.
  • Use Case: If you need an icon for a shopping cart in your application, you can use this skill to search for 'cart' icons, preview them, and generate Vue or React code with the proper import statements.

Quick Start

Use the mozaic-icons skill to search for a shopping cart icon and generate Vue code for it.

Frequently Asked Questions about mozaic-icons

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I search for Mozaic Design System icons and generate React code?▼

To search Mozaic Design System icons and generate React code, use the command-line interface to query the local icon database by keyword, then output the component code with the proper import statements for your selected icon and size.

Can I get raw SVG files from the Mozaic icon library for custom UI design?▼

Yes, you can access raw SVG files from the Mozaic icon library for custom UI design. The skill queries the local database to retrieve the SVG markup, allowing you to implement the icons outside of standard framework components.

Does this icon search tool support Vue framework code generation?▼

Yes, the icon search tool supports Vue framework code generation. It automatically generates Vue component code with the correct import statements based on your selected Mozaic Design System icon and its specified size.

What's the best way to find specific UI icons by size and type for my application?▼

The best way to find specific UI icons by size and type is to use the command-line search functionality. It queries the local Mozaic database, allowing you to preview multiple icon sizes and descriptions before integrating them into your application.

Do I need a local database to search for Mozaic Design System icons?▼

Yes, you need a local database because the skill is based on local shell scripts that query a local Mozaic Design System icon database to perform searches and generate Vue or React code.

Related Skills

Explore More Design & Creative Skills→
MerzoukeMansouriMerzoukeMansouri
4

mozaic-react-builder

Build React components with the Mozaic Design System and generate TSX code.

Community
Intermediate
zxj719zxj719

ui-change

Standardize React UI components with Tailwind CSS and lucide-react icons.

Community
Basic
mazin-muslehmazin-musleh
14

nds-add-icon

Register new HGI icons and aliases in the design system.

Community
Intermediate
farmanlabfarmanlab
1

converting-figma-to-html

Convert Figma MCP design data into Tailwind-based HTML/CSS with data attributes.

Community
Advanced