claude

component-creator

Intelligent React component creation with design system validation, Figma integration, and automated testing

2 on GitHubby myOperatorv1.0.0MITupdated yesterdaydevelopment
/

Plugin component-creator from marketplace myoperator-tools in Ankish8/storybook-npm. Commands read from the repo's manifest — today.

This plugin runs code on your machine — its hooks fire automatically on events like tool use. The exact commands are listed below; read them before installing.

What it installs

Skills (3)

  • Component Analysis

    Analyzes 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.

  • Design System Validator

    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.

  • Storybook Generator

    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.

Slash commands (2)

  • /component-creator:add-prop

    Add or sync a prop on an existing component (.tsx + story + test + yaml deps). Stops at the source boundary; /publish-all handles registry/build/publish.

  • /component-creator:create-component

    Create a new React component with intelligent analysis, design system validation, and auto-generated tests

Subagents (1)

  • component-creator-agent

    Proactively suggests component creation when analyzing designs or requirements. Expert in React component architecture, design systems, and the myOperator UI component library. Automatically activates when detecting component creation needs.

Hooks (3)

  • PostToolUse

    bash ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/validate-css-variables.sh

  • PreToolUse

    bash ${CLAUDE_PLUGIN_ROOT}/hooks/scripts/enforce-screenshot-first.sh

  • UserPromptSubmit
View source on GitHub shadcn-react-app.vercel.app

More from Ankish8/storybook-npm

All 4 plugins →

myOperator design tools

claude

Build and audit myOperator design-handoff screens from Merlin. Run /setup once and it connects Merlin and downloads the design system for you.

7 skills · 1 MCP server

2

myoperator-design

claude

Create UIs matching the myOperator design system aesthetic. Generates standalone React/Tailwind code with consistent visual language.

1 skill

2

Similar plugins

superpowers

claudecodex

Core skills library for Claude Code: TDD, debugging, collaboration patterns, and proven techniques

15 skills · hooks

obra/superpowers 316,836

nextjs

claude

Official Next.js skills: adopt and optimize Cache Components, adopt Partial Prefetching, and verify runtime behavior against a running dev server.

6 skills

vercel/next.js 143,495

context7

claudecodex

Up-to-date documentation lookup. Pull version-specific documentation and code examples directly from source repositories into your coding agent's context.

1 MCP server

upstash/context7 64,709

cli-anything

claude

Build powerful, stateful CLI interfaces for any GUI application using the cli-anything harness methodology.

5 commands

HKUDS/CLI-Anything 58,665

agent-browser

claude

Automates browser interactions for web testing, form filling, screenshots, and data extraction

12 skills

vercel-labs/agent-browser 50,373

Open Code Review

codex

Use Alibaba Open Code Review from local Codex.

2 skills

alibaba/open-code-review 50,068

Maintain component-creator?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex plugins4 plugins