GPT-4Frontend development
Gerador de componentes React
Why this prompt matters
Specifying accessibility and TypeScript requirements upfront produces production-ready components instead of prototypes that need rewriting.
What we use it for
Frontend development
Prompt
Create a React component based on this description. Requirements: TypeScript with proper prop types, accessible (ARIA attributes, keyboard navigation), responsive design using Tailwind CSS, follows composition pattern with slots for customization. Include JSDoc comments for the component and its props.
Result
```tsx
interface AlertProps {
/** The visual severity of the alert */
variant?: 'info' | 'success' | 'warning' | 'error';
/** Alert title displayed prominently */
title: string;
/** Optional descriptive content */
children?: React.ReactNode;
/** Called when the dismiss button is clicked */
onDismiss?: () => void;
}
export function Alert({ variant = 'info', title, children, onDismiss }: AlertProps) {
return (
{title}
{children &&
);
}
```{children}
} {onDismiss && ×}Gerador de componentes React
Cria componentes React bem estruturados com TypeScript e boas práticas.
Este prompt de IA foi projetado para ajudá-lo a obter os melhores resultados. Siga as instruções e personalize os parâmetros de acordo com suas necessidades específicas.
Para obter os melhores resultados, forneça contexto detalhado e especifique o formato de saída desejado. Experimente diferentes variações para encontrar a que melhor se adapta ao seu caso de uso.