Build a React+Express prompt management app with drag-and-drop, tags, and master prompt generation using Chakra UI and SQLite
Build a single-page web application for managing AI prompts with tagging, selection, and master prompt generation capabilities.
Prompt Builder is a full-stack web app that allows users to:
**Frontend:**
**Backend:**
**Integration Testing:**
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
**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**:
**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**:
```
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
```
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
**Manual Testing Priority**:
**Automated Testing (Optional)**:
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
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/prompt-builder-development/raw