Prompt Builder Development

Build a single-page web application for managing AI prompts with tagging, selection, and master prompt generation capabilities.

Project Overview

Prompt Builder is a full-stack web app that allows users to:

Tech Stack

**Frontend:**

**Backend:**

**Integration Testing:**

Development Guidelines

General Principles

1. **AI-Assisted Development**: Leverage AI coding assistants (GitHub Copilot, Cursor) to accelerate implementation

2. **MVP Focus**: Prioritize core functionality over polish. Defer non-essential features like tag filtering and dark mode

3. **Manual Testing First**: Perform manual testing during development. Automated tests are optional for MVP

4. **JavaScript Over TypeScript**: Use JavaScript for faster iteration unless TypeScript is specifically needed

5. **Environment Variables**:

- Frontend: Use `REACT_APP_` prefix (e.g., `REACT_APP_API_URL`)

- Backend: Store database paths and API configuration

- Never hardcode sensitive values or API URLs

Frontend Implementation

**Component Structure** (`src/components/`):

1. **PromptList Component**:

- Display all prompts in a scrollable list

- Checkbox for each prompt to enable selection

- Integrate DND Kit for drag-and-drop reordering

- Use Chakra UI components (Box, VStack, Checkbox)

2. **PromptEditor Component**:

- Form with textarea for prompt content

- Input for comma-separated tags

- Save/Cancel buttons

- Use Chakra UI (Modal, Input, Textarea, Button)

3. **MasterPrompt Component**:

- Display combined text of all selected prompts

- Copy to clipboard button with toast notification

- Use Chakra UI (Box, Button, useClipboard, useToast)

**State Management**:

**API Integration**:

**UI Guidelines**:

Backend Implementation

**Database Schema** (SQLite):

```sql

CREATE TABLE prompts (

id INTEGER PRIMARY KEY AUTOINCREMENT,

content TEXT NOT NULL,

tags TEXT, -- comma-separated string

created_at DATETIME DEFAULT CURRENT_TIMESTAMP

);

```

**API Endpoints** (`server/routes/prompts.js`):

1. `POST /prompts` - Create new prompt

- Body: `{ content: string, tags: string }`

- Returns: Created prompt object with `id`

2. `GET /prompts` - Retrieve all prompts

- Returns: Array of prompts ordered by `created_at` DESC (newest first)

3. `PUT /prompts/:id` - Update existing prompt

- Body: `{ content: string, tags: string }`

- Returns: Updated prompt object

4. `DELETE /prompts/:id` - Delete prompt

- Returns: Success status

**Implementation Details**:

Project Structure

```

prompt-builder/

├── frontend/

│ ├── public/

│ ├── src/

│ │ ├── components/

│ │ │ ├── PromptList.js

│ │ │ ├── PromptEditor.js

│ │ │ └── MasterPrompt.js

│ │ ├── App.js

│ │ └── index.js

│ ├── .env

│ └── package.json

├── server/

│ ├── routes/

│ │ └── prompts.js

│ ├── db.js

│ ├── server.js

│ └── package.json

└── README.md

```

Implementation Steps

1. **Setup**:

- Initialize React app with `create-react-app`

- Initialize Express server with necessary dependencies

- Create SQLite database and `prompts` table

- Configure environment variables

2. **Backend First**:

- Implement database connection in `server/db.js`

- Create API routes for CRUD operations

- Test endpoints with curl or Postman

- Enable CORS middleware

3. **Frontend Core**:

- Install Chakra UI and DND Kit

- Build PromptEditor component with form

- Build PromptList component with checkboxes

- Implement API fetch calls on mount

4. **Selection & Master Prompt**:

- Add checkbox selection state management

- Build MasterPrompt component

- Implement clipboard copy functionality with toast feedback

5. **Drag-and-Drop**:

- Integrate @dnd-kit/sortable for list reordering

- Persist new order to backend (optional for MVP)

6. **Polish**:

- Add loading spinners during API calls

- Implement toast notifications for actions

- Add Framer Motion animations for smooth transitions

Constraints

Testing Strategy

**Manual Testing Priority**:

**Automated Testing (Optional)**:

Example Usage

When implementing this skill:

1. Start by setting up the backend database and API

2. Test endpoints independently before frontend integration

3. Build frontend components incrementally (editor → list → master prompt)

4. Integrate drag-and-drop as final enhancement

5. Use Chakra UI components consistently for cohesive design

6. Leverage AI assistants for boilerplate code and component structure