copilot-dev: Command for Claude Code

Your goal is to scaffold a complete, production-ready React functional component based on the information provided.

What I need from you

If the component name and purpose are not already specified, ask for:

1. Component name — PascalCase, descriptive (e.g., UserProfileCard, SearchResultsList)
2. Component purpose — one sentence describing what it renders and what it does
3. Key props — what data does it accept? What callbacks does it expose?
4. State needed? — does it manage any local state (loading, open/closed, selected item)?

Component name: ${input:componentName:MyComponent} Component purpose: ${input:componentPurpose:Describe what this component does}

What I'll generate

1. The component file: ${input:componentName:MyComponent}.tsx

import { useState, useEffect, useCallback } from 'react'

// --- Types ---

/**
 * Props for the ${input:componentName:MyComponent} component.
 */
export interface ${input:componentName:MyComponent}Props {
  /** Primary data to display */
  data: SomeDataType
  /** Called when the user performs the primary action */
  onAction?: (item: SomeDataType) => void
  /** Optional CSS class for the root element */
  className?: string
  /** When true, renders in a loading/skeleton state */
  isLoading?: boolean
}

// --- Component ---

/**
 * ${input:componentName:MyComponent} — ${input:componentPurpose:describe what this renders}
 *
 * @example
 * ```tsx
 * <${input:componentName:MyComponent}
 *   data={myData}
 *   onAction={(item) => console.log('Action on', item)}
 * />
 * ```
 */
export function ${input:componentName:MyComponent}({
  data,
  onAction,
  className = '',
  isLoading = false,
}: ${input:componentName:MyComponent}Props) {
  // Local state
  const [isExpanded, setIsExpanded] = useState(false)

  // Side effects
  useEffect(() => {
    // Example: reset expanded state when data changes
    setIsExpanded(false)
  }, [data])

  // Stable callbacks
  const handleAction = useCallback(() => {
    onAction?.(data)
  }, [data, onAction])

  // Loading state guard
  if (isLoading) {
    return (
      <div
        className={`animate-pulse rounded-lg bg-gray-100 h-24 ${className}`}
        aria-busy="true"
        aria-label="Loading..."
      />
    )
  }

  return (
    <article
      className={`rounded-lg border p-4 ${className}`}
      aria-label={`${input:componentName:MyComponent} for ${data.name ?? 'item'}`}
    >
      {/* Header */}
      <header className="flex items-center justify-between">
        <h2 className="text-lg font-semibold">{data.name}</h2>
        <button
          type="button"
          onClick={() => setIsExpanded((prev) => !prev)}
          aria-expanded={isExpanded}
          aria-controls="component-details"
          className="text-sm text-blue-600 hover:underline focus-visible:outline-2"
        >
          {isExpanded ? 'Collapse' : 'Expand'}
        </button>
      </header>

      {/* Expandable details */}
      {isExpanded && (
        <section id="component-details" className="mt-2 text-sm text-gray-600">
          {data.description}
        </section>
      )}

      {/* Primary action */}
      {onAction && (
        <footer className="mt-4">
          <button
            type="button"
            onClick={handleAction}
            className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-700 focus-visible:outline-2"
          >
            Take Action
          </button>
        </footer>
      )}
    </article>
  )
}

export default ${input:componentName:MyComponent}