By Ankish8
Create UIs matching the myOperator design system aesthetic. Generates standalone React/HTML/CSS code with consistent visual language.
A React component library with CLI tooling for easy integration. Built with Tailwind CSS, fully compatible with Bootstrap projects.
# Initialize in your project
npx myoperator-ui init
# Add components
npx myoperator-ui add button badge table
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
function App() {
return (
<div>
<Button variant="default" size="md">
Click me
</Button>
<Badge variant="active">Active</Badge>
</div>
)
}
# Initialize project with Tailwind config
npx myoperator-ui init
# Add specific components
npx myoperator-ui add button
npx myoperator-ui add button badge table
# Interactive component selection
npx myoperator-ui add
# Update components to latest version
npx myoperator-ui@latest update button
npx myoperator-ui@latest update --all
# Preview updates without applying
npx myoperator-ui@latest update --all --dry-run
See CLI documentation for full command reference.
The CLI automatically detects Bootstrap and configures Tailwind to avoid style conflicts. All components use the tw- prefix by default.
# Install dependencies
npm install
# Run Storybook
npm run storybook
# Run tests
npm test
# Build CLI
cd packages/cli && npm run build
src/components/ui/ # Source components
packages/cli/ # CLI package (myoperator-ui)
scripts/ # Build and development scripts
MIT
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge. GitHub access is read-only (username + org membership).
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Automated publishing workflow for myOperator UI CLI and MCP packages
Intelligent React component creation with design system validation, Figma integration, and automated testing
Developer workflow plugin for myOperator component creation and release publishing
Create UIs matching the myOperator design system aesthetic. Generates standalone React/HTML/CSS code with consistent visual language.
Intelligent React component creation with design system validation, Figma integration, and automated testing
npx claudepluginhub ankish8/storybook-npm --plugin myoperator-publishDesign and build UIs with Subframe. Create pixel-perfect React + Tailwind pages using your design system, explore design variations, and implement with business logic.
Use this agent when creating user interfaces, designing components, building design systems, or improving visual aesthetics. This agent specializes in creating beautiful, functional interfaces that can be implemented quickly within 6-day sprints. Examples:\n\n<example>\nContext: Starting a new app or feature design
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples.
AI-powered generative UI with Thesys - create React components from natural language.
Complete UI/UX design system for React Native & Next.js with 4 core skills
Suite of tools for creating elaborate, multi-component HTML artifacts using React, Tailwind CSS, and shadcn/ui. Use for complex artifacts requiring state management, routing, or shadcn/ui components.