{"id":34724441,"url":"https://github.com/risadams/prompt-monster","last_synced_at":"2026-05-27T04:01:39.479Z","repository":{"id":305237300,"uuid":"1022047871","full_name":"risadams/prompt-monster","owner":"risadams","description":"Create monstrously good prompts for AI applications with our fun and intuitive prompt builder.","archived":false,"fork":false,"pushed_at":"2025-11-18T10:44:25.000Z","size":1311,"stargazers_count":1,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-11-23T23:33:52.517Z","etag":null,"topics":["ai","hackathon","prompt-engineering","prompt-toolkit","utility"],"latest_commit_sha":null,"homepage":"https://risadams.github.io/prompt-monster/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/risadams.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-18T11:13:17.000Z","updated_at":"2025-08-11T13:08:39.000Z","dependencies_parsed_at":"2025-07-19T03:21:29.160Z","dependency_job_id":null,"html_url":"https://github.com/risadams/prompt-monster","commit_stats":null,"previous_names":["risadams/prompt-generator","risadams/prompt-monster"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/risadams/prompt-monster","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/risadams%2Fprompt-monster","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/risadams%2Fprompt-monster/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/risadams%2Fprompt-monster/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/risadams%2Fprompt-monster/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/risadams","download_url":"https://codeload.github.com/risadams/prompt-monster/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/risadams%2Fprompt-monster/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28017200,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-25T02:00:05.988Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai","hackathon","prompt-engineering","prompt-toolkit","utility"],"created_at":"2025-12-25T02:19:15.049Z","updated_at":"2025-12-25T02:19:16.106Z","avatar_url":"https://github.com/risadams.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 👹 Prompt Monster\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\r\n![Prompt Monster Logo](public/logo.svg)\r\n\r\n**Unleash your creativity with monstrously good prompts!**\r\n\r\n[![React](https://img.shields.io/badge/React-19.1.0-61dafb?style=flat-square\u0026logo=react)](https://reactjs.org/)\r\n[![Accessibility](https://img.shields.io/badge/WCAG-2.1%20AA-green?style=flat-square)](https://www.w3.org/WAI/WCAG21/quickref/)\r\n[![Responsive](https://img.shields.io/badge/Design-Responsive-blue?style=flat-square)](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)\r\n[![License](https://img.shields.io/badge/License-MIT-yellow?style=flat-square)](LICENSE)\r\n\r\n[Live Demo](https://risadams.github.io/prompt-monster) • [Features](#features) • [Getting Started](#getting-started) • [Documentation](#documentation)\r\n\r\n\u003c/div\u003e\r\n\r\n---\r\n\r\n## 🎭 About Prompt Monster\r\n\r\nPrompt Monster is a fun, approachable, and powerful tool for crafting effective prompts for GPT and AI applications. Our intuitive prompt builder combines playful monster imagery with professional functionality, making prompt engineering feel like a creative adventure!\r\n\r\n### 🌟 Why Prompt Monster?\r\n\r\n- **🎨 Beautiful Design**: Modern, brand-aligned interface with vibrant colors and smooth animations\r\n- **📱 Fully Responsive**: Works seamlessly on mobile, tablet, and desktop devices\r\n- **♿ Accessible**: WCAG 2.1 AA compliant with full keyboard navigation and screen reader support\r\n- **🚀 Fast \u0026 Modern**: Built with React 19 and optimized for performance\r\n- **🎯 User-Friendly**: Intuitive interface that makes prompt creation effortless\r\n\r\n---\r\n\r\n## ✨ Features\r\n\r\n### 🔧 Prompt Building\r\n\r\n- **Role-Based Prompts**: Choose from predefined roles or create custom ones\r\n- **Structured Framework**: Task → Goal → Context → Details structure for effective prompts\r\n- **Real-Time Preview**: See your prompt generate as you type\r\n- **One-Click Copy**: Copy generated prompts to clipboard instantly\r\n\r\n### 📚 Template System\r\n\r\n- **Curated Templates**: Pre-built templates for common use cases\r\n- **Smart Search**: Find templates by name, role, or task\r\n- **Quick Application**: Apply template values with a single click\r\n- **Extensible**: Easy to add new templates\r\n\r\n### 🎨 Design \u0026 UX\r\n\r\n- **Monster Branding**: Playful monster mascot with floating animation\r\n- **Gradient Backgrounds**: Beautiful color transitions throughout the interface\r\n- **Smooth Interactions**: Hover effects, loading states, and micro-animations\r\n- **Visual Feedback**: Clear success states and error handling\r\n\r\n### ♿ Accessibility Features\r\n\r\n- **Keyboard Navigation**: Full keyboard support with skip links\r\n- **Screen Reader Support**: Proper ARIA labels and semantic HTML\r\n- **High Contrast Mode**: Enhanced visibility for users with visual impairments\r\n- **Focus Management**: Clear focus indicators and logical tab order\r\n- **Reduced Motion**: Respects user's motion preferences\r\n\r\n### 📱 Responsive Design\r\n\r\n- **Mobile-First**: Optimized for touch devices with appropriate target sizes\r\n- **Flexible Layouts**: CSS Grid-based responsive design\r\n- **Breakpoint System**: Tailored experiences for mobile, tablet, and desktop\r\n- **Performance Optimized**: Fast loading on all devices\r\n\r\n---\r\n\r\n## 🚀 Getting Started\r\n\r\n### Prerequisites\r\n\r\n- **Node.js** (version 14 or higher)\r\n- **npm** (version 6 or higher)\r\n\r\n### Installation\r\n\r\n1. **Clone the repository**\r\n\r\n   ```bash\r\n   git clone https://github.com/risadams/prompt-monster.git\r\n   cd prompt-monster\r\n   ```\r\n\r\n2. **Install dependencies**\r\n\r\n   ```bash\r\n   npm install\r\n   ```\r\n\r\n3. **Start the development server**\r\n\r\n   ```bash\r\n   npm start\r\n   ```\r\n\r\n4. **Open your browser**\r\n\r\n   ```text\r\n   http://localhost:3000\r\n   ```\r\n\r\nThe app will automatically reload when you make changes to the source code.\r\n\r\n### Building for Production\r\n\r\n```bash\r\nnpm run build\r\n```\r\n\r\nThis creates an optimized production build in the `build` folder, ready for deployment.\r\n\r\n---\r\n\r\n## 🎯 Usage Guide\r\n\r\n### Creating Your First Prompt\r\n\r\n1. **Select a Role**: Choose from predefined roles (Product Owner, Developer, etc.) or select \"Other\" for custom roles\r\n2. **Define the Task**: Describe what you want the AI to do\r\n3. **Set Your Goal**: Explain what you want to achieve\r\n4. **Add Context** (Optional): Provide background information\r\n5. **Specify Details** (Optional): Add requirements, constraints, or formatting instructions\r\n6. **Copy \u0026 Use**: Click \"Copy to Clipboard\" and paste into your AI application\r\n\r\n### Using Templates\r\n\r\n1. **Browse Templates**: Use the template library on the left sidebar\r\n2. **Search**: Type keywords to find relevant templates\r\n3. **Apply Template**: Click \"Use Template\" to populate the form with template values\r\n4. **Customize**: Modify the applied template to fit your specific needs\r\n\r\n### Example Workflow\r\n\r\n```text\r\nRole: UX Designer\r\nTask: Create a user persona\r\nGoal: Better understand our target audience for a mobile banking app\r\nContext: We're designing for millennials who prefer digital banking\r\nDetails: Include demographics, goals, frustrations, and preferred features\r\n```\r\n\r\n**Generated Prompt:**\r\n\r\n```text\r\nActing as a \"UX Designer\" I want to \"Create a user persona\" so that I can \"Better understand our target audience for a mobile banking app\".\r\n\r\nHere is the context: Role Description: Designs user experiences and interfaces.\r\nWe're designing for millennials who prefer digital banking\r\n\r\nDetails: Include demographics, goals, frustrations, and preferred features\r\n```\r\n\r\n---\r\n\r\n## 🏗️ Project Structure\r\n\r\n```text\r\nprompt-monster/\r\n├── public/                 # Static assets\r\n│   ├── index.html         # HTML template\r\n│   ├── logo.svg           # Monster logo\r\n│   ├── manifest.json      # PWA manifest\r\n│   └── robots.txt         # SEO robots file\r\n├── src/                   # Source code\r\n│   ├── components/        # React components\r\n│   │   └── AppHeader.js   # Header component\r\n│   ├── data/             # Application data\r\n│   │   ├── Role.json     # Role definitions\r\n│   │   └── Templates.json # Prompt templates\r\n│   ├── App.js            # Main application component\r\n│   ├── App.css           # Component styles\r\n│   ├── index.css         # Base styles \u0026 CSS custom properties\r\n│   ├── utils.css         # Utility classes\r\n│   └── index.js          # Application entry point\r\n└── README.md             # This file\r\n```\r\n\r\n---\r\n\r\n## 🎨 Design System\r\n\r\n### Color Palette\r\n\r\n- **Primary Purple**: `#8B5CF6` - Main brand color, primary actions\r\n- **Secondary Blue**: `#6366f1` - Secondary elements, links\r\n- **Accent Green**: `#10b981` - Success states, validation\r\n- **Neutral Grays**: Various shades for text and backgrounds\r\n\r\n### Typography\r\n\r\n- **UI Font**: [Inter](https://fonts.google.com/specimen/Inter) - Modern, readable sans-serif\r\n- **Code Font**: [Fira Code](https://fonts.google.com/specimen/Fira+Code) - Monospace for generated prompts\r\n- **Responsive Scaling**: Fluid typography that adapts to screen size\r\n\r\n### Components\r\n\r\n- **Cards**: Rounded corners with subtle shadows and hover effects\r\n- **Buttons**: Gradient backgrounds with focus states and animations\r\n- **Forms**: Enhanced inputs with validation states and clear labeling\r\n- **Grid**: Responsive CSS Grid layout system\r\n\r\nFor detailed design documentation, see [DESIGN.md](DESIGN.md).\r\n\r\n---\r\n\r\n## 🔧 Development\r\n\r\n### Available Scripts\r\n\r\n| Command | Description |\r\n|---------|-------------|\r\n| `npm start` | Starts development server on \u003chttp://localhost:3000\u003e |\r\n| `npm run build` | Creates production build in `build/` folder |\r\n| `npm test` | Runs test suite (when tests are added) |\r\n| `npm run eject` | Ejects from Create React App (irreversible) |\r\n\r\n### Adding New Templates\r\n\r\n1. Edit `src/data/Templates.json`\r\n2. Add a new template object with required fields:\r\n\r\n   ```json\r\n   {\r\n     \"id\": \"unique-id\",\r\n     \"name\": \"Template Name\",\r\n     \"role\": \"Role Name\",\r\n     \"task\": \"Task description\",\r\n     \"goal\": \"Goal description\",\r\n     \"context\": \"Optional context\",\r\n     \"details\": \"Optional details\"\r\n   }\r\n   ```\r\n\r\n### Adding New Roles\r\n\r\n1. Edit `src/data/Role.json`\r\n2. Add a new role object:\r\n\r\n   ```json\r\n   {\r\n     \"id\": \"ROLE_ID\",\r\n     \"name\": \"Role Name\",\r\n     \"description\": \"Role description for context\"\r\n   }\r\n   ```\r\n\r\n### Customizing Styles\r\n\r\nThe application uses CSS custom properties for consistent theming:\r\n\r\n```css\r\n:root {\r\n  --monster-purple: #8B5CF6;\r\n  --monster-blue: #6366f1;\r\n  --monster-green: #10b981;\r\n  /* Modify these values to customize the theme */\r\n}\r\n```\r\n\r\n---\r\n\r\n## ♿ Accessibility\r\n\r\nPrompt Monster is built with accessibility as a core principle:\r\n\r\n### WCAG 2.1 AA Compliance\r\n\r\n- ✅ Color contrast ratios meet standards\r\n- ✅ All interactive elements are keyboard accessible\r\n- ✅ Screen readers can access all content\r\n- ✅ Focus indicators are clearly visible\r\n- ✅ Error messages are descriptive and helpful\r\n\r\n### Testing Tools\r\n\r\n- [WAVE Web Accessibility Evaluator](https://wave.webaim.org/)\r\n- [axe DevTools](https://www.deque.com/axe/devtools/)\r\n- [Lighthouse Accessibility Audit](https://developers.google.com/web/tools/lighthouse)\r\n\r\n---\r\n\r\n## 📱 Browser Support\r\n\r\nPrompt Monster supports all modern browsers:\r\n\r\n- ✅ Chrome 88+\r\n- ✅ Firefox 85+\r\n- ✅ Safari 14+\r\n- ✅ Edge 88+\r\n\r\n### Progressive Enhancement\r\n\r\n- **JavaScript Required**: Core functionality requires JavaScript\r\n- **Graceful Degradation**: Informative fallback for disabled JavaScript\r\n- **Print Support**: Optimized styles for printing prompts\r\n\r\n---\r\n\r\n## 🚀 Deployment\r\n\r\n### Recommended Platforms\r\n\r\n- **[Vercel](https://vercel.com/)**: Zero-config deployment for React apps\r\n- **[Netlify](https://netlify.com/)**: Continuous deployment from Git\r\n- **[GitHub Pages](https://pages.github.com/)**: Free hosting for public repositories\r\n- **[Firebase Hosting](https://firebase.google.com/docs/hosting)**: Google's hosting platform\r\n\r\n### Quick Deploy to Vercel\r\n\r\n1. Install Vercel CLI: `npm i -g vercel`\r\n2. Run `vercel` in the project directory\r\n3. Follow the prompts to deploy\r\n\r\n### Environment Variables\r\n\r\nNo environment variables are required for basic functionality.\r\n\r\n---\r\n\r\n## 🤝 Contributing\r\n\r\nWe welcome contributions! Here's how you can help:\r\n\r\n### Getting Started\r\n\r\n1. Fork the repository\r\n2. Create a feature branch: `git checkout -b feature/amazing-feature`\r\n3. Make your changes\r\n4. Test thoroughly (including accessibility)\r\n5. Commit your changes: `git commit -m 'Add amazing feature'`\r\n6. Push to the branch: `git push origin feature/amazing-feature`\r\n7. Open a Pull Request\r\n\r\n### Contribution Guidelines\r\n\r\n- Follow the existing code style\r\n- Ensure accessibility standards are maintained\r\n- Test on multiple devices and browsers\r\n- Update documentation as needed\r\n- Add appropriate comments for complex logic\r\n\r\n### Areas for Contribution\r\n\r\n- 🎨 New prompt templates\r\n- 🔧 Feature enhancements\r\n- 🐛 Bug fixes\r\n- 📚 Documentation improvements\r\n- ♿ Accessibility improvements\r\n- 🌐 Internationalization (i18n)\r\n\r\n---\r\n\r\n## 📄 License\r\n\r\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\r\n\r\n---\r\n\r\n## 🙏 Acknowledgments\r\n\r\n- **Create React App**: For the solid foundation\r\n- **Inter \u0026 Fira Code**: For beautiful typography\r\n- **React Community**: For excellent documentation and tools\r\n- **Accessibility Community**: For comprehensive guidelines and tools\r\n\r\n---\r\n\r\n## 📞 Support\r\n\r\n- **Issues**: [GitHub Issues](https://github.com/risadams/prompt-monster/issues)\r\n- **Discussions**: [GitHub Discussions](https://github.com/risadams/prompt-monster/discussions)\r\n- **Author**: [Ris Adams](https://risadams.com)\r\n\r\n---\r\n\r\n\u003cdiv align=\"center\"\u003e\r\n\r\n**Made with 💜 for the AI community**\r\n\r\n*Prompt Monster - Where prompt engineering meets creativity!* 🎭\r\n\r\n[⬆ Back to Top](#-prompt-monster)\r\n\r\n\u003c/div\u003e\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frisadams%2Fprompt-monster","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frisadams%2Fprompt-monster","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frisadams%2Fprompt-monster/lists"}