Von der Idee zur
Produktion

// ❌ Raw AI Output (Cursor/v0 draft) - Unhandled errors, 'any' types, slow rendering
import React, { useState, useEffect } from 'react';

export default function UserProfile(props: any) {
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Vulnerable: Unhandled promise rejection & raw un-sanitized API call
    fetch('/api/user?id=' + props.userId)
      .then(res => res.json())
      .then(d => {
        setData(d);
        setLoading(false);
      });
  }, [props.userId]);

  if (loading) return <div>Loading...</div>;

  return (
    <div style={{ padding: '20px', background: '#111' }}>
      <h1>{data?.name || 'Anonymous'}</h1>
      <p>{data?.email}</p>
      <button onClick={() => alert(data.secretToken)}>Show Key</button>
    </div>
  );
}

// ✨ VibeCraft Refactored - Astro Island, Strict Zod Types, Secure Custom Hook
import type { FunctionalComponent } from 'preact';
import { useUserProfile } from '@/hooks/useUserProfile';
import { UserPropsSchema, type UserProps } from '@/schemas/user';

export const UserProfile: FunctionalComponent<UserProps> = (props) => {
  // Validated Props & Cached SWR Fetching with Automatic Retry
  const { user, isLoading, error } = useUserProfile(props.userId);

  if (isLoading) return <ProfileSkeleton />;
  if (error) return <ErrorMessage message={error.message} />;

  return (
    <article className="p-6 rounded-2xl glass-panel border border-slate-800 space-y-3">
      <h2 className="font-display text-xl font-bold text-white">{user.name}</h2>
      <p className="text-sm text-slate-400">{user.email}</p>
      <Badge variant="verified">Verified Account</Badge>
    </article>
  );
};