Lovable Prompt Creator - AI Prompt Generator

PROJECT SETUP
Create a new project directory named "RevitAutomation". Inside this directory, set up the following file structure:

```
RevitAutomation/
│
├── src/
│   ├── components/
│   │   ├── AutomationForm.js
│   │   ├── AutomationList.js
│   │   └── AutomationItem.js
│   ├── utils/
│   │   └── api.js
│   ├── styles/
│   │   └── App.css
│   ├── App.js
│   └── index.js
├── public/
│   ├── index.html
│   └── favicon.ico
├── package.json
└── README.md
```

DESIGN REQUIREMENTS
- Visual Style: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- Color Mode: Light theme with dark text on light backgrounds
- Primary Color: #1978E5 (accent for buttons, links, highlights)
- Typography: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- Border Radius: 8px (moderately rounded) for buttons, cards, and inputs

CORE COMPONENTS
1. AutomationForm: A form component for users to define automation tasks.
2. AutomationList: A component that displays a list of created automations.
3. AutomationItem: Represents each individual automation in the list.
4. API utilities: Functions for making API calls to handle automation tasks.

IMPLEMENTATION APPROACH
1. Set up the main App component in App.js which will render the AutomationForm and AutomationList components.
2. In the AutomationForm component, create a form with input fields necessary for defining a new automation. Use controlled components to manage form state.
3. Handle form submission by calling a function that sends the automation details to the server via the API utility.
4. The AutomationList will fetch and display all automations using the API utility when the component mounts.
5. Each AutomationItem will display the automation details and provide delete and edit functionality.

Example code for AutomationForm:

```javascript
import React, { useState } from 'react';
import { createAutomation } from '../utils/api';

const AutomationForm = () => {
  const [taskName, setTaskName] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    await createAutomation({ name: taskName });
    setTaskName('');
  };

  return (
    <form onSubmit={handleSubmit} style={{ borderRadius: '8px' }}>
      <input
        type="text"
        value={taskName}
        onChange={(e) => setTaskName(e.target.value)}
        placeholder="Enter automation task"
        required
      />
      <button type="submit" style={{ backgroundColor: '#1978E5', borderRadius: '8px' }}>
        Create Automation
      </button>
    </form>
  );
};

export default AutomationForm;
```

ARCHITECTURE CONSIDERATIONS
The application will follow a component-based architecture, with a clear separation of concerns. Components will manage their own state and communicate with the API through utility functions. Use of React hooks for state management and side effects will enhance performance and readability.

ERROR HANDLING
Implement error handling in the API utility functions to catch any issues during network requests. Display user-friendly messages in the UI for failed operations. For example, show an error message if creating an automation fails.

```javascript
export const createAutomation = async (automationData) => {
  try {
    const response = await fetch('/api/automations', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(automationData),
    });
    if (!response.ok) throw new Error('Failed to create automation');
    return await response.json();
  } catch (error) {
    console.error(error);
    throw error;
  }
};
```

TESTING STRATEGY
Utilize Jest and React Testing Library for unit testing components and utility functions. Ensure all components are tested for rendering and functionality. For API calls, mock fetch requests to simulate server responses during testing.

By following this structure and best practices, you'll create a robust and maintainable automation tool for Revit.