GPT-4Frontend development
React-Komponenten-Generator
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 && ×}React-Komponenten-Generator
Erstellt gut strukturierte React-Komponenten mit TypeScript und Best Practices.
Dieser KI-Prompt ist darauf ausgelegt, Ihnen die besten Ergebnisse zu liefern. Folgen Sie den Anweisungen und passen Sie die Parameter an Ihre spezifischen Bedürfnisse an.
Für die besten Ergebnisse geben Sie detaillierten Kontext an und spezifizieren Sie das gewünschte Ausgabeformat. Experimentieren Sie mit verschiedenen Variationen, um die beste für Ihren Anwendungsfall zu finden.