Help us improve
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
Share bugs, ideas, or general feedback.
By ankish8
Intelligent React component creation with design system validation, Figma integration, and automated testing
npx claudepluginhub ankish8/myoperator-plugins --plugin component-creatorAnalyzes codebase to check if component exists, suggests creating variants vs new components, and identifies reusable subcomponents. Activate when creating new components to avoid duplication and ensure proper architecture.
Ensures CSS variables are used instead of hardcoded colors, validates semantic tokens, checks responsive design patterns, and enforces design system consistency. Activate when creating or validating components.
Generates comprehensive Storybook stories following the Button/AlertConfiguration pattern with installation instructions, design tokens table, typography table, and usage examples. Activate when creating component documentation.
Modifies files
Hook triggers on file write and edit operations
Uses power tools
Uses Bash, Write, or Edit tools
Share bugs, ideas, or general feedback.
Own this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimOwn this plugin?
Verify ownership to unlock analytics, metadata editing, and a verified badge.
Sign in to claimBased on adoption, maintenance, documentation, and repository signals. Not a security audit or endorsement.
Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency.
UI/UX Design Plugin - Visual fidelity from Figma/mockups, design system enforcement, React UI prototyping with pattern memory, and brand icon asset generation.
Frontend component development with accessibility and responsive design
Validation and quality enforcement for Atomic Design methodology in component-based projects.
Compiler-driven design generation in Figma — 100% design system compliant. Compiles component specs into verified Figma output via MCP.
Convert Figma designs and screenshots into production-ready code components with accessibility built-in
Intelligent React component creation with design system validation, Figma integration, and automated testing
Create UIs matching the myOperator design system aesthetic. Generates standalone React/HTML/CSS code with consistent visual language.
Automated publishing workflow for myOperator UI CLI and MCP packages
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.
Installable plugins for Claude Code and Cursor.
Use this repo for:
AGENTS.md for tools that support agent instruction files| I want... | Install this |
|---|---|
| Claude Code: design plugin | /plugin install myoperator-design@myoperator-plugins |
| Claude Code: dev workflow plugin | /plugin install myoperator-workflows@myoperator-plugins |
| Cursor: design plugin | myoperator-cursor-design from the Cursor Marketplace / team marketplace |
| Cursor: dev workflow plugin | myoperator-cursor-workflows from the Cursor Marketplace / team marketplace |
| Any tool with agent instructions | cp AGENTS.md ./AGENTS.md |
Run these inside a Claude Code session:
1. Register the marketplace
/plugin marketplace add Ankish8/myoperator-plugins
2. Install the plugins you want
/plugin install myoperator-design@myoperator-plugins
/plugin install myoperator-workflows@myoperator-plugins
Recommended Claude setup:
myoperator-design — design system generation and UI guidancemyoperator-workflows — day-to-day dev commands for creating components and shipping releasesUpdate:
/plugin update myoperator-design@myoperator-plugins
/plugin update myoperator-workflows@myoperator-plugins
Team setup for .claude/settings.json:
{
"extraKnownMarketplaces": {
"myoperator-plugins": {
"source": {
"source": "github",
"repo": "Ankish8/myoperator-plugins"
}
}
}
}
This repo includes installable Cursor plugins through:
.cursor-plugin/marketplace.json
Recommended Cursor setup:
myoperator-cursor-design — installable design-system rulesmyoperator-cursor-workflows — installable dev workflow commandsInstall them through the Cursor Marketplace or a Cursor Team Marketplace that imports this repository.
Manual fallback is still available if needed:
mkdir -p .cursor/rules .cursor/commands
cp ai-rules/cursor/*.mdc .cursor/rules/
cp ai-rules/cursor/commands/*.md .cursor/commands/
AGENTS.md works across many tools and is the simplest cross-editor option.
cp AGENTS.md ./AGENTS.md
If you only copy one file, copy this one.
| Plugin | Description |
|---|---|
myoperator-design | Claude Code plugin for myOperator UI generation and design-system guidance |
myoperator-workflows | Claude Code dev workflow plugin for /create-component and /publish-all |
myoperator-cursor-design | Cursor plugin with installable myOperator design rules |
myoperator-cursor-workflows | Cursor dev workflow plugin with installable component and publish commands |