mozaic-react-builder

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

4|Updated Dec 12, 2025

Search Tags:#React #TypeScript #code generation #component building #Mozaic Design System

Ready to run

npx skills add https://github.com/MerzoukeMansouri/adeo-mozaic-mcp --skill mozaic-react-builder

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: mozaic-react-builder
Source: https://github.com/MerzoukeMansouri/adeo-mozaic-mcp/tree/main/skills/mozaic-react-builder
Command: npx skills add https://github.com/MerzoukeMansouri/adeo-mozaic-mcp --skill mozaic-react-builder

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires bash, sqlite3, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill streamlines the process of building React components with the Mozaic Design System, providing an interactive and guided approach to component creation and configuration.

Core Features & Use Cases

Component Discovery: Browse and select from a variety of Mozaic React components.
Interactive Configuration: Configure component props with TypeScript support and type safety.
Code Generation: Generate ready-to-use React/TSX code with proper imports and setup instructions.
Use Case: If you need to build a contact form with TypeScript support, this Skill can guide you through the process, from selecting the appropriate components to generating the final code and providing installation guidance.

Quick Start

Use the mozaic-react-builder skill to generate a TypeScript-ready contact form component.

Frequently Asked Questions about mozaic-react-builder

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

FAQPage Schema

How do I generate React components using the Mozaic Design System?▼

To generate React components with the Mozaic Design System, you use an interactive interface to discover components, configure TypeScript props, and generate ready-to-use TSX code with proper imports and setup instructions.

Can I configure TypeScript props when building React components with this tool?▼

Yes, you can interactively configure component props with TypeScript support and type safety, ensuring the generated React/TSX code has properly typed properties before final code generation.

Do I need a local database to build Mozaic React components?▼

Yes, you need a local Mozaic database and shell scripts for component querying and code generation. The interactive interface relies on these dependencies to discover and build React components.

What is the best way to create a TypeScript React form with Mozaic?▼

The best way to create a TypeScript React form is using the guided component creation process, which helps you select appropriate Mozaic components, configure props, and generate the final TSX code.

Does the generated React code include setup and installation instructions?▼

Yes, the generated React/TSX code includes proper imports and setup instructions. The Skill provides installation guidance alongside the code output to help you integrate the component quickly.