By ankish8
Intelligent React component creation with design system validation, Figma integration, and automated testing
npx claudepluginhub ankish8/storybook-npm --plugin myoperator-publishAnalyzes 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.
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
Complete collection of battle-tested Claude Code configs from an Anthropic hackathon winner - agents, skills, hooks, rules, and legacy command shims evolved over 10+ months of intensive daily use
Modifies files
Hook triggers on file write and edit operations
Uses power tools
Uses Bash, Write, or Edit tools
Complete collection of battle-tested Claude Code configs agents, skills, hooks, rules, and legacy command shims evolved over 10+ months of intensive daily use
Complete collection of battle-tested Claude Code configs from an Anthropic hackathon winner - agents, skills, hooks, and rules evolved over 10+ months of intensive daily use
Complete collection of battle-tested Claude Code configs from an Anthropic hackathon winner - agents, skills, hooks, and rules evolved over 10+ months of intensive daily use
Comprehensive .NET development skills for modern C#, ASP.NET, MAUI, Blazor, Aspire, EF Core, Native AOT, testing, security, performance optimization, CI/CD, and cloud-native applications
Unity Development Toolkit - Expert agents for scripting/refactoring/optimization, script templates, and Agent Skills for Unity C# development