Generate React Components

Name: gen-component
Rating: 87
Author: Ramakrishnan24689

Generate Fluent UI v9 components for displaying and managing data with React Query hooks.

What This Skill Does

•Creates list view components (display multiple records)
•Creates detail view components (display single record)
•Creates form components (create/edit records)
•Integrates with React Query hooks
•Uses Fluent UI v9 components
•Implements proper loading and error states

Usage

code

/gen-component todos list
/gen-component todos detail
/gen-component todos form

Component Patterns

List View Component

typescript

import { Spinner, MessageBar, Card } from '@fluentui/react-components';
import { useFeatures } from '../hooks/useFeatures';

export const FeatureList = () => {
  const { data: features, isLoading, error } = useFeatures();

  if (isLoading) return <Spinner label="Loading features..." />;
  if (error) return <MessageBar intent="error">Failed to load features</MessageBar>;
  if (!features?.length) return <MessageBar>No features found</MessageBar>;

  return (
    <div className="feature-list">
      {features.map(feature => (
        <Card key={feature.id} className="feature-card">
          <h3>{feature.name}</h3>
          <p>{feature.description}</p>
        </Card>
      ))}
    </div>
  );
};

Detail View Component

typescript

export const FeatureDetail = ({ id }: { id: string }) => {
  const { data: feature, isLoading, error } = useFeatureById(id);

  if (isLoading) return <Spinner />;
  if (error) return <MessageBar intent="error">Failed to load</MessageBar>;
  if (!feature) return <MessageBar>Feature not found</MessageBar>;

  return (
    <div className="feature-detail">
      <h2>{feature.name}</h2>
      <p>{feature.description}</p>
      {/* Additional fields */}
    </div>
  );
};

Form Component

typescript

export const FeatureForm = ({ id }: { id?: string }) => {
  const [formData, setFormData] = useState<CreateFeatureDto>({
    name: '',
    description: '',
  });

  const createFeature = useCreateFeature();
  const updateFeature = useUpdateFeature();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (id) {
      await updateFeature.mutateAsync({ id, dto: formData });
    } else {
      await createFeature.mutateAsync(formData);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <Field label="Name">
        <Input
          value={formData.name}
          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
        />
      </Field>
      <Button type="submit" appearance="primary">
        {id ? 'Update' : 'Create'}
      </Button>
    </form>
  );
};

Output

code

✅ Component generated!

📁 Created: src/features/<feature>/components/<Feature><Type>.tsx

🎨 Component Type: <List|Detail|Form>

💡 Import in your app:
   import { <Feature><Type> } from '@/features/<feature>/components/<Feature><Type>';