Does this skill require the myoperator-ui npm package?

No, the skill generates standalone React and Tailwind CSS code that visually matches the design system without requiring any external package dependencies.

What is the primary color palette used in this design system?

The system uses a sophisticated blue-gray (#343E55) for primary UI elements and a turquoise accent (#2BBCCA) specifically reserved for interactive states and focus rings.

Can it handle complex UI elements like modals and sidebars?

Yes, it includes specific patterns for modals with high z-index (9999) and responsive sidebar navigation tailored for enterprise-level application layouts.

Which typography is supported by the MyOperator skill?

The skill automatically imports and applies 'Source Sans Pro' from Google Fonts, utilizing weights 400, 600, and 700 for optimal readability.

MyOperator Design System

Name: MyOperator Design System
Author: Ankish8

byAnkish8

•

Design Tools

Generates production-ready React and Tailwind CSS components following the official MyOperator enterprise SaaS design language.

This skill empowers Claude to build high-fidelity user interfaces that adhere strictly to the MyOperator design system. It provides a comprehensive set of CSS variables, semantic color tokens, and pre-defined component patterns for React and Tailwind CSS, ensuring a professional enterprise SaaS aesthetic. By automating the application of specific typography, brand-compliant color usage (like Turquoise for interactive elements), and sophisticated layouts, it enables developers to rapidly prototype and build dashboards, forms, and pages that are visually consistent with the MyOperator brand without requiring external UI libraries.

Key Features

01Standalone React and Tailwind code generation with zero external dependencies

02Automatic configuration for Source Sans Pro typography and professional spacing

031 GitHub stars

04Standardized component patterns for buttons, inputs, modals, and data tables

05Built-in semantic color system featuring enterprise-grade blue-gray and turquoise accents

06Enforced design constraints for brand-consistent layouts and accessible interactions

Use Cases

01Converting wireframes into production-ready React code that follows specific brand guidelines

02Rapidly prototyping enterprise dashboards or analytics pages within the MyOperator ecosystem

03Standardizing existing UI components to match the MyOperator visual language and color tokens

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ankish8/storybook-npm myoperator-design

For use in Claude.ai and ChatGPT

Download Skill