Coding
Build Markdown Notes App
Build Markdown Notes App turns technical context into clear code, diagnosis, or implementation guidance with clear constraints and an explicit output.
The prompt
Build Markdown Notes App guides the model through a defined task while preserving the source prompt's useful structure and constraints. It specifically covers Task, Context. Use it when planning, writing, reviewing, or debugging software and you want a response that is easier to evaluate and act on.
text prompt
## Role
You are an expert full-stack web developer and UI/UX architect building production-ready web applications.
## Task
Create a comprehensive implementation guide for a professional-grade markdown notes application that runs entirely in the browser without backend dependencies. This is a complete knowledge management system competing with Obsidian and Notion, featuring real-time rendering, persistent storage, advanced organization, and export capabilities.
## Context
The application must handle complex markdown syntax (tables, code blocks, mathematical equations) while maintaining performance. Users expect desktop-application quality with intuitive workflows, keyboard-driven efficiency, and zero data loss. Balance feature richness with clean, maintainable code architecture.
**Technical specifications:**
- Stack: HTML5, CSS3, vanilla JavaScript with modular ES6 modules and clear separation of concerns
- Target: Modern evergreen browsers (Chrome, Firefox, Safari, Edge) on desktop and tablet
- Delivery: Single-developer build shipped incrementally in working milestones
- User proficiency: {{javascriptSkillLevel}}
- Design aesthetic: {{designStyle}}
## Output
Structure your implementation guide with these sections, providing complete code examples and clear implementation instructions for each:
1. **Application Architecture and File Structure** — overall project organization and module dependencies
2. **HTML5 Semantic Structure with Split-Screen Layout** — document structure and responsive layout foundation
3. **CSS3 Styling System** — dark/light themes, responsive design, syntax highlighting
4. **Core JavaScript Modules** — editor controller, preview renderer, storage manager
5. **Markdown Parser Integration** — extended syntax support for tables, code blocks, math equations
6. **Hierarchical Organization System** — categories, tags, favorites, navigation
7. **Search and Filtering Engine** — content indexing and query implementation
8. **Export Functionality** — PDF, HTML, and markdown file generation
9. **Keyboard Shortcuts and Productivity Features** — efficiency improvements and shortcuts
10. **Auto-Save, Version History, and Data Recovery** — persistence and recovery mechanisms
11. **LocalStorage Implementation** — data storage with import/export backup capability
12. **Performance Optimization and Best Practices** — rendering efficiency, memory management, extensibility
For each section, provide working code examples with implementation instructions in bullet points and plain explanations of how components work together.
Tune the prompt, not the plumbing.
Every control comes from this prompt’s content schema. Changes stay in your browser and update instantly.
Customized prompt2578 characters
## Role
You are an expert full-stack web developer and UI/UX architect building production-ready web applications.
## Task
Create a comprehensive implementation guide for a professional-grade markdown notes application that runs entirely in the browser without backend dependencies. This is a complete knowledge management system competing with Obsidian and Notion, featuring real-time rendering, persistent storage, advanced organization, and export capabilities.
## Context
The application must handle complex markdown syntax (tables, code blocks, mathematical equations) while maintaining performance. Users expect desktop-application quality with intuitive workflows, keyboard-driven efficiency, and zero data loss. Balance feature richness with clean, maintainable code architecture.
**Technical specifications:**
- Stack: HTML5, CSS3, vanilla JavaScript with modular ES6 modules and clear separation of concerns
- Target: Modern evergreen browsers (Chrome, Firefox, Safari, Edge) on desktop and tablet
- Delivery: Single-developer build shipped incrementally in working milestones
- User proficiency: intermediate
- Design aesthetic: a specific design style
## Output
Structure your implementation guide with these sections, providing complete code examples and clear implementation instructions for each:
1. **Application Architecture and File Structure** — overall project organization and module dependencies
2. **HTML5 Semantic Structure with Split-Screen Layout** — document structure and responsive layout foundation
3. **CSS3 Styling System** — dark/light themes, responsive design, syntax highlighting
4. **Core JavaScript Modules** — editor controller, preview renderer, storage manager
5. **Markdown Parser Integration** — extended syntax support for tables, code blocks, math equations
6. **Hierarchical Organization System** — categories, tags, favorites, navigation
7. **Search and Filtering Engine** — content indexing and query implementation
8. **Export Functionality** — PDF, HTML, and markdown file generation
9. **Keyboard Shortcuts and Productivity Features** — efficiency improvements and shortcuts
10. **Auto-Save, Version History, and Data Recovery** — persistence and recovery mechanisms
11. **LocalStorage Implementation** — data storage with import/export backup capability
12. **Performance Optimization and Best Practices** — rendering efficiency, memory management, extensibility
For each section, provide working code examples with implementation instructions in bullet points and plain explanations of how components work together.
Useful structure, room to move.
Build Markdown Notes App guides the model through a defined task while preserving the source prompt's useful structure and constraints. It specifically covers Task, Context. Use it when planning, writing, reviewing, or debugging software and you want a response that is easier to evaluate and act on.
The prompt establishes the job first, then supplies concrete decisions a model can act on. The variables preserve that structure while letting you change the subject, context, or output.
Related prompts
Approve Concrete Results Only Gate
Approve Concrete Results Only Gate turns technical context into clear code, diagnosis, or implementation guidance with clear constraints and an explicit output.
ChatGPTClaudeGemini
CI Pipeline Hardening and Test Flake Triage
CI Pipeline Hardening and Test Flake Triage turns technical context into clear code, diagnosis, or implementation guidance with clear constraints and an explicit output.
ChatGPTClaudeGemini
Multi-Service Interface Contract Alignment
Multi-Service Interface Contract Alignment turns technical context into clear code, diagnosis, or implementation guidance with clear constraints and an explicit output.
ChatGPTClaudeGemini
Build Chat Applications With WebSockets and Vanilla JS
Build Chat Applications With WebSockets and Vanilla JS turns technical context into clear code, diagnosis, or implementation guidance with clear constraints and an explicit output.
ChatGPTClaudeGemini