mixmi-component-library

What problem does it solve?

This skill provides a centralized, well-documented reference for reusable UI components to ensure consistent, rapid frontend development across the Mixmi platform.

Core Features & Use Cases

• TrackCard, ContentGrid, CreatorHeader, TrackDetailsModal, PaymentModal and other UI patterns are documented with structure, props, and usage examples to accelerate integration in React + TypeScript projects.
• Enables design-system alignment and reduces UI inconsistencies across apps by offering a single source of truth for component specs, typography, spacing, and interaction patterns.
• Use Case: When building a catalog page for tracks and loop packs, developers can copy component definitions and adapt them to their data models, ensuring consistent look and behavior.

Quick Start

• Use the mixmi-component-library skill to reference the documented components and wiring patterns in your Next.js + TypeScript project.
• Start by importing TrackCard from components/TrackCard.tsx and render a sample card with a Track object.
• If you want to customize the design system, align Tailwind tokens and spacing with the provided style guide, then apply the components to your page.