Prompt Builder App Developer

An expert AI assistant for building and maintaining the Prompt Builder application - a full-stack web app for managing prompts with drag-and-drop functionality, tagging, and master prompt generation.

What This Skill Does

This skill provides comprehensive guidance for developing the Prompt Builder app, a single-page web application that enables users to:

Add, edit, and delete prompts with tags

Select multiple prompts to create a "Master Prompt"

Copy combined prompts to clipboard

Organize prompts with drag-and-drop functionality

Tech Stack

**Frontend:**

React.js (create-react-app)

Chakra UI for components and styling

DND Kit for drag-and-drop

Emotion for styled components

Framer Motion for animations

**Backend:**

Node.js with Express.js

SQLite3 database

CORS middleware

Nodemon for development

**Testing:**

Jest & React Testing Library (frontend)

Jest & Supertest (backend)

Cypress (end-to-end)

Instructions

1. Environment Configuration

When setting up or modifying environment variables:

Frontend: Always use `REACT_APP_` prefix (e.g., `REACT_APP_API_URL`)

Backend: Store database paths and configuration in `.env`

Never hardcode sensitive values like API URLs

Always use `.env` files for configuration

2. Frontend Development

**Component Structure:**

Use Chakra UI components as the primary UI framework

Implement drag-and-drop using @dnd-kit libraries

Use Emotion/styled-components only for custom styling needs

Organize components in `src/components/`:

- `PromptList`: Display prompts with checkboxes for selection

- `PromptEditor`: Form for adding/editing prompts (text and tags)

- `MasterPrompt`: Combined view of selected prompts with copy button

**State Management:**

Use `useState` for component-level state (e.g., selected prompts)

Use `useEffect` to fetch prompts on component mount

Optionally use Context API for sharing prompts data across components

**API Integration:**

Use `fetch` API for backend communication

Handle basic loading states

Skip extensive error handling for MVP; focus on core functionality

**UI/UX:**

Leverage Chakra UI's responsive layout components

Add animations with Framer Motion where appropriate

Use `@chakra-ui/toast` for user feedback notifications

3. Backend Development

**Database Schema:**

Create SQLite database with `prompts` table:

`id`: Integer (auto-incrementing primary key)

`content`: Text (prompt text)

`tags`: Text (comma-separated, e.g., "coding, AI")

`created_at`: Timestamp (default to current time)

**API Endpoints:**

Implement RESTful endpoints in `server/routes/prompts.js`:

`POST /prompts` - Create new prompt

`GET /prompts` - Retrieve all prompts (ordered by `created_at`, newest first)

`PUT /prompts/:id` - Update prompt by ID

`DELETE /prompts/:id` - Delete prompt by ID

**Implementation Guidelines:**

Use Express.js for routing

Use `sqlite3` or `better-sqlite3` for database operations

Enable CORS middleware for cross-origin requests

Keep error handling simple (basic status codes and messages)

Structure backend code:

- `server/server.js` - Server setup

- `server/routes/prompts.js` - API routes

- `server/db.js` - Database connection and queries

4. Development Workflow

**General Principles:**

Leverage AI coding assistants (GitHub Copilot, Cursor) to accelerate development

Focus on core functionality first; defer non-essential features

Perform manual testing; automated tests are optional for MVP

Use JavaScript for speed; TypeScript is optional

**Project Structure:**

```

prompt-builder/

├── src/

│ ├── components/

│ │ ├── PromptList.js

│ │ ├── PromptEditor.js

│ │ └── MasterPrompt.js

│ └── App.js

├── server/

│ ├── routes/

│ │ └── prompts.js

│ ├── db.js

│ └── server.js

├── .env

└── package.json

```

5. Testing Approach

**For MVP:**

Prioritize manual testing

Automated tests are optional initially

**When implementing tests:**

Frontend: Jest + React Testing Library

Backend: Jest + Supertest

Integration: Cypress for end-to-end flows

6. Deployment Considerations

**Current Status:**

App is for personal use only

No deployment configuration required initially

**Note on SQLite:**

SQLite data resets on some platform restarts (e.g., Heroku dynos)

Accept this limitation for MVP or migrate to hosted database for persistence

Key Features to Implement

1. **Prompt Management**

- CRUD operations for prompts

- Tag-based organization

- Timestamp tracking

2. **Selection System**

- Multi-select prompts with checkboxes

- Visual feedback for selected items

3. **Master Prompt Generation**

- Combine selected prompt contents

- Copy to clipboard functionality

- Clear visual presentation

4. **Drag-and-Drop**

- Reorder prompts within the list

- Smooth animations and transitions

5. **Responsive Design**

- Mobile-friendly layout

- Accessible keyboard navigation

Constraints

Focus on MVP functionality first

Defer features like tag filtering and dark mode

Keep error handling simple and functional

Prioritize speed of development over perfect architecture

Database persistence limitations are acceptable for personal use

Example Usage

When asked to add a new feature:

1. Identify if it's frontend (UI/component) or backend (API/database)

2. Check if it requires new dependencies or uses existing tech stack

3. Consider impact on existing components and state management

4. Implement using appropriate Chakra UI components and patterns

5. Ensure API endpoints follow RESTful conventions

6. Test manually before marking complete

When debugging issues:

1. Check browser console for frontend errors

2. Verify API endpoint responses in network tab

3. Check SQLite database state if data-related

4. Confirm environment variables are properly set

5. Validate CORS configuration if cross-origin issues occur

Prompt Builder App Developer

Prompt Builder App Developer

What This Skill Does

Tech Stack

Instructions

1. Environment Configuration

2. Frontend Development

3. Backend Development

4. Development Workflow

5. Testing Approach

6. Deployment Considerations

Key Features to Implement

Constraints

Example Usage

Reviews (0)