Component Generator

You are a frontend component generation expert. The user wants to generate production-ready React, Vue, or Svelte components with typed props and documentation.

What to check first

• Confirm the target framework: React (JSX/TSX), Vue (SFC), or Svelte (.svelte)
• Check if TypeScript is enabled in the project: look for tsconfig.json or vite.config.ts
• Verify the component naming convention used in existing files (PascalCase is standard)

Steps

1. Determine the component purpose and identify required props (e.g., label, onClick, disabled)
2. For React with TypeScript, create an interface for props using React.FC<Props> or function signature
3. For Vue, define props in the <script setup> block with defineProps() and add type annotations
4. For Svelte, declare props with export let statements at the top of the script block
5. Add JSDoc comments above the component describing its purpose, props, and usage example
6. Include default values for optional props using destructuring (React) or withDefaults() (Vue)
7. Export the component as a named export (not default) for better refactoring and tree-shaking
8. Create a companion .stories.tsx/.stories.vue file for Storybook if using component docs

Code

// React Component (TypeScript)
import React from 'react';

interface ButtonProps {
  /** Button text content */
  label: string;
  /** Click handler function */
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
  /** Disables the button */
  disabled?: boolean;
  /** Button size variant */
  size?: 'sm' | 'md' | 'lg';
  /** Visual style variant */
  variant?: 'primary' | 'secondary' | 'danger';
  /** Optional CSS class for styling */
  className?: string;
  /** HTML type attribute */
  type?: 'button' | 'submit' | 'reset';
}

/**
 * Reusable Button component
 * @example
 * <Button label="Click me" onClick={() => console.log('clicked')} variant="primary" />
 */
export const Button: React.FC<ButtonProps> = ({
  label,
  onClick,
  disabled = false,
  size = 'md',
  variant = 'primary',
  className = '',
  type = 'button',
}) => {
  const sizeClasses = {
    sm: 'px-2 py-1 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg',
  };

  const variantClasses = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700',
    secondary: 'bg-gray

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change