Skip to main content
Prompts HTML/CSS/JS Code Snippet Manager Builder

developer coding user risk: low

HTML/CSS/JS Code Snippet Manager Builder

Build a developer-focused code snippet manager using HTML5, CSS3, and JavaScript with an IDE-like interface, syntax highlighting for 30+ languages, tagging, regex search, editing f…

PROMPT 

Build a developer-focused code snippet manager using HTML5, CSS3, and JavaScript. Create a clean IDE-like interface with syntax highlighting for 30+ programming languages. Implement a tagging and categorization system for organizing snippets. Add a powerful search function with support for regex and filtering by language/tags. Include code editing with line numbers, indentation guides, and bracket matching. Support public/private visibility settings for each snippet. Implement export/import functionality in JSON and Gist formats. Add keyboard shortcuts for common operations. Create a responsive design that works well on all devices. Include automatic saving with version history. Add copy-to-clipboard functionality with syntax formatting preservation.

EXPECTED OUTPUT

Format
html
Constraints
  • using only HTML5 CSS3 JavaScript
  • complete functional app
  • responsive design

SUCCESS CRITERIA

  • Build a developer-focused code snippet manager using HTML5, CSS3, and JavaScript.
  • Create a clean IDE-like interface with syntax highlighting for 30+ programming languages.
  • Implement a tagging and categorization system for organizing snippets.
  • Add a powerful search function with support for regex and filtering by language/tags.
  • Include code editing with line numbers, indentation guides, and bracket matching.
  • Support public/private visibility settings for each snippet.
  • Implement export/import functionality in JSON and Gist formats.
  • Add keyboard shortcuts for common operations.
  • Create a responsive design that works well on all devices.
  • Include automatic saving with version history.
  • Add copy-to-clipboard functionality with syntax formatting preservation.

FAILURE MODES

  • Scope too ambitious for vanilla HTML/CSS/JS leading to incomplete implementation.
  • Syntax highlighting for 30+ languages difficult without external libraries.
  • Persistence via localStorage or IndexedDB not specified, risking data loss.
  • Gist format integration may require API calls not feasible client-side.
  • Version history implementation complex without backend.

CAVEATS

Missing context
  • Desired output format (e.g., single HTML file or separate files).
  • Allowed external libraries (e.g., for syntax highlighting like Prism.js).
  • Data persistence method (e.g., localStorage, IndexedDB).
  • List of required keyboard shortcuts.
Ambiguities
  • Does not specify which 30+ programming languages to support.
  • Unclear how public/private visibility functions in a standalone web app.
  • No details on version history depth or storage mechanism.

QUALITY

OVERALL
0.70
CLARITY
0.90
SPECIFICITY
0.70
REUSABILITY
0.30
COMPLETENESS
0.60

IMPROVEMENT SUGGESTIONS

  • Specify output as a single self-contained HTML file for easy deployment.
  • Add 'Use only vanilla HTML/CSS/JS; no external libraries' or list allowed ones.
  • Break into phased tasks: e.g., first UI skeleton, then features.
  • Include wireframe sketch or UI mockup description.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR DEVELOPER