GPT-4Frontend development
Générateur de composants React
Pourquoi ce prompt est important
Specifying accessibility and TypeScript requirements upfront produces production-ready components instead of prototypes that need rewriting.
À quoi nous l'utilisons
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.
Résultat
```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 && ×}Générateur de composants React
Crée des composants React bien structurés avec TypeScript et bonnes pratiques.
Ce prompt d'IA est conçu pour vous aider à obtenir les meilleurs résultats. Suivez les instructions et personnalisez les paramètres selon vos besoins spécifiques.
Pour obtenir les meilleurs résultats, fournissez un contexte détaillé et spécifiez le format de sortie souhaité. Expérimentez avec différentes variations pour trouver celle qui convient le mieux à votre cas d'utilisation.