Does this skill require the myoperator-ui package?

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

How are brand colors handled in the generated code?

The system follows strict brand guidelines where Turquoise (#2BBCCA) is reserved exclusively for interactive elements like focus rings, active states, and links.

Which styling framework is used for component generation?

The skill uses Tailwind CSS utility classes combined with custom CSS variables for design tokens and semantic colors.

Can I use this for complex layouts like modals and tables?

Yes, it includes specific patterns for high-z-index modals (z-9999), responsive tables, and multi-state form fields designed for enterprise applications.

What typography does the myOperator design skill use?

It uses Source Sans Pro, automatically including the necessary Google Fonts imports and font-weight configurations for professional readability.

myOperator Design System

Name: myOperator Design System
Author: Ankish8

byAnkish8

0•

Design Tools

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

The myOperator Design skill enables developers to rapidly build professional, enterprise-grade user interfaces that adhere to the myOperator visual identity. It provides instant access to a sophisticated blue-gray and turquoise color palette, semantic tokens, and Source Sans Pro typography. The skill generates standalone code that requires no external packages, offering pre-configured patterns for buttons, inputs, modals, and navigation. By enforcing specific brand logic—such as restricting turquoise to interactive elements—it ensures consistent, high-quality UI output that matches the aesthetic of modern SaaS platforms.

Key Features

01Automated brand consistency logic for interactive and status states

02Enterprise-ready component library including high-z-index modals

03Standalone React and Tailwind CSS component generation

040 GitHub stars

05Pre-configured Source Sans Pro typography patterns

06Comprehensive semantic color system with CSS variable injection

Use Cases

01Standardizing UI development across teams using shared design tokens

02Building custom dashboards and pages that match the myOperator ecosystem

03Rapidly prototyping internal SaaS tools with a professional, clean aesthetic

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ankish8/myoperator-plugins myoperator-design

For use in Claude.ai and ChatGPT

Key Features

01Automated brand consistency logic for interactive and status states

02Enterprise-ready component library including high-z-index modals

03Standalone React and Tailwind CSS component generation

040 GitHub stars

05Pre-configured Source Sans Pro typography patterns

06Comprehensive semantic color system with CSS variable injection

Use Cases

01Standardizing UI development across teams using shared design tokens

02Building custom dashboards and pages that match the myOperator ecosystem

03Rapidly prototyping internal SaaS tools with a professional, clean aesthetic

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ankish8/myoperator-plugins myoperator-design

For use in Claude.ai and ChatGPT